AndEngineでTMXTiledMapのExtentionが使いたい-スタジオレンガのブログ

ネットにあるいくつかの日本語資料はAndEngineの古いバージョンでの話だったり

Exampleだけ見ても、実際にtmxファイルをどうやって準備すればいいのかなどが分からなかった

やっと使い方が分かったのでメモしておきます

まず前提として

AndEngineのほかに

AndEngineTMXTiledMapExtension

をインポートしておく必要がある

AndEngineTMXTiledMapExtensionのある場所は公式のgitにあります

https://github.com/nicolasgramlich/AndEngineTMXTiledMapExtension

拡張のインポート方法は過去の記事でも触れてきたので割愛

（普通にインポートすればいいだけです）

１、マップタイル画像の準備

ネットで「マップタイル　素材」とかで調べればフリーの素材サイトがたくさん出てきます

今回はぴぽや様のマップセット１、320ｘ240用マップチップを使います

タイルサイズ16x16のウディタというツールで利用されている有名なマップタイルセットです。

http://piposozai.wiki.fc2.com/wiki/%E3%83%9E%E3%83%83%E3%83%97%E3%83%81%E3%83%83%E3%83%97

２、Tiledのインストール

Tiledというソフトをダウンロードします

http://www.mapeditor.org/

Tiledの公式ページトップ

Tiledの公式ダウンロードページ

自分のOSにあったバージョンをダウンロードして、インストールしましょう

３、Tiledでマップデータを作る

Tiledを使ってマップを作りましょう

新規作成ボタンで新しいマップを作成します

レイヤー・フォーマットはBase64(gzip圧縮)を選択します
マップの大きさはとりあえず20x20にしておきましょう
今回使うタイルの大きさは16x16ですので16x16に

次はタイルセットを使えるようにしましょう
マップ⇒新しいタイルセットを選択

画像のパスを選択して、タイル情報を入れます
今回使うタイルセットは16x16で余白などは無しなので以下の画像の通りに設定

右下にタイルセットが出るようになりました

後はお絵かきの要領でマップを作っていきます
レイヤー分けなどもできますが、今回の説明では割愛

出来たらファイル名を付けて保存しましょう
とりあえず「map01.tmx」としておきました。

４、Androidプロジェクトを作成

ホームページに置いてあるHelloWorldを基に作成していきます
とりあえずプロジェクトの名前をTileTestに変更しておきましょう

ライブラリを追加

AndEngineをライブラリ登録したのと同じようにAndEngineTMXTiledMapExtensionをライブラリ登録します

tmxファイルの画像パスの編集

先ほど作ったmap01.tmxファイルをテキストエディタで開きましょう。
<image source= "画像ファイルのパス">
となっているところがあると思います
この画像ファイルのパスを"gfx/画像ファイル名"
となるように編集しましょう

例えばmapchip.pngというマップタイル画像を使っている場合は
<image source= "gfx/mapchip.png">
とすればOKです

（例）

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="20" tilewidth="16" tileheight="16">
 <tileset firstgid="1" name="mapchip" tilewidth="16" tileheight="16">
  <image source="gfx/mapchip.png" trans="ffffff" width="128" height="1056"/>
 </tileset>
 <layer name="タイル・レイヤー1" width="20" height="20">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAC1NkYGBQxIKVoBibHDmY2uYpopm3EIgXAfFiHHxSzVsJxKuAeDUOPrH+hZm5EYg3AfFmHHxs+nBhasQDunnkhh8ut5Ebfrj8SWz4EWsetdMxNcIPWZwa4YdsJrnhR8hcaqZFaptHq7xEq7w5FDEAH4dOuEAGAAA=
  </data>
 </layer>
</map>

タイルセット画像とtmxファイルをプロジェクトのフォルダに入れる

assetsフォルダの中に、gfxフォルダとtmxフォルダを追加し、
以下の図のように、画像とtmxファイルをフォルダに入れます

これで準備完了です。
後はコードを書いていきましょう

５、MainAcivity.javaにコードを追加

Fieldsにタイルマップの格納変数

private TMXTiledMap mTMXTiledMap; // タイルマップ

を追加

 // ===========================================================
 // Fields
 // ===========================================================

 private Font mFont;     // 標準フォントを格納するフィールド
 private TMXTiledMap mTMXTiledMap; // タイルマップ

protected Scene onCreateScene()の中にマップの読み込み処理とシーンへのattachを追加

  //TMX mapの読み込み
     try{
      final TMXLoader tmxLoader = new TMXLoader(this.getAssets(), this.mEngine.getTextureManager(), TextureOptions.BILINEAR_PREMULTIPLYALPHA, this.getVertexBufferObjectManager(), new ITMXTilePropertiesListener() {
    @Override
    public void onTMXTileWithPropertiesCreated(final TMXTiledMap pTMXTiledMap, final TMXLayer pTMXLayer, final TMXTile pTMXTile, final TMXProperties<TMXTileProperty> pTMXTileProperties) {

    }
   });
   
        this.mTMXTiledMap = tmxLoader.loadFromAsset("tmx/map01.tmx");
     }catch (final TMXLoadException tmxle) {
      Debug.e(tmxle);
     }
     
  // レイヤーをSceneに結びつける
  for (int i = 0; i < this.mTMXTiledMap.getTMXLayers().size(); i++){
   TMXLayer layer = this.mTMXTiledMap.getTMXLayers().get(i);
   scene.attachChild(layer);
  }

