Using Ash with Phaser

The coffeescript port of Ash now works as a Phaser plugin.  To show you how it works, I've taken the old standby Making your first Phaser game and converted it to use Ash.

We start out pretty much like any phaser game, with one exception - you'll note that I haven't given phaser an update function:

    @game = new Phaser.Game(@width * @scale, @height * @scale, Phaser.CANVAS, '',
      init: @init, preload: @preload, create: @create)

Our init and preload are also no different:

  init: =>
    @game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
    @game.scale.minWidth = @width * @scale
    @game.scale.minHeight = @height * @scale
    @game.scale.maxWidth = @width * @scale
    @game.scale.maxHeight = @height * @scale
    @game.scale.pageAlignVertically = true
    @game.scale.pageAlignHorizontally = true
    return

  preload: =>
    @game.load.image 'sky', 'assets/sky.png'
    @game.load.image 'ground', 'assets/platform.png'
    @game.load.image 'star', 'assets/star.png'
    @game.load.spritesheet 'dude', 'assets/dude.png', 32, 48
    return

Things change once we get to create.

  create: =>

    game = @game

    @stars = game.add.group()
    @platforms = game.add.group()
    @scoreListener = new Phaser.Signal()
    @cursors = game.input.keyboard.createCursorKeys()

    @ash = game.plugins.add(ash.ext.PhaserPlugin, Nodes, Components)

The Ash plugin take 2 parameters: Nodes and Components - these are simply hashed lists. A components are simple classes, for example the Collision component:

Collision: class Collision
    a       : null
    b       : null
    constructor: (@a, @b) ->

While nodes are simply property lists

Nodes = do ->
  CollisionNode: class CollisionNode
    collision : Components.Collision
  CollectorNode: class CollectorNode
    collector : Components.Collector
  PlayerNode: class PlayerNode
    player    : Components.Player

After initializing the ash plugin, we create our entities and start our systems. It's these systems that take the place of the update function:

    @createBackground('sky')
    @createGround('ground')
    @createLedge('ground', 400, 400)
    @createLedge('ground', -150, 250)
    @createStars('star', 70, 0, 12, 10)
    @createPlayer('dude', 150, 350)
    @createScore(16, 16, 'score: 0', fontSize: '32px', fill: '#000')

    @ash.addSystem(new CollisionSystem(this), SYSTEM_RESOLVE_COLLISIONS)
    @ash.addSystem(new PlayerMovementSystem(this), SYSTEM_MOVE)
    @ash.addSystem(new CollectorSystem(this), SYSTEM_UPDATE)
    return

When creating the entity, I use a parallel construction, building the phaser game object alongside the ash entity:

createBackground: (key) ->

    # phaser sprite
    sprite = @game.add.sprite(0, 0, key)
    @game.world.sendToBack(sprite)
    @game.physics.enable(sprite, PHYSICS_TO_USE)

    # ash entity
    sky = new ash.core.Entity('sky').add(sprite)
    @ash.addEntity(sky)
    return

You can get all the code needed for this demo at https://gist.github.com/darkoverlordofdata/eb26c00c6c2bf05da1ba

It's also include as the example program for my phaser game controller plugin.