大神驾到|「大掌教」带你上车Cocos3D!

640?wx_fmt=png

大掌教,从事游戏开发多年,精通 Cocos/Unity 等游戏引擎,精通安卓/iOS/H5等多种平台开发,发表过多个开源项目和 100 多篇原创博文,经验丰富,技术精湛。

前言

Cocos Creator一直以来都是一个2D游戏引擎,并且致力于H5游戏开发一百年不动摇。很多同学不满足于开发2D游戏,想尽办法搞一些3D效果,比如自己接入three.js,手写opengl等,还有的使用2.5来假装3D。

终于,Cocos Creator V2.1.1在4.30号发布了,虽然官方比较谦虚,把2.1.1定义为2.5D。

但是我们要实事求是一点,这真的是个3D引擎,真3D时代开了。

我在写这篇文章之前,已经完整的撸了一遍最新版的V2.1.1,归纳新特性如下:

  • 3D场景编辑器,虽然还不够强大,但是已经可用,习惯之后还是可以用一用的

  • 3D摄像机,虽然简陋,但是基本功能有了

  • 基础光照系统,平行光,点光,聚光灯

  • 最通用的fbx格式文件作为3d模型,这样基本上unity和UE4的模型就可以直接拿来用

  • 材质系统已经粗具雏形,虽然还不够强大方便,但是已经可以满足一般需求了

  • 初步的shader系统,就是那个效果器Effect,有两个很基础的shader,冯氏shader和无光shader

工程介绍

V2.1.1最大的改变不是3D场景编辑器,也不是3D节点,而是工程结构。
新建一个工程,会莫名其妙多一个资源文件internal,跟我们以前熟悉的大为不同。

640?wx_fmt=png

多出来的这个internal是啥玩意啊,在新建的项目里面根本找不到这么一个文件或目录。


有很多同学有强迫症,把这个删掉,然后项目就打不开了,这也是新版本坑多的一贯尿性。


这个internal其实是引擎安装目录下面的一个文件夹,主要就是新增的材质和shader文件,我们在做3d场景的时候要用到,但是木有任何说明就给链接到了工程文件下,确实让人莫名其妙。


好了,不用管它,先留着,我们开始品尝3D。

导入工程

  1. 随便找个fbx模型,当然为了表现效果好一点,这个模型最好有配套的纹理贴图和骨骼动画。

  2. 在项目下新建一个文件夹,把fbx拖进去,Creator会解析这个文件

  3. 稍等片刻,fbx文件解析完之后在资源管理器下面就能看到这个fbx被解析成了一个有层级结构的东东

    640?wx_fmt=png

  4. 在场景编辑器添加一个空节点root,在属性栏把它点成3D节点,就是点那个3D字样

    640?wx_fmt=png

  5. root节点下添加灯光,平台,照相机,设置相关属性

  6. 把资源管理器里面的模型拖到root下,creator会自动把fbx的模型解析成一个3D节点

  7. 点开模型,找到材质,在属性面板设置Effect为builtin-unlit,这个shader是最高性能shader,不需要光照就能看见,也叫无光shader

  8. 开启漫反射贴图,把漫反射贴图拖到框内,点击应用按钮

    640?wx_fmt=png

  9. 点击层级管理器的3d模型节点,设置动画,把play onload 打上勾

上效果图

640?wx_fmt=gif

哈哈,是不是很带感,真3D哦~

640?wx_fmt=gif


下一篇将会讲更加牛逼的光照系统和冯氏shader

源码

关注「Cocos Creator研究笔记」公众号,回复【creator真3d】可以获取demo源码。

长按二维码

关注公众号

大掌教

640?wx_fmt=jpeg





640?wx_fmt=jpeg

  1. CreatorPrimer|飞机大战(一)

  2. CreatorPrimer|飞机大战(二)

  3. 麒麟子Cocos Creator v2.1.1试玩报告

  4. 贝塞尔曲线动作小工具

  5. Creator2.x摄像跟随实现RPG地图

  6. Cocos实现对ETC2的支持

  7. CreatorPrimer|组件编码心得(上)

  8. CreatorPrimer|组件编码心得(中)

  9. CreatorPrimer|组件编码心得(下)

  10. 2D MMO中角色动画的优化总结

640?wx_fmt=png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值