CGame

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.

Getting started

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.

Engine Components

Game

The central app, instantiated once at app start. Handles event delegation and state management.

• Creates the primary screen canvas
• Maintains the stack of States
• Delegates touch events to the active State
• Runs the primary render loop that builds each frame from the active States Layers

State

A controller representing a particular game state, used in the FSM handled by the Game. A state would be something like TitleScreen or PauseMenu, or even UserNameInput. Only the current state will recieve the delegated touch events and is responsible for either stop()ing itself or pushing a new state.

onStart(), onPause(), and 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 Game

The majority of the heavy lifting should be done in game States. The more modular and granular the states, the better.

Layer

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.