Android游戏开发之360°半透明摇杆

字数统计: 1k字   |   阅读时长≈ 5分

照着PDF做了个摇杆并实现了 摇杆控制角色行走， 在这里贴下代码做下笔记。

首先新建了一个VIEW  继承SurfaceView   实现相关接口

<pre name="code" class="java">

public class PlayerView extends MapView implements Callback,Runnable


)

 相关变量声明与初始化设置





  1. protected final int DIR_LEFT = 0;
  2.     protected final int DIR_RIGHT = 1;
  3.     private int dir = DIR_RIGHT;
  4.     private int robotX,robotY;
  5.     private boolean isUp=false,isDown=false,isLeft=false,isRight=false;
  6.     //摇杆的圆半径
  7.     private float smallCenterX = 120,smallCenterY=120,smallCenterR = 20;
  8.     private float BigCenterX = 120,BigCenterY = 120,BigCenterR = 40;
  9.     //圆运动角度
  10.     private double angle;
  11.     
  12.     public PlayerView(Context context) {
  13.         super(context);
  14.         holder = getHolder();
  15.         holder.addCallback(this);//设置监听
  16.         paint = new Paint();
  17.         paint.setColor(Color.BLACK);
  18.         setFocusable(true);//设置焦点
  19.     }
  20.     
  21.     @Override
  22.     public void surfaceCreated(SurfaceHolder holder) {
  23.         bitmap = BitmapFactory.decodeResource(this.getResources(),
  24.                 R.drawable.robot);
  25.         bmpX = -bitmap.getWidth()+this.getWidth();
  26.         bmpY = this.getHeight() - bitmap.getHeight();
  27.         Thread thread = new Thread(this);
  28.         thread.start();
  29.         
  30.         //设置摇杆初始位置
  31.         smallCenterX = 40;
  32.         smallCenterY = this.getHeight()-40;
  33.         BigCenterX = 40;
  34.         BigCenterY = this.getHeight()-40;
  35.     }





 
 接下来是 摇杆和 角色的绘制， 都放一起了


 


  1. private void drawFrame(){
  2.         canvas = holder.lockCanvas();
  3.         canvas.drawColor(Color.WHITE);
  4.         int frameW = bitmap.getWidth()/6; //获得每一帧的宽
  5.         int frameH = bitmap.getHeight()/2; //获得每一帧的高
  6.         int col = bitmap.getWidth()/frameW; //获得位图列数
  7.         int x = cureentFrame%col * frameW;
  8.         int y = cureentFrame /col * frameH;
  9.         paint.setAlpha(255);//不透明
  10.         canvas.save();
  11.         //paint.setColor(Color.RED);//设置画笔颜色
  12.         //设置每帧可见区域为角色一样大小
  13.         canvas.clipRect(robotX,robotY,robotX+bitmap.getWidth()/6,robotY+bitmap.getHeight()/2);
  14.         if(dir==DIR_LEFT){
  15.             //如果向左移动则设置角色翻转
  16.             canvas.scale(-1,1,robotX-x+bitmap.getWidth()/2,robotY-y+bitmap.getHeight()/2);
  17.         }
  18.         canvas.drawBitmap(bitmap, robotX-x,robotY-y, paint);
  19.         canvas.restore();
  20.         //摇杆绘制
  21.         paint.setAlpha(0x77); //设置摇杆透明度
  22.         canvas.drawCircle(BigCenterX, BigCenterY, BigCenterR, paint);//大圆
  23.         canvas.drawCircle(smallCenterX, smallCenterY, smallCenterR, paint);//小圆
  24.         
  25.         holder.unlockCanvasAndPost(canvas);
  26.     }








计算余弦




  1.     /**
  2.      * Math.cos 返回余弦  
  3.      * @param centerX 围绕大圆中心点X
  4.      * @param centerY 围绕大圆中心点Y
  5.      * @param R    围绕大圆半径
  6.      * @param rad   旋转弧度
  7.      * 方法： 设置小圆中心点的坐标位置
  8.      */
  9.     private void setSmallCircleXY(float centerX,float centerY,float R,double rad){
  10.         smallCenterX = (float)(R*Math.cos(rad))+centerX;
  11.         smallCenterY = (float)(R*Math.sin(rad))+centerY;
  12.     }








