上一次，我们又新加一个预制资源。今天我们要实现移动方块itemContent，废话少说，下面直接开始。
1. 打开game.ts脚本。为了方便管理，现在将initjigsaw函数里的部分功能抽离出来。
(1) 新建addItem添加方块背景函数
//添加方块背景
addItem(){
for(let i=0; i<this.itemNum;i++){ //行
for(let j=0;j<this.itemNum;j++){ //列
let pos= new Vec3(-this.bgWithHight/2,-this.bgWithHight/2,0) //左下角第一个方块的坐标
let node_item=instantiate(this.item) //实例化
node_item.width=this.itemWithHight //设置方块的宽
node_item.height=this.itemWithHight//设置方块的高
let pos_end= new Vec3(pos.x+this.itemWithHight/2+ this.interval + (this.itemWithHight + this.interval) * j,pos.y+this.itemWithHight/2+ this.interval + (this.itemWithHight +this.interval) * i ,0)
node_item.setPosition(pos_end) //设置方块的位置
node_item.parent=this.bg //方块挂载载bg节点下
}
}
}
（2）在initjigsaw函数里调用addItem函数
2.声明一个预制资源
@property({type:Prefab})
itemContent=null
3.关联itemContent预制资源
4. 新建addItemContent添加方块内容函数
(1)跟添加方块背景函数差不多，只是实例预制资源不一样
//添加方块内容
addItemContent(){
let i_num=-1
for(let i=0; i<this.itemNum;i++){ //行
for(let j=0;j<this.itemNum;j++){ //列
i_num++
let pos= new Vec3(-this.bgWithHight/2,-this.bgWithHight/2,0) //左下角第一个方块的坐标
let node_item=instantiate(this.itemContent) //实例化
node_item.width=this.itemWithHight //设置方块的宽
node_item.height=this.itemWithHight//设置方块的高
let pos_end= new Vec3(pos.x+this.itemWithHight/2+ this.interval + (this.itemWithHight + this.interval) * j,pos.y+this.itemWithHight/2+ this.interval + (this.itemWithHight +this.interval) * i ,0)
node_item.setPosition(pos_end) //设置方块的位置
node_item.parent=this.bg //方块挂载载bg节点下
let itemjs=node_item.getComponent(item)
itemjs.init(i_num)
}
}
}
(2)在initjigsaw函数里调用addItemContent函数
5. 在script文件夹下新建一个脚本，并且命名为item
6. 打开itemContent预制资源，将item.ts脚本关联到itemContent预制资源上，只需拖动到itemContent预制资源右侧即可。
7. 打开item.ts脚本，声明一个Label。
@property({type:Label})
num=null
8. 关联num节点，先打开itemContent预制资源，拖动num节点到右侧的 Num上。
9. 打开item.ts脚本
(1) 添加一个初始化函数init()
init(num){
this.i_num=String(num);
this.num.string=this.i_num
}
(2)在start函数里默认num=0
start() {
this.num=0
}
10. 看下效果
数字显示不完整，调字体的高度跟字体的大小一样。
调整后的效果如下
好了今天就到这里了，主要说了方块内容的显示。下次我们继续。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
