[SOLVED] Create dinamically images with attributes

Phaser 3
1

Hi,
I’m new to Phaser :slight_smile:
I try to create a Risk game board.
I try to load and create images dinamically, load them from an atlas but I don’t know how reference them from the create(). I load a JSON that have the coord X,Y, the name and some attributes. How can I create it?
Example of data for each image from the JSON
{
“name”: “Thracia.png”,
“ID”: “10191”,
“loc”: “378,291”,
“gp”: “8”,
“rv”: “1”,
“limits”: “10125,10113,10146,10089,10158”,
“nfp”: “5”,
“player”: “1”,
“terrain”: “m”
}
The name is the same into the atlas file, but I don’t know how iterate both, getting the “loc” X,Y and create it.
Salut,
Josep M

Any help will be wellcome

2

Hi,
I post the solution for if can help someone.

function Territory(data) {
        Object.assign(this, data);
        this.x = this.loc.split(',')[0];
        this.y = this.loc.split(',')[1];
}

//Load JSON data
const data = this.cache.json.get('mapworld');

let territoryArray = [];
let territoryLookup = {};

for (let i=0;i<data.length;i++){
  let t = new Territory(data[i]);
  t.image = this.add.image(t.x,t.y,'gameboard',t.name)
      .setName(t.name)
      .setInteractive({pixelPerfect: true});

  t.image.on(eventos.POINTER_DOWN,function () {
    t.image.setTint(0x00ff00);
    console.log(territoryLookup[t.image.parentTerritory].gp);
    console.log('pointer_down');
  });

  t.image.on(eventos.POINTER_UP,function () {
    t.image.clearTint();
    console.log('pointer_up');
  });

  t.image.parentTerritory = t.ID;
  territoryLookup[t.ID]=t;
  territoryArray.push(t);