麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器

负一、​先说两句

本文索引是负一开头,那是因为这一小节是​最后加上来的。为了不牵一发动全身,就这样最好了。

写文章每次要自称的时候,麒麟子三个字打着太费劲,以后文章中,我就叫自己阿子吧​。

大家从今天开始,多习惯习惯。

零、效果展示 

麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第1张图片

这两天在研究Cocos Creator 3D骨骼动画部分,网上找了些模型。为了方便查看模型的各个动作,所以顺便写了这个模型&骨骼动画查看器。

项目包含了以下几个内容

1、QFW(qilinzi framework)框架最新版

2、天空盒设置、内置10款天空盒

3、第三人称摄相机控制器

4、一个主角模型以及配套的40个动画

拿到这套代码的小伙伴们,可以很容易地制作属于自己的DNF类ACT RPG,MMORPG等。

在线演示地址:http://showcase.ukylin.net/modelviewer/


一、资源与动画

麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第2张图片

如上图,@Cast @BattleStand等以@开头的FBX文件,就是我们模型的动画文件。每一个动画文件是独立的,且与模型文件是分离的。

这样做的好处是方便我们按需动态加载,并且美术在进行FBX导出的时候,可以更直观地管理这些动画文件。

这个套路是从Unity3D中发展出来的。已经被证明是非常适合的动画资源管理方式。

这样的管理方式,在Cocos Creator 3D中,还有一个更大的好处,就是H5项目可以延迟加载动画。比如一些NPC或者怪物的不常用动画,就可以等到使用的时候才加载。(主角为了体验感,一般还是预加载完了的)

 

Cocos Creator 3D骨骼动画继承自动画基类,因此它的使用方式和普通动画没有区别。只需要将骨骼动画拖到SkeletalAnimationComponent中即可。

麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第3张图片

播放代码超级简单,示例如下:

let animState = this._anim.getAnimationState(animName);
animState.repeatCount = isLoop ? Infinity : 1;
this._anim.play(animName);

注:repeatCount的值 Infinity表示无限循环,其余值表示要播多少次。

二、阴影

Cosos Creator 3D在1.2以前,只支持了平面阴影(Planar Shadow),正好适合我们项目这个只有一个Plane的场景。开启阴影只需要设置两个地方

1、场景属性里面,planarShodows开关打开

2、对应的Mesh节点的ModelComponent的ShadowCastingMode设置为ON

麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第4张图片麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第5张图片

三、天空盒设置

麒麟子Cocos Creator 3D研究笔记五:模型&骨骼动画查看器_第6张图片

为了查看不同环境下的效果,阿子把天空盒设置功能也放进来了。配合主界面上的 UseSkybox和UseIBL开关,可以很好地调节场景氛围。

 四、第三人称摄相机

第三人称摄相机是角色类3D游戏必备的功能,Cocos Creator 3D的CameraComponent并未提供,所以花了时间写了一下。主要用到的就是向量转角度,角度转向量相关操作。

按住鼠标右键拖拽,可旋转摄相机

鼠标滚轮可拉进拉远摄相机

 

五、QFW(qilinzi framework)框架更新

随着不断的功能学习,QFW也进行了不少升级,增加了许多便利性。这个会在后面专门用一篇文章来解释。

六、总结

 Cocos Creator 3D在骨骼动画部分,已经做得比较完善。基于顶点纹理的骨骼蒙皮也可以很轻松地突破寄存器限制和实现Instancing。只是动画融合部分还未添加进来,导致角色动作衔接不够流畅。不过这个功能应该马上就会出了,不会等太久。

 

 

你可能感兴趣的:(麒麟子Cocos,Creator,3D研究笔记,Cocos,Creator,3D,Cocos,Creator,3D游戏开发,Unity3D,UE4,游戏源码)