剩下的代码直接贴吧  都有注释的




  1.     public void logic(){
  2.         cureentFrame++;//渲染帧数
  3.         if(cureentFrame>=12) //超过12帧 则重置
  4.             cureentFrame = 0;
  5.         if(isUp)
  6.             robotY -=5;
  7.         if(isDown)
  8.             robotY+=5;
  9.         if(isLeft)
  10.             robotX-=5;
  11.         if(isRight)
  12.             robotX+=5;
  13.         //angle++;
  14.         /*if(angle>=360)
  15.             angle=0;
  16.         setSmallCircleXY(BigCenterX, BigCenterY, BigCenterR, angle*Math.PI/180);//Math.PI 圆的周长与直径之比
  17.         
  18. */    }
  19.     
  20.     /**
  21.      * 得到两点之间弧度
  22.      * @param px1
  23.      * @param py1
  24.      * @param px2
  25.      * @param py2
  26.      * @return
  27.      */
  28.     public double getRad(float px1,float py1,float px2,float py2){
  29.         float x = px2 - px1;//得到两点X的距离
  30.         float y = py1 -py2; //y
  31.         //算出斜边长
  32.         float Hypotenuse = (float) Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2));
  33.         float cosAngle = x/Hypotenuse; //得到角度的余弦值
  34.         //通过反余弦获得角度弧度
  35.         float rad = (float)Math.acos(cosAngle);
  36.         if(py2<py1)
  37.             rad = -rad;
  38.         return rad;
  39.     }
  40.     
  41.     private void stopMove(){
  42.         isUp = false;
  43.         isDown = false;
  44.         isLeft = false;
  45.         isRight = false;
  46.     }
  47.     
  48.     @Override
  49.     public boolean onTouchEvent(MotionEvent event) {
  50.         //用户抬起小圆恢复初始位置
  51.         if(event.getAction()==MotionEvent.ACTION_UP){
  52.             smallCenterX = BigCenterX;
  53.             smallCenterY = BigCenterY;
  54.             stopMove();//停止移动
  55.         }else{
  56.             int pointX = (int)event.getX();
  57.             int pointY = (int)event.getY();
  58.             //判断用户点击位置是否在大圆内
  59.             if(Math.sqrt(Math.pow((BigCenterX-(int)event.getX()),2)+Math.pow((BigCenterY-(int)event.getY()), 2))<=BigCenterR){
  60.                 smallCenterX = pointX;//让小圆跟随用户点击位置
  61.                 smallCenterY = pointY;
  62.             }else{
  63.                 setSmallCircleXY(BigCenterX, BigCenterY, BigCenterR, getRad(BigCenterX, BigCenterY, pointX, pointY));
  64.             }
  65.             
  66.             double radian = getRad(BigCenterX, BigCenterY, pointX, pointY);
  67.             
  68.             angle = radian/Math.PI*180;
  69.             Log.v("角度：", "============>"+angle+"   radian:"+radian);
  70.             stopMove();
  71.             if(angle<-67.5&&angle>-112.5){ //上
  72.                 isUp = true;
  73.             }else if(angle<-22.5&&angle>-67.5){ //右上
  74.                 isUp=true;
  75.                 isRight = true;
  76.                 dir = DIR_RIGHT;
  77.             }else if(angle>-167.5&&angle<-112.5){  //左上
  78.                 dir=DIR_LEFT;
  79.                 isLeft =true;
  80.                 isUp = true;
  81.             }else if(angle>67.5&&angle<112.5){ //下
  82.                 isDown = true;
  83.             }else if(angle<167.5&&angle>112.5){ //左下
  84.                 dir=DIR_LEFT;
  85.                 isDown = true;
  86.                 isLeft = true;
  87.             }else if(angle>-22.5&&angle<22.5){  //右
  88.                 dir = DIR_RIGHT;
  89.                 isRight = true;
  90.             }else if(angle>22.5&&angle<67.5){//右下
  91.                 dir=DIR_RIGHT;
  92.                 isDown = true;
  93.                 isRight = true;
  94.             }else if((angle>-212.5&&angle<-167.5)||(angle<212.5&&angle>167.5)){ //下
  95.                 dir = DIR_LEFT;
  96.                 isLeft = true;
  97.             }
  98.                 
  99.                 
  100.                 
  101.         }
  102.         return true;
  103.     }
  104.  
  105.     @Override
  106.     public void run() {
  107.         while (flag) {
  108.             long start = System.currentTimeMillis();
  109.             drawFrame();
  110.             logic();
  111.             long end = System.currentTimeMillis();
  112.             try {
  113.                 if (end - start < 50) {
  114.                     Thread.sleep(50 - (end - start));
  115.                 }
  116.             } catch (InterruptedException e) {
  117.                 e.printStackTrace();
  118.             }
  119.         }
  120.         
  121.     }









 



























扫一扫，分享到微信



























































tag:






    

    
缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
     npm i hexo-generator-json-content --save

    
3、在根目录_config.yml里添加配置：

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

    

    

  • 


    



    

    



    

    • 












关于我：多年工作经验，熟悉微高并发服务架构设计与开发，有AI客户机器人开发相关经验。 
项目或内推机会请联系邮箱： [email protected] 
 Update By 2023-6-14