Sunday, April 12, 2015

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

  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

Things change once we get to create.

  create: =>

    game = @game

    @stars =
    @platforms =
    @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:

    @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)

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.physics.enable(sprite, PHYSICS_TO_USE)

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

You can get all the code needed for this demo at

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


  1. Thank you for sharing how to create the Phaser game. Very good, the quality is not inferior to the latest 2020 Monster Legends APK Mod 9.4.1

  2. Well written! You have covered many points. Please keep it up and keep us updated with the latest information. Thanks a lot!
    by cloudi5
    web design company in tirupur

  3. Strength, simplicity, and a wide range of customization options... Action Phaser can be summarized in these words. We wanted to create a phaser that is simple to use while retaining the strength of both classic analogue and modern digital capabilities.

  4. Thank you for sharing, useful information. Download mod apk mới nhất at APKTodo

  5. Amazing Blog! I have go through all the content of this blog.This is really helpful and informative for me.If you are looking to buy an online 10,000 word dissertation structure service turnout to Dissertation Writing Help Company.

  6. I often use them they are the best apps I have ever seen at I have seen them they are great tools. Best writing tool