开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
上次说到了元素块预制体的制作，今天我们继续，因为要设置每个元素块的位置，因此我们我们做一个编辑器，通界面上添加元素块，然后获取到的所有的元素块的坐标，用来定义每一关的元素块坐标。
1. 先制作编辑模式下的元素块预制体
（1）在Canvas下新建一个Sprite(精灵)，并且命名为parentEdit
（2）调整大小和颜色
（3）将节点parentEdit拖动到prefab文件夹里
（4）将节点parentEdit删除，这样编辑模式下的元素就制作完了
2.打开game.ts脚本
（1）添加装饰器
@property({type:Prefab})
preBlockEdit=null
（2）注意，记得引用Prefab
（3）关联预制体
3.（1）在Canvas下新建一个空节点，并且命名为parentEdit，用作编辑模式下的页面
（2）添加装饰器
@property({type:Node})
parentEdit=null
（4）关联节点
3.打开game.ts脚本
（1）添加定义，用来判断是否编辑模式。
isEditing: boolean;
(2)是否处于编辑模式，取决于parentEdit的 active，因此在start函数里加入
this.isEditing=this.parentEdit.active
这样就可以通面板上来控制是否进入编辑模式了
（3）增加crateBlocksEdit函数，用来创建编辑模式下的网格，后面会在网格上显示元素块
crateBlocksEdit(){
let i_num=14 //行
let j_num =15 // 列
let num_zhongJian=i_num/2
for (let i = 0; i < i_num; i++) {
for (let j = 0; j < j_num; j++) {
let node_block_eidt= instantiate(this.preBlockEdit)
node_block_eidt.parent=this.parentEdit
node_block_eidt.setPosition(i*42-(i_num-1)40 / 2,j45-200,0)
if(i_num % 2 ==0){
if(i==num_zhongJian || i==num_zhongJian-1){
node_block_eidt.getComponent(Sprite).color= new Color(255,0,0,98)
}
}else{
if(i==Math.floor(num_zhongJian)){
node_block_eidt.getComponent(Sprite).color= new Color(255,0,0,98)
}
}
}
}
}
（4）注意，要引入instantiate, Sprite，Color
（5）显示效果如下
4.打开game.ts脚本
（1）定义numTypeEdit，用来区别编辑模式下，是增加玩元素块还是减少元素块
numTypeEdit: number;
（2）在start函数里初始化
this.numTypeEdit=1//1加 0减
（3）增加onTouchStart函数
onTouchStart(event: EventTouch) {}
（4）也要引入EventTouch
（6）增加装饰器
@property({type:Prefab})
PreBlock=null
（7）关联block预制体
今天就到这里了，主要说编辑模块的一些功能点，但还没有完善，下次再继续完善。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
