查看项目所有章节

接着上一章，在man场景中创建一个 joystick 精灵，并在 joystick下创建一个 stick 精灵

将提前准备好的资源拖到精灵上

修改它们的大小，joystick修改为260*260，stick修改为100*100

并给joystick节点添加widget组件，并设置左下位置100，让其固定在屏幕的左下角

在scripts文件夹中创建TypeScript脚本，脚本内容如下：

const { ccclass, property } = cc._decoratorvar State = cc.Enum({IDLE: 0,MOVE: 1
})@ccclass
export default class NewClass extends cc.Component {@property(cc.Node)stick = null@propertymax_radius: number = 120@propertymin_radius: number = 60// LIFE-CYCLE CALLBACKS:// onLoad () {}@property({type: State})state = State.IDLEdir: numberradius: numberstart() {this.dir = -1this.radius = 0this._initTouchEvent()}_initTouchEvent() {cc.log('====_initTouchEvent====')this.node.on(cc.Node.EventType.TOUCH_START, this._touchStartEvent, this)this.node.on(cc.Node.EventType.TOUCH_MOVE, this._touchMoveEvent, this)// 触摸在圆圈内离开或在圆圈外离开后，摇杆归位，player速度为0this.node.on(cc.Node.EventType.TOUCH_END, this._touchEndEvent, this)this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._touchEndEvent, this)}_touchStartEvent(e) {this.stick.setPosition(cc.v2(0, 0))this.dir = 0}_touchMoveEvent(e) {var w_pos = e.getLocation()var pos = this.node.convertToNodeSpaceAR(w_pos)var len = pos.mag()if (len > this.max_radius) {pos.x = (pos.x * this.max_radius) / lenpos.y = (pos.y * this.max_radius) / len}this.stick.setPosition(pos)if (len < this.min_radius) {return}this.dir = -1var r = Math.atan2(pos.y, pos.x)if (r >= (-8 * Math.PI) / 8 && r < (-7 * Math.PI) / 8) {this.dir = 2} else if (r >= (-7 * Math.PI) / 8 && r < (-5 * Math.PI) / 8) {this.dir = 6} else if (r >= (-5 * Math.PI) / 8 && r < (-3 * Math.PI) / 8) {this.dir = 1} else if (r >= (-3 * Math.PI) / 8 && r < (-1 * Math.PI) / 8) {this.dir = 7} else if (r >= (-1 * Math.PI) / 8 && r < (1 * Math.PI) / 8) {this.dir = 3} else if (r >= (1 * Math.PI) / 8 && r < (3 * Math.PI) / 8) {this.dir = 4} else if (r >= (3 * Math.PI) / 8 && r < (5 * Math.PI) / 8) {this.dir = 0} else if (r >= (5 * Math.PI) / 8 && r < (7 * Math.PI) / 8) {this.dir = 5} else if (r >= (7 * Math.PI) / 8 && r <= (8 * Math.PI) / 8) {this.dir = 2}//0 top//1 bottom//2 left//3 right//4 right-top//5 left-top//6 left-bottom//7 right-bottomcc.log('dir = ', this.dir)this.radius = rthis.state = State.MOVE}_touchEndEvent(e) {this.stick.setPosition(cc.v2(0, 0))this.dir = 0this.state = State.IDLE}// update (dt) {}
}

此脚本的意思是监听触摸事件，通过触摸位置设置stick的位置。同时根据stick节点在joystick节点中的位置，计算stick节点于joystick节点中间位置的角度，并判断其方向

将joystick脚本拖到joystick的属性检查器中，会自动添加一个script的属性节点

此时将sctick节点从层级管理器中拖到joystick脚本的Stick属性上

运行查看效果：

【cocos creater】5.仿《弓箭传说》- 创建虚拟遥感相关推荐

【cocos creater】仿《弓箭传说》
项目介绍: 此游戏是由cocos creater编写,可发布到原生,h5,微信小游戏等各大平台上.此demo中实现了热门小游戏<弓箭传说>的核心功能,可提供参考,欢迎各位评论点赞 [coc ...
【cocos creater】1.仿《弓箭传说》-开发环境及项目搭建
查看项目所有章节首先进入cocos creater官网 https://www.cocos.com/creator 打开下载V 2.1.2版本,因为cocos creater的各个版本之间都有差异, ...
(https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航...
(https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航首页支持微信登陆,只有第8套模板支持(endv模板),后 ...
Cocos Creater 敏捷开发之插件开发
Cocos Creater插件的开发 1:首先说为什么要去插件啊,插件这个东西是帮助敏捷开发,比如说你要开发原生的游戏,可能会接一些SDK,这些SDK大部分走的都是Java或者OC,你不可能每次打包都 ...
cocos creater 游戏开发工具方法
/*** 观察者方法** @export* @param {*} obj* @param {Function} callback* @param {*} pointer* @return {*} {P ...
这款Roguelike+RPG养成游戏为何如此成功？《弓箭传说》节奏点分析
<弓箭传说>是一款什么样的游戏? 如果您已经玩过这款游戏,那无须多言,可以直接跳转至后看分析,如果您还没深入体验或只是看到过或者没听过,可以简单看一下这款游戏的定位. <弓箭传说&g ...
【VirtualBox】VirtualBox使用现有的虚拟盘文件（如VHD）创建虚拟机时，报错：打开虚拟硬盘失败，“UUID already exist”的解决方法
###0.问题描述使用现有的虚拟盘文件(如VHD)创建虚拟机时,报错:打开虚拟硬盘失败,"UUID already exists"的错误. ###1.参考博客 https://w ...
xp创建虚拟服务器,Xp系统怎么创建虚拟目录？Xp系统创建虚拟目录的方法
Xp系统怎么创建虚拟目录?xp系统是一款非常经典的windows系统,其一直深受着广大用户们的喜爱.虽然目前微软不在支持xp系统了但是使用还是有部分用户选择使用xp系统.下面小编就给大家带来Xp系统创 ...
VS中无法创建虚拟目录本地IIS IIS Express 外部主机
从前就有个疑问了,为什么我拉取别人写好的代码后就可以在IIS里面生成一个网站呢? 这里所谓的生成网站,是指包含了所有源代码文件的网站:相对地,发布网站,就是指包含被编译的源文件所得到的DLL文件的网站 ...

【cocos creater】5.仿《弓箭传说》- 创建虚拟遥感

查看项目所有章节

【cocos creater】5.仿《弓箭传说》- 创建虚拟遥感相关推荐

最新文章

热门文章