android 游戏摇杆ui,LayaBox实现2D游戏八方向虚拟摇杆
在使用Laya引擎制作自己的小游戏时,需要用到虚拟摇杆来控制人物移动,在百度搜素了许多案例之后,结合自己的情况记录如下Demo。
先看看效果:
运行效果
1.实现思路
图1
如上图“图1”所示,在数学直角坐标系中,将一个圆平分成8块,每一块对应一个方向,即 1->左、2->左上、3->上、4->右上、5->右、6->右下、7->下、8->左下,以x轴正方为起始点,逆时针旋转,即各个方向对应的角度分别为 1->左->[337.5°~22.5°)、2->左上->[22.5°~67.5°)、3->上->[67.5°~112.5°)、4->右上->[112.5°~157.5°)、5->右->[157.5°~202.5°)、6->右下->[202.5°~247.5°)、7->下->[247.5°~292.5°)、8->左下->[292.5°~337.5°)
那么如何计算出移动的方向呢?这就需要用到反三角函数(acos、asin、atan...)了,如下图“图2”所示:
图2
通过反三角函数计算出α对应的弧度,在将弧度转换成角度即可。
2.使用LayaAirIDE编辑场景
说明:我是用的是LayaAir_2_01版本以及ActionScript3.0语言
在编辑模式先新建一个场景,在场景中添加虚拟摇杆所需要用到的两张图片,并分别为其命名,如下图“图3”所示:
图3
然后发布,我是用 分离模式 发布该资源,该模式会生成一个场景类以及json文件。之后再src下新建一个名为script的文件夹用于放置脚本类文件,在该文件夹下新建一个名为 StartScene 脚本并继承 TestSceneUI 类,作为场景的 runTime 脚本,如下图“图4”、“图5”所示:
图4
图5
然后切回编辑模式,将 StartScene 脚本设置为场景的runTime 脚本。如下图“图6”所示:
图6
3.编写代码
接下来就正在进入正题啦,废话已经说过了,直接先给出代码,再看后面的说明内容:
package script {
import laya.components.Script;
import ui.TestSceneUI;
import laya.display.Stage;
import laya.display.Sprite;
import laya.events.Event;
import laya.display.Text;
import laya.utils.Tween;
import laya.utils.Ease;
public class StartScene extends TestSceneUI {
// 小圆被拉动的最远半径
private const RADIUS:Number = 80;
// 小圆组件
private var smallCircle:Sprite;
// 大圆组件
private var bigCircle:Sprite;
// 用于显示角度的文本
private var text:Text;
/**
* 构造函数
* 需加载父类的构造函数
*/
public function StartScene():void {
super();
}
override public function onEnable():void {
Laya.init(1000, 800);
Laya.stage.scaleMode = Stage.SCALE_FULL;
// 获取两个圆组件
smallCircle = this.getChildByName("smallCircle") as Sprite;
bigCircle = this.getChildByName("bigCircle") as Sprite;
// 用于显示文字
text = new Text();
text.pos(Laya.stage.width / 2, Laya.stage.height / 2);
text.color = '#ffffff';
text.fontSize = 20;
this.addChild(text);
// 给小圆添加鼠标按下侦听事件
smallCircle.on(Event.MOUSE_DOWN, this, onSmallClickDown);
// 鼠标抬起时
Laya.stage.on(Event.MOUSE_UP, this, onSmallClickUp);
}
/**
* 鼠标按下小圆侦听事件
*/
private function onSmallClickDown():void {
// 点击时为小圆注册
Laya.stage.on(Event.MOUSE_MOVE, this, onSmallClickMove);
}
/**
* 鼠标抬起侦听事件
*/
private function onSmallClickUp():void {
// 取消鼠标移动事件
Laya.stage.off(Event.MOUSE_MOVE, this, onSmallClickMove);
// 小圆返回中心位置
Tween.to(smallCircle, {x:bigCircle.x, y:bigCircle.y}, 300, Ease.backIn);
}
private function onSmallClickMove():void {
// 鼠标与大圆中心x、y轴的距离
var xx:Number = Laya.stage.mouseX - bigCircle.x;
var yy:Number = Laya.stage.mouseY - bigCircle.y;
// 勾股定理求斜边
var obl:Number = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));
// 求弧度
var rad:Number = getRad(xx, yy, obl);
// 弧度转角度
var angle:Number = 180 / Math.PI * rad;
// 在文本框中显示角度
text.text = angle + "度";
// 限制小圆移动范围
if (obl > RADIUS) {
// 当鼠标与大圆中心超过移动半径 RADIUS 时,停止小圆继续往外移动
// 通过三角形边与边的比例计算出小圆应该处于的位置
var smallCircleX:Number = (RADIUS * xx) / obl + bigCircle.x;
var smallCircleY:Number = (RADIUS * yy) / obl + bigCircle.y;
smallCircle.pos(smallCircleX, smallCircleY);
} else {
// 小圆处于大圆之中时,与鼠标同一位置
smallCircle.pos(Laya.stage.mouseX, Laya.stage.mouseY);
}
}
/**
* 求弧度函数
* @param xx : x轴距离
* @param yy : y轴距离
* @param obl : 斜边
*/
private function getRad(xx:Number, yy:Number, obl:Number):Number {
// 方法一:asin()
// var rad:Number = xx > 0 ? ((Math.PI * 3)/2 + Math.asin(-yy/obl)) : (Math.PI / 2 - Math.asin(-yy/obl));
// 方法二:acos()
var rad:Number = yy < 0 ? Math.acos(xx / obl) : (Math.PI * 2- Math.acos(xx / obl));
// 方法三:atan2()
// var rad:Number = yy < 0 ? Math.atan2(-yy, xx) : Math.PI * 2 + Math.atan2(-yy, xx);
return rad;
}
override public function onDisable():void {
}
}
}
注意:
1.在Laya坐标系中,与数学直角坐标系不同的是Laya坐标系y轴向下为正放,数学直角坐标系y轴向上为正方。
2.如果使用方法一,则起始点为y轴的上方,也就是y轴的负方向。
3.当a大于180度时候,a的余弦值等于(360-a)的余弦,其他两个方法根据三角函数和反三角函数的性质推推导一下即可得出,或是推导不出的话就直接在代码中打印实时的弧度值,再去理解。
android 游戏摇杆ui,LayaBox实现2D游戏八方向虚拟摇杆相关推荐
- Silverlight C# 游戏开发:方向键的组合,八方向实现
Silverlight C# 游戏开发:方向键的组合,八方向实现 在游戏中,有一种情况是斜向移动,就是同时按下两个方向,形成斜线操作,在Win32GDI开发中,可以通过在逻辑循环里加入键盘状态判断取得 ...
- 【Unity】Unity 2D游戏开发(三)2D游戏常用功能及插件
377节附近开始的2D游戏实例,基础的功能开发可以参考. 碰撞忽略 private void Start() {// 让第八层和第九层忽略碰撞,此段代码可以写在通用脚本内Physics2D.Ignor ...
- 【游戏开发实战】Unity 2D游戏物理运动曲线轨迹预测,以愤怒的小鸟为例,轨迹曲线云团圈圈
文章目录 一.前言 二.思考分析 三.场景搭建 1.导入图片素材 2.鸟预设 3.地面环境 4.曲线的点预设 5.预览效果 四.代码 1.鸟脚本:Bird.cs 2.曲线预测器:Trajectory. ...
- 2D游戏知识点二、Unity 2D游戏主角基本功能和动画
地图添加Tilemap Collider 2D 快速创建主角及动画 起个名字保存一下 界面上已经有人物了,点击运行,可以看到idle动画,给人物idle添加Circle Collider 2d和Rig ...
- 使用Unity制作2D游戏时,给UI添加粒子效果
环境 unity 2019.1.8f1 在有UI界面的2D游戏中,若直接添加粒子系统,则会因为渲染层级的关系被遮挡,从而无法在游戏场景中显现. 解决方法: 更改Canvas设置 Canvas-> ...
- Unity 4.x 2D游戏开发基础教程
淘宝网店购买地址:http://item.taobao.com/item.htm?spm=686.1000925.1000774.13.0Il2aP&id=39546154468 试读文档下载 ...
- Unity简单2D游戏开发
Unity简单2D游戏开发 前言: 近日比较无聊,在b站找了一个up主,跟着他的教程来做游戏--开发一个简单的2D游戏 用 Tilemap 绘制场景 新建一个2D项目,在Unity Asset Sto ...
- unity3d 2d游戏(太空大战)开发笔记
最近刚开始看unity3d游戏开发,感觉2d游戏似乎简单些,所以先从2d游戏入手试试看吧. 2d游戏大约要分为背景,角色(需要控制的己方角色car,敌机enemy,奖励物品prop),ui(分数显示, ...
- 海外开发者推荐:10个顶级2D游戏资源站
Gamelook报道/随着手游市场的持续增长,HTML5的发展以及大型发行商的支持,2D游戏的数量变得越来越多,得益于Unity和在线2D游戏资源商店的出现,游戏研发变得更加容易.最近,海外开发者推荐 ...
- UI设计素材模板|游戏APP界面
作为设计师,不能只是欣赏手机APP UI设计灵感.web网易设计灵感,一些视觉体验极佳的游戏APP也是不错的. 游戏类UI 设计主要针对游戏的图标.登录界面.游戏界面.局内道具等方面进行设计.游戏分为 ...
最新文章
- Linux定时任务Crontab学习笔记
- linux mail 密码错误,linux下mail使用故障解决
- HDU - 2844 Coins(多重背包+完全背包)
- 【OpenPose-Windows】运行OpenposeDemo.exe 如何保存图像运行结果及关节点信息
- C#之out和ref区别
- 大整数乘法c语言数组,很大的数相乘怎么办?
- 蓝桥杯 ADV-131算法提高 选择排序
- python 获取网页元素_记一次python提取网页标签元素的坑
- 以1敌10不是梦,Spring Boot企业级真实应用案例
- HTML学习总结(1)——HTML基本介绍
- SpringBoot系列(8):SpringBoot中的MVC支持【组件型注解、请求和参数型注解】详解
- 软件测试中的测试进度安排怎么写,测试开发之测试计划
- 鸿翼上线DMSTMS管理系统,助力智飞龙科马打造数字化质量安全生命线
- oracle的多个exclude,记录一下expdp exclude的用法
- html如何删除网页边框,如何从HTML表中完全删除边框
- cocos2d-x 多点触控总结
- SpringCloud(H版alibaba)之基本框架篇
- UnityShader_天空盒子中的反射、折射、聂菲尔效应
- Pandas数据显示不全?快来了解这些设置技巧! ⛵
- 英集芯IP5566带TYPE-C口3A充放快充移动电源5w无线充二合一方案SOC