cocos creator 3D | 蚂蚁庄园运动会星星球

摘要:
上一篇文章写了一个简易版的蚂蚁庄园登山赛,有小伙伴留言说想要看星星球的,那么就写起来吧!最终在论坛上找到一个raycast解决方法。start(){systemEvent.on;}private_ray=newgeometry.ray();privateonClickBall{constpos=touch.getLocation();this.camera.screenPointToRay;constresult:{node:Node}[]=this.node_ball_click.scene.renderScene['raycast'];if{//点击到小球处理逻辑}}其中result返回的是一个包含node节点的结果数组。需要注意的是动画编辑器里的rotation属性,与节点里的属性面板的rotation对应不上,而应该采用eulerAngles的属性。tweenUtil.stop().to.to.start();小结完成这个小功能主要遇到的问题是3d节点点击事件,和动画系统的rotation的问题。

上一篇文章写了一个简易版的蚂蚁庄园登山赛,有小伙伴留言说想要看星星球的,那么就写起来吧!

file

效果预览

file

配置环境 cocos creator 3d 1.0.0

小球点击

3d里节点无法用 cc.Node.EventType.TOUCH_START 监听。最终在论坛上找到一个 raycast 解决方法。参考代码如下。

start() {
    systemEvent.on(SystemEventType.TOUCH_START, this.onClickBall, this);
}
private _ray = new geometry.ray();
private onClickBall(touch: Touch, event: EventTouch) {
    const pos = touch.getLocation();
    this.camera.screenPointToRay(pos.x, pos.y, this._ray);
    const result: { node: Node }[] = this.node_ball_click.scene.renderScene['raycast'](this._ray);
    if (result.some((i) => {
        if (i.node === this.node_ball_click) {
            return true;
        }
    })) {
        //点击到小球处理逻辑
    }
}

其中 result 返回的是一个包含node节点的结果数组。获取后需要判断一下是否为小球节点。

据说这个方案消耗性能比较大,后续应该会有更好的解决方案。

file

动画系统

采用了编辑器的动画编辑器,对需要部分增加动画效果。由于我的资源是网上找的,那只鸡有些身体部分切割的不好,所以小鸡的动画比较差一些。

需要注意的是动画编辑器里的rotation属性,与节点里的属性面板的rotation对应不上,而应该采用eulerAngles的属性。

file

据说后续版本会处理?

file

小球轨迹

采用tween控制小球坐标数值,先移动到最高点,然后再移动到最低点。

file

在运动轨迹中加入一些随机值,就可以达到不同位置的效果啦。

tweenUtil(this._node_balll_pos)
    .stop()
    .to(time, new math.Vec3((this.node_ball.position.x + BALL_INIT_X) / 2, BALL_MAX_Y * (0.8 + 0.2 * Math.random()), targetZ / 2))
    .to(time, new math.Vec3(BALL_GAMEOVER_X, BALL_MIN_Y, targetZ))
    .start();
小结

完成这个小功能主要遇到的问题是3d节点点击事件,和动画系统的rotation的问题。不过这些都在论坛里找到了相应的解决方法。

以上就是我最新的学习成果!如有问题或新的想法欢迎留言!我有了好想法会第一时间分享给大家的!


file


在线试玩
源码获取

免责声明:文章转载自《cocos creator 3D | 蚂蚁庄园运动会星星球》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇杯水人生32位x86处理器编程架构下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

matplotlib的学习16-animation动画

from matplotlib import pyplot as plt from matplotlib import animation import numpy as np fig, ax = plt.subplots() x = np.arange(0, 2*np.pi, 0.01) line, = ax.plot(x, np.sin(x)) #...

iOS--使用imageView播放连续的几张图片

最近要做一个商城类的app,所以在加载数据的时候,为了防止界面假死,就需要加上制定图片的动画效果,下面就是用imageView播放连续的几张图片 附上代码:1,2,3,4,5是一组动态图片的5张图片 关于imageview的所有属性:- (void)startAnimating;开始动画- (void)stopAnimating;停止动画- (BOOL)...

一些炫酷的css效果

前言 本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。 之前发的CSS技巧大部分都是依照本文的套路来写的 有人问我为什么我能想出这么多的动画?笔者阅番百部,对常用的动画技巧了如指掌,同样那些酷炫的网站只要细心观察,也会给笔者带来很多设计上的灵感。 一言以蔽之:只有多欣赏动画,才能写出好的动画。 小提示:本文会不定期更新哦!每打开一次可...

OpenCASCADE动画功能2

OpenCASCADE动画功能2eryar@163.com OpenCASCADE是一个开发平台,主要提供三维曲面和实体建模、CAD数据交换及可视化等功能。OCCT最适用于开发三维建模CAD软件、加工制造或测量(CAM)软件及数值仿真软件。对于一些加工制造软件,需要简单的动画仿真功能。本文主要就来说说OCCT的动画功能。 OCCT从7.1.0版本引入了类A...

iOS开发核心动画之粒子效果

一. 示意图     绘画出一条线,点击开始有很多粒子绕着线运动,点击重绘消除粒子和线 二. 实现代码     设计思路:自定义一个View来描述控制器的View,在View加载过程中进行初始化,给View添加手势(UIPanGestureRecognizer),将自定义View转成复制层,创建一个粒子层,添加到复制层上,并保存粒子     监...

Android中给listview/gridview设置动画(逐条加载条目动画)

先看实现的效果如下: 演示效果如上:上面的列表是GridView 要给这个GridView添加一个动画,才可以逐个加载。网上找了大量资料,不少人说用多线程加载,通过SetAdapter设置数据改变,还有用到Handler这样太扯淡了,几乎放弃了。发现直接在配置里设置动画即可。 动画即可。效果非常好,看效果。 ListView配置方法如下: 1 <...