After reviewing several HTML5 game engines, I've decided to spend some time with
Phaser. My primary consideration has to be gameplay, and after trying a bunch of demos, I felt that Phaser was one of the top contenders. With comparable gameplay, I next looked at the development environment and framework.
Here is why I like Phaser:
- No special workbench is needed. My favorite editor will work, as well as the one I happen to be using.
- Cross platform on the dev side. I use Linux.
- Ecma standard script - not ActionScript or anything else, but real javascript.
- Agnostic oop - I'm not forced into any class patterns.
Best of all, due to those last two points, Phaser is compatible with coffee-script. As my tag cloud tells me, that is my favorite topic, so with a bit of playing around, I ported
this tutorial to coffee-script.
At the moment, there is a workaround patch needed for coffee-script classes to work. This could be fixed in an upcoming release, but for now we need to ensure that the prototype.constructor is set:
Phaser.Game::constructor = Phaser.Game # patch prototype
Phaser.State::constructor = Phaser.State # patch prototype
Update: I just downloaded Phaser 2.0.2, and found that the prototype patch described above was no longer needed.
Now the code - this is just the final listing from the demo:
class Game extends Phaser.Game
constructor: ->
super 800, 600, Phaser.AUTO
@state.add 'Stage', Stage, false
@state.start 'Stage'
class Stage extends Phaser.State
player: null
platforms: null
cursors: null
stars: null
score: 0
scoreText: null
preload: ->
@load.image 'sky', 'assets/sky.png'
@load.image 'ground', 'assets/platform.png'
@load.image 'star', 'assets/star.png'
@load.spritesheet 'dude', 'assets/dude.png', 32, 48
create: ->
# A simple background for our game
@add.sprite 0, 0, 'sky'
# The platforms group contains the ground and the 2 ledges we can jump on
@platforms = @add.group()
# Here we create the ground.
ground = @platforms.create(0, @world.height - 64, 'ground')
# Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo 2, 2
# This stops it from falling away when you jump on it
ground.body.immovable = true
# Now let's create two ledges
ledge = @platforms.create(400, 400, 'ground')
ledge.body.immovable = true
ledge = @platforms.create(-150, 250, 'ground')
ledge.body.immovable = true
# The player and its settings
@player = @add.sprite(32, @world.height - 150, 'dude')
# Player physics properties. Give the little guy a slight bounce.
@player.body.bounce.y = 0.2
@player.body.gravity.y = 6
@player.body.collideWorldBounds = true
# Our two animations, walking left and right.
@player.animations.add 'left', [0, 1, 2, 3], 10, true
@player.animations.add 'right', [5, 6, 7, 8], 10, true
# Finally some stars to collect
@stars = @add.group()
# Here we'll create 12 of them evenly spaced apart
for i in [0...12]
# Create a star inside of the 'stars' group
star = @stars.create(i * 70, 0, 'star')
# Let gravity do its thing
star.body.gravity.y = 6
# This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2
# The score
@scoreText = @add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' })
# Our controls.
@cursors = @input.keyboard.createCursorKeys()
update: ->
# Collide the player and the stars with the platforms
@physics.collide(@player, @platforms)
@physics.collide(@stars, @platforms)
# Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
@physics.overlap(@player, @stars, @collectStar, null, this)
# Reset the players velocity (movement)
@player.body.velocity.x = 0
if (@cursors.left.isDown)
# Move to the left
@player.body.velocity.x = -150
@player.animations.play('left')
else if (@cursors.right.isDown)
# Move to the right
@player.body.velocity.x = 150
@player.animations.play('right')
else
# Stand still
@player.animations.stop()
@player.frame = 4
# Allow the player to jump if they are touching the ground.
if (@cursors.up.isDown and @player.body.touching.down)
@player.body.velocity.y = -350
collectStar: (player, star) ->
# Removes the star from the screen
star.kill()
# Add and update the score
@score += 10
@scoreText.content = 'Score: ' + @score
new Game
Lastly, compile to javascript for use in your html. While you can use coffee-script on the browser side, it impacts load time.
