I am creating a game where pictures will be loaded from a json file, since there will be many pictures, I decided to write an array of pictures in json. How to create a loop so that all pictures can be unloaded from json through the loop and place them at (x, y) specified in json, as well as in the same loop make a general listener for mouse events so that when clicking on the alert the object identifier is displayed, which user clicked on?
Pictures will be uploaded: those that do not change depending on the level can be uploaded to “preload”, for example, the menu, and those that constantly change from the selected level are uploaded from json.
I managed so far without a loop, created many objects and attached a mouse event listener to them.
Here is the whole code:
`var game = new Phaser.Game(800, 600, Phaser.AUTO, ‘’, { preload: preload, create: create, update: update });
function preload(){
game.load.spritesheet(‘button’, ‘assets/images/level1.png’, 193, 71);
game.load.json(‘database’, ‘assets/gameData.json’);
}
var villain;
var isLoadCompleted;
var MAX_HEIGHT = 360;
function create(){
villainjson = game.cache.getJSON('database');
button = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, game, 2, 1, 0);
button.onInputUp.add(game.up, game);
}
function actionOnClick()
{
spr1 = game.add.sprite(game.width/2, 10+MAX_HEIGHT/2, ‘’);
spr1.anchor.setTo(0.5, 0.5);
spr2 = game.add.sprite(villainjson.level[0].data[0].x, villainjson.level[0].data[0].y, '');
spr2.inputEnabled = true;
spr2.events.onInputDown.add(onClick2, this);
spr3 = game.add.sprite(villainjson.level[0].data[1].x, villainjson.level[0].data[1].y, '');
spr3.inputEnabled = true;
spr3.events.onInputDown.add(onClick3, this);
spr4 = game.add.sprite(villainjson.level[0].data[2].x, villainjson.level[0].data[2].y, '');
spr4.inputEnabled = true;
spr4.events.onInputDown.add(onClick4, this);
spr5 = game.add.sprite(villainjson.level[0].data[3].x, villainjson.level[0].data[3].y, '');
spr5.inputEnabled = true;
spr5.events.onInputDown.add(onClick5, this);
spr6 = game.add.sprite(villainjson.level[0].data[4].x, villainjson.level[0].data[4].y, '');
spr6.inputEnabled = true;
spr6.events.onInputDown.add(onClick6, this);
spr7 = game.add.sprite(villainjson.level[0].data[5].x, villainjson.level[0].data[5].y, '');
spr7.inputEnabled = true;
spr7.events.onInputDown.add(onClick7, this);
spr8 = game.add.sprite(villainjson.level[0].data[6].x, villainjson.level[0].data[6].y, '');
spr8.inputEnabled = true;
spr8.events.onInputDown.add(onClick8, this);
var loader = new Phaser.Loader(game);
key_img1 = 'bcg';
key_img2 = 'img2';
key_img3 = 'img3';
key_img4 = 'img4';
key_img5 = 'img5';
key_img6 = 'img6';
key_img7 = 'img7';
key_img8 = 'img8';
isLoadCompleted = false;
loader.image(key_img1, checkUrl(villainjson.level[0].background));
loader.image(key_img2, checkUrl(villainjson.level[0].data[0].url));
loader.image(key_img3, checkUrl(villainjson.level[0].data[1].url));
loader.image(key_img4, checkUrl(villainjson.level[0].data[2].url));
loader.image(key_img5, checkUrl(villainjson.level[0].data[3].url));
loader.image(key_img6, checkUrl(villainjson.level[0].data[4].url));
loader.image(key_img7, checkUrl(villainjson.level[0].data[5].url));
loader.image(key_img8, checkUrl(villainjson.level[0].data[6].url));
//loader.onFileError.add(onFileError, this);
loader.onLoadComplete.addOnce(onLoadComplete, this);
loader.start();
}
function updateGame(sprite, key_name){
sprite.loadTexture(key_name);
}
function onClick2(){
alert(“obj2”);
}
function onClick3(){
alert(“obj3”);
}
function onClick4(){
alert(“obj4”);
}
function onClick5(){
alert(“obj5”);
}
function onClick6(){
alert(“obj6”);
}
function onClick7(){
alert(“obj7”);
}
function onClick8(){
alert(“obj8”);
}
function checkUrl(strUrl){
return strUrl.length === 0 ? ‘empty_url’ : strUrl;
}
function onLoadComplete(){
isLoadCompleted = true;
}
function update()
{
if (isLoadCompleted)
{
isLoadCompleted = false;
updateGame(spr1, key_img1);
updateGame(spr2, key_img2);
updateGame(spr3, key_img3);
updateGame(spr4, key_img4);
updateGame(spr5, key_img5);
updateGame(spr6, key_img6);
updateGame(spr7, key_img7);
updateGame(spr8, key_img8);
}
}
`
File gameData.json:
{
“level”:
[{
“background”: “assets/images/background.png”,
“data”:
[
{“url”:“assets/images/level1/obj1.png”,“x”:220,“y”:250},
{“url”:“assets/images/level1/obj2.png”,“x”:200,“y”:70},
{“url”:“assets/images/level1/obj3.png”,“x”:250,“y”:90},
{“url”:“assets/images/level1/obj4.png”,“x”:300,“y”:90},
{“url”:“assets/images/level1/obj5.png”,“x”:350,“y”:70},
{“url”:“assets/images/level1/obj6.png”,“x”:350,“y”:200},
{“url”:“assets/images/level1/obj7.png”,“x”:400,“y”:350}
]
},
{
“background”: “assets/background2.png”,
“data”:
[
{“url”:“assets/images/level2/obj1.png”,“x”:50,“y”:100},
{“url”:“assets/images/level2/obj2.png”,“x”:200,“y”:70}
]
}]
}