Android开发网

首页|Android开发环境|Android开发教程|Android开发视频|Android游戏开发|Android开发实例|Android开发书籍|鸡啄米博客

Android游戏开发24：Android触屏方向导航--360度游戏摇杆

       很多Android手机都没有实体的上下左右导航键，那么怎么控制游戏方向呢？Android游戏开发者想到了利用Android手机的触屏特性，制作360度摇杆来取代游戏方向键，最终使得界面UI变得美观，用户操作也方便。

       先贴上效果图：

Android游戏开发24：Android触屏方向导航--360度游戏摇杆

       下面开始实现：

       首先，肯定是绘制两个圆形，无可置疑；圆心点重合，为了区分 ，所以设置了不同颜色；

       灰色：固定不动的摇杆背景（也意味着摇杆的活动范围）；

       红色：摇杆；

       然后考虑：红色摇杆肯定跟随手指触屏的位置而移动，那么这个很easy啦，只要在触屏事件中处理，将获取的触屏XY坐标赋值与摇杆XY坐标即可；这个没问题；但是紧接着在思考一个问题：

       一般情况下，我们不可能希望摇杆一直跟随手指位置，所以需要一个摇杆的活动区域，也就如同上图中的灰色区域，在灰色区域内摇杆可以随着用户的触屏位置移动，但是一旦用户触屏位置在活动区域之外，摇杆就不应该跑出灰色区域；所以具体实现步骤如下：

       1）得到通过摇杆的坐标与触屏点的坐标得到所形成的角度Angle。

       2）根据Angle，以及已知所在圆的半径，算出摇杆所在灰色圆形上做圆周运动的当前X,Y坐标。

       首先第一步: 算出摇杆坐标与触屏坐标形成的角度。

       我们肯定已知摇杆当前坐标，并且当用户触屏时的坐标也可以在触屏按键中得到，那么获取的方法就可以写成一个方法，方法如下：

Java代码
  1. /***  
  2.  * 得到两点之间的弧度  
  3.  */  
  4. public double getRad(float px1, float py1, float px2, float py2) {   
  5.     //得到两点X的距离   
  6.     float x = px2 - px1;   
  7.     //得到两点Y的距离   
  8.     float y = py1 - py2;   
  9.     //算出斜边长   
  10.     float xie = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));   
  11.     //得到这个角度的余弦值（通过三角函数中的定理 ：邻边/斜边=角度余弦值）   
  12.     float cosAngle = x / xie;   
  13.     //通过反余弦定理获取到其角度的弧度   
  14.     float rad = (float) Math.acos(cosAngle);   
  15.     //注意：当触屏的位置Y坐标<摇杆的Y坐标我们要取反值-0~-180   
  16.     if (py2 < py1) {   
  17.         rad = -rad;   
  18.     }   
  19.     return rad;   
  20. }  

       在Java中，Math类中的反余弦函数返回的不是角度是弧度，这一点要格外注意。

       另外一点就是，因为三角函数角度范围是0~180度，所以反之应该是-0~-180度；

       通过此函数获取到摇杆与用户触屏位置所形成的角度之后，我们就可以通过圆周公式来得到其摇杆的XY坐标了；方法如下：

Java代码
  1. /**  
  2.  *  
  3.  * @param R  
  4.  *            圆周运动的旋转点  
  5.  * @param centerX  
  6.  *            旋转点X  
  7.  * @param centerY  
  8.  *            旋转点Y  
  9.  * @param rad  
  10.  *            旋转的弧度  
  11.  */  
  12. public void getXY(float centerX, float centerY, float R, double rad) {   
  13.     //获取圆周运动的X坐标   
  14.     SmallRockerCircleX = (float) (R * Math.cos(rad)) + centerX;   
  15.     //获取圆周运动的Y坐标   
  16.     SmallRockerCircleY = (float) (R * Math.sin(rad)) + centerY;   
  17. }  

       圆周运动公式：通过三角函数定理得出：

       X坐标：所在圆的半径*角度的余弦值

       Y坐标：所在圆形半径*角度的正弦值

       圆周的大小，由所在圆的半径R的大小来决定。

       通过以上的公式我们就可以让摇杆在灰色圆形上做圆周运动，当然除此之外我们还要注意三点：

       1、做圆周运动的大小，应该跟灰色区域的半径相同；

       2、触屏事件中应该首先判定用户触屏的位置是否在灰色区域中，如果不在，我们就应该获取摇杆与触屏点的角度然后获取摇杆应该在圆周运动上的XY坐标；如果在，就没有处理了，只要将摇杆位置随着用户点击位置就好了；

       3、在触屏事件中，当用户手指离开屏幕后，应该让摇杆的位置恢复到初始的位置状态。

       下面是整个项目的MySurfaceView中全部代码：

