Phaser: Adding images

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

You can add images as GameObjects, but you need to be aware that to display images when the game starts, in create(), they need to be preloaded in preload(). We assign them an identifier, and then we can add an image with that asset in the create() function:

function preload() {
  this.load.image('apple', 'apple.png')
}

function create() {
  this.add.image(200, 200, 'apple')
}

Note that 200, 200 is the position we’re going to put the image.

It refers to the center of the image.

To make it refer to the top left position, which is easier to reason about, you can call the setOrigin() method on the image:

const image = this.add.image(200, 200, 'apple')
image.setOrigin(0, 0)

Once an image has been created and added, we can perform several operations on it, including scaling it:

image.setScale(2)

flipping it:

image.flipY = true
image.flipX = true

and more.


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.

You can add images as GameObjects, but you need to be aware that to display images when the game starts, in create(), they need to be preloaded in preload(). We assign them an identifier, and then we can add an image with that asset in the create() function:

function preload() {
  this.load.image('apple', 'apple.png')
}

function create() {
  this.add.image(200, 200, 'apple')
}

Note that 200, 200 is the position we’re going to put the image.

It refers to the center of the image.

To make it refer to the top left position, which is easier to reason about, you can call the setOrigin() method on the image:

const image = this.add.image(200, 200, 'apple')
image.setOrigin(0, 0)

Once an image has been created and added, we can perform several operations on it, including scaling it:

image.setScale(2)

flipping it:

image.flipY = true
image.flipX = true

and more.


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-17T05:00:00+00:00) Phaser: Adding images. Retrieved from https://www.scien.cx/2021/04/17/phaser-adding-images/

MLA
" » Phaser: Adding images." flaviocopes.com | Sciencx - Saturday April 17, 2021, https://www.scien.cx/2021/04/17/phaser-adding-images/
HARVARD
flaviocopes.com | Sciencx Saturday April 17, 2021 » Phaser: Adding images., viewed ,<https://www.scien.cx/2021/04/17/phaser-adding-images/>
VANCOUVER
flaviocopes.com | Sciencx - » Phaser: Adding images. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/17/phaser-adding-images/
CHICAGO
" » Phaser: Adding images." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/04/17/phaser-adding-images/
IEEE
" » Phaser: Adding images." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/04/17/phaser-adding-images/. [Accessed: ]
rf:citation
» Phaser: Adding images | flaviocopes.com | Sciencx | https://www.scien.cx/2021/04/17/phaser-adding-images/ |

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.