CocosCreator开发一个小游戏

频道:我们的头条 日期: 浏览:150

介绍

前阵子过新年,在家看小孩无法出去玩,所以就码起来了,心血来潮想做个依据物理引擎的小游戏,所以愉快地打开了 Cocos Creator。

  • Cocos Creator,首要用于视觉复原、主逻辑开发、跨端调试和编译。个人觉得这是超给力的游戏开发东西,把 component 的机制直接可视化,集成各种物理引擎、粒子引擎、UI 组件等功用,大大节省了游戏UI以及部分特效逻辑的研制本钱。但CocosCreator开发一个小游戏小游戏版其他编译速度仍是很慢啊。
  • Visual Stuido Code,用于代码开发。这好像是最近最盛行的代码编撰东西了,免费且安稳啊!
  • 微信开发者东西,用于微信私有功用开发,云开发,小游戏提审。比较前期的版别微信开发者东西的体会优化了许多,但在文件监听侧仍是有点问题,跟 Cocos Creator 的联动,常常会呈现 Cocos Creator 编译好文件,微信开发者东西会报错的问题。
  • Cool Edit Pro,音频资源裁切。
  • TexturePacker,sprite资源集主动构建。
  • Google Chrome,web版游戏调试。有些时分一些功用调优能够放在 chrome 上面,它有十分专业的调试东西。

从触及的 IDE 看出来,其实开发一个游戏需求统筹许多内容,尽管游戏供给的功用并不多,但实践研制时刻却不短,花了整个CocosCreator开发一个小游戏新年假期(WTF,分明就几天)实践上,游戏开发比较页面开发,我以为前者更难,它更像一门归纳技能,国际观构建、内容建造、美术构建深圳嫦娥姐姐、音效规划、程序算法等等,许多方面都需求涉猎,这儿面的每项内容都够我研究很长一段时刻了。题外话,请善待独立做游戏的人,他们都在以高负荷的作业whapK压力在研制和学习。(文章篇幅略长,想看鸡汤,不想看技能细节,可直接跳到最终)外行人的游长治上党梆子视频全剧戏策划

尽管本身策划才能很业余,但在着手开发前,再粗陋的策划过程仍是省不了的,预先策划有助于快速开发。

1.游戏的主线

早前料想的故事场景是开沙县小吃盘店网货车在林中运送木材,中心玩法很简略:把木箱子运到指定的区域。整个游戏依据仿真物理场景,仅有一点超现实的功用是用蓝墨水画的线条会被实体化,会成为物理磕碰体,玩家可借此树立桥梁、容器、障碍物等办法来帮忙转移。

2.内容建造的手法

而为了处理内容构建的问题,我为游戏供给了一个敞开的形式,那便是:玩家可自主创立关卡

这样的话,关卡是能动态新增的,任何人都能够随时随地在手机上去为本游戏构建关卡,我也能够脱离电脑很便利地为游戏规划初始关卡。

这需求我在游戏开发中应用到本来网页规划的组件化思想,要把游戏里或许会呈现的元素笼统为通用组件,然后构建一个修正形式,让玩家拖动放置,从而规划出不同的关卡。

3.虚拟钱银的换算机制

游戏引进了金币的概念,它是整个游戏国际里的通用钱银,现在构思中给金币赋予的作用有两个:a. 以 20 比 1 的办法兑换提示时机;b. 以 2000 比 1 的办法购买货车皮肤(暂未完成)

而金币的获取办法比较简略粗犷:报到、共享和看视频(还没到 1000 累计注册用户,所以没铺开功用)

Cocos Creator 开发经历

鉴于内容太多,总的开发逻辑就不细说了,这儿给一下开发过程中一些有用的经历。

关于布局

Cocos Creator 为本游戏中供给了两种有用布局组件:

1.Widget,这能让某个元素自适应到恣意方位。这是适当有用的控件了。使用办法十分简略,各种机型的自适应布局一会儿就被统筹了。

2.Layout,这能让游戏中的 Node 具有如网页 dom 一般的盛行布局特性。它供给了常用的捕俘拳全套教育视频三种流体布局办法:横向、纵向以及网格。该组件关于本游戏的控件容器特别适宜。

关于动画

Cocos Creator 供给的动画我的盲夫开发套件十分强悍。

这有两个点能够提一下:

1.动画界说,Cocos Creator 里为某个 Node 追加动画时,只需给它加 cc.Animation 组件,然后树立一个 animation-clip,针对它去可91bt视化修正动画的特点和帧状况,就能快速做出一个动画。

