上一次说到了预制资源的制作和调用，今天我们继续新的内容。今天我们实现方格背景，就是在背景上铺满方格，每个方格就是一个背景，废话少说，下面直接开始。
1. （1）打开game.ts脚本，之前我们在initjigsaw函数里实现了预制资源的调用，现在我们在该基础上进行改造。
initjigsaw(){
this.itemNum=6;//横竖有多少个
this.itemWithHight=Math.round(650/this.itemNum);//每一块的高度和宽度
this.interval=3 //两个块之间的间隔
this.bgWithHight=this.itemWithHight * this.itemNum + this.interval * (this.itemNum + 1 ) //拼图背景的宽度和高度
this.bg.width=this.bgWithHight //设置bg节点的宽
this.bg.height=this.bgWithHight//设置bg节点的高
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)不要忘记声明变量
itemNum: number;
itemWithHight: number;
interval: number;
bgWithHight: number;
(3)效果如下
2. 接下来，我们再新建一个预制资源，用来展示方块的内容，之前的方块只是展示背景。
（1）预制资源也是可以修改的，下面说下如何修改预制资源。双击要修改的预制资源。这样就打开了修改的界面了
（2）因为这个num节点现在用不到了，所以直接删掉，直接右击，然后删除
（3）删除后，记得要保存。就是每次修改预制资源后，记得要保存。
3. 在Canvas下新建一个SpriteSplash(单色)，并且命名为itemContent
4.调整itemContent节点的颜色
5.在itemContent节点下Label(文本)，并且命名为num
6. 调整num节点的字体大小
7.拖动itemContent节点到prefab文件夹下。
8.删除原来的节点itemContent，这样一个预制资源又做完了。
好了，今天就到这里了，主要说方格背景和新做了一个预制资源。下次我们继续。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
