cocos creator游戏开发

2019-08-14 10:29:11来源:博客园 阅读 ()

1. 初来乍到

打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘。作为前端的你对这个文件是不是再熟悉不过了。是的,和你想象的一样,开发游戏中所有资源,脚本都会放置到该文件。

2. 初步探索

项目建立好以后,对各区域的功能大致了解下,作为前端的你,主要还是要迅速的掌握cc提供的各种NB的功能。所以,还得赶紧打开 [官网](https://docs.cocos.com/creator/manual/zh/) 快速浏览一遍。官网也写得很好,提供中文和英文,对于英文能力不好的伙伴来说,简直是不能太好了。是不是找到了当初学习Vue的感觉。作为前端的你,整天写了一堆业务控制,处理各种布局,各种兼容,对奇怪的css优先级搞得云里雾里的。所以是时候换一个更有意思开发场景,给自己做个游戏解闷多好

cc是一个跨平台框架,一端编译多端发布。想想前端的 mpvue taro uni-app,无不是解决此类问题,再加上gulp,webpack,再来一堆node_modules,啥less sass stylus.各种环境配置那是相当的复杂。所以业界流传,前端已经进入深水区,真的一点不假。 然而cc依然可以让你舒适的写JS或者TS ,并且没有繁杂的配置,一键搞定打包发布。

3. 小试牛刀

上边说了一大堆,其实并没有什么鸟用。在官网首页中,给开发者提供了个完整坑爹的游戏《摘星星》,如果打包到微信小游戏,需要横屏,不太友好。本着举一反三的求学态度,我利用此场景,换了一个游戏玩法。开发了自己第一款小游戏《坦克侠》,当然也很坑爹

游戏开发主要是确定游戏规则,我新改编的玩法就是在星空中随机生成不同数量的星星,并一直往下掉落,我的主角坦克必须在星星掉落前接住。丢失一颗星星生命减一,生命为0游戏结束。当然我们主角每收集一颗星星,根据当前的难度会添加一定的分数。累计到一定的分数,又可以给主角添加一点生命值

在官网 [下载初始项目](https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/start_project.zip) 下载一个基础项目,该项目中只有一些项目基本图片和声音。接下来,我们需要建立场景,制作预制资源,添加控制脚本,编译发布微信小游戏,[快速开始](https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html)

制作一个游戏场景,与官网不同的是,我将Canvas的Size属性,在属性检查器中设置为 288 x 512 ,并且勾选了 Fit Height以及 Fit Width 用以适应同的手机屏幕。然后拖动背景图片到层级管理器中,并在场景编辑器中设置背景Size属性,使其等于Canvas的Size属性。然后依次在层级管理器中新建三个Label控件,依次拖动到背景图片左上角和右上角,用以记录生命值,当前分数,以及最高分数。接着在场景中间添加一个Label控件和一个Button按钮用于显示游戏结束和开始游戏。在场景底部拖动放置我们的主角坦克。所以最新场景的效果应该是如下显示的那样

小程序码 场景预览 微信群

4. 一顿操作猛如虎

游戏场景设计,看似酷炫,无非就是拖拖拖。依稀找到了当年C#开发winform的感觉,随便搞整一下,一个界面就出来了。所以导致很多人开发winform,webform很简单,很傻瓜,其实不是的。重要的还是后边的业务逻辑,解决方案,这些都是超越语言之上的东西。所以cc的场景编辑,就不多说了,直接分析我们游戏实现逻辑。开始之前我们先初始一下typescript开发环境,操作如下图

 

typescript


依次点击安装vs code 扩展插件,添加 Typescript项目配置。接下来就要编写脚本了,所有还是有必要了解下cc脚本的生命周期

 

  1. onLoad 首次激活时触发,一般做一些初始化操作。对比Vue我觉得最合适的应该是beforeMount回调

  2. start 首次激活时触发,一般初始化一些中间状态的数据,改方法在onLoad之后,在第一次update之前,对比Vue自然应该是mounted回调

  3. update 该回调会频繁调用,每一帧调用一次。对比Vue应该是beforeUpdate回调,虽然他们性质不一样

  4. lateUpdate 该回调会频繁调用,也是每帧调用一次,对比Vue应该updated回调

  5. onDestroy 根据条件调用,当组件调用了自身的 destroy()方法,会触发此回调

  6. onEnable 根据条件调用, enabled 属性从 false 变为 true 或 active 属性从 false 变为 true 触发此回调

  7. onDisable 根据条件调用, enabled 属性从 true 变为 false 或active 属性从 true 变为 false触发此回调

4.1 让主角动起来

做过前端的你一定知道,要想拖动一个DIV,一定是在Body中监听鼠标的移动事件。在移动端一定是监听触摸移动事件。是的,在cc里边做游戏,希望一个组件动起来依然是这么操作的,那么cc里边是如何注册事件的呢?两个方式,一个在场景编辑器下角的属性中添加脚本里边的方法,另外一种就是直接在脚本里边添加。当然我推荐第二种。虽然IDE会帮我们生成很多代码,如果不自己写一遍,就永远不晓得数据流向。就像当年开发winform时,很多人拖动一个按钮控件,然后双击控件,IDE就自动帮你注册好了一个用户点击事件。殊不知,IDE是在xx.design.cs中通过代码替你注册好的。所以既然刚开始学,一定要了解清楚它的原理。

  • cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this) 注册一个系统事件 ,支持按键事件和重力感应事件

  • this.node.parent.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this) 在某个节点注册一个Node 支持的事件类型

所以,主角移动无非实在TouchMove时改自己的X/Y

