上次说到了拼图背景的实现，但拼图的内容块还没有实现，今天我们就来完成这个功能，废话少说，下面直接开始。
1. （1）打开game.ts脚本。引入itemJigsawContent.ts脚本
import { itemJigsawContent } from './itemJigsawContent';
（2）增加addjigsawItemContent函数。
//添加拼图方块内容
addjigsawItemContent(){
let i_num=0
for(let i=0; i<this.itemNum;i++){ //行
for(let j=0;j<this.itemNum;j++){ //列
i_num++
let pos= new Vec3(-this.bgWith/2,this.bgHight/2,0) //左下角第一个方块的坐标
let node_item=instantiate(this.jigsawitemContent) //实例化
node_item.width=this.itemWith //设置方块的宽
node_item.height=this.itemHight//设置方块的高
let pos_end= new Vec3(pos.x+this.itemWith/2+ this.interval + (this.itemWith + this.interval) * j,pos.y-this.itemHight/2+ this.interval - (this.itemHight +this.interval) * i ,0)
node_item.setPosition(pos_end) //设置方块的位置
node_item.parent=this.bg //方块挂载载bg节点下
let itemjs=node_item.getComponent(itemJigsawContent)
itemjs.init(i_num)
if(i_num==this.itemNum*this.itemNum ){
itemjs.setOpacity()
}
}
}
}
（3）在initjigsaw函数里进行调用
this.addjigsawItemContent()
2. 还记得我们之前在点击函数里进行的测试吗，现在我们新建一个函数getspf，将之前的逻辑移到该函数里。
getspf(){
let rect= new Rect(0,0,200,200)
let sp=this.spf.clone()
sp.setRect(rect)
return sp
}
3. （1）打开itemJigsawContent.ts脚本，声明一个装饰器
@property({type:Sprite})
sp_item = null
（2）打开预制体资源itemJigsawContent，关联sp_item
（3）记得保存预制体资源
4. (1)打开game.ts脚本，在addjigsawItemContent函数里调用itemJigsawContent脚本的setImg函数。
itemjs.setImg(this.getspf())
(2)我们看下效果，没问题
5.（1）打开itemJigsawContent预制体，更改下颜色，改成白色。
（2）再看下颜色，是不是感觉比之前的好点了
6.现在只显示图片的一个小角落，接下来，我们来实现显示整张图片。
（1）打开game.ts脚本，完善getspf函数。
getspf(i_x,i_y){
let sp=this.spf.clone()
let item_w=sp.getRect().width/this.itemNum
let item_h=sp.getRect().height/this.itemNum
let x=i_x * item_w
let y=i_y * item_h
let rect= new Rect(x,y,item_w,item_h)
sp.setRect(rect)
return sp
}
（2）getspf函数增加了两个参数，就是通过传递第几行，第几列来计算该截取哪个坐标的图片。在调用getspf函数时传递这两个参数。
itemjs.setImg(this.getspf(j,i))
（3）查看下效果，可以完整显示整张图片了。
好了今天就到这里了，主要完成图片的整张显示。下次我们继续。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家
