如何明确识别场景中的游戏对象?

时间:2019-06-11 14:57:48

标签: javascript phaser-framework

我正在尝试从我从JSON获取的对象数组中添加交互式图像对象。

例如,我有以下JSON:

{
  "graph": {
    "nodes": [
      {"name":"Catharsis", "type":"city",    "x":500, "y":200},
      {"name":"Arrakeen",  "type":"city",    "x":300, "y":400},
      {"name":"Mine_1",    "type":"facility","x":150, "y":450},
      {"name":"Belgorod",  "type":"city",    "x":700, "y":500}
    ],
    "paths": [
      {"from":"Arrakeen", "to":"Belgorod"},
      {"from":"Arrakeen", "to":"Mine_1"},
      {"from":"Arrakeen", "to":"Catharsis"}
    ]
  }
}

节点是位置,例如城市和设施。 此JSON作为JS对象加载到mapData

然后,此JS在场景中绘制对象:

preload(){
  this.load.image('city','img/locations/city.png');
  this.load.image('facility','img/locations/facility.png');
}

create(){
  mapData.graph.paths.forEach(path => {
    var nodesFrom = mapData.graph.nodes
      .find(node => {
        return node.name == path.from
      }, path);
    var nodesTo = mapData.graph.nodes
      .find(node => {
        return node.name == path.to
      }, path);
    this.add.line(0, 0, nodesFrom.x, nodesFrom.y, nodesTo.x, nodesTo.y, 0x000000, 1)
      .setOrigin(0, 0);
  }, this);
  mapData.graph.nodes.forEach(node => {
    this.add.image(node.x,node.y,node.type)
      .setInteractive()
      .setScale(0.2);
    this.add.text(node.x,node.y,node.name,{fontSize:20,color:'#000'})
      .setOrigin(0.5, 0.3);
    this.input.on('gameobjectdown',this.onObjectClicked);
  }, this);
}

这是结果场景: map scene

但是我想显示在单击其中一个城市或设施时的操作上下文菜单。与菜单项列表一起有条件地形成。例如Move to [city.name]等。但是现在所有的交互式对象在单击时都会发送单击事件,因此我需要以某种方式明确地标识添加的图像。也许添加一个等于节点名称的键,但是如何呢?以及以后如何阅读?

1 个答案:

答案 0 :(得分:0)

感谢Phaser 3论坛的Samme,我们提供了一个解决方案:

this.add.image(node.x, node.y, node.type)
  .setName(node.name)

...可以这样访问:gameObject.name