自定义View之游戏摇杆键盘实现

最新推荐文章于 2024-04-16 22:19:56 发布
最新推荐文章于 2024-04-16 22:19:56 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muziby/article/details/77671677
版权

由来

原本的项目，操作方向的方式为上下左右，左上需要同时按住左键和右键的方式进行操作。
image.png
近来升级项目，操作方式改为类似王者荣耀的摇杆操作。如下图：
image.png

绘制背景

实现遥感按钮，需要绘制背景，绘制中心的遥感按钮。绘制遥感背景，需要创建一个RemoteViewBg类，存储背景图，减少重复创建bitmap。RemoteViewBg类代码如下：

public class RemoteViewBg {
private Bitmap bitmapBg;
public RemoteViewBg(Bitmap bitmap) {
    bitmapBg = bitmap;
}

//背景的绘图函数
public void draw(Canvas canvas, Paint paint, Rect src0 ,Rect dst0 ) {
    canvas.drawBitmap(bitmapBg, src0, dst0, paint);
}
}

点击触摸事件

重写系统的触摸时间，判断触摸点在背景范围内还是背景范围外

  @Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() ==     MotionEvent.ACTION_MOVE) {
 //         // 在范围外触摸
        if (Math.sqrt(Math.pow((bigCircleX - (int) event.getX()), 2) + Math.pow((bigCircleY - (int) event.getY()), 2)) >= bigCircleR) {

            double tempRad = getRad(bigCircleX, bigCircleY, event.getX(), event.getY());

            getXY(bigCircleX, bigCircleY, bigCircleR, tempRad);
        } else {//范围内触摸
            smallCircleX = (int) event.getX();
            smallCircleY = (int) event.getY();
        }
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        smallCircleX = bigCircleX;
        smallCircleY = bigCircleY;

    }
    return true;
}

弧度计算

通过 event.getX(), event.getY()获得当前的触摸点，与圆点进行计算，获取弧度

/***
 * 得到两点之间的弧度
 */
public float getRad(float px1, float py1, float px2, float py2) {
    float x = px2 - px1;

    float y = py1 - py2;
    //斜边的长
    float z = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    float cosAngle = x / z;
    float rad = (float) Math.acos(cosAngle);

    if (py2 < py1) {
        rad = -rad;
    }
    return rad;
}

图形绘制

通过 canvas.drawCircle()和 canvas.drawBitmap()分别进行遥感按钮和遥感背景的绘制，注意对遥感背景的保存，如果在绘制的时候每次BitmapFactory.decodeResource()会增加耗时，因此只需在surfaceCreated（）中进行bitmap的生成即可。

public void draw() {
    try {
        canvas = sfh.lockCanvas();
        canvas.drawColor(getResources().getColor(R.color.ghostwhite));


    // 指定图片绘制区域(左上角的四分之一)
        Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

     // 指定图片在屏幕上显示的区域
        Rect dst = new Rect(bigCircleX - bigCircleR, bigCircleY - bigCircleR, bigCircleX + bigCircleR, bigCircleY + bigCircleR);
        // 绘制图片
        remoteViewBg.draw(canvas, paint, src, dst);
        paint.setColor(0x70ff0000);
        //绘制摇杆
        canvas.drawCircle(smallCircleX, smallCircleY, smallCircleR, paint);
    } catch (Exception e) {
        // TODO: handle exception
    } finally {
        try {
            if (canvas != null)
                sfh.unlockCanvasAndPost(canvas);
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
}

使用

在activity中动态添加

    RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.dance_relative_layout);
    remoteSurfaceView = new RemoteSurfaceView(this);
    params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 
    RelativeLayout.LayoutParams.MATCH_PARENT);
    remoteSurfaceView.setLayoutParams(params);
    relativeLayout.addView(remoteSurfaceView);

全部代码

public class RemoteSurfaceView extends SurfaceView implements Callback, Runnable {
private float scale = this.getResources().getDisplayMetrics().density;
private Thread th;
private SurfaceHolder sfh;
private Canvas canvas;
private Paint paint;
private boolean flag;

private int bigCircleX = 0;
private int bigCircleY =0;
private int bigCircleR = 0;
//摇杆的X,Y坐标以及摇杆的半径
private float smallCircleX = 0;
private float smallCircleY = 0;
private float smallCircleR = 0;


private Bitmap bitmap;
private RemoteViewBg remoteViewBg;

public RemoteSurfaceView(Context context) {
    super(context);
    sfh = this.getHolder();
    sfh.addCallback(this);
    paint = new Paint();
    paint.setAntiAlias(true);
    setFocusable(true);
    setFocusableInTouchMode(true);
    setZOrderOnTop(true);
    getHolder().setFormat(PixelFormat.TRANSPARENT);

}

public void surfaceCreated(SurfaceHolder holder) {
    int width = getWidth();
    int height = getHeight();
    bigCircleX = width / 2;
    bigCircleY = height / 2;
    bigCircleR = width / 4;
    smallCircleX = width / 2;
    smallCircleY = height / 2;
    smallCircleR = width / 8;
    bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.fangxiang);
    remoteViewBg = new RemoteViewBg(bitmap);
    th = new Thread(this);
    flag = true;
    th.start();


}

