前面已经了解过SurfaceView了,今天这里就直接开始通过Canvas来实现绘图相关的东西，我这里主要就是通过实现一个游戏来完成Canvas的学习。

1.创建一个GameView的类并且继承SurfaceView。

Paste_Image.png

2.创建一个管理游戏背景的类DrawBackground

package com.tangyx.game.holder;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import com.tangyx.game.util.BitmapUtils;

import com.tangyx.game.util.ScreenUtils;

/**

* Created by tangyx on 2016/12/22.

*

*/

public class DrawBackground extends DrawGame {

private Bitmap mBackgroundTop;

private Bitmap mBackgroundBottom;

/**

* 因为背景是全屏的，并且飞机是一直在往上运动，所以X坐标不需要运动，只需要改变y的坐标来完成运动效果

*/

private float mTopY;

private float mBottomY;

/**

* 背景移动速度

*/

private float mSpeedBY=4;

public DrawBackground(Context context,String background){

super(context);

//加载背景图片

mBackgroundBottom = BitmapUtils.ReadBitMap(context,background);

//把背景图大小设置为手机屏幕大小

mBackgroundBottom = BitmapUtils.getBitmap(getContext(), mBackgroundBottom,0);

//把背景图在垂直翻转生成一张新的图片

mBackgroundTop = BitmapUtils.getScaleMap(mBackgroundBottom);

}

@Override

void initialize() {

mBottomY = 0;

/**

* 第一张背景放在屏幕的顶部外面

*/

mTopY = -ScreenUtils.getScreenHeight(getContext());

mSpeedBY=4;

}

@Override

void onDraw(Canvas canvas) {

//背景是一张图片，所以我们应该通过canvas的drawBitmap来实现，

// 景的图片其实一直是一张图片在由上至下运动，通过两张图片链接进行循环

canvas.drawBitmap(mBackgroundBottom,0, mBottomY,mPaint);

canvas.drawBitmap(mBackgroundTop,0, mTopY,mPaint);

}

@Override

void updateGame() {

mBottomY +=mSpeedBY;

mTopY +=mSpeedBY;

//当mBackgroundBottom已经移动出屏幕就自动设置到屏幕之外的最顶部。

if(mBottomY >= ScreenUtils.getScreenHeight(getContext())){

mBottomY = -ScreenUtils.getScreenHeight(getContext());

}

//mBackgroundTop已经移动出屏幕就自动设置到屏幕之外的最顶部。

if(mTopY >= ScreenUtils.getScreenHeight(getContext())){

mTopY = -ScreenUtils.getScreenHeight(getContext());

}

}

}

它继承了DrawGame，这是我自定义的一个抽象类，因为后面可能不会的内容都需要继承它来进行规范管理。

package com.tangyx.game.holder;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

/**

* Created by tangyx on 2016/12/22.

*

*/

public abstract class DrawGame {

private Context mContext;

protected Paint mPaint;

public DrawGame(Context context) {

this.mContext = context;

mPaint = new Paint();

mPaint.setColor(Color.WHITE);

initialize();

}

/**

* 初始化内容

*/

abstract void initialize();

/**

* 绘制内容

* @param canvas

*/

abstract void onDraw(Canvas canvas);

/**

* 数据更新

*/

abstract void updateGame();

public Context getContext() {

return mContext;

}

}

3.说一下游戏背景的实现的思路：

通过选择的场景在DrawBackground中加载得到一个图片的对象mBackgroundBottom，然后再通过getScaleMap得到mBackgroundBottom垂直翻转的新对象mBackgroundTop，getScaleMap在BitmapUtils工具类中。

初始化这两张图片的位置，整个屏幕的可见区域，肯定只能显示一张图片(mBackgroundBottom)，那另一张呢(mBackgroundTop)？由于飞机的感觉是一直向上飞行的感觉，所以地图应该一直感觉在往下运动，我们就需要去改变两种图片在surface中Y的坐标实现动画效果，所以另一张图片就在屏幕顶部的最上方。

通过updateGame去增加Y的坐标，判断哪一张图片移动到屏幕之外了就立刻移动到屏幕最顶部的上方。通过这样的逻辑就能实现地图无限循环。

在GameView中使用

Paste_Image.png

Paste_Image.png

Paste_Image.png

background.gif

最后附上源码

再次重复一下，学习Canvas有一定的过程，源码是通过git持续更新，如果有什么不太明白，你可以查看前面的文章。

下一节将会讲解主角的逻辑以及手势控制，如果你也喜欢就一起来学习吧。

学习是生活的一种态度

上一篇 下一篇