《android游戏编程之从零开始》第六章样章

1 6.1 360°平滑游戏导航摇杆 在 Android 系统中很多机型是没有实体导航按键的，那么如果想让一个游戏在所有Android 系统的机型上运行，就要利用 Android 系统都支持触屏的特点来进行设计。既然所有 Android 系统都支持触屏，那么就可以想到，在屏幕上绘制一个游戏摇杆供用户操作游戏，这也是目前 Android 游戏开发中最常用的一种做法了。 下面就来实现Android手机上的360°平滑游戏摇杆吧！首先观察如图6-1所示的效果 。 图 6-1 摇杆示意图 图 6-1 是一个摇杆的示意图，从图中加以分析： l 玩家操作的应该是中心红色的小圆； l 小圆的最大活动范围是围绕大圆做圆周运动； l 既然小圆有活动范围，那么当用户的触屏点在大圆以外的位置，那么小圆的角度应该与用户触点的角度相同。 首先实现的应该是在屏幕上绘制两个大小不一的圆形 ， 并且让小圆中心点围绕大圆做圆周运动。 新建项目“RockerProject”，游戏框架为 SurfaceView 游戏框架，项目对应的源代码为“6-1（360°平滑游戏摇杆）”。 修改 MySurfaceView： /定义两个圆形的中心点坐标与半径 private float smallCenterX = 120, smallCenterY = 120, smallCenterR = 20; private float BigCenterX = 120, BigCenterY = 120, BigCenterR = 40; /当前圆周运动的角度 private int angle; /修改绘图函数： public void myDraw() 2 . /绘制大圆 paint.setAlpha(0x77); canvas.drawCircle(BigCenterX, BigCenterY, BigCenterR, paint); /绘制小圆 canvas.drawCircle(smallCenterX, smallCenterY, smallCenterR, paint); . 新封装一个圆周运动时，得到小圆坐标的方法： /* * 小圆针对于大圆做圆周运动时，设置小圆中心点的坐标位置 * param centerX * 围绕的圆形(大圆)中心点X坐标 * param centerY * 围绕的圆形(大圆)中心点Y坐标 * param R * 围绕的圆形(大圆)半径 * param rad * 旋转的弧度 */ public void setSmallCircleXY(float centerX, float centerY, float R, double rad) /获取圆周运动的X坐标 smallCenterX = (float) (R * Math.cos(rad) + centerX; /获取圆周运动的Y坐标 smallCenterY = (float) (R * Math.sin(rad) + centerY; 这里是根据角度弧度的转换，再通过三角函数定理得到小圆坐标位置的。 逻辑函数： private void logic() /让角度在0360循环 angle+; if (angle >= 360) angle = 0; /弧度 = 角度PI/*180 setSmallCircleXY(BigCenterX, BigCenterY, BigCenterR, angle * Math.PI / 180); 运行项目，效果如图 6-2 所示。 3 图 6-2 圆周运动 此步完成之后，下面就应该考虑用户触点的位置，大概分为两种情况： l 用户触点位置在大圆内或者大圆上，那么小圆的中心点直接跟随玩家触点位置即可； l 用户触点位置在大圆外，那么小圆中心肯定在大圆的圆周上，但是小圆所在大圆上的角度，应该等同于用户触点位置相对于大圆的角度。 首先删去刚才在逻辑函数中的代码，然后封装一个得到玩家触点相对于大圆角度的方法： /* * 得到两点之间的弧度 * param px1 第一个点的X坐标 * param py1 第一个点的Y坐标 * param px2 第二个点的X坐标 * param py2 第二个点的Y坐标 * return */ public double getRad(float px1, float py1, float px2, float py2) /得到两点X的距离 float x = px2 - px1; /得到两点Y的距离 float y = py1 - py2; /算出斜边长 float Hypotenuse = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y,2); /得到这个角度的余弦值（通过三角函数中的定理 ：邻边/斜边=角度余弦值） float cosAngle = x / Hypotenuse; /通过反余弦定理获取其角度的弧度 float rad = (float) Math.acos(cosAngle); /当触屏的位置Y坐标<摇杆的Y坐标，取反值-0-180 if (py2 < py1) rad = -rad; return rad; 修改触屏监听函数： 4 public boolean onTouchEvent(MotionEvent event) /当用户手指抬起，应该恢复小圆到初始位置 if (event.getAction() = MotionEvent.ACTION_UP) smallCenterX = BigCenterX; smallCenterY = BigCenterY; else int pointX = (int) event.getX(); int pointY = (int) event.getY(); /判断用户点击的位置是否在大圆内 if (Math.sqrt(Math.pow(BigCenterX - (int) event.getX(), 2) + Math.pow(BigCenterY - (int) event.getY(), 2) <= BigCenterR) /让小圆跟随用户触点位置移动 smallCenterX = pointX; smallCenterY = pointY; else setSmallCircleXY(BigCenterX, BigCenterY, BigCenterR, getRad(BigCenterX, BigCenterY, pointX, pointY); return true; 运行项目，效果如图 6-3 所示。 到此整个摇杆的制作就完成了，那么如何在游戏中使用它呢？其实很简单。 假如需要使用摇杆控制游戏主角的移动，那么首先将整个 360°分成 4 等分或者 8 等分 ， 对应主角的 4 方向或者 8 方向 ； 然后通过封装的两点之间得到弧度的函数获取摇杆弧度 ，将其弧度转换成角度 ， 再将摇杆的角度与之前的 360°分成的 4 或 8 等分范围比对处理即可 。 图 6-3 360°平滑游戏摇杆 6.2 多触点实现图片缩放 在 Android SDK 2.0 中，对应 API 5 时开始支持屏幕的多触点，不过真机测试发现，目5 前最多支持两个触点；本小节就利用多触点的功能来实现缩放位图。 新建项目“MoreContactsProject” ，游戏框架为 SurfaceView 游戏框架，对应的项目源代码码为“6-2（多触点缩放位图） ” ；这里需要注意，多触点是 API 5 以后支持的功能，所以Android 模拟器要选择 SDK 5 或以上的版本，否则运行项目会报错。 首先定义用到的成员变量： /声明一张icon位图 private Bitmap bmpIcon=BitmapFactory.decodeResource(this.getResources(), R.drawable.icon); /记录两个触屏点的坐标 private int x1, x2, y1, y2; /倍率 private float rate = 1; /记录上次的倍率 private float oldRate = 1; /记录第一次触屏时线段的长度 private float oldLineDistance; /判定是否头次多指触点屏幕 private boolean isFirst = true; 绘图函数： public void myDraw() . canvas.save(); /缩放画布(以图片中心点进行缩放，X、Y轴缩放比例相同) canvas.scale(rate, rate, screenW / 2, screenH / 2); /绘制位图icon canvas.drawBitmap(bmpIcon, screenW / 2 - bmpIcon.getWidth() / 2, screenH / 2 - bmpIcon.getHeight() / 2, paint); canvas.restore(); /便于观察，这里绘制两个触点时形成的线段 canvas.drawLine(x1, y1, x2, y2, paint); . 触屏监听事件： public boolean onTouchEvent(MotionEvent event) /用户手指抬起默认还原为第一次触屏标识位，并且保存本次的缩放比例 if (event.getAction() = MotionEvent.ACTION_UP) isFirst = true; oldRate = rate; else x1 = (int) event.getX(0); y1 = (int) event.getY(0); x2 = (int) event.getX(1); y2 = (int) event.getY(1); if (event.getPointerCount() = 2) if (isFirst) /得到第一次触屏时线段的长度 oldLineDistance = (float)Math.sqrt (Math.pow(event.getX(1) - event.getX(0), 2) + 6 Math.pow(event.getY(1) - event.getY(0), 2); isFirst = false; else /得到非第一次触屏时线段的长度 float newLineDistance = (float) Math.sqrt (Math.pow(event.getX(1) - event.getX(0), 2) + Math.pow(event.getY(1) - event.getY(0), 2); /获取本次的缩放比例 rate = oldRate * newLineDistance/oldLineDistance; return true; 上面代码中，使用了两个常用的函数获取触屏点的 X、Y 坐标： MotionEvent.getX（int pointerIndex） 作用：获取触屏点的 X 坐标 参数：触屏点下标（下标从 0 开始） MotionEvent.getY（int pointerIndex） 作用：获取触屏点的 Y 坐标 参数：触屏点下标（下标从 0 开始） 除此之