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.
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
ReplyDeleteWell written! You have covered many points. Please keep it up and keep us updated with the latest information. Thanks a lot!
ReplyDeleteby cloudi5
web design company in tirupur