Java代码
  1. package com.rp;   
  2. import android.content.Context;   
  3. import android.graphics.Canvas;   
  4. import android.graphics.Color;   
  5. import android.graphics.Paint;   
  6. import android.util.Log;   
  7. import android.view.MotionEvent;   
  8. import android.view.SurfaceHolder;   
  9. import android.view.SurfaceView;   
  10. import android.view.SurfaceHolder.Callback;   
  11. public class MySurfaceView extends SurfaceView implements Callback, Runnable {   
  12.     private Thread th;   
  13.     private SurfaceHolder sfh;   
  14.     private Canvas canvas;   
  15.     private Paint paint;   
  16.     private boolean flag;   
  17.     //固定摇杆背景圆形的X,Y坐标以及半径   
  18.     private int RockerCircleX = 100;   
  19.     private int RockerCircleY = 100;   
  20.     private int RockerCircleR = 50;   
  21.     //摇杆的X,Y坐标以及摇杆的半径   
  22.     private float SmallRockerCircleX = 100;   
  23.     private float SmallRockerCircleY = 100;   
  24.     private float SmallRockerCircleR = 20;   
  25.     public MySurfaceView(Context context) {   
  26.         super(context);   
  27.         Log.v("Himi", "MySurfaceView");   
  28.         this.setKeepScreenOn(true);   
  29.         sfh = this.getHolder();   
  30.         sfh.addCallback(this);   
  31.         paint = new Paint();   
  32.         paint.setAntiAlias(true);   
  33.         setFocusable(true);   
  34.         setFocusableInTouchMode(true);   
  35.     }   
  36.     public void surfaceCreated(SurfaceHolder holder) {   
  37.         th = new Thread(this);   
  38.         flag = true;   
  39.         th.start();   
  40.     }   
  41.     /***  
  42.      * 得到两点之间的弧度  
  43.      */  
  44.     public double getRad(float px1, float py1, float px2, float py2) {   
  45.         //得到两点X的距离   
  46.         float x = px2 - px1;   
  47.         //得到两点Y的距离   
  48.         float y = py1 - py2;   
  49.         //算出斜边长   
  50.         float xie = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));   
  51.         //得到这个角度的余弦值（通过三角函数中的定理 ：邻边/斜边=角度余弦值）   
  52.         float cosAngle = x / xie;   
  53.         //通过反余弦定理获取到其角度的弧度   
  54.         float rad = (float) Math.acos(cosAngle);   
  55.         //注意：当触屏的位置Y坐标<摇杆的Y坐标我们要取反值-0~-180   
  56.         if (py2 < py1) {   
  57.             rad = -rad;   
  58.         }   
  59.         return rad;   
  60.     }   
  61.     @Override  
  62.     public boolean onTouchEvent(MotionEvent event) {   
  63.         if (event.getAction() == MotionEvent.ACTION_DOWN ||   
  64.                     event.getAction() == MotionEvent.ACTION_MOVE) {   
  65.             // 当触屏区域不在活动范围内   
  66.             if (Math.sqrt(Math.pow((RockerCircleX - (int) event.getX()), 2)   
  67.                     + Math.pow((RockerCircleY - (int) event.getY()), 2)) >= RockerCircleR) {   
  68.                 //得到摇杆与触屏点所形成的角度   
  69.                 double tempRad = getRad(RockerCircleX, RockerCircleY, event.getX(), event.getY());   
  70.                 //保证内部小圆运动的长度限制   
  71.                 getXY(RockerCircleX, RockerCircleY, RockerCircleR, tempRad);   
  72.             } else {//如果小球中心点小于活动区域则随着用户触屏点移动即可   
  73.                 SmallRockerCircleX = (int) event.getX();   
  74.                 SmallRockerCircleY = (int) event.getY();   
  75.             }   
  76.         } else if (event.getAction() == MotionEvent.ACTION_UP) {   
  77.             //当释放按键时摇杆要恢复摇杆的位置为初始位置   
  78.             SmallRockerCircleX = 100;   
  79.             SmallRockerCircleY = 100;   
  80.         }   
  81.         return true;   
  82.     }   
  83.     /**  
  84.      *  
  85.      * @param R  
  86.      *            圆周运动的旋转点  
  87.      * @param centerX  
  88.      *            旋转点X  
  89.      * @param centerY  
  90.      *            旋转点Y  
  91.      * @param rad  
  92.      *            旋转的弧度  
  93.      */  
  94.     public void getXY(float centerX, float centerY, float R, double rad) {   
  95.         //获取圆周运动的X坐标   
  96.         SmallRockerCircleX = (float) (R * Math.cos(rad)) + centerX;   
  97.         //获取圆周运动的Y坐标   
  98.         SmallRockerCircleY = (float) (R * Math.sin(rad)) + centerY;   
  99.     }   
  100.     public void draw() {   
  101.         try {   
  102.             canvas = sfh.lockCanvas();   
  103.             canvas.drawColor(Color.WHITE);   
  104.             //设置透明度   
  105.             paint.setColor(0x70000000);   
  106.             //绘制摇杆背景   
  107.             canvas.drawCircle(RockerCircleX, RockerCircleY, RockerCircleR, paint);   
  108.             paint.setColor(0x70ff0000);   
  109.             //绘制摇杆   
  110.             canvas.drawCircle(SmallRockerCircleX, SmallRockerCircleY,   
  111.                     SmallRockerCircleR, paint);   
  112.         } catch (Exception e) {   
  113.             // TODO: handle exception   
  114.         } finally {   
  115.             try {   
  116.                 if (canvas != null)   
  117.                     sfh.unlockCanvasAndPost(canvas);   
  118.             } catch (Exception e2) {   
  119.             }   
  120.         }   
  121.     }   
  122.     public void run() {   
  123.         // TODO Auto-generated method stub   
  124.         while (flag) {   
  125.             draw();   
  126.             try {   
  127.                 Thread.sleep(50);   
  128.             } catch (Exception ex) {   
  129.             }   
  130.         }   
  131.     }   
  132.     public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {   
  133.         Log.v("Himi", "surfaceChanged");   
  134.     }   
  135.     public void surfaceDestroyed(SurfaceHolder holder) {   
  136.         flag = false;   
  137.         Log.v("Himi", "surfaceDestroyed");   
  138.     }   
  139. }  

       如果大家想美化摇杆，那就让你们的美工给出两张圆形图吧。

       还在等什么？立刻为你的游戏加上摇杆吧！

Tags:触屏事件 | 2012/12/23 | 发表评论

相关文章: