マップの作成
マップの作成はTiled Map Editor を使用しました。
まずチップを作成し、それを元にマップを作ります。
チップの微調整は難しかったです。
さらにキャラクタ画像の作成も行いました。
後にアニメーションもしようと思っているので、こちらは仮のキャラクタ画像です。
ここまで出来たら ActivityにSurfaceViewを追加し、そこに描写します。
Eclipse で SurfaceViewの拡張クラスを追加すると、
レイアウト用のXMLの作成画面に、そのカスタムビューを追加できる項目が増えます。
今回は、 SurfaceViewの拡張クラスの名前をMapViewにしたのでその名前が出ています。
MapView クラスに Tiled Map Editor で作成したデータを読み込みます。
Tiled Map Editorを読み込むライブラリがいくつか公開されていたので、
今回は、TMXLoaderを使用しました。
public MapView(Context context, AttributeSet attrs) { super(context, attrs); holder = getHolder(); //callbackメソッドを登録 holder.addCallback(this); mapData = TMXLoader.readTMX(MAP_FILE_NAME, context); characterData = TMXLoader.readTMX(CHARACTER_FILE_NAME, context); mapImage = TMXLoader.createBitmap(mapData, context, 0, mapData.layers.size()); characterImage = TMXLoader.createBitmap(characterData, context, 0, characterData.layers.size()); }
TMXLoader.readTMX() で読み込み、TMXLoader.createBitmap()で Bitmapクラスに変換しています。
また、MapViewクラスは Callback,Runnable インターフェースを継承し、
runメソッド内で描画します。
public void run() { Canvas c = null; while (true) { try { c = holder.lockCanvas(); if (c != null) { int imagesize = 640; int viewheight = this.getHeight(); int viewwidth = this.getWidth(); float scaleheight = (float)viewheight / (float)imagesize; float scalewidth = (float)viewwidth / (float)imagesize; Rect src = new Rect(0, 0, imagesize, imagesize); Rect dst = new Rect(0, 0, viewwidth, viewwidth); c.drawBitmap(mapImage, src, dst, new Paint()); mMatrix.setScale(scalewidth, scalewidth); mMatrix.postTranslate(32*scalewidth*heroX, 32*scalewidth*heroY); c.drawBitmap(characterImage, mMatrix, new Paint()); } } finally { if (c != null) { holder.unlockCanvasAndPost(c); } } } }
起動すると、以下のスクリーンショットになります。
7日目へ。