我正在尝试从我从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);
}
但是我想显示在单击其中一个城市或设施时的操作上下文菜单。与菜单项列表一起有条件地形成。例如Move to [city.name]
等。但是现在所有的交互式对象在单击时都会发送单击事件,因此我需要以某种方式明确地标识添加的图像。也许添加一个等于节点名称的键,但是如何呢?以及以后如何阅读?
答案 0 :(得分:0)
感谢Phaser 3论坛的Samme,我们提供了一个解决方案:
this.add.image(node.x, node.y, node.type)
.setName(node.name)
...可以这样访问:gameObject.name