Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (43 sloc) 4.02 KB

CT: A JavaScript RPG Engine

CT is a game engine, written in JavaScript, for creating SNES-style RPG games in a browser. It uses HTML5 canvas to draw all elements of the game, including text, graphics, and menus.


Clone the repo, and run, in a browser, tests/rpg.html. It works best in Chrome, but Firefox does reasonably well, aside from a noticeable framerate decline during garbage collection.

Controls are arrow keys to move around, SHIFT to run, SPACE to activate, and CTRL to pause. Try activating near the light post and bucket. You should see a menu appear. Also try traveling to the room to the north.

There is a known bug where, on the first load, the menu/text may not show upon being called. This is most likely due to the assets not being loaded properly. If this happens, just hit "refresh" in your browser, and it should work.


CT was created in an attempt to make a RPG engine completely in JavaScript. After seeing the Sphere RPG engine, and its use of JavaScript for creation, I thought... Why not make the engine itself in JavaScript? And why not base the initial mechanics of the engine on one of the greatest RPGs ever made: Chrono Trigger? This also allows for the possibility of mobile versions of a game to be created relatively easily.

Unlike most sprite-based engines, CT does not require the creator to employ tilesheets in the traditional sense (but that doesn't prevent the use of them!). Since space is not a concern these days, it stores the maps and character animation sheets in full view, as sequences. This allows for the bounds of a maps to exist as points representing walkable areas. The bounds can be generated by creating a working path in Photoshop, then employing a script I wrote (maps/PathToJSON.jsx) to output the working path as a series of JSON-encoded points, ready for CT. Look at images/maps/flatpsd/eot_layered.psd for an example of how this works.

It is also event-driven, similar to how events work in RPG Maker 2003/XP, where points on the map are defined, and then trigger specific pieces of code given certain actions. For example, the trigger could just be proximity (i.e. a door), or it could require user interaction (talking to an NPC). There is also support for flags/switches, where certain events cannot occur until a previous condition is fulfilled.

CT implements a display list that bears similarities to Adobe Flash. Similarly, any object that is to be displayed on the screen is called a Sprite. This is different than a sprite (lower-case s), which in general refers to an image. A Sprite can either be Simple or Complex. A SimpleSprite or ComplexSprite can have any number of Simple or Complex children, but only a ComplexSprite can have self-animation. In Flash, it's the same as the difference between a MovieClip and a Sprite.

There are not any external libraries incorporated into CT.


  • Asset Loader
  • Pixel-based text engine, with support for multiple panes of text and EMOTICONS :)!
  • HTML5 canvas rendering, with a display list, allowing for advanced layering, as well as for children to have children themselves
  • Point-in-polygon-based collision detection
  • 8-way map scrolling
  • Animation speed on a per-frame level
  • Arcade-style input-polling, allowing for isDown(), isUp(), and last()


The engine is currently unfinished, and needs some definite rewriting to be viable.

Implemented But Buggy

  • Movement involving glancing off walls
  • Moving between maps (doorways)
  • Complex layers (i.e. player character between two layers of one child sprite)

Not Started

  • Battle Engine
  • Complex Menu System
  • NPC/Environment AI
  • Dynamic changes to a map
  • Scripted movement (i.e. cutscenes)
  • Sound


The text engine (MonoText) is currently disconnected from the AssetLoader, resulting in the assets needed for MonoText (the image making up the font, and the "panel" image) to not be properly loaded 100% of the time. This is fixed by refreshing the test page.