美文网首页
Cocos Creator 从零学习 一

Cocos Creator 从零学习 一

作者: linanwx | 来源:发表于2017-06-27 16:31 被阅读0次

前言

尽管知乎上对Cocos2dx成见很大,但是徘徊于纠结用什么游戏引擎不如都试试。况且这个软件是国人开发的,学习起来应该不算困难。

虽然没有学过JavaScript,但是似乎也可以边查边写吧。JavaScript的教程: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

Cocos creator目前版本为1.5.1,官网有一份很详细的手册,网址为 http://www.cocos.com/docs/creator/ 。这篇文章是该快速上手这一章的精简版,并且对游戏性进行了提升。

知乎网友表情.png

安装

windows下面的安装是没有任何问题的。mac下的安装,需要注意一下。
在官网下载安装包之后,拖动到applications中之后,打开会提示该应用是未被信任的开发者。此时,打开系统偏好设置中的安全性与隐私中的通用,会看到打开的按钮,通过此方式打开之后,不再进行提醒了。

快速开始

dashboard

从dashboard开始新建项目,或者打开项目。根据教程中关于快速上手的部分,我们从这个地址可以下载到一个初始工程项目 下载初始项目
或者点击这里下载 https://github.com/cocos-creator/tutorial-first-game/releases/download/v1.2/start_project.zip

这个快速上手最终做出的游戏效果是这样的: http://fbdemos.avosapps.com/star-catcher/
这个游戏有点类似于接金币这样的游戏,但是更加困难,游戏的学习曲线非常的大,由于这个小怪物的水平加速度难以驾驭以及上下蹦跳的关系,几乎很难已去接到五角星,而且也没有什么剧情。我们最好把他改的好玩一点吧。

打开这个项目,我们先学习一下界面。左下角是资源面板,在初始项目中,已经建立了一个工程目录,这里有最基本的资源,已经目录组织。assets的意思是资产,在这个总目录下面,有三个子目录,包含有字体,音频,与图片资源。

创建场景

场景是至关重要的,因为场景包含了游戏脚本,而场景在游戏开始的时候会自动加载。在资源面板中的assets下点击加号创建一个场景,重命名为game,双击打开。

屏幕快照 2017-06-20 上午11.01.53.png

左上角的层级管理器显示的是当前的场景中节点之间的关系。
在这个game场景中,只有一个根节点canvas(画布),现在这个节点上是空的,意味着什么都不会加载。

点击根结点在右侧数据面板中,我们可以设置根节点的分辨率。分辨率的高度设置为自适应,总为960x640,和iPhone第一代长宽比一致,推测这个分辨率应该是dp而不是pixel吧。

场景图像

将资源background拖拽到canvas上,使得background成为canvas的一个子节点,注意不要将background变成另一个根节点。
使用cmd+s来保存刚刚的变动。
选中场景中的background图片,然后,在左上角找到变换工具的第四个按钮,分别是平移,旋转,缩放,矩形变换。选中矩形变换,将background变换为一个能覆盖场景的大小,如下图所示。

场景图像

上述步骤也可以直接对background的属性进行设置,设置位置为0,0,宽高为1600和800就行。

用同样的方法添加地面。
用同样的方法插入小怪物,并且重命名为player。图片的默认锚点为中心位置,这里将锚点anchor的y设置为0。

创建脚步

接下来出现了惊人的一幕,教程居然说不会编程也没关系,你可以交给你的程序员小伙伴来解决,果然是我现在只差一个程序员了。

在下图中资源的player的位置建立一个js脚本文件,并打开。


脚本

在properties中插入以下内容,这部分是小怪物的物理属性

        jumpHeight:0,
        jumpDuration:0,
        maxMoveSpeed:0,
        accel:0,

选中小怪物图片,在属性框中找到添加组件,把player脚本添加到player图片上,并且设置好相关参数。

参数设置

完善脚本

我们在脚本中继续加入其他功能。首先是跳跃的动作。

在properties下面加入这一段

    setJumpAction: function(){
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0,this.jumpHeight)).easing(cc.easeQuadraticActionOut());
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0,-this.jumpHeight)).easing(cc.easeQuadraticActionIn());
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },

moveBy是官方的API,在官方API中查询一下该API的使用,第一个参数是移动的距离,第二个参数是移动的位置。很显然是向上移动了一段距离。后面的easing是生成缓动运动,生成的对象是easeQuadraticActionIn和Out,这两个是二次曲线。原来的教程中是三次曲线,这个和真实世界中的物理运动差的太多了。

在onload方法中加入下面这段代码,启动动画。

    onLoad: function () {
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

现在点击播放按钮刻可以查看初始的效果。

控制角色

为主角加上移动的控制。
在setJumpAction下面继续添加方法。

    setInputControl: function(){
        var self = this;
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyPressed: function(keyCode, event){
                switch(keyCode){
                    case cc.KEY.a:
                        self.accLeft = true;
                        self.accRight = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = true;
                        self.accLeft = false;
                }
            },
            onKeyReleased: function(keyCode, event){
                switch(keyCode){
                    case cc.KEY.a:
                        self.accLeft = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = false;
                        break;
                }
            }
        }, self.node)
    },

