Android Canvas打飞机之让背景动起来

前面已经了解过<a href="http://www.jianshu.com/p/05aa77075fe5">SurfaceView</a>了,今天这里就直接开始通过Canvas来实现绘图相关的东西，我这里主要就是通过实现一个游戏来完成Canvas的学习。

<b>1.创建一个GameView的类并且继承SurfaceView。</b>

Paste_Image.png

<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>

Paste_Image.png Paste_Image.png Paste_Image.png background.gif

最后附上<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>