专栏首页白玉无冰关于蚂蚁庄园登山赛你可以还不知道的秘密!我也写一个康康!Cocos Creator 3D!

关于蚂蚁庄园登山赛你可以还不知道的秘密!我也写一个康康!Cocos Creator 3D!

好像没写过3d项目分享,那么就跟着蚂蚁庄园的小鸡一起跳跳跳吧!

效果预览

配置环境: cocos creator 3D 1.0.0

首先是寻找3d资源花费了大半天时间

,开发3d游戏不易呀!最终还是向KUOKUO大佬那捞了一只鸡(鸭?)来用了。

由于是第一次写3d项目,

摄像机镜头调了多次才达到预想的效果。

还用了一个天空盒,网上找的资源。

实现原理

生成道路是用预制资源,代码动态生成。

const element: Node = instantiate(this.prefab_land);
this.node_tree.addChild(element);

摄像机跟着小鸡一起往前移动(我写的是z轴移动)。

update(deltaTime: number) {
    this.camera_game.node.setPosition(this.camera_game.node.position.x, this.camera_game.node.position.y, this.role.node.position.z)
}

监听TOUCH_MOVE事件控制小鸡左右移动,并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的,这是因为摄像机投影的原因。我是乘了一个系数,可能有其他方法判断?

private onTouMove(touch: Touch) {
    const delta = touch.getUIDelta();
    let targetX = this._curPos.x - delta.x * 1e-2;
    if (targetX > 4.5) targetX = 4.5;
    if (targetX < - 4.5) targetX = -4.5;
    this._curPos.x = targetX;
}

往前跳的运动就是修改y(跳跃) 和 z(往前)的数值啦。

jumpRun() {
    this._curPos.z += 0.1;
    if (Math.floor(this._curPos.z / 2) > this._curIndex) {
        this._curPos.y = 0;
        this._curIndex++;
        this.node.emit('JumpEnd', this._curIndex);
    }
    if (this._curPos.z % 2 < 1) {
        this._curPos.y += 0.2;
    } else {
        this._curPos.y -= 0.2;
    }
}

小结

cocos creator 3d 用起来挺顺手的(我也没用过其他3d引擎?哈哈哈),就是我家的mac-mini 好像撑不住,只要打开工具一段时间就一直在叫(可能我的设备落后

),不过整体的效果还是不错的。

其实开发3d项目还是要一些基础知识的,如正交投影,平行投影,点光源,平行光源等等。(我也是在webgl编程指南里学到的,建议看看哦?)

第一次写3d项目的比较矬一点

,还有很多需要学习的。如有错误或者其他想法,欢迎留言!我有新想法也会第一时间分享给大家!点个关注不迷路哦!

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 竟然可以用 effect 玩水?Cocos Creator 3D !

    最近逛论坛时,看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦!

    白玉无冰
  • 盯着双11开喵铺里的小人许久,我也写了一个!cocos creator !

    ◇ 打开支付宝,天猫双11合伙人全面开喵铺的活动映入眼帘。点击进去后,我竟然盯着小人走路许久,琢磨着,自己也写个玩玩吧!

    白玉无冰
  • 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    白玉无冰
  • TRTC学习之旅(二)-- 使用vue+ts集成TRTC实现多人会议室

    根据上回学习了官方TRTC demo之后,已经了解了一个基础的多人会议室创建的流程,接下来我需要将自己学到的转换为自己能够运用的。

    黑眼圈云豆
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余
  • 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/d...

    牧云云
  • react 创建组件以及组件通信

    关于React.createClass方法与class App extends Component方法的区别

    念念不忘
  • React人机验证控件

    在使用React做前端,用户注册页面因为要短信验证,短信服务商要求加人机验证,于是我找到了 react-captcha-generator。

    fanzhh
  • ES6基础-ES6 class

    面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,...

    达达前端
  • highchar的x轴数据自动生成

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚

扫码关注云+社区

领取腾讯云代金券