• CocosCreator游戏开发(四)实现摇杆控制角色功能


    时隔3年,我又开始继续写这个系列的帖子了,也不知道是会写完全系列,还是再次夭折。
    废话不多。直接开始主题了
    主要实现的功能点包含这些内容:通过摇杆控制角色进行八方位移动,并按照各方位播放对应移动动画
    效果图如下:

    本次案例其实都是拼凑网上别人的一些现成代码,然后进行整合梳理

    涉及到的相关内容如下:

    参考代码如下:
    1.Cocos Creator 地图滚动&摄像机人物跟随
    地址:https://www.bilibili.com/video/BV1et411J7iC
    2.joystick摇杆控件
    代码地址:https://github.com/YunYouJun/cocos-creator-joystick
    在线演示:https://www.yunyoujun.cn/cocos-creator-joystick/
    3. Animation动画创建
    教程地址:http://www.cocoachina.com/bbs/read.php?tid-458312.html
    我其实也只是代码的搬运工,通过对以上三部分的整合,最终就实现了我想要的效果。

    开始介绍项目

    场景结构


    场景中分别包含了以下控件:

    • MainCamera 负责绘制UI
    • RoleCamera 负责绘制角色(之后的遥感其实也是控制这个摄像头的坐标移动)
    • MapView 地图(里面包含了一些地图相关的内容,在参考代码里面的视频有做解释,我这里不做详细介绍了)
    • Role 主角,主要的控件,相关的控制代码都挂在主角上面
    • joystick 摇杆控件,该部分代码可以直接通过参考代码2去下载,然后直接使用即可。

    代码结构


    其实需要讲解的代码也就两部分:joystick.js 与Role.JS

    Joystick组件

    属性(Properties)

    • dot :摇杆操纵点
    • ring :摇杆背景节点
    • joystickType :触摸类型(跟随,固定两种)
    • directionType :方向类型(4方向,8方向,全方位)
    • _stickPos :摇杆所在位置
    • _touchLocation :触摸位置

    函数(Functions)

    • _initTouchEvent : 初始化
    • _onChangeJoystickType : 更改触摸类型
    • _touchStartEvent : 当手指按下时触发,判断触摸类型,并根据触摸类型执行相应动作
    • _touchMoveEvent : 当手指按住摇杆控件时持续触发,先判断按下的位置是否相同,如果相同,则不做处理。
    • _touchEndEvent : 当手指抬起时触发,结束相关动作

    Role组件

    主要函数(Functions)

    • _updateCameraPosition :更新摄像机位置
    • _getTilePos : 计算摇杆角度
    • onTouchMove : 按住摇杆时持续触发
    • getCalculaAngle : 将摇杆移动的坐标进行角度转换,转换之后用来判断朝哪个方向移动了
    • getfwinfo : 根据角度判断角色应该朝哪个方向
    • move : 移动摄像头
    • update :

    主要逻辑顺序

    当用户按住摇杆时触发onTouchMove 事件,判断移动方向,切换角色动画。

    最后就是贴代码了
    链接:https://share.weiyun.com/8WRBYpR5 密码:jny2wj

    接下来准备实现技能按钮部分,也不知道可以不可以实现,如果各位有好的参考代码也欢迎各位提供我学习参考下,谢谢

  • 相关阅读:
    放大镜功能
    background兼容IE9以下版本
    JSON解析
    vue.js 组件-全局组件和局部组件
    i++ ++i的原子性
    【转】程序员面试笔试宝典
    【转】函数调用栈 格式化操作
    【转】TCP三次握手过程
    一些面试题
    【转】HP(惠普)大中华区总裁孙振耀退休感言
  • 原文地址:https://www.cnblogs.com/PleaseInputEnglish/p/13544031.html
Copyright © 2020-2023  润新知