Add An Image In Phaser

Other topics

Remarks:

  • An Image object is a good choice for things in your game that don't use frame animations and don't otherwise need to be a Sprite.
  • By default the anchor point for an image in the upper left corner, but you can change it like this: image.anchor.setTo(0.5, 0.5);

Create And Add To Screen

You first must create a "Game" object in Phaser.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

In the preload callback function load the image.

function preload() {

    game.load.image('thing', 'assets/thing-image.png');

}
ParameterDetails (Game.add.image)
namethe name used to reference the image in the game.add.image method.
filepath to the asset file (relative to the root directory for the project.

Then in the create function use the "add" method of the game object to create the Image object and it to the screen.

function create() {

  var image = game.add.image(100, 100, 'thing');

}
ParameterDetails (Game.add.image)
xthe x coordinates where the image should be added.
ythe y coordinate where the image should be added.
namethe name of the image assigned in the game.load.image method.

Syntax:

  • game.load.image( name:string, file:string,);
  • game.add.image( x:number, y:number, name:string);

Contributors

Topic Id: 9853

Example Ids: 30320

This site is not affiliated with any of the contributors.