Low level Coffeescript + canvas + HTML5 cross-platform 2D game engine
npm install cgame
|1||downloads in the last week|
|2||downloads in the last month|
|Version||0.1.0 last updated 6 months ago|
Low level Coffeescript + Canvas + HTML5 cross-platform 2D game engine.
What is CGame?
CGame is a low-level interactive framework that is intended to make 2D HTML5 games for Web, iOS, and Android.
The engine is built from the ground up with CocconJS in mind for deployment to mobile devices that can leverage hardware-accelerated 2D graphics.
In other words, write HTML5 games that work on the web, but can be deployed as native mobile apps with no code changes.
The constructs used in CGame are fairly low-level and unopinionated, primarily aimed at reducing boilerplate and providing a clean, high-performance framework on which to develop games.
CGame is a Coffeescript library that can be installed via NPM, and designed to be built with Grunt (and thus requires both the grunt-cli and npm binaries on your system)
npm install cgame grunt build:demo
Will output the web- and CocoonJS-ready compiled demo.
The central app, instantiated once at app start. Handles event delegation and state management.
- Creates the primary screen canvas
- Maintains the stack of
- Delegates touch events to the active
- Runs the primary render loop that builds each frame from the active
A controller representing a particular game state, used in the FSM handled by
Game. A state would be something like
UserNameInput. Only the current state will recieve the delegated touch
events and is responsible for either
stop()ing itself or pushing a new state.
onStop() are called during state transitions
that can be used for setup and tear-down.
- Handles touch events
- Maintains and manipulates game models and objects
- Contains a layer stack that is drawn by the
The majority of the heavy lifting should be done in game
States. The more modular and
granular the states, the better.
The render pipeline successively renders layers in-order. Each layer has a
compositeMode property that determines how it is drawn onto the scene.
Advanced effects can be achieved by overriding the
render() method to e.g.
have a buffered canvas that is cached and blitted to the screen in one pass.
This approach can be expensive though.