Make Image from Configuration
Demonstrates how to create an image using a configuration object, featuring the use of random range generators (randInt, randFloat), random selection from arrays, and dynamic functions for property values.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bunny', 'assets/sprites/bunny.png');
this.load.image('atari', 'assets/sprites/atari400.png');
this.load.image('logo', 'assets/sprites/phaser2.png');
}
create ()
{
// Implicit values
const config1 = {
key: 'bunny',
x: 400,
y: 300
};
// Implicit values
const config2 = {
key: 'bunny',
x: 400,
y: 300,
flipX: true,
flipY: true
};
// An array means 'pick one element at random'
const config3 = {
key: [ 'bunny', 'atari', 'logo' ],
x: 400,
y: 300
};
// randInt means pick a random integer between the min and max values given
const config4 = {
key: 'atari',
x: { randInt: [ 0, 800 ] },
y: 300
};
// randFloat means pick a random float between the min and max values given
const config5 = {
key: 'logo',
x: 400,
y: 300,
alpha: { randFloat: [ 0.1, 1 ] }
};
// If the property is a function it will invoke it and use the result as the value
const config6 = {
key: 'atari',
x: 400,
y: function ()
{
return 100 + Math.random() * 500;
}
};
// An example using randFloat to set the scale of a Sprite
const config7 = {
key: 'logo',
x: 400,
y: 300,
scale: { randFloat: [ 0.2, 2 ] }
};
// An example using randFloat to set independent x and y scale values
const config8 = {
key: 'logo',
x: 400,
y: 300,
scale: { x: { randFloat: [ 0.2, 2 ] }, y: { randFloat: [ 1.5, 3 ] } }
};
this.make.image(config8);
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.WEBGL,
parent: 'game-container',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);