What we will cover:
- How to randomly select a texture from an array and set sprite texture on click.
-
If you are unsure how to use a json atlas with PIXI please see our tutorial found here https://sprite-storm.com/tutorial/loading-json-spritesheet-pixi/
To note I am using TypeScript for this project, however it should conform easily to regular written javascript as well.I am also using a custom PIXI project that I use for personal use, so some syntax may need to be adjusted to work for how your project is set up.
Setting Up Our Loader:
- We start by loading our asset in preload
-
Please note once again this is being done in my specific build which has a state system and a preload state. if you are following with a typical PIXI project you will need to use PIXI.loaders.Load()
preload() {
this.loader.add('image', './../assets/basic/atlas2.json');
this.loader.load();
}
For this example I am using assets found at https://opengameart.org/content/candy-pack-1 and using a json atlas that was covered in this tutorial https://sprite-storm.com/tutorial/loading-json-spritesheet-pixi/
Lets Break This Down:
- Here we start by loading our json file of the images we want to use for the array.
Creating Our Variables:
In this section we will create our variables for the project.
private _startTexture:PIXI.Texture;
private _textureArr:Array<PIXI.Texture> = [];
private _sprite:PIXI.Sprite;
private _randTexture:PIXI.Texture;
Let’s Break This Down:
- First we begin by creating a start texture for when our game loads.
-
Second we define a variable to hold our texture array. Since I am using TypeScript this is type declared as an array of PIXI.Texture;
-
Third we create a variable to hold our sprite
-
We then create a variable for creating our random textures to be pushed to the array.
Setting Up Our Create Function And Adding Our Sprite To The Game:
public create() {
this._startTexture = PIXI.Texture.fromImage('./../assets/basic/brick.png');
this._sprite = new PIXI.Sprite(this._startTexture);
this._sprite.x = this.game.width * 0.5;
this._sprite.y = this.game.height * 0.5;
this._sprite.anchor.x = 0.5;
this._sprite.anchor.y = 0.5;
this._sprite.scale.x = 2;
this._sprite.scale.y = 2;
this._sprite.interactive = true;
this._sprite.on('mousedown', () => {
this.changeTexture();
}, this);
this.addChild(this._sprite);
for(let i = 0; i < 5; i++) {
this._randTexture = PIXI.Texture.fromFrame('image' + (i + 1) + '.png'); this._textureArr.push(this._randTexture);
}
}
Let’s Break This Down:
-
We begin by setting an image to our start texture.
-
Second we create our sprite using our start texture as its texture.
-
Third we set both the sprites X and Y properties to be in game center
-
Fourth we set our sprites scale to be twice its normal size(note I am doing this with my particular assets since they are a bit small).
-
Fifth we set our sprite to be interactive and clickable next we set our sprites mousedown functionality, when the sprite is clicked it will call a function in this case I have called it changeTexture.
-
Sixth we add the sprite to our game world.
-
Lastly we create a for loop to loop through our JSON Atlas in my atlast I have 5 images and each image is named ‘image’ followed by a number 1-5. On each loop we will push that particular texture frame to our texture array to be stored for later use.
Creating Our Change Texture Function To Dynamically Change Sprite Texture On Click:
changeTexture() {
let rand = this._textureArr[Math.floor(Math.random() * this._textureArr.length)];
this._sprite.texture = rand;
}
This is a pretty simple and straight forward approach to what we want to do.
- First we define a locally variable, in my case called rand which is equal selecting a random texture from our array using Math.random().
-
Second we just state that our sprites texture when this function is fired will be equal to rand. This will be the randomly selected texture each time the function is fired.
Thats it! We have dynamically changed a sprites texture each time the sprite is clicked.
Conclusion:
- We learned how dynamically change a sprites texture on click
Thank you very much for reading. Please stay tuned for upcoming tutorials.[/vc_column_text][/vc_column][/vc_row]
