cocos3——8.实现初学者指南

cocos3——8.实现初学者指南

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

1.采用ClippingNode裁剪范围

  写作物接口:

function createClipNode(node, stencil, inverted) {
    var clip_node = new cc.ClippingNode();
    // 设置模板节点(就是要裁剪的区域)
    clip_node.stencil = stencil;
    // 加入要被裁剪掉的节点(显示的内容)
    clip_node.addChild(node);
    if (inverted != undefined) {
        // 设置反转(由于我们须要保留模板区域外面的内容,裁剪掉区域里的内容)
        clip_node.setInverted(inverted);
    }

    clip_node._stencil = stencil;
    return clip_node;
}

  在引导层创建裁剪节点:

    // create clip node
    var mask = cc.LayerColor.create(cc.color(0, 0, 0, ui.mask_a), ui.screen_width, ui.screen_height);
    var stencil = cc.LayerColor.create(cc.color.GREEN, 100, 100);
    stencil.ignoreAnchorPointForPosition(false);
    this.clip_node = createClipNode(mask, stencil, true);
    this.addChild(this.clip_node, ui.mask_z);

  这里是创建了一个全屏的黑色遮罩层,然后在上面裁剪掉stencil的区域。要改变区域,我们仅仅须要改变stencil的位置和大小就能够了。

  然后在引导层中写裁剪的函数:

node.clipNode = function (ref) {
    this.clip_ref = ref;
    var stencil = this.clip_node.stencil;
    if (ref) {
        stencil.setAnchorPoint(ref.getAnchorPoint());
        stencil.setContentSize(ref.getContentSize());
        stencil.setPosition(ref.getParent().convertToWorldSpace(ref.getPosition()));
    } else {
        // set out of screen
        stencil.setPosition(cc.p(10000, 10000));
    }
}

  这个函数就是用传进来的參考节点ref的锚点、大小、位置来设置模板的属性,这样就能按參考节点进行裁剪了。

2.引导的简单流程

  对于简单的引导实现,就是在引导開始的地方開始、引导结束的地方结束。

而什么时候開始、什么时候结束,假设量小且開始、结束条件都比較特殊的话,

就能够找到相关的地方開始和结束引导。

假设量大且条件比較一般化(比方button事件结束、滑动事件结束之类的),能够将条件 抽象话。然后进行配置。

  以下就说简单的方式吧,先准备一下引导開始和结束的接口。

  先从文件流获取上次引导的步数吧,这里用的local storage:

// local storage
var storage = {
    ls: cc.sys.localStorage,
};

storage.set = function (key, value) {
    this.ls.setItem(key, value);
}

storage.get = function (key) {
    var value = this.ls.getItem(key);
    if (value != '') {
        return value;
    }
}

storage.remove = function (key) {
    this.ls.removeItem(key);
}

// global interface
var guide = {
    node: node,
};

// arrow: // 0 down, 1 right, 2 up, 3 left
guide.steps = [
    // 0
    {
        name: 'btn_right',
        str: '请按住button,控制力度,将沙包扔进红色区域。

', arrow: 1, }, // ...];// 获取上次引导完毕的步数guide.cur_step = storage.get('guide') || 0;

  然后准备開始和结束引导的接口:

guide.start = function (step) {
    if (step == this.cur_step) {
        console.log('guide start:', step, ',', this.cur_step);

        this.started = true;
        this._show(true);
        var info = this.steps[this.cur_step];
        this.node.updateData(info);
    }
}

guide.end = function (step) {
    if (!this.started) {
        return;
    }
    this.started = false;

    if (step == undefined) {
        step = this.cur_step;
    }
    if (step == this.cur_step) {
        console.log('guide end:', step, ',', this.cur_step);

        storage.set('guide', ++this.cur_step);
        this._show(false);
    }
}

guide._show = function (show) {
    if (show) {
        if (!this.node.getParent()) {
            this.node.init();
            ui.scene.addChild(this.node);
        }
    }
    this.node.visible = show;
}

  上面guide里的node就是引导界面的根节点。引导開始guide.start的时候,推断步数是当前步。就引导当前步,从上面配置的steps里面获取要引导的文字内容。

以及參考节点的名字(參考节点会挂到guide.start被调用的当前界面node对象下)、以及箭头等(文字、箭头的显示我就不多说了)。然后更新裁剪区域、显示文字、箭头等。在引导结束的时候将当前步数添加。

  而实际设计各个引导的时候,比方在第i步的时候,去開始的地方调用guide.start(i),在引导完的时候掉guide.end(i)就能够了。

这里设计的是简单的单线引导,对于简单的

新手引导已经够用了。

  

3.结果

  各位看官也累了。以下是我游戏《跳房子》里的截图,有兴趣的同学能够下来玩玩吧。多谢啦!

【下载地址】

《跳房子》游戏下载地址

http://zhushou.360.cn/detail/index/soft_id/2766861

cocos3——8.实现初学者指南

cocos3——8.实现初学者指南

cocos3——8.实现初学者指南

cocos3——8.实现初学者指南

版权声明:本文博主原创文章。博客,未经同意不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116793.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 计算机能不能升级固态硬盘,老电脑升级固态硬盘真的能变快吗?「建议收藏」

    计算机能不能升级固态硬盘,老电脑升级固态硬盘真的能变快吗?「建议收藏」怎样去DIY一台主机呢?它可以满足自己的工作、游戏需求,还要颜值高、噪音小、最重要的是价格要便宜,质量要好。本系列为让装机零基础的朋友可以轻松了解,所以尽量避免专业参数。(每周二更新)老电脑升级固态硬盘是第一选择,然而很多同学购买了固态硬盘,却发现没有想象的那么快,用测速工具测试后发现读写速度不能达到标称,是买到假货了吗?其实不然,固态硬盘读写速度受很多因素影响,本期《装机不求人》就和大家讲解…

  • latex公式中括号_公式中的大括号怎么打

    latex公式中括号_公式中的大括号怎么打功能语法显示不好看\frac{1}{2}(12)(\frac{1}{2})好一点\left(\frac{1}{2}\right)(12)\left(\frac{1}{2}\right)您可以使用\left和\right来显示不同的括号:功能语法显示圆括号,小括号\left(\frac{a}{b}\right)(ab)\left

    2022年10月11日
  • linux ettercap,linux下面ettercap的安装(双向arp欺骗)

    linux ettercap,linux下面ettercap的安装(双向arp欺骗)arpspoof真是老掉牙了,有以下三个缺点:1。不支持双向欺骗,要实现,只能启动两个进程。2。不支持多个ip,要不就是整个网段(除非也启动多个进程)3。不支持mac地址伪造。还是用ettercap吧,这个东西,介绍的资料都是windows下面的多。我的被控端是linux下呀,而目标是windows。没有办法,硬着头皮装吧:1..libnet-1.1.2.1.tar.gz2.libpcap-1.0…

  • MATLAB矩阵运算

    MATLAB矩阵运算矩阵定义MATLAB以矩阵作为数据操作的基本单位,这使得矩阵运算变得非常简捷、方便、高效。矩阵是由m×n个数av(i=1,2,…,m;j=1,2,…,n)排成的m行n列数表,记成:若m=n,则该矩阵为n阶矩阵(n阶方阵)。矩阵创建在键盘上直接按行方式输入矩阵是最方便、最常用的创建数值矩阵的方法,尤其适合较小的简单矩阵。在用此方法创建矩阵时,应当注意以下几点:输入矩阵时要以“[]”为其标识符号,矩阵的所有元素必须都在括号内。 矩阵同行元素之间由空格(个数不限)或…

  • Linux chmod命令及权限含义

    Linux chmod命令及权限含义

    2021年10月15日
  • 永恒之蓝病毒win7解决方法_win10永恒之蓝漏洞补丁

    永恒之蓝病毒win7解决方法_win10永恒之蓝漏洞补丁简介:NSA武器库的公开被称为是网络世界“核弹危机”,其中有十款影响Windows个人用户的黑客工具,包括永恒之蓝、永恒王者、永恒浪漫、永恒协作、翡翠纤维、古怪地鼠、爱斯基摩卷、文雅学者、日食之翼和尊重审查。这些工具能够远程攻破全球约70%的Windows系统,无需用户任何操作,只要联网就可以入侵电脑,就像冲击波、震荡波等著名蠕虫一样可以瞬间血洗互联网,木马黑产很可能改造NSA的武器…

    2022年10月16日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号