Creator小提示的实现 | 不重复自动显示内容

Creator小提示的实现 | 不重复自动显示内容

不少游戏中都有小提示
这次来用Creator写一个小提示脚本


给出代码

import { _decorator, Component, Node, LabelComponent, CCString, random, CCBoolean, error, CCFloat } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Hint')
export class Hint extends Component {
 
    @property({displayName: "小提示文字", tooltip: "小提示文字", type: LabelComponent, displayOrder: 0})
    hint_lb: LabelComponent = null!;
 
    @property({displayName: "小提示内容", tooltip: "小提示的内容，代码会随机在里面抽取一个显示到文字上，内容数量必须至少有2个", type: CCString, displayOrder: 1})
    hint: string[] = [];

    @property({
        displayName: "自动更新显示内容", 
        tooltip: "是否自动更新显示内容，游戏加载完成后每几秒就自动更新一次小提示显示内容，勾选之后会在onLoad执行一个定时器每隔几秒更新一次显示内容", 
        displayOrder: 2
    })
    is_auto: boolean = false;

    @property({
        visible: function () {
            return (this.is_auto);
        }, 
        displayName: "每几秒自动更新一次小提示", 
        tooltip: "每几秒自动更新一次小提示", 
        type: CCFloat, 
        displayOrder: 3
    })
    auto_time: number = 3;

    @property({
        displayName: "不重复显示", 
        tooltip: "勾上后每次更新显示的内容将不再重复，如果小提示内容里的每一个元素都显示过一遍，就不得不重复显示，但也不会出现相邻两次更新内容一样的情况", 
        displayOrder: 4
    })
    is_noRepeat: boolean = true;

    @property({displayName: "游戏加载后更新内容", tooltip: "是否在游戏运行后更新小提示显示的内容，就是PlayOnLoad", displayOrder: 5})
    play_onLoad: boolean = true;

    // 每个内容是否显示过
    content: boolean[] = [];
    // 上一次循环最后一个数字
    num: number = null!;

    onLoad () {
        // 刚开始每个内容都没有显示过
        for (let i = 0; i < this.hint.length; i ++) {
            this.content[i] = false;
        }

        // 如果勾选了加载后更新内容
        if (this.play_onLoad == true) {
            // 更新内容
            this.update_content();
            // console.log("游戏加载后更新");
        }

        let self = this;

        // 如果自动更新显示内容
        if (this.is_auto == true) {
            // 定时器，每几秒更新一次显示内容
            this.schedule(function () {
                self.update_content()
            }, this.auto_time);
        }
    }


    // 更新小提示显示内容专用函数
    update_content () {
        // 如果小提示内容数组的长度小于等于一，就不继续执行代码并且报错
        if (this.hint.length <= 1) {
            error("来自hint小提示脚本的错误，你必须设置至少两个小提示内容");
            return;
        }

        // 如果勾选了不重复显示
        if (this.is_noRepeat == true) {
            // 显示过的内容的次数
            let time = 0;
            // 判断有多少个内容显示过了
            for (let i = 0; i < this.content.length; i++) {
                if (this.content[i] == true) {
                    time ++;
                }
            }
            // 如果每个内容都显示过一遍了，就把content（每个内容是否显示过的Boolean数组）全部重新设为false，重新开始一轮
            if (time >= this.hint.length) {
                for (let i = 0; i < this.hint.length; i ++) {
                    this.content[i] = false;
                }
                // console.log("隔断线；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；"); 
            }

            // 随机数，目的是随机显示小提示
            let num = this.random(0, this.hint.length - 1);

            // 如果这个小提示显示过了
            if (this.content[num] == true) {
                for (let i = 0; i < this.content.length; i++) {
                    // 找一个没显示过的小提示
                    if (this.content[i] == false) {
                        // 获取没显示过的小提示的号码
                        num = i;
                        break;
                    }
                }
            }

            // 如果新的一轮轮回的第一个结果和上次轮回的最后一个小提示内容一样，也就是出现连续重复了
            if (num == this.num) {
                // 重新随机显示小提示
                while (num == this.num) {
                    // 随机数，目的是随机显示小提示
                    num = this.random(0, this.hint.length - 1);
                    // console.log("循环了一遍数组之后出现了难得的重复");
                }
            }

            // 设置这个小提示显示过了
            this.content[num] = true;
            // 设置上次显示的小提示号码
            this.num = num;

            // console.log(this.content);

            // 显示小提示
            this.hint_lb.string = "小提示：" + this.hint[num];
            // console.log("参数", 0, this.hint.length - 1, "随机数:", num + 1);
        } else {
            // 随机数，目的是随机显示小提示
            let num = this.random(0, this.hint.length - 1);
            // 显示小提示
            this.hint_lb.string = "小提示：" + this.hint[num];
            // console.log("参数", 0, this.hint.length - 1, "随机数:", num + 1);
        }
    }


    // 随机数，传入两个参数，返回一个number，number的大小范围是min - max
    random (min: number, max: number) {
        return (Math.floor(Math.random() * (max - min + 1)) + min);
    }


}

新建一个脚本把这些代码复制粘贴进去，脚本挂在哪个节点都可以
来看看脚本的属性吧

绑定好小提示文字
小提示内容必须有至少两个，如果只有一个会出现错误
勾选自动更新显示内容后会在onload执行一个计时器，每隔几秒就更新一次小提示的内容，这个按需求勾不勾选
不重复显示推荐勾上，勾上后每次更新显示的内容将不再重复，如果小提示内容里的每一个元素都显示过一遍，就不得不重复显示，但也不会出现相邻两次更新内容一样的情况
游戏加载后更新内容也建议勾上，游戏会在加载完成后就更新小提示文字的显示内容

另外，还可以直接调用脚本里的update_content方法更新小提示显示的内容，效果GIF图就是给按钮绑定了update_content方法

技术交流Q群：1130122408
更多内容请关注微信公众号