用CocosCreator3.6开发一款拼图游戏(二)

283 阅读2分钟

上一次,我们说到了项目的创建和一些文件夹的创建,今天我们继续。

1.在Canvas 下新建一个空节点,并且命名jigsaw

image.png

2. 在Canvas下新建一个按钮。并且命名为btn_jigsaw。

image.png

3.调整btn_jigsaw按钮的大小。

image.png

4.调整btn_jigsaw下Lable的大小,并且Sting该为”拼图”,并且调整字的大小

image.png

5.再新建一个空节点,并且命名nodeRedy

image.png

6. 将btn_jigsaw节点拖动到nodeRedy下去 image.png

7. 在jigsaw节点下新加一个按钮,并且命名为btn_return

image.png

8.调整btn_return按钮的位置。 image.png

9.调整btn_return按钮下的Lable的大小,String内容改为“返回”,字体的大小调为40 image.png

10. 接下来要实现的功能是jigsaw节点和nodeRedy节点这两个节点之间来回切换,也就是说当用户一开始进来的时候,只显示nodeRedy节点的内容,当点击“拼图”这个安纽时,就切换到jigsaw这个节点上,即只显示jigsaw节点上的内容。当点击“返回”这个按钮时,就回到nodeRedy这个节点上。打开game.ts脚本。声明一个node类型的属性装饰器

    @property({type:Node})

    jigsaw=null

  image.png

11.将节点jigsaw关联到我们之前声明的属性装饰器上。当你点击Canvas,就可以看到右下角的 game下的Jigsaw,只需拖动节点jigsaw到这里就可以了。

image.png

12. 打开game.ts脚本。同样声明一个node类型的属性装饰器,用来关联nodeRedy节点。

`    @property({type:Node})

    nodeRedy=null`

image.png

13.同样关联nodeRedy节点。也是拖动即可。 image.png

今天就到这里了,主要添加了一些按钮和在game.ts脚本上声明了一些节点属性。 jigsaw节点和nodeRedy节点的切换还没有实现。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家