关闭

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

标签: CocosCreator黄金矿工教程实战
6151人阅读 评论(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
查看评论

【Cocos Creator 实战教程(2)】——天天酷跑(动画、动作相关)

转载请保留原文链接,个人公众号:xinshouit(新手程序员),欢迎关注 准备工作 把背景图拉长,很长很长的那种。。。。一会我们要让它滑动起来 背景动画为背景节点添加滚动动画 现在背景就循环滚动起来了(图是我后来截的,这步猴哥还没登场呢) 猴哥动画 子弹动画这里我们要给导弹加几个帧事...
  • potato47
  • potato47
  • 2016-05-02 12:18
  • 18337

【Cocos Creator实战教程(8)】——打砖块(物理引擎)

失踪人口回归 本篇教程要基于Cocos Creator1.5的物理引擎,编写一个简单的打砖块游戏,尽可能多讲一点,但现在已经快11点了,我12点要睡觉啊,好像又讲不了多少,这个世界啊,本来就是一个矛盾体。新建一个工程,取名叫做brick-breaker,brick是什么意思呢,就是砖块的意思,每次...
  • potato47
  • potato47
  • 2017-06-14 00:32
  • 3815

【CocosCreator入门教程(1)】——混个脸熟

本系列教程使用1.3以上版本 下载安装 http://www.cocos.com/download 安装过程中如果有小问题参考官方文档 http://www.cocos.com/docs/creator/getting-started/install.html 安装完后需要登陆,账号注...
  • potato47
  • potato47
  • 2016-10-26 21:27
  • 3579

【Cocos Creator实战教程(5)】——扫雷

还记得小时上微机课,老师什么都不会,讲了一会怎么开机关机后就让我们随便玩了,但是连网都没有啊,只能玩windows自带的游戏,最经典的当然要数扫雷了,先来回味一下最初版本的扫雷 后来windows更新换代,扫雷也换了一下皮肤,虽然大多数人可能再也没点开过扫雷那个游戏 现在我们就来山寨一个经典...
  • potato47
  • potato47
  • 2016-09-19 22:16
  • 3256

【COCOS CREATOR 系列教程之三】PREFAB讲解&CC项目如何多开与分享

还有几天就要过年了,今天Himi就要坐车回老家了,这里提前祝福各位新年快乐、家庭和睦、万事如意。进入主题,今天讲解下的小伙伴比较在意的几点问题:(当前使用的版本 0.7.1)         1. 关于Prefab的使用与概述   ...
  • xiaominghimi
  • xiaominghimi
  • 2016-02-05 13:32
  • 13112

【Cocos Creator 系列教程之一】CC尝鲜小总结及组件使用需注意的几点细节

本站文章均为 李华明Himi 原创,转载务必在明显处注明:(作者新浪微博: @李华明Himi ) 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos-creator/1936....
  • xiaominghimi
  • xiaominghimi
  • 2016-01-26 17:27
  • 19603

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

【Cocos Creator 】(千人群):  432818031上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍。所以希望童鞋们可以把我这两篇博文当成对组件、脚本两部分开发的整理与总结。后续的文章,Himi应该主要更...
  • xiaominghimi
  • xiaominghimi
  • 2016-02-01 17:50
  • 17931

【Cocos Creator 基础教程(其他)】——游戏素材资源获取方法

我们刚开始做游戏时大多数人都不能独立制作出想要的游戏资源,所以在没有商业用途的游戏里,我们可以用别人已经制作出来的游戏资源来山寨出一款自己的游戏,那么怎么获取这些游戏素材呢?1.Cocos官方资源商店http://store.cocos.com/ 虽然官方暂时不维护了,但里面的资源还是有很多的,而...
  • potato47
  • potato47
  • 2016-07-09 11:49
  • 6046

【Cocos Creator基础教程(组件篇)】——TiledMap(瓦片地图)

Tiled Map Editor:下载(window 64位汉化,包括下面用到的资源和工程源码): http://download.csdn.net/download/potato47/9516578
  • potato47
  • potato47
  • 2016-05-11 13:46
  • 12060

Cocos Creator教程 第一弹

本节源码下载: 链接: http://pan.baidu.com/s/1jIPYHOM  密码: 5zae 触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似,使用CocosCreator开发2d游戏变得更加便捷快速,之后半年利...
  • u011374880
  • u011374880
  • 2017-11-21 12:17
  • 380
    个人资料
    • 访问:202944次
    • 积分:2737
    • 等级:
    • 排名:第15554名
    • 原创:69篇
    • 转载:8篇
    • 译文:0篇
    • 评论:176条
    最新评论