# 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](http://www.ludei.com/tech/cocoonjs) 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 `State`s
* Delegates touch events to the active `State`
* Runs the primary render loop that builds each frame from the active `State`s
  `Layer`s

### 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 `State`s. 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.