2.动画事情监听,Cocos Creator 的动画控件里有一个我觉得十分有用的功用,那便是能够为动画的某一帧界说自界说监听事情(该事情代码体可界说在 Node 对应的用户脚本组件中),例如物理的游戏里过关时会有个弹框动画,在动画播映恶灵国度有声小提到差不多的时分,会播映一个音效,使用的便是动画的自界说事情。

关于物理引擎

Cocos Creator 的物理引擎适当强悍,只需在程序初步履行:cc.director.getPhysicsManager(核工厂论坛).enabled = true;整个游戏国际就会进入物理监听状况,一切被界说成刚体(追加了 cc.RigidBody 组件)的 Node 将直接具有物理性质,经过追加 PhysicsCollider 控件可让 Node 具有指定热区的物理磕碰特性。

磕碰体有一个挺有用的办法,getAABB,这是获取磕碰体围住盒的办法,能够用其结合 rect 的 containsRect 办法来完成对某个矩形区域里是否包括某磕碰体的功用,在物理的游戏中箱子与方针区域的监听功用便是依托它来完成的:

详细代码://获取本身围住盒

var selfAABB = this.node.getComponent (cc.PhysicsPolygonCollider).
getAABB()

if (otherAABB.containsRect(selfAABB)) {

}

此外,物理引擎里还供给了一种比较有用的组件:关节组件。它能够界说一些常用的物理场景,比方本游戏里,轿车轮子上用的便是物理引擎的 WheelJoint 控件:

该控件能够模拟机车轮子的物理作用,让轮子跟某个刚体坚持必定间隔,并能自转。

其实除了这类型的关节组件外,官方还供给了许多其他关节组件,详细的用法能够参阅 Cocos Creator 的[官方开发文档]对了,还要提一下:

cc.director.getPhysicsManager()

这段代码能回来大局的物理办理目标,本游戏用了该目标下面的 2 个办法:

1.testPoint 办法,该办法能够检测某个坐标点下是否存在物理磕碰体,物理的游戏中在某个刚体上制止画线的功用便是依托它来完成的:

2.rayCast 办法,该办法能够获取指定动身点到结尾间射线所经过的刚体调集,物理的游戏CocosCreator开发一个小游戏中画线遇到刚体后制止持续的功CocosCreator开发一个小游戏能便是依托它来完成的:

这个办法的原生完成逻CocosCreator开发一个小游戏辑适当杂乱,各种几许算法什么的,横竖几许数学没学好的花CocosCreator开发一个小游戏叔假如要以原生办法完成,也只能牵强完成很挫的作用,但 Cocos Creator 直接就封装好供我们调用了,十分便利。

关于预制目标

预制目标是 Cocos Creator 中很重要的节点处理机制,它能够把某个节点像场景那样独自存为一个文件,然后在不同场景中引证,并经过:

cc.instantiate()

办法进行预制目标节点的仿制,这样能够完成节点逻辑的复用,用来做节点组件最适宜不过了。物理的人狗交游戏中"创造形式"下的一切地图元素其实便是依据武神海啸同一个预制目标。

不管是"创造形式"仍是“闯关形式”里的地图元素的根底数据模型均来自该预制目标,假如需求新增地图元素,只需修正这个预制目标即可大局收效,能够说十分便利了。但我们要注意,预制目标对功用有必定的反向作用,详细能够翻翻 Cocos Creator 的论坛,能够说它是双刃剑。

关于 camera

传闻 2.0 版其他 Cocos Creator 对 camera 的逻辑进行了优化,我试用了一下真好用,现在 camera 是跟 group 绑定的,在游戏中能够界说多个 camera 来处理 node 的Color/Depth/Stencel,物情侣自拍理的游戏顶用 camera 完成了各种元素的层级处理(给 camera 界说 Depth,然后指定不同 group 到 cullingMask 中)

此外依托 camera,能够快速完成截图或放大镜的作用:

touchmove 回调办法中的相关代码:

var camera = this. assistCamera. getComponent ( cc.锥体卷板机Camera );
// 新建一个 RenderTexture,而且设置 camera 的 targetTexture 为新建的 RenderTexture,这样 camera 的内容将会烘托到新建忧思华光玉的 RenderTexture 中。
let texture = new cc.RenderTextur朱志芬e();
let gl = cc.game._r广元堂纤体梅enderContext;
// 假如截图内容中不包括 Mask 组件,能够不必传递第三个参数
texture.initWithSize(100, 100, gl.STENCIL_INDEX8);
camera.targetTexture = texture;
// 烘托一次摄像机,即更新一次内容到 RenderTexture 中
this.assistCamera.x = touchLoc.x
this.assistCamera.y = touchLoc.y
camera.render();
var sf = new cc.SpriteFrame(texture)
this.node.targetAssist. getComponent(cc.Sprite). spriteFrame = sf

