Phaser: The game loop

This post is part of a Phaser series. Click here to see the first post of the series.

In Phaser in addition to the preload() and create() scenes, we also have a third scene, called update().

Here is where everything happens.

preload() and create() are run just once.

update() is going to be called forever. It’s a never ending loop, that is repeatedly called until our game ends.

In this example, we create a text that slowly moves to the bottom right of the canvas:

let text

function create() {
  text = this.add.text(100, 100, 'test')
}

function update() {
  text.x += 1
  text.y += 1
}

const game = new Phaser.Game({
  width: 400,
  height: 400,
  scene: {
    create,
    update
  }
})

Note how I added let text at the top, so we can reference it inside both create() and update().

In update() I modified the x and y properties. You can modify other properties, for example you can modify angle to rotate an object:

function update() {
  text.angle += 2
}

You can make an object start with a specific velocity.

Call setVelocity() and pass a number for the X axis, and another optional for the Y axis:

text.setVelocity(20, 20)

Or use setVelocityX() and setVelocityY() to only set one of the 2 axis.


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

This post is part of a Phaser series. Click here to see the first post of the series.

In Phaser in addition to the preload() and create() scenes, we also have a third scene, called update().

Here is where everything happens.

preload() and create() are run just once.

update() is going to be called forever. It’s a never ending loop, that is repeatedly called until our game ends.

In this example, we create a text that slowly moves to the bottom right of the canvas:

let text

function create() {
  text = this.add.text(100, 100, 'test')
}

function update() {
  text.x += 1
  text.y += 1
}

const game = new Phaser.Game({
  width: 400,
  height: 400,
  scene: {
    create,
    update
  }
})

Note how I added let text at the top, so we can reference it inside both create() and update().

In update() I modified the x and y properties. You can modify other properties, for example you can modify angle to rotate an object:

function update() {
  text.angle += 2
}

You can make an object start with a specific velocity.

Call setVelocity() and pass a number for the X axis, and another optional for the Y axis:

text.setVelocity(20, 20)

Or use setVelocityX() and setVelocityY() to only set one of the 2 axis.


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-04-18T05:00:00+00:00) Phaser: The game loop. Retrieved from https://www.scien.cx/2021/04/18/phaser-the-game-loop/

MLA
" » Phaser: The game loop." flaviocopes.com | Sciencx - Sunday April 18, 2021, https://www.scien.cx/2021/04/18/phaser-the-game-loop/
HARVARD
flaviocopes.com | Sciencx Sunday April 18, 2021 » Phaser: The game loop., viewed ,<https://www.scien.cx/2021/04/18/phaser-the-game-loop/>
VANCOUVER
flaviocopes.com | Sciencx - » Phaser: The game loop. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/18/phaser-the-game-loop/
CHICAGO
" » Phaser: The game loop." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/04/18/phaser-the-game-loop/
IEEE
" » Phaser: The game loop." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/04/18/phaser-the-game-loop/. [Accessed: ]
rf:citation
» Phaser: The game loop | flaviocopes.com | Sciencx | https://www.scien.cx/2021/04/18/phaser-the-game-loop/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.