// author:herbert qq:464884492
onTouchMove(e: cc.Event.EventTouch) {
let deltaX = e.getDeltaX(); //获取本次和上次移动的增量
let deltaY = e.getDeltaY();
//左移
if (deltaX < 0 && this.node.x <= this.leftMinX) return;
if (deltaX > 0 && this.node.x >= this.rightMaxX) return;
if (deltaY > 0 && this.node.y >= this.topMaxY) return;
if (deltaY < 0 && this.node.y <= this.bottomMinY) return;
this.node.x += deltaX;
this.node.y += deltaY;
}

4.2 生成坑爹的星星

在cc里边需要重复生成的对象,我们一般会制作成一个预制资源。然后在基本中通过代码实例化。何为预制资源,就权当它是一个模板吧。现在生成我们第一颗小星星

// author:herbert qq:464884492
buildOneStar() {
let star = cc.instantiate(this.starPrefab);
this.node.addChild(star);
return star;
}

是的,就是这么简单,有没有class.newInstance()的感觉,当然这个只是在场景的默认位置生成了一个星星而已。我们需要更多的信息,位置肯定也不是默认位置,所以还得继续码代码

// author:herbert qq:464884492
buildRandomStar() {
let tempX = 0;
let tempY = 0;
tempX = Math.floor(this.starMaxX - Math.random() * this.starMaxX);//生成一个不大于MaxX的坐标
tempY = Math.floor(this.starMaxY - Math.random() * this.starMaxY);
if (Math.random() < 0.5) tempX = tempX * -1;
let star = this.buildOneStar();
star.setPosition(tempX, tempY);
star.zIndex = this.tank.zIndex - 1;
star.name = "star";
star.getComponent("Star").index = this;
}

这样感觉好多了,可以生成很多星星了,不过,我们的星星也得往下掉才行,作为前端的你首先想到的是不是更新星星的Y值,是的,我就是这么做的。利用生命周期中start方法,定义一个从上往最小Y运动的动画。后来才了解到所有的游戏引擎都有物理特性,开启了自己就掉下来了。不过原理肯定还是改变y值。何况这么简单的游戏完全没必要使用

start() {
// 定义一个Action
let downAction = cc.moveTo(this.index.starFallSpeed, this.node.x, this.minY - 60);
downAction.easing(cc.easeSineOut());
this.node.runAction(downAction);
}

4.3 是时候接住星星了

只要是游戏少不了做碰撞检测,如果在CC中开启了物理引擎还好,直接跟星星和主角添加一个刚体就好了,不过我们没开启,那就自己来了。不过碰撞检测无非就是判断两个区域有没有重叠地方,简单判断就上下左右,左上右上左下右下八个点。不过我这里偷了个懒,直接判断星星和主角间向量的距离。

//author:herbert qq:464884492
...
let distance = this.node.position.sub(this.tank.getPosition()).mag();
if (distance < (this.tank.width / 2 - 5)) {
console.log("接住了");
}
...

4.4 来点刺激的

游戏嘛,总不能一成不变那多没意思,所以随着时间的推移我们的调整点难度。我这个游戏难度无非就一下两个方面

  1. 生成星星的速度加快

  2. 星星掉落的速度加快

//author:herbert qq:464884492
...
this.index.scoreNum += this.index.starScoreSpeed;
this.index.score.string = "得分:" + this.index.scoreNum;
// 降落速度加
if (Math.floor(this.index.scoreNum / 100) == this.index.starScoreSpeed - 4 && this.index.starFallSpeed > 1) {
this.index.starFallSpeed -= 0.2; //下降速度加快
if (this.index.starBuildTimeOut > 200) {
this.index.starBuildTimeOut -= 100; //生成速度加快
}
this.index.lifeNum += 1;
if (this.index.starScoreSpeed < 10) {
this.index.starScoreSpeed += 1;
}
}
cc.audioEngine.play(this.index.scoreClip, false, 0.2);
this.index.allStars.splice(this.index.allStars.indexOf(this.node), 1)
this.node.destroy();
...

4.5 是时候结束了

游戏嘛,也不能一直玩下去。不然多没挑战。自从调整游戏难度后我的最高分重来就没有超过4000.

//author:herbert qq:464884492
...
if (this.node.y <= this.minY) {
this.index.lifeNum -= 1;
this.index.life.string = "生命:" + this.index.lifeNum;
this.node.destroy();
this.index.allStars.splice(this.index.allStars.indexOf(this.node), 1)
if (this.index.lifeNum <= 0) {
this.index.gameOver.node.active = true;
this.index.btnPlay.node.active = true;
this.index.starIsRunning = false;
let storageValue = cc.sys.localStorage.getItem(this.index.HIGHSTORAGEKEY);
if (storageValue && parseInt(storageValue) > this.index.scoreNum) {
return;
}
cc.sys.localStorage.setItem(this.index.HIGHSTORAGEKEY, this.index.scoreNum);
this.index.highScore.string = "最高分:" + this.index.scoreNum;
}
}
...

5. 来点实际的

做技术嘛,大多都是 Talk is cheap,Show me your code.做点总结吧

    • 开源地址

    • 在基本中定义的属性,切记在编辑器中拖动绑定

    • 多看官网api,多开实例代码

    • 发布微信小游戏一定不要有英文,会导致审核不通过


原文链接:https://www.cnblogs.com/yfrs/p/ccgame.html
如有疑问请与原作者联系

标签:QPSphpYYHTTP文件

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:new Date,Date.parse()传值

下一篇:代码调试console对象的花式玩法