开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
上一次说到了编辑模式下的一些布局，今天我们继续来完善它。
1.（1）在Canvas 下再新建一个空节点，并且命名为parentBlocks,用来显示元素块
（2）同样也在game.ts脚本上再增加一个装饰器
@property({type:Node})
parentBlocks=null
（3）关联parentBlocks节点
2. 打开block.ts脚本
（1）定义blockType
blockType: any;
(2)增加一个初始化函数
init(type){
this.blockType=type
this.spYuanSu.spriteFrame=this.YuanSuimg[this.blockType]
}
3. 打开game.ts脚本
（1）引入block脚本
import { block } from './block';
（2）在start函数里注册触摸事件
input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
（3）增加onTouchStart函数， 当触摸屏幕时，产生元素块
onTouchStart(event: EventTouch) {
let v2_touchStart=event.getUILocation() let v3_touchStart_edit=this.parentEdit.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(v2_touchStart.x,v2_touchStart.y,0))
if(this.numTypeEdit==1){
let children=this.parentEdit.children
for(let i=children.length-1;i>=0;i--){
let node_UITransform=children[i].getComponent(UITransform)
if(node_UITransform.getBoundingBox().contains( new Vec2(v3_touchStart_edit.x,v3_touchStart_edit.y))){
let node_block =instantiate(this.PreBlock)
node_block.parent=this.parentBlocks
node_block.setPosition(children[i].getPosition())
let ts_block=node_block.getComponent(block)
let num_type_random =Math.floor(Math.random()*12) //返回0到11之间的整数
ts_block.init(num_type_random)
break
}
}
}
}
（4）注意，要引入Vec2, Input, input, Vec3等
（5）效果如下，当点击小方块时就会产生元素块
4. 如果只是在屏幕上点一个生成一个，那太麻烦了，接下我们增加一个功能，就是手指在屏幕划动的时候就产生元素块。这样大大提交了生产效率。
（1）同样注册触摸事件，打开game.ts脚本，在start函数加入
input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
（2）增加onTouchMove函数
onTouchMove(event: EventTouch) {
let v2_touchStart=event.getUILocation() let v3_touchStart=this.parentBlocks.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(v2_touchStart.x,v2_touchStart.y,0)) let v3_touchStart_edit=this.parentEdit.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(v2_touchStart.x,v2_touchStart.y,0))
if(this.isEditing ){
let children=this.parentEdit.children
for(let i=children.length-1;i>=0;i--){
let node_UITransform=children[i].getComponent(UITransform)
if(node_UITransform.getBoundingBox().contains( new Vec2(v3_touchStart_edit.x,v3_touchStart_edit.y))){
let node_block =instantiate(this.PreBlock)
node_block.parent=this.parentBlocks
node_block.setPosition(children[i].getPosition())
let ts_block=node_block.getComponent(block)
let num_type_random =Math.floor(Math.random()*12)
ts_block.init(num_type_random)
break
}
}
}
}
效果如下
5. 这样需然可以了，但有一个小问题，就是如果在小方面内一直移动，元素块就一直在变，我们需要的当手指当前在小方块内移动的时候，只生成一次元素块。为了解决这个问题，我们定义一个变量
（1）
numBlockEditMove: number;
（3）在onTouchStart池函数里入
this.numBlockEditMove=i
(4) 在onTouchMove函数里进行判断，如果还是当前的小方块那不再生成元素块
if(this.numBlockEditMove==i){
return
}
this.numBlockEditMove=i
今天就到这里了，主要说编辑模式下通过点击或者手指滑动时生成元素块。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
