CocosCreator之基本概念
游戏开发和我们平时前端开发有很⼤的区别,虽然都是运⾏在浏览器中的,但是在开发过程中的也会有⾃⼰⼀些专属名词,特别是每个框架都会⾃⼰给⾃⼰创造出很多专属名词,因此为了让我们后⾯开发过程中理解和沟通顺畅,我先把⾥⾯的⼀些名词给⼤家简单说⼀下,可能会有⼀些我的理解错误,⼤家如果觉得有问题⼀定要⼤声的给我指出来,多谢了
先提前声明⼀下:这⾥讲的名词是 Cocos Creator ⾥⾯的,可能和其他框架有区别。
先说⼀下最关键的三个概念:场景、节点、组件。
这三者的关系是:场景中添加节点,节点中添加组件,场景 > 节点 > 组件。
场景
场景在游戏中是⾮常重要的⼀个概念,必须先有场景,才能往场景⾥⾯放节点,不然节点都没有地⽅放。类似你需要做⼀个HTML页⾯,你必须要有.html⽂件,才能在⾥⾯添加HTML标签。
⼀个游戏可以有多个场景,例如:加载场景、登录场景、选择游戏类型场景、选择英雄场景、开始游戏场景......如果看成⽹页就是:登录界⾯、选择模块页⾯、管理界⾯、增删改查界⾯......并且场景和⽹页⼀样,不同的场景之间也可以跳转切换,在Cocos Creator⾥⾯切换场景有两种⽅式:
cc.director.loadScene("场景名"); // 加载场景,加载完成后⾃动运⾏
cc.director.runScene("场景名"); // 运⾏场景
在Cocos Creator中,场景是⼀个.fire⽂件。
节点
在Cocos Creator⾥⾯游戏就是由各种节点组成的。动画也是操作节点的各个属性:x、y、scale、因此节点在Cocos Creator中处处可见,⾮常重要。你可以把节点看成是HTML中的标签,HTML ⽂件就是各种标签堆积起来的,Cocos Creator也是由各种节点堆积起来的。
在Cocos Creator中,有很多不同类型的节点:
空节点
空节点没有特殊的内容,可以⽤来做⽗级,可以往上⾯添加任何组件。类似HTML中的div标签。
渲染节点
渲染节点主要是⽤来显⽰资源:图⽚、⽂字、地图...类似HTML中的img、p、
Sprite(精灵)
Sprite(精灵)⽤来显⽰图⽚,⽀持jpeg、png、就是不⽀持gif,这个⽐较坑爹。
Sprite(单⾊)
Sprite(单⾊)主要⽤来是显⽰单⼀颜⾊,可以⽤来做遮罩层或者颜⾊块。
Label(⽂字)
Label(⽂字)⽤来显⽰⽂字,可以控制⽂字⼤⼩、换⾏、是否⾃动截取、⾏⾼...
RichText(富⽂本)
RichText(富⽂本)可以通过 BBCode 标签来设置⽂字的样式。⽬前⽀持的样式有:颜⾊(color)、字体⼤⼩(size)、字体描边(outline)、加粗(b)、斜体(i)、下划线(u)、换⾏(br)、图⽚(img)和点击事件(on),并且不同的 BBCode 标签⽀持相互嵌套。
ParticleSystem(粒⼦)
ParticleSystem(粒⼦)是⽤来读取粒⼦资源数据,并且对其进⾏⼀系列例如播放、暂停、销毁等操作。粒
⼦我们下⾯有介绍。
TiledMap(地图)
TiledMap(地图)⽤于在游戏中显⽰ TMX 格式的地图。
TiledTile(地图块)
TiledTile组件可以单独对某⼀个地图块进⾏操作。
UI节点
UI节点主要是⼀些布局节点、特定功能的 UI 组件...
Layout(布局)
Layout(布局) 是⼀种容器节点,容器能够开启⾃动布局功能,⾃动按照规范排列所有⼦物体,⽅便⽤户制作列表、翻页等功能。
Button(按钮)
Button(按钮)可以响应⽤户的点击操作,当⽤户点击 Button 时,Button ⾃⾝会有状态变化。另外,Button 还可以让⽤户在完成点击操作后响应⼀个⾃定义的⾏为。可以使⽤click事件。
Canvas(画布)
能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进⾏适当的缩放。场景中的 Canvas 同时只能有⼀个,建议所有 UI 和可渲染元素都设置为 Canvas 的⼦节点。
ScrollView(滚动视图)
ScrollView是⼀种带滚动功能的容器,它提供⼀种⽅式可以在有限的显⽰区域内浏览更多的内容。如果有需要滚动条的内容,就可以放到这⾥⾯显⽰。
Slider(滑动器)
Slider是⼀个滑动器组件。
PageView(页⾯视图)
PageView(页⾯视图) 是⼀种页⾯视图容器。可以实现分页或者幻灯⽚效果...
ProgressBar(进度条)
ProgressBar(进度条)经常被⽤于在游戏中显⽰某个操作的进度。
Toggle(复选按钮)
Toggle(复选按钮) 是⼀个CheckBox,当它和 ToggleContainer ⼀起使⽤的时候,可以变成 Radio。
ToggleContainer(单选按钮)
ToggleContainer不是⼀个可见的 UI 组件,它可以⽤来修改⼀组 Toggle 组件的⾏为。当⼀组 Toggle 属于同⼀个 ToggleContainer 的时候,任何时候只能有⼀个 Toggle 处于选中状态。
ToggleGroup(旧版单选按钮)
EditBox(输⼊框)
EditBox是⼀种⽂本输⼊组件,该组件让你可以轻松获取⽤户输⼊的⽂本。
VideoPlayer(播放器)
VideoPlayer是⼀种视频播放组件,可通过该组件播放本地和远程视频。
WebView(⽹页视图)
WebView是⼀种显⽰⽹页的组件,该组件让你可以在游戏⾥⾯集成⼀个⼩的浏览器。由于不同平台对于 WebView 组件的授权、API、控制⽅式都不同,还没有形成统⼀的标准,所以⽬前只⽀持 Web、iOS 和 Android 平台。
3D
我⽤的⽐较少就不讲了
3D节点
cocos creator面试题3D Stage
3D Particle
Box(长⽅体)
Capsule(胶囊)
Cone(圆锥体)
Cylinder(圆柱体)
Plane(平台)
Quad(⽅形⾯⽚)
Sphere(球体)
Torus(圆环⾯)
摄像机
摄像机就像我们的眼睛,摄像机⾛到哪⾥就看到哪⾥,如果碰到很⼤的地图,我们就可以通过移动摄像机来查看地图。
2D 摄像机
查看x、y轴
3D 摄像机
查看x、y、z轴
灯光
主要⽤在 3D 游戏中,⽤来处理光线问题。
灯光
Directional
Spot
Point
Ambient
组件
上⾯我们讲了节点,组件的作⽤就是赋予节点特殊能⼒。
⽐如我们希望给节点添加图⽚,我们就需要在节点上加上Sprite组件,如果你希望给节点添加⽂字,就需要给节点添加Label组件。
到这⾥你是不是有点奇怪了,为啥上⾯的节点中有Sprite节点和Label节点,⽽组件⾥⾯也有Sprite组件和Label组件?
其实上⾯的Sprite节点就是已经添加了Sprite组件的节点,可以理解成是已经封装好的节点直接给我们使⽤,我们不需要⾃⼰来添加组件。
并且,我们可以在⼀个节点上添加 N 个组件。但是要注意的是,同类型的组件在节点中只能有⼀个,例如:你如果绑定了Sprite组件,就不能绑定Label组件,因为他们都属于渲染组件,同样的 UI组件也不能同时绑定。
⼩结
看了上⾯的内容⼤家应该能了解到了⼀些基本的知识:
场景最⼤、节点次之、组件最⼩;
游戏中可以⽤多个场景,场景之间可以切换;
场景中可以有多个节点;
节点中可以有多个组件;
⼀个节点上不能绑定同样类型的组件;
下⾯我们开始讲游戏中的名词
精灵
精灵在很多游戏框架中都有,基本上属于游戏的专属名词,其实就是⽤来显⽰图像的。
图集
图集(Atlas)也成为Sprite Sheet,是游戏开发中常见的⼀种美术资源,图集是通过专门的⼯具将多张图⽚合并成⼀张⼤图。类似CSS中的CSS Sprite。
不同的游戏框架⽤到的图集⽂件格式都不同:
Cocos Creator⾥⾯图集⽂件格式是.plist;
Phaser⾥⾯可以⽤.png和.json;
⽩鹭⾥⾯⽤到的是.png和.json;
不同的框架可能图集格式不同,可能json的数据结构不同,所以我们要根据不同的框架采⽤不同的图集,并且框架的图集互相之间不能兼容使⽤。
每⼀个框架都有⾃⼰的图集⽣成⼯具,并且我们可以⽤通⽤⼯具帮我们解决⽣成图集,例如:
SpriteFrame
所有的动画都是由⼀张⼀张的图⽚组成的,然后按照⼀定频率来切换这些图⽚达到动画的效果,游戏⾥⾯也是⼀样的,⼈物的跑动以及攻击都是由不同的图⽚切换过来的。
在游戏中,我们每⼀帧都是存放在图集⾥⾯的,然后根据动画需要到图集⾥⾯取获取对应的帧图⽚,在Cocos Creator⾥⾯每⼀帧都是存放在SpriteFrame⾥⾯,就是说获取到帧图⽚后然后将图⽚放到SpriteFrame⾥⾯。
Prefab(预制)
在Cocos Creator中存在⼀个资源是Prefab(预制),它是预先配置好的游戏对象。它是将创建好的节点放到资源管理中。可以看成是我们写的可重⽤的HTML结构。
Prefab(预制)创建的⽅式就是将层级管理器中的节点拖到下⾯的资源管理器中,就变成Prefab(预制)了。
Prefab(预制)可以⼿动更新,也可以⾃动更新。
如果是⼿动更新就是每次更新了节点就需要在对应的Prefab(预制)中更新⼀下;
如果⾃动更新就是更新节点后Prefab(预制)就会⾃动更新。
但是,如果你把Prefab(预制)对应的节点删掉了,就需要双击Prefab(预制)进去来修改。如果需要添加已有的节点,可以到菜单栏中的节点中的关联节点到预制,将已有的节点放到Prefab(预制)中。
Prefab(预制)⼀般来说应⽤的场景就是动态⽣成节点,例如动态列表、动态图⽚列表...
粒⼦
粒⼦在所有游戏中都有,⼀般应⽤的场景就是例如:⽕焰、彗星的尾巴、攻击效果...它对性能要求很⾼,⼀般我们创建的⽅式就是在将粒⼦的.plist⽂件拖到粒⼦系统(ParticleSystem)的File字段中。
最后我们讲⼀下游戏中的各种系统:
动画系统
在Cocos Creator中有⼀套很⽜逼的动画系统。并且是可视化界⾯的,我们可以在⾥⾯创建动画让节点动
起来。
设置关键帧,然后设置需要动的属性,多设置⼏个关键帧,就可以看到节点动起来了。
在属性列表可以设置多个属性变化。
我们还可以在动画过程中添加事件,就是动到哪⾥的时候执⾏事件。
碰撞系统
我们可以对⼀个节点添加碰撞组件,碰撞组件分了很三种,⼀种是矩形碰撞,⼀种是圆形碰撞,⼀种是⾃定义碰撞区域。
矩形碰撞就是说按照矩形形状来产⽣碰撞回调
圆形碰撞就是以节点中⼼为原型,然后设置圆的半径,就设置了碰撞区域。
⾃定义碰撞区域就是⾃⼰定义碰撞的形状和区域。
碰撞需要设置Group,碰撞之后有三个回调:当碰撞产⽣的时候调⽤ onCollisionEnter、当碰撞产⽣后,碰撞结束前的情况下,每次计算碰撞结果后调⽤ onCollisionStay、当碰撞结束后调⽤ onCollisionExit。
在使⽤碰撞检测前,需要将碰撞检测开启:
var manager = CollisionManager();
物理系统
在游戏⾥⾯最重要的东西就是这个物理系统,因为有了物理系统就可以在游戏中模拟真实世界中的环境,⽐如:重⼒加速度、⽔平加速度、物理碰撞...
如果需要开启了物理系统,需要将节点添加⼀个刚体,才能去使⽤物理配置,因为在Cocos Creator中刚体是组成物理世界的基本对象,你可以将刚体想象成⼀个你不能看到(绘制)也不能摸到(碰撞)的带有属性的物体。
在物理系统中,有⼀套物理碰撞组件,物理碰撞组件继承⾃碰撞组件,因此编辑和设置物理碰撞组件的⽅法和编辑碰撞组件是基本⼀致
的。
在物理碰撞组件中,也有碰撞回调:
// 只在两个碰撞体开始接触时被调⽤⼀次
onBeginContact: function (contact, selfCollider, otherCollider) {
},
// 只在两个碰撞体结束接触时被调⽤⼀次
onEndContact: function (contact, selfCollider, otherCollider) {
},
// 每次将要处理碰撞体接触逻辑时被调⽤
onPreSolve: function (contact, selfCollider, otherCollider) {
},
// 每次处理完碰撞体接触逻辑时被调⽤
onPostSolve: function (contact, selfCollider, otherCollider) {
}
结语
好了,基本上游戏中的⼀些基本概念都介绍完了,⼤家如果有不清楚的可以给我留⾔,我肯定是知⽆不⾔⾔⽆不尽,如果我写的有问题,也请⼤家给我留⾔,我⼀定及时更改。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论