これでうまく行っていれば、こんな風に表示されるはずです。

一応全ソースを置いておきます

MainActivity.java

package test.andengine.tiletest;

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.text.Text;
import org.andengine.entity.text.TextOptions;
import org.andengine.extension.tmx.TMXLayer;
import org.andengine.extension.tmx.TMXLoader;
import org.andengine.extension.tmx.TMXProperties;
import org.andengine.extension.tmx.TMXTile;
import org.andengine.extension.tmx.TMXTileProperty;
import org.andengine.extension.tmx.TMXLoader.ITMXTilePropertiesListener;
import org.andengine.extension.tmx.TMXTiledMap;
import org.andengine.extension.tmx.util.exception.TMXLoadException;
import org.andengine.opengl.font.Font;
import org.andengine.opengl.font.FontFactory;
import org.andengine.opengl.texture.TextureOptions;
import org.andengine.ui.activity.SimpleLayoutGameActivity;
import org.andengine.util.HorizontalAlign;
import org.andengine.util.debug.Debug;

import test.andengine.tiletest.R;

import android.graphics.Typeface;

public class MainActivity extends SimpleLayoutGameActivity {
 // ===========================================================
 // Constants
 // ===========================================================

 // 画面サイズを設定
 private static final int CAMERA_WIDTH = 480;
 private static final int CAMERA_HEIGHT = 720;
 
 // ===========================================================
 // Fields
 // ===========================================================

 private Font mFont;   // 標準フォントを格納するフィールド
 private TMXTiledMap mTMXTiledMap; // タイルマップ
 
 // ===========================================================
 // Constructors
 // ===========================================================

 // ===========================================================
 // Getter & Setter
 // ===========================================================

 // ===========================================================
 // Methods for/from SuperClass/Interfaces
 // ===========================================================
 
 @Override
 public EngineOptions onCreateEngineOptions() {
  // カメラクラスに表示サイズを指定
  Camera camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);

  // ゲームのエンジンを初期化
  EngineOptions eo = new EngineOptions(
    true, 
    ScreenOrientation.PORTRAIT_FIXED, 
    new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), 
    camera);
  
  return eo;
 }

 @Override
 protected void onCreateResources() {
  // 標準フォントを用意
  mFont = FontFactory.create(this.getFontManager(), this.getTextureManager(), 256, 256, Typeface.create(Typeface.DEFAULT, Typeface.BOLD), 32);
  mFont.load();
 }

 @Override
 protected Scene onCreateScene() {
  // シーンを作る
  final Scene scene = new Scene();
  // 背景色を水色に設定（RGB）
  scene.setBackground(new Background(0.09804f, 0.6274f, 0.8784f));
  
  // 文字を表示
  final Text text = new Text( 10, 10, this.mFont, "Hello World !", new TextOptions(HorizontalAlign.RIGHT), getVertexBufferObjectManager());
  scene.attachChild(text);
  
  
  //TMX mapの読み込み
  try{
   final TMXLoader tmxLoader = new TMXLoader(this.getAssets(), this.mEngine.getTextureManager(), TextureOptions.BILINEAR_PREMULTIPLYALPHA, this.getVertexBufferObjectManager(), new ITMXTilePropertiesListener() {
    @Override
    public void onTMXTileWithPropertiesCreated(final TMXTiledMap pTMXTiledMap, final TMXLayer pTMXLayer, final TMXTile pTMXTile, final TMXProperties<TMXTileProperty> pTMXTileProperties) {
    
    }
   });
   
   this.mTMXTiledMap = tmxLoader.loadFromAsset("tmx/map01.tmx");
  }catch (final TMXLoadException tmxle) {
   Debug.e(tmxle);
  }
     
  // レイヤーをSceneに結びつける
  for (int i = 0; i < this.mTMXTiledMap.getTMXLayers().size(); i++){
   TMXLayer layer = this.mTMXTiledMap.getTMXLayers().get(i);
   scene.attachChild(layer);
  }

  return scene;
 }

 @Override
 protected int getLayoutID() {
  // ActivityのレイアウトのIDを返す
  return R.layout.activity_main;
 }

 @Override
 protected int getRenderSurfaceViewID() {
  // SceneがセットされるViewのIDを返す
  return R.id.renderview;
 }

}

AndEngineでTMXTiledMapのExtentionが使いたい

１、マップタイル画像の準備

２、Tiledのインストール

３、Tiledでマップデータを作る

４、Androidプロジェクトを作成

ライブラリを追加

tmxファイルの画像パスの編集

タイルセット画像とtmxファイルをプロジェクトのフォルダに入れる

５、MainAcivity.javaにコードを追加

1 件のコメント:

自己紹介

公開中のゲーム

Translate

このブログを検索

ラベル

不正行為を報告