手势操作的Snake游戏_游戏视图分析之TileView

本文是snake on a phone 贪吃蛇游戏的项目解析系列文章，基于google sample code 改编而成(项目链接)接上一篇文章

SnakeView继承自TileView，我们今天先对TileView进行分析，游戏主题界面我们前面已经看到过，网格状界面，基类TileView于此相符，多个Tiles堆积起来的视图，看一个View的实现主要看其onDraw函数如何绘制，此前需要看到一些自定义变量的作用，接下来我们就对其进行分析。

主要成员变量

protected static int mTileSize;//网格边长
protected static int mXTileCount;//x轴网格数目
protected static int mYTileCount;//y轴网格数目
private static int mXOffset;//左上角第一个格子的x轴偏移
private static int mYOffset;//左上角第一个格子的y轴偏移
private Bitmap[] mTileArray;//对应存放bitmap，游戏中有三种图案
private int[][] mTileGrid;//对应方格坐标，每一个位置的存放一个整数，根据这个数对应mTileArray中的图案
private final Paint mPaint = new Paint(); 

构造函数

 public TileView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        //以下代码从xml中获取tileSize这个自定义属性值
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TileView);

        mTileSize = a.getInt(R.styleable.TileView_tileSize, 12);

        a.recycle();
}

绘图函数

public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (int x = 0; x < mXTileCount; x += 1) {
        for (int y = 0; y < mYTileCount; y += 1) {
            if (mTileGrid[x][y] > 0) {
                canvas.drawBitmap(mTileArray[mTileGrid[x][y]], 
                        mXOffset + x * mTileSize,
                        mYOffset + y * mTileSize,
                        mPaint);
            }
        }
    }

}

其余的一些函数主要是对数据进行初始化和重置的操作，比如对mTileArray进行
初始化的resetTiles和建立映射相关的loadTile函数，对mTileGrid进行初始化清空的clearTiles以及赋值的setTile函数。我们可以这样认为，mTileGrid描述了网格也就是视图的状态，每个网格上有一张对应的图片，所有网格构成了我们的游戏视图，onDraw函数就是根据这个状态表去绘制视图的，显然这个状态表是变化的，根据游戏进展进行变化，我们的onDraw就会不断地绘制新的视图，也就是动态的游戏。这部分变化的逻辑就在SnakeView中，我们下一节来研究SnakeView。