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

1,766 阅读2分钟

上次我们说到了方块内容的显示,今天我们继续,随着开发的进度推进,感觉先开发华容道比较好,华容道跟拼图,其实是差不多的,那接下来我们就先开发华容道,然后在这个基础上再改成拼图的模式。废话少说,下面直接开始。

1. 为了控制字体的大小随方块的多少而变动,(即如果方块多,那字体就变小,方块少,则字体变大)

(1) 我们在item.ts脚本中的init函数中增加一个参数,用来控制字体的大小。

    init(num,label_size){

        this.i_num=String(num);

        this.num.string=this.i_num

        console.log(label_size)

        this.num.fontSize=label_size

    }

  (2) 在addItemContent函数里调用init时传参

image.png

2.(1)目前数字的顺序是从左下角开始的,我们改成从左上角开始。并且数字改成从1开始

image.png

(2)改动的地方不多,只需改动下addItemContent函数。i_num改为0,

image.png

(3)去掉前面的负号

image.png

(4)y坐标的地方改为减

image.png

(5)效果如下

image.png

3.接下来,我们做一个小功能,最后一个数字就隐藏,即设置透明度为0即可。

(1)打开item.ts脚本,增加setOpacity函数。

    setOpacity(){

        this.is_end=true

        let color = new Color(); // 克隆当前颜色对象

         color.a = 0; // 设置 alpha 值为 50%,范围为 0 ~ 255

        this.node.getComponent(Sprite).color=color

    }

 

(3)记得引入Color,Sprite

image.png

(4)在addItemContent函数里进行调用

    if(i_num==this.itemNum*this.itemNum ){

        itemjs.setOpacity()  

      }

  image.png

(5)效果如下

image.png

4.(1)接下来,我们修改下菜单,我们的菜单入口还是拼图,我们要改成华容道

image.png

(2)复制btn_jigsaw节点

image.png

(3)重命名刚才的节点。重命名为btn_Klotski。更改Lable下的String为华容道。

image.png

好了今天就到这里了,主要调整了方块内容的显示和菜单界面的更改。下次我们继续。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家