想要了解 camera 的用法,还能研究一下官网供给的 demo,这儿就不打开细说了.

关于功用调优

讲真,究竟我也不是太深化地去了解过 Cocos Creator 的底层原理,所以功用优化这块就只能从自己这个项目来给点小技巧,以下略微讲讲:物理的游戏刚有初版的时分,功用特别糟糕,后来做了三项优化作业。

1.主动合图: 下降 DrawCall 是提高游戏烘托功率一个十分直接有用的办法,而两个 DrawCall 是否能够合并为一个 DrawCall 的一个十分重要的要素便是这两个 DrawCall 是否使用了同一张贴图,所以官方是主张合图的。 但我项目顶用了那么多碎图,这时分让我去合图,岂不搞死我!苦恼之际以外发现 Cocos Creator好湿 供给了一个强壮的功用“主动合图(Auto Atlas)”

不必不知道,一用吓一跳,这功用能够把当时目录以及子目录下一切的图片文件以指定的算法去合并成 sprite 图,而且主动更新原有 spriteFrame 的引证,一会儿就把悉数碎图合成大图来按需调用了。

网络恳求直接从几十个变成一两个。 但是....我发现 drawcall 也没下降多少。没花太多时刻去想为什么,这个办法我就先不重视了。

2.削减节点: 节点假如没来得及开释,那么必定会导致 drawcall 上升,往这个方向想,我就想到 cc.instantiate(),在物理的游戏里只需这个办法会主动去新增节点,那么只需发生的暂时节点及时毁掉就行,但发现其实在仿制完都调用了 removeFromParent() 办法,逻辑好像是对的。 但后来查了一下材料,本来 removeFromParent 办法履行后,节点并不会主动毁掉,真实能让它毁掉的是 node 的 destroy 办法。囧大了。应该换成 destroy。所以就大局查找 removeFromParent,逐个替换,drawcall 就顺畅降下来了。

3.优化代码逻辑: 除上述惯例手法外,针对自己的代码也需求做一下优化,本游戏的代码逻辑中最有或许优化的当地是“画线”部分:

  • 画线的首要逻辑是:当时场景 instantiate 一个用于画线的全屏尺度的CocosCreator开发一个小游戏预制目标
  • 监听节点上 touchmove,每次移动的时分对它上面的 cc.Graphics 组件进行 lineTo 的画线处理,一起存储每个移动点
  • 用一切搜集的移动点依据一个算法去构建 node 的物理磕碰区域

所以移动点越少越好,这样的话,优化的手法就有两个.

1.当时移动点与上一个移动点的直线间隔少于一个限定值,就以为当时移动点无效。(适当于强制移动点的间隔) 相应的判别代码很简略,使用 Cocos Creator 供给的向量求距的办法即可:

return lastPoint.sub(nowPoint).mag() >= 5;

2.“当时移动点跟上一个移动点的移动方向”假如跟“上一个移动点跟上上个移动点的移动方向”相同的话,那么上一个移动点即可毁掉不做记载。(适当于把直线部分的高韶青在我国遭受移动点压减为两端点) touchmove 回调中相应代码如下:

//取得添加向量

var addVe = thisPos.sub( thisPos.prevPos )

//假如有前一个添加变量

if(thisPos.prevPos.prevPos){
//获取上一个点的添加向量
var lastAddVe = thisPos.prevPos.sub(thisPos.prevPos.prevPos)
//假如两个添加向量持平,则这次的点替换前一个点
if(Math.abs( addVe.signAngle( cc.v2(1,0) ) - lastAddVe.signAngle( cc.v2(1,0)) )<0.1){
this.points[this.points.length-1]=thisPos
this.physicsLinePoints[this.physicsLinePoints.length-1]=thisPos
}else{
this.points.push(thisPos);
this.physicsLinePoints.push(thisPos);
}
}else{
this.points.push(thisPos);
this.physicsLinePoints.push(thisPos);
}

依托上述 3 种办法,我大酱饼妹概能把 drawcall 控制在 50 左右,但其实作用仍是能优化。 Cocos Creator 就功用优化来说,还供给了“节点池”和"动态合图"的优化办法,本游戏现在还没有应用上,未来或许能够试试。

热门
最新
推荐
标签