/***
 * 得到两点之间的弧度
 */
public float getRad(float px1, float py1, float px2, float py2) {
    float x = px2 - px1;

    float y = py1 - py2;
    //斜边的长
    float z = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    float cosAngle = x / z;
    float rad = (float) Math.acos(cosAngle);

    if (py2 < py1) {
        rad = -rad;
    }
    return rad;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE) {
        // 在范围外触摸
        if (Math.sqrt(Math.pow((bigCircleX - (int) event.getX()), 2) + Math.pow((bigCircleY - (int) event.getY()), 2)) >= bigCircleR) {

            double tempRad = getRad(bigCircleX, bigCircleY, event.getX(), event.getY());

            getXY(bigCircleX, bigCircleY, bigCircleR, tempRad);
        } else {//范围内触摸
            smallCircleX = (int) event.getX();
            smallCircleY = (int) event.getY();
        }
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        smallCircleX = bigCircleX;
        smallCircleY = bigCircleY;

    }
    return true;
}




public void getXY(float x, float y, float R, double rad) {
    //获取圆周运动的X坐标
    smallCircleX = (float) (R * Math.cos(rad)) + x;
    //获取圆周运动的Y坐标
    smallCircleY = (float) (R * Math.sin(rad)) + y;
}

public void draw() {
    try {
        canvas = sfh.lockCanvas();
        canvas.drawColor(getResources().getColor(R.color.ghostwhite));


       // 指定图片绘制区域(左上角的四分之一)
        Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

       // 指定图片在屏幕上显示的区域
        Rect dst = new Rect(bigCircleX - bigCircleR, bigCircleY - bigCircleR, bigCircleX + bigCircleR, bigCircleY + bigCircleR);
        // 绘制图片
        remoteViewBg.draw(canvas, paint, src, dst);
        paint.setColor(0x70ff0000);
        //绘制摇杆
        canvas.drawCircle(smallCircleX, smallCircleY, smallCircleR, paint);
    } catch (Exception e) {
        // TODO: handle exception
    } finally {
        try {
            if (canvas != null)
                sfh.unlockCanvasAndPost(canvas);
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
}

public void run() {

    while (flag) {
        draw();
        try {
            Thread.sleep(50);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {


}

public void surfaceDestroyed(SurfaceHolder holder) {
    flag = false;

}
  }

最后

近来在赶项目，因此本文语言组织较为随意，且看且看吧，觉得有用，不妨动动手关注下博主。

木子饼干
关注
专栏目录
【我的Android进阶之旅】Android自定义View实现一个游戏摇杆，来实现监听遥动的方向或者监听摇动的角度的功能
字节卷动
05-12 1019
一、需求描述 去年有个需求，需要使用自定义View实现一个游戏摇杆，来识别上下左右摇动的方向。 有点类似下面这样的王者荣耀游戏摇杆的效果 二、业界已有的参考资料 在下面这篇博客介绍了如何自定义游戏摇杆 2.1 博客介绍 Android自定义摇杆 2.1.1 功能 支持自适应大小 支持2个方向、4个方向、8个方向的摇动监听 支持摇动角度获取 可选回调模式 支持可摇动区域自定义 支持摇杆自定义 支持设置图片、色值、Shape图形 2.1.2 效果图 2.1.3 设置回调方式 setCallBac
Android自定义View之游戏摇杆键盘实现(一)，值得推荐
m0_66264569的博客
02-05 407
} else {//范围内触摸 smallCircleX = (int) event.getX(); smallCircleY = (int) event.getY(); } } else if (event.getAction() == MotionEvent.ACTION_UP) { smallCircleX = bigCircleX; smallCircleY = bigCircleY; } return true; } 弧度计算 通过 event.getX(), event.getY()获得当前的触
Android自定义View实现游戏摇杆键盘的方法示例
01-04
前言 本文主要给大家介绍的是关于Android自定义View实现游戏摇杆键盘的相关内容，为什么会有这篇文章呢？因为在之前的一个项目，操作方向的方式为上下左右，左上需要同时按住左键和右键的方式进行操作。 如下图： 近来需要升级项目，操作方式改为类似王者荣耀的摇杆操作。 如下图： 好了，下面话不多说了，跟着小编来一起看看是如何实现的吧。 绘制背景 实现遥感按钮，需要绘制背景，绘制中心的遥感按钮。绘制遥感背景，需要创建一个RemoteViewBg类，存储背景图，减少重复创建bitmap。 RemoteViewBg类代码如下： public class RemoteViewBg { priva
Android自定义View之游戏摇杆键盘实现(一)
最新发布
xcbyaya的博客
04-16 268
最后我想说：对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，
自定义View之游戏摇杆键盘实现（二）
木子饼干的博客
03-16 3494
前言 去年开发项目，需要实现一个遥感按钮，控制公司机器人行走，于是通过自定义SurfaceView实现了该功能，想了解的话，传送门在这自定义View之游戏摇杆键盘实现，但由于传输指令过程中对时间准确度要求较高，调试后发现，自定义绘制过程中时间不稳定，性能较差。于是决定不自定义SurfaceView，改而采用自定义View实现。 最终效果 此版本相对于之前自定义SurfaceView版本，...
Android自定义View系列（二）——打造一个仿2K游戏摇杆
RoadToGeek技术小栈
07-22 3449
写作原因：Android进阶过程中有一个绕不开的话题——自定义View。这一块是安卓程序员更好地实现功能自主化必须迈出的一步。下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法。从自定义View到自定义ViewGroup，View事件处理再到View深入分析（这一章如果水平未到位可能今后再补充），其中会涉及一些小的知识，包括Canvas的使用、动画等等。这是本系列的第二章，博主将通过定
Android开发自定义游戏摇杆键盘
03-22
本主题聚焦于如何利用自定义View来实现一个游戏摇杆键盘，这在许多手机游戏中，尤其是像“王者荣耀”这样的竞技游戏中十分常见。游戏摇杆键盘通常包括一个固定不动的基座和一个可移动的游标，用户可以通过触摸和滑动...
自定义View之虚拟摇杆
04-05
博客介绍https://blog.csdn.net/jinmie0193/article/details/79825060
Android自定义view摇杆,Android仿游戏摇杆 自定义控件
weixin_42510140的博客
05-25 366
Android上使用FrameLayout制作游戏摇杆控件 先看效果图这里写图片描述首先设置监听view.setCallback(callback);private CircleViewByImage.ActionCallback callback = new CircleViewByImage.ActionCallback() {@Overridepublic void forwardMove(...
android 游戏虚拟摇杆实现
04-30
android 模拟游戏虚拟摇杆实现，可以扩展实现8方向控制
Android自定义摇杆控件
10-21
一个用贴图片的方式制作的摇杆控件。
Android自定义虚拟摇杆，虚拟四分按盘，左右拖动按盘
06-23
虚拟摇杆，上下左右控制，可控速度，可改颜色背景阴影； 虚拟按盘，上下左右控制，形状可变圆形或椭圆； 左右拖动控制组件；
代码实现摇杆
阿峰的博客
04-01 253
这个Big是外面绿色的大圈，而这个中心可移动的小圈则是褐色的。而我们默认的情况下俩个的锚点都是中心点，如果说你在写完代码拖拽时中心小球一直在向右上角移动就将Big的锚点调到左下角就可以随意调动。
Android 自定义摇杆控件（使用图片）
cx415462822的专栏
10-21 3924
效果图 1.找两张图片  1）Joystick背景图片circle_1.png   2）Joystick图片circle_2.png   2.在layout中创建布局文件 imagejoystick.xml 内容为： &lt;?xml version="1.0"encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="h...
android 四方向摇杆源码,手游摇杆(一)最简单的四方向摇杆
weixin_35772723的博客
05-26 1113
摇杆是所有手游中不可或缺的一部分，是最基本的操作方式，下面是用cococ creator实现的一个简单的四方向摇杆，后面将基于此慢慢优化。一、场景新建一个场景，拖入三中图片，如图：分别表示：spPlayer 代表游戏中的角色，通过摇杆控制其移动；spRoker 摇杆的事件影响区域；spRokerCenter 摇杆的中心点。二、事件监听为了能控制摇杆，需要监听摇杆的事件，新建一个脚本CompRoke...
Android_自定义遥控器按钮
givemeacondom的专栏
09-07 3388
源码地址https://github.com/GuoFeilong/RemoteControllerDemo来一波star谢谢HI,一辆开往幼儿园的小车,即将到站.昨天偶然看见群里哥们,抛出一张效果图,蛮有意思的,就自己实现下.遥控器的面板主控键看下我们临摹的效果模拟器配色有点淡,这些都是自定义属性可以设置的.这个View用传说中的不规则点击据说很简单,但是我没去搜,我就是用两三个简单的API实现了
android 摇杆控制方向键,Android Studio中实现摇杆
weixin_42615290的博客
05-25 1843
今天和大家分享一下Android Studio实现摇杆，原理很简单，代码中有对应的注释。实现效果图实现代码package com.example.fragmentcar1.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.gr...
Android高德地图的使用及附近地点POISearch列表展示
热门推荐
木子饼干的博客
06-01 1万+
获取APP KEY 打开高德开放平台, 登录后点击进入控制台，创建一个新应用，创建以后，添加新KEY，如下图 填写Key名称，发布版安全码SHA1和调试版SHA1。 项目签名 要获取发布版SHA1，先要对APK进行签名，点击工具栏中的Build， 点击 Generate Signed APK，如图 如果之前有存在的key，你可以选择已存在的，这里我选择新建一个，点击Cr...
Android自定义View实现王者荣耀摇杆键盘教程
本文提供了一种实现游戏摇杆键盘的自定义View方法，灵感来源于王者荣耀中的摇杆操作。首先，作者分享了遇到的问题背景，原项目中采用的是简单的方向键控制，而升级需求则要求使用摇杆控制。 实现这种功能的关键在于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值