关闭

【Cocos Creator 实战教程(4)】——黄金矿工(上)(节点动作、碰撞体相关)

标签: CocosCreator黄金矿工教程实战
5547人阅读 评论(5) 收藏 举报
分类:

准备工作:

我们新建一个工程,名字叫做GoldMiner,把相关资源导入,搭建一个游戏场景如下(灰色节点先不用看,那是后来加上的):
这里写图片描述

绳子伸缩思路:

在玩游戏时我们需要让绳子伸长去采矿,在制作游戏的时候,绳子是一个节点,很多人都会利用节点的伸缩方法来实现绳子伸长的效果,但如果直接调整节点长度,会使图片变得模糊,如果绳子中间是纯色的,我们可以利用9path图片工具来制作相应可以拉伸不变形的图片。但我这里要介绍另一种方法——利用Mask组件遮挡绳子:

首先我们准备一根足够长的绳子图片,添加一个绳子节点,并将钩子添加为绳子节点的子节点

这里写图片描述

我们可以发现,绳子很长

添加一个空节点取名为mask,添加mask组件,调整节点大小(这里的mask节点的大小就是其子节点的显示区域)为绳子可见区域,并将绳子节点拖入成为mask节点的子节点

这里写图片描述
现在我们就把绳子的上面挡住了,只需要调整绳子位置就可以实现绳子伸缩的效果了。

绳子摇摆动作:

我们在Canvas节点添加一个游戏脚本组件

    properties: {
        //绳子
        rope: {
            type : cc.Node,
            default : null,
        },
        //钩子
        hook: {
            type:cc.Node,
            default :null,
        }
    },

将两个我们需要用的节点声明为属性,在面板中拖入相关节点这里写图片描述

在onLoad()方法里实现绳子摇摆方法

this.shakeAction = cc.repeatForever(cc.sequence(cc.rotateTo(3,60),cc.rotateTo(3,-60)));
this.rope.runAction(this.shakeAction);

绳子伸长动作:

因为绳子节点是不停变换角度的,所以我们要动态的根据节点角度计算绳子变换位置(200是测试值,后面会根据情况改动,该值应该可以让绳子到达最远端)

this.rope.runAction(cc.moveBy(3,-200*Math.tan(Math.PI/180*this.rope.rotation),-200));

绳子收回动作:

我们在一开始记录一下绳子的初始位置,那么绳子收回的动作就可以这样写

//记录绳子初始位置
this.startPos = this.rope.position;
'''
'''
'''
this.returnAction = cc.sequence(cc.moveTo(3,this.startPos),cc.callFunc(function() {
                this.rope.runAction(this.shakeAction);
        }, this));//绳子收回后继续左右摇摆
this.rope.runAction(self.returnAction);

完整测试代码:

cc.Class({
    extends: cc.Component,

    properties: {
        rope: {
            type : cc.Node,
            default : null,
        },
        hook: {
            type:cc.Node,
            default :null,
        }
    },

    // use this for initialization
    onLoad: function () {
        //记录绳子初始位置
        this.startPos = this.rope.position;
        //绳子摇摆动作
        this.shakeAction = cc.repeatForever(cc.sequence(cc.rotateTo(3,60),cc.rotateTo(3,-60)));
        //绳子收回动作,绳子收回后执行摇摆动作
        this.returnAction = cc.sequence(cc.moveTo(3,this.startPos),cc.callFunc(function() {
                this.rope.runAction(this.shakeAction);
        }, this));
        //绳子左右摇摆
        this.rope.runAction(this.shakeAction);

        var self = this;
        this.node.on('touchstart',function(){
            self.rope.stopAllActions();
            //绳子伸长动作,根据角度动态计算
            self.rope.runAction(cc.moveBy(3,-200*Math.tan(Math.PI/180*this.rope.rotation),-200));
        },this);
        this.node.on('touchend',function(){
            self.rope.runAction(self.returnAction);
        },this);
    },

    // called every frame
    update: function (dt) {

    },
});

点击绳子伸出,松开绳子收回,效果如下:
这里写图片描述

现在我们就有挖矿工具了,但是坑里现在什么都没有,之后会在里面增加宝石,会用到Creator1.1支持的碰撞检测系统,有兴趣的朋友关注一下哈

3
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:167445次
    • 积分:2398
    • 等级:
    • 排名:第17407名
    • 原创:71篇
    • 转载:8篇
    • 译文:0篇
    • 评论:170条
    最新评论