~ OMG, Mario! ~

A Processing(.js) sprite based 2D game engine demonstrator... with Mario.

Current Mario coordinates: / - [game view] - [design view] - [toggle Statistics]

Game engine features

  • Designed for 2D sprite based games
  • Physics-based movement
  • Persistence-based key input rather than tracking keydown and keyup events.
  • Regular and tiling sprites (demo: tiled background, ground)
  • Multiple layers (demo: background, actor layer, foreground)
  • Viewbox-based drawing
  • Visual decals (demo: points when hitting enemies)
  • State based actors (demo: mario constantly changes states)
  • State transition events (demo: ghost block)
  • Unidirectionally passable boundaries
  • Actors-with-boundaries (demo: ghost block, passthrough blocks)
  • Different levels of interaction (demo: players interact with everything, NPCs don't with NPCs or pickups, ghost is not hindered by boundaries, etc)
  • Moving "on rails" (demo: flying koopas)
  • Interaction triggers (demo: mushrooms, blocks, finish line)
  • Event trigger regions (demo: type "7" to see them in-game)
  • Actor tracking (demo: ghost coin block)
  • Persistent and expiring objects (demo: mushrooms expire if they go too far off-screen, Koopas do not)
  • Support for mp3 and ogg audio (demo: press in the upper-right corner!)
  • Supported in all HTML5 browsers, including IE9!

Mario controls: cursor keys, and [z] and [x] for the jump/spin jump (left click to spawn Koopa troopers, right click to drop mushrooms!)

debug controls: [1] toggles background, [2] toggles boundaries, [3] toggles pickups, [4] toggles NPCs, [5] toggles Mario, [6] toggles the foreground, [7] toggle trigger regions, [8] toggles actor bounding boxes.


TODO: loading all of this from a game script, made in a web-based level editor, so that you can build games without having to actually program! That said, you are highly encouraged to look at the non-library source code for this demonstrator!


A work in progress by me, Pomax. You might know me from Processing.js, Font.js, or perhaps even something else (Like my primer on Bezier curves, writeup on the smallest web-legal TTF, or nihongoresources). If you don"t know me: I do things these kind of things. Then I explain them to people. If you wish to reach me, I'm on IRC (irc.mozilla.org and irc.freenode.net amongst others) as Pomax, as well as on twitter, as TheRealPomax, although of course you can also just leave a comment in the comment section!


Leave a comment, I love comments!