CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本
首页 > CocosCreator > 《极限跳跃》    作者:闭眼就天黑   2016年5月29日 12:51 星期日   热度:29805°   百度已收录  
时间:2016-5-29 12:51   热度:29805° 

CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本


前面简单的实现了主界面的UI设置,现在我们开始制作游戏的控制脚本。

在资源管理器的Script文件夹中,点击右键新建javascript文件,命名为GAME。

双击打开GAME脚本,在properties: 中添加属性代码。

//GAME.js

cc.Class({
    extends: cc.Component,
    properties: {
    
    // player 节点,用于获取主角弹跳的高度,和控制主角行动开关
        player: {
            default: null,
            type: cc.Node
        },
        // bgsprite1 节点,用于背景移动
        bgsprite1: {
            default: null,
            type: cc.Node
        },
        // bgsprite2 节点,用于背景移动
        bgsprite2: {
            default: null,
            type: cc.Node
        },
        // score label 的引用
        scoreDisplay: {
            default: null,
            type: cc.Label
        },
      },

保存好后,我们双击MainScene打开场景,点击Canvas,在右侧的属性检查器最底部,点击[添加组件]=》[添加用户脚本组件]然后选择我们刚刚创建的脚本GAME.js。

添加好后就可以在属性检查器看到我们的属性组件来,然后我们把场景里的节点拖进对应的属性框即可实现节点绑定。不懂得可以多看看官方文档。

QQ20160529-12@2x.png

这样我门就可以在GAME脚本里来操作节点了。

二、创建HeroPlayer脚本用来操作玩家主角

//HeroPlayer.js

cc.Class({
    extends: cc.Component,
    properties: {
        //主角跳跃高度
        jumpHeight: 0,
        //主角跳跃持续时间
        jumpTimes: 0,
        //掉落速度
        maxMoveSpeed: 0,
    },
    //跳跃
    setJumpUpAction: function(){
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpTimes, cc.p(0, this.jumpHeight));
        //jumpUp.reverse();
        return jumpUp;
    },
    //掉落
    setJumpDownAction: function(){
        //下落
        var jumpDown = cc.moveBy(this.jumpTimes, cc.p(0, - this.maxMoveSpeed));
        return jumpDown;
    },
    setJumpRunAction: function(){
        // 初始化跳跃动作
        this.jumpAction = this.setJumpUpAction();
        //掉落动作
        this.maxMoveSpeed = this.setJumpDownAction();
        //包装动作
        var seq = cc.sequence(this.jumpAction,this.maxMoveSpeed);
        this.node.runAction(seq);
    },
    //玩家不操作时,角色进行下坠
    heroDownMove: function(){
        //下落
        var heroDown = cc.moveBy(0.8, cc.p(0, - 5));
        return heroDown;
    },
    // use this for initialization
    onLoad: function () {
       
        this.setJumpRunAction();
        
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
        this.node.runAction(this.heroDownMove());//精灵移动
    }
    
    
});

角色有2种状态,一种是玩家点击屏幕会实现角色的跳跃,第二种就是角色会受到引力会自动下落。我们在update来实现自动下落。添加好方法后,我门在层级管理器中点击hero节点。然后在右侧属性检查器中绑定脚本。

QQ20160529-13@2x.png

我门可以在里面初始化值。跳跃高度值,跳跃持续时间,掉落速度等。

脚本里主要实现了跳跃动作,掉落动作等。

然后回到我们的游戏主脚本也就是GAME脚本。添加触摸事件监听,实现监听触摸来调用主角的跳跃动作。

首先在顶部添加脚本引用,然后创建事件监听的方法。

//GAME.js
var HeroPlayer = require("HeroPlayer");
//-----
//事件监听
    setEventControl: function(){
            var self = this;
        var hero = self.player.getComponent(HeroPlayer);//角色绑定控件
     
       cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
              // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没
            onTouchBegan: function (touch, event) {
                    //实现 onTouchBegan 事件回调函数
                var target = event.getCurrentTarget();
                    // 获取事件所绑定的 target
                
             var locationInNode = target.convertToNodeSpace(touch.getLocation());
             cc.log("当前点击坐标"+locationInNode);
                
                hero.node.runAction(hero.setJumpUpAction());//精灵移动
                //cc.log("跳跃:--------");
                
                
                
                return true;
            },
            onTouchMoved: function (touch, event) {            // 触摸移动时触发
                
            },
            onTouchEnded: function (touch, event) {            // 点击事件结束处理
               
                //  cc.log("跳跃后角色坐标:" + self.player.getPosition() );
            }
        
        }, self.node)
    },

然后在onload方法实现初始化调用。

 onLoad: function () {
        //触摸监听
        this.setEventControl();
        // 初始化计分
        this.score = 0;
        
    },

我们可以来运行下,看下效果。

QQ20160529-14@2x.png



二维码加载中...
本文作者:闭眼就天黑      文章标题: CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本
本文地址:https://www.byjth.com/jixiantiaoyue/69.html
版权声明:若无注明,本文皆为“闭眼就天黑专栏_技术博客_个人学习总结”原创,转载请保留文章出处。
相关文章

版权所有:《闭眼就天黑专栏_技术博客_个人学习总结》 => 《CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本
本文地址:https://www.byjth.com/jixiantiaoyue/69.html
除非注明,文章均为 《闭眼就天黑专栏_技术博客_个人学习总结》 原创,欢迎转载!转载请注明本文地址,谢谢。

为什么我的背景图不变呢?
我为什么一直预览卡在了加载页面,官方星星也是预览卡。谢谢大大,解决一下下
@wcwrose:卡在加载界面,肯定是有代码出错了
非常感谢,你的笔记给了我很大帮助
@GYQ:之前写的了,刚接触creator 现在在写就不是这样了,思路更清晰了
另外,给动作加上缓动,跳跃会自然一点,不那么僵硬了。var jumpUp = cc.moveBy(this.jumpTime,  0, this.jumpHeight).easing(cc.easeQuadraticActionOut())。还是感谢楼主分享
@(⊙o⊙)…:资源放到第一篇
自由下坠的那个action写到update里不好吧。每一帧都会生成一个新动作,这样会有几十个动作吧?我觉得把他包装到setJumpRunAction的那个sequence里比较好。

返回顶部    首页    手机版本    版权所有:闭眼就天黑专栏_技术博客_个人学习总结
    站长: 闭眼就天黑    搜索cocos2dx主题 技术支持:闭眼就天黑   皖ICP备14007736号-1  

皖公网安备 34132102000107号

   sitemap