上次我们说到了如何通过代码来实现图片资源的更改。今天我们继续新的内容。废话少说，下面直接开始。
1. 我们和之前的华容道一样，也制作一个预制体资源。这次我们用之前的预制体资源复制一份，然后修改下。这样就可以快速完成了。
（1）将prefab文件夹下的itemContent预制体资源，拖动到节点上。
（2）选择itemContent，然后点击菜单上的“节点”中的“递归地取消当前的预制件资源”
（3）重命名下itemContent节点，重命名为itemJigsawContent
（4）将itemJigsawContent节点拖动到prefab文件夹里
（5）删除itemJigsawContent节点。这样itemJigsawContent的预制体资源就制作完了。
2. (1)在script文件夹下新建一个脚本文件，并且命名为itemJigsawContent.ts
(2) 打开预制体itemJigsawContent，关联itemJigsawContent.ts脚本，只需将
itemJigsawContent.ts脚本拖动到右侧的属性检查器即可。
（4）打开itemJigsawContent.ts脚本。其实内容跟item.ts的差不多。声明一个Label装饰器,并在start函数初始化num
@property({type:Label})
num=null
start() {
this.num=0
}
记得在顶部引入Label
3. 打开game.ts脚本，增加一个初始化的函数initjigsaw，跟初始化华容道差不多。
（1）为了方便调用，将initklotski函数里的
this.interval=3 //两个块之间的间隔
移动到start函数里。
（2）增加initjigsaw函数。
//初始化拼图
initjigsaw(){
this.itemWith=Math.round(this.spf.getRect().width / this.itemNum);//每一块的宽度
this.itemHight=Math.round(this.spf.getRect().height / this.itemNum);//每一块的高度
this.bgWith=this.itemWith * this.itemNum + this.interval * (this.itemNum + 1 ) //拼图背景的宽度
this.bgHight=this.itemHight * this.itemNum + this.interval * (this.itemNum + 1 ) //拼图背景的高度
console.log(this.bgHight)
console.log(this.bgWith)
this.bg.width=this.bgWith //设置bg节点的宽
this.bg.height=this.bgHight//设置bg节点的高
}
好了今天就到这里了，主要说了itemJigsawContent预制体的制作和拼图的初始化。下次我们继续。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
