CocosCreator之KUOKUO带你V2.1.0的3D尝鲜以及欧拉角和四元数简单使用

本次引擎2.1.0

编辑工具VSCode

啊哈,终于盼到了官方发布3D的这一天。这么鲜的事怎能自己独享?

来,我们一起开封CocosCreatorV2.1.0

嗯,,,熟悉的界面!

诶?人性化了,‘浏览’的位置终于变了!!!

啊哈!开封第一印象不错。

来,新建个项目。

让我们来找不同!!

嗯,找到了,第一个:

灰色变成了蓝色:

第二个:

边距变小了大约5像素的样子(我是有多无聊!!)

这是V2.0.5版本的:

V2.1.0的:

好了,让我们找找第三个:

颜色和字体大小换了!!!

emmm,还有一些色彩的调整。

界面上的找不同我们先告一段落吧!!!

干点正事,,比如来个白色背景,再来个红色方块。

嗯,找找节点的3D转化在哪?看到了。。。不过为啥是2.5D呢?

具有x,y,z三个自由度(数学中)就是3D。

嗯,看看官方说法,好吧,编辑器未来还要升级,我接受了!!!

行了,不讨论这个话题,我们试着改变节点属性看一看:

给y轴45度,嗯,效果还是不错的嘛!

为了让效果明显,我去换个图片。

emmm,不错。

建个脚本绑一下:

诶!换位置了,‘其他组件’的位置往上挪了!

嗯,更顺手了!

好了,我写个翻转动作吧!

嗯,这是y轴在不停的翻转的代码:

运行一下。

看看效果:

嗯,挺有感觉的,步入3D了。

但是。。。

原来Cocos在新版本中要求使用欧拉角!(可以用Vec3表示)

欧拉角记录了x,y,z三个轴上对应的旋转角度。

试一试:

cc.Class({
    extends: cc.Component,

    properties: {
        speed : 200,
    },

    start () {
        // 欧拉角可以用3维向量表示
        this.euler = new cc.Vec3(0 , 0 , 0);
    },

    update (dt) {
        this.euler.y += this.speed * dt;
        // 该节点的欧拉角
        this.node.eulerAngles = this.euler;
    },
});

嗯,两个人欢乐滴转着,还没警告!

既然欧拉角都弄了,我再弄弄四元数。

因为,在新版本中setRotation()和getRotation()还有一些其他的地方传参都需要用四元数;

也就是新引入的cc.Quat

什么是四元数呢??

我们知道欧拉角代表x,y,z三个轴上对应旋转角度。

但是,想一想,是不是在3维空间中,有参考点且静态,欧拉角才能使用?

如果不是呢?四元数是在(x,y,z)三个矢量分量基础上还加了一个w。一个表示位置的标量。

四元数 = (w,(x,y,z))

但是注意:四元数中的x,y,z是需要经过复杂的计算才能得到的,不是欧拉角上的。

//----------------

看不懂?没关系,在Cocos中提供了换算的方法。我就是简单提个概念。^_^

举个例子:

cc.Class({
    extends: cc.Component,

    properties: {
        speed : 200,
    },

    start () {
        // 欧拉角可以用3维向量表示
        this.euler = new cc.Vec3(0 , 0 , 0);
        // new一个四元数
        this.quat = new cc.Quat(0 , 0 , 0 , 0);
    },

    update (dt) {
        // 欧拉角y轴的角度变化
        this.euler.y += this.speed * dt;
        // 转换为四元数并设置
        this.node.setRotation(this.quat.fromEuler(this.euler));
    },
});

其中fromEuler()是四元数的一个方法,可以转化欧拉角为四元数。

效果是跟之前一样的:

之前没接触过3D的小伙伴们要加油补充知识喽!!!

精美的游戏在向我们招手哦!

啊!!!又发现一个更新点,之前的版本:

不关闭Vscode是不会弹出项目面板的,这回不用了,直接弹出来啦!

~~~

今天就说到这里吧!

O(∩_∩)O~~

猜你喜欢

转载自blog.csdn.net/kuokuo666/article/details/84636015
今日推荐