更新onload和update代码

    onLoad: function () {
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
        
        this.accLeft = false;
        this.accRight = false;
        
        this.xSpeed = 0;
        
        this.setInputControl();
    },

    update: function(dt){
        if(this.accLeft){
            this.xSpeed -= this.accel * dt;
        }
        else if(this.accRight){
            this.xSpeed += this.accel * dt;
        }
        if(this.xSpeed >0){
            this.xSpeed -= this.accel/2 * dt;
        }
        else if( this.xSpeed <0){
            this.xSpeed += this.accel/2 * dt;
        }
        if(Math.abs(this.xSpeed) > this.maxMoveSpeed){
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }
        
        this.node.x += this.xSpeed * dt;
    },

第一个代码添加了个监听器,按键变动的时候改变accLeft和accRight的值。启动时打开监听,然后,在每一帧需要更新的时候,计算怪物的位置。

增加五角星

添加Game脚本到assets/scripts文件夹下,双击打开脚本,加入以下代码

cc.Class({
    extends: cc.Component,

    properties: {
        // 这个属性引用了星星预制资源
        starPrefab: {
            default: null,
            type: cc.Prefab
        },
        // 星星产生后消失时间的随机范围
        maxStarDuration: 0,
        minStarDuration: 0,
        // 地面节点,用于确定星星生成的高度
        ground: {
            default: null,
            type: cc.Node
        },
        // player 节点,用于获取主角弹跳的高度,和控制主角行动开关
        player: {
            default: null,
            type: cc.Node
        },
        scoreDisplay: {
            default: null,
            type: cc.Label
        }
    },

    onLoad: function () {
        // 获取地平面的 y 轴坐标
        this.groundY = this.ground.y + this.ground.height/2;
        // 生成一个新的星星
        this.spawnNewStar();
        this.score = 0;
    },
    
    gainScore: function () {
        this.score += 1;
        // 更新 scoreDisplay Label 的文字
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
    },

    spawnNewStar: function() {
        // 使用给定的模板在场景中生成一个新节点
        var newStar = cc.instantiate(this.starPrefab);
        // 将新增的节点添加到 Canvas 节点下面
        this.node.addChild(newStar);
        // 为星星设置一个随机位置
        newStar.setPosition(this.getNewStarPosition());
        newStar.getComponent('star').game = this;
    },

    getNewStarPosition: function () {
        var randX = 0;
        // 根据地平面位置和主角跳跃高度,随机得到一个星星的 y 坐标
        var randY = this.groundY + cc.random0To1() * this.player.getComponent('Player').jumpHeight + 50;
        // 根据屏幕宽度,随机得到一个星星 x 坐标
        var maxX = this.node.width/2;
        randX = cc.randomMinus1To1() * maxX;
        // 返回星星坐标
        return cc.p(randX, randY);
    },
    
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

从 资源管理器 中拖拽 assets/textures/star 资源到场景中,添加名叫 Star 的JavaScript脚本到assets/scripts/中,并关联脚本。
打开star脚本,添加如下代码

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        pickRadius:0,
    },

    // use this for initialization
    onLoad: function () {

    },
    
    getPlayerDistance: function () {
        // 根据 player 节点位置判断距离
        var playerPos = this.game.player.getPosition();
        // 根据两点位置计算两点之间距离
        var dist = cc.pDistance(this.node.position, playerPos);
        return dist;
    },

    onPicked: function() {
        // 当星星被收集时,调用 Game 脚本中的接口,生成一个新的星星
        this.game.spawnNewStar();
        this.game.gainScore();
        // 然后销毁当前星星节
        this.node.destroy();
        
    },
    
    update: function (dt) {
        // 每帧判断和主角之间的距离是否小于收集距离
        if (this.getPlayerDistance() < this.pickRadius) {
            // 调用收集行为
            this.onPicked();
            return;
        }
    },    
    
    

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

现在在star的属性中设置pickRadius为60。
从层级管理器中将star节点拖拽到资源管理器中的assets文件夹下,就生成了名叫star的 Prefab 资源。
从场景中删除star节点。
选中Canvas节点后,拖拽脚本到 属性检查器,从资源管理器中拖拽star Prefab 资源到Game组件的Star Prefab属性中,从层级编辑器中拖拽ground和Player 节点到组件中相同名字的属性上。

接下来再加入计分机制,和上面的过程十分的类似,这里就略去不详细写了,此时,测试一下游戏的效果,已经可以看到游戏大致效果。

如果你有任何问题,可以查看官方的上手的教程,也可以点击这里可以下载到此为止的工程:
链接: https://pan.baidu.com/s/1dFw3VSP 密码: 7vgu

官方在接下来继续进行了游戏的完善,不过我不打算继续完善下去了,接下来将关注对触摸屏的支持

效果

相关文章

网友评论

      本文标题:Cocos Creator 从零学习 一

      本文链接:https://www.haomeiwen.com/subject/lgfnqxtx.html