专栏首页白玉无冰拇指射箭 ! Cocos Creator 3D !

拇指射箭 ! Cocos Creator 3D !

拇指射箭!你能射中靶心么?

效果预览

配置环境:

cocos creator 3d v1.0.0

玩法介绍:

长按屏幕,拖动瞄准,放手发射。风向、重力和距离影响最终结果!越靠近中心得分越高!最高分10分!

实现原理

流程图:

镜头控制:

采用两个摄像机控制镜头显示。一个是发射视角的摄像机;另一个是绑定在箭节点的摄像机,会跟随箭一起移动。通过控制摄像机节点的 active 实现镜头切换。

弓箭控制:

通过触摸移动的距离乘以一个调控系数,控制弓箭的位置。

private onTouchMove(touch: Touch) {
    const delta = touch.getDelta();
    this.NodePos_bows.x -= delta.x * CONST_TOUCH_FACTOR;
    this.NodePos_bows.y += delta.y * CONST_TOUCH_FACTOR;
}

为所有需要控制位置的节点写了一个通用的组件脚本。只要为节点添加这个脚本,就可以通过设置 x,y,z 调整位置。

export class NodePos extends Component {
    private _curPos: Vec3 = cc.v3();
    start() {
        this._curPos = this.node.position;
    }    
    get x() {
        return this._curPos.x;
    }
    set x(x: number) {
        this._curPos.x = x;
    }
    // 省略部分代码
    update(deltaTime: number) {
        this.node.position = this._curPos;
    }
}

发射箭:

使用 tween 控制箭位置,并在发射结果添加重力、风向和距离的影响。并为箭添加了拖尾组件。

tweenUtil(this.NodePos_arrow)
    .stop()
    .to(5, { z: targetZ, x: targetX, y: targetY })
    .to(1, {})
    .call(() => {
        this.gameOver();
    })
    .start()

得分计算:

通过计算箭和靶心的距离,以及靶子的半径关系,可以计算出得分。

const dis = this.NodePos_arrow.position.clone().subtract(this.NodePos_target.position).length();
const score = dis < CONST_TARGET_RADIUS ? ((1 - dis / CONST_TARGET_RADIUS) * 10).toFixed(2) : ('0');

小结

这个拇指射箭游戏采用了两个摄像机控制镜头显示。由于 cocos creator 3d 不能直接设置 x,y,z 控制位置,所以写了个简单的组件控制位置。

以上就是这个拇指射箭的主要实现方案,详细的细节可以在公众号内回复【拇指射箭】获取完整代码。文章底部可以点击链接试玩哦!打到 9 分以上还是要技巧的哦!

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

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

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

    白玉无冰
  • 竟然可以用 effect 玩水?Cocos Creator 3D !

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

    白玉无冰
  • Creator3D新教程,你能射中靶心么?

    长按屏幕,拖动瞄准,放手发射。风向、重力和距离影响最终结果!越靠近中心得分越高!最高分10分!

    张晓衡
  • 《你不知道的JavaScript》:js委托设计的真实案例与总结

    实际需求,web开发中有一个典型的前端场景,创建UI控件(按钮、下拉列表等)。用jq的选择器来简化选择过程,与实现思路不冲突。

    前端_AWhile
  • 通过vue.js 学习来总结es6语法中的箭头函数,箭头函数原理分析。

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/acoolgiser/article/details/...

    acoolgiser
  • 上下div高度动态自适应--另类处理方案

         这段时间在工作中遇到一个看似较为棘手的问题。问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。客户要求做到默认满屏(但...

    sam dragon
  • Flutter基础widgets教程-PopupMenuButton篇

    青年码农
  • 计数器、滑动窗口、漏桶、令牌算法比较和伪代码实现

    计数器是限流里最简单的,简单来说,比如 我限制1分钟内 请求数最多为60个! 当此刻 2018-02-27 16:23:00 到 2018-02-27 16:2...

    用户2825413
  • 多 UI 版本网页五子棋实现

    五子棋是大家很熟悉的一种小游戏,本文给大家介绍如何制作一个简易的网页版五子棋游戏,并且考虑实现普通 DOM 和 Canvas 两种 UI 绘图模式供随时切换。最...

    WecTeam

扫码关注云+社区

领取腾讯云代金券