前面已经了解过<a href="http://www.jianshu.com/p/05aa77075fe5">SurfaceView</a>了,今天这里就直接开始通过Canvas来实现绘图相关的东西，我这里主要就是通过实现一个游戏来完成Canvas的学习。
<b>1.创建一个GameView的类并且继承SurfaceView。</b>
<b>2.创建一个管理游戏背景的类DrawBackground</b>
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;
}
}
<b>3.说一下游戏背景的实现的思路：</b>
通过选择的场景在DrawBackground中加载得到一个图片的对象mBackgroundBottom，然后再通过getScaleMap得到mBackgroundBottom垂直翻转的新对象mBackgroundTop，getScaleMap在BitmapUtils工具类中。
初始化这两张图片的位置，整个屏幕的可见区域，肯定只能显示一张图片（mBackgroundBottom），那另一张呢（mBackgroundTop）？由于飞机的感觉是一直向上飞行的感觉，所以地图应该一直感觉在往下运动，我们就需要去改变两种图片在surface中Y的坐标实现动画效果，所以另一张图片就在屏幕顶部的最上方。
通过updateGame去增加Y的坐标，判断哪一张图片移动到屏幕之外了就立刻移动到屏幕最顶部的上方。通过这样的逻辑就能实现地图无限循环。
<b>在GameView中使用</b>
最后附上<a href="https://github.com/tangyxgit/GameCanvas">源码</a>
再次重复一下，学习Canvas有一定的过程，源码是通过git持续更新，如果有什么不太明白，你可以查看前面的文章。
下一节将会讲解主角的逻辑以及手势控制，如果你也喜欢就一起来学习吧。
<b>学习是生活的一种态度</b>
<a href="http://www.jianshu.com/p/05aa77075fe5">上一篇</a> <a href="http://www.jianshu.com/p/8b65e7e73f70">下一篇</a>
