Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@minimo

phina.jsでTiledMapEditorを利用する

More than 3 years have passed since last update.

この記事はphina.js Advent Calendar 2016の記事です。
昨日→Collisionクラスを使った当たり判定 by alkn203さん
明日→phina.jsとWebGLでいろいろ by daishi_hmrさん

皆様、12月に入り一層冬めいてまいりましたが、いかがお過ごしでしょうか。
そんな、寒くなってきた折も折、phina.jsでTiledMapEditorのデータを使えるようにしてみた私でございます。
(phina.jsには無かったようなので、tmlib.jsから移植しました。)

Tiled Map Editorとは

Tiled Map Editorは、マップチップをタイル状に貼って、マップを作成する高機能なマルチプラットフォームのツールです。
この系統のツールは正しくはレベルエディタというらしいです。
スクリーンショット 2016-12-17 15.01.34.png
こんな感じでマップの作成が出来ます。
ツールの使い方はこちらに詳しい解説がありました。
http://haxeflixel.2dgames.jp/index.php?TiledMapEditor

使い方

プラグインの使い方は簡単です。
プラグインを読み込み、TiledMapEditorで作成した、.tmxを他のアセットと同じようにロードします。

単体で読み込む場合
var tmx = phina.asset.TiledMap();
tmx.load('.tmx path');
LoadingSceneを使う場合
var options = {
    assets: {
        tmx: {
            "map": ".tmx path",
        },
    },
};
var scene = LoadingScene(options);

読み込みが終了した後は、画像を取得してスプライトで表示する事が出来ます。

画像として取得
//全レイヤーを重ね合わせた画像を取得
var image = tmx.getImage();

//特定のレイヤーのみの画像を取得する
var image = tmx.getImage("LayerName");

//取得した画像をスプライトで表示
var sprite = Sprite(image);

マップの生データを使用したい場合は、一次元配列で取得する事が出来ます。

マップデータの配列を取得
//一次元配列
var mapdata = tmx.getMapData("LayerName");
オブジェクトグループを配列にして取得
var group = tmx.getObjectGroup("ObjectGroupName");

使ってみましょう

実際にこのプラグインを使ってRPGっぽいサンプルを作成しました。
TiledMapEditorサンプル
カーソルキーで移動、ZキーでNPCに話しかけられます。
ちょっと雑な上に凝り過ぎて無駄に長いですが、今回のお題で重要なのは以下の部分です。

マップ読み込み
    //.tmxファイルからマップをイメージとして取得し、スプライトで表示
    this.tmx = phina.asset.AssetManager.get("tmx", "map");
    this.map = phina.display.Sprite(this.tmx.image)
      .setOrigin(0, 0)
      .setPosition(0, 0)
      .addChildTo(this.mapBase);

マップの表示はこの様に行ってます。

マップ上の衝突判定
    //マップデータから'Collision'レイヤーを取得
    var collision = this.tmx.getMapData("collision");

    //指定座標にマップチップがあると真を返す
    var chip = collision[mapy * this.tmx.width + mapx];
    if (chip !== -1) return true;

マップ上の進入不可なブロックはcollisionという名前をレイヤーを作成して非表示にして判定を行っています。

マップ上にNPCを追加
    //オブジェクトグループの取得
    this.npc = this.tmx.getObjectGroup("NPCGroup");
    this.addNPC();

NPC情報をオブジェクトグループで登録し、それをマップ上に反映させています。

おしまい

マップ作成はゲームを作る上で重要ですが、結構時間が掛るため、こういったツールを効率良く活用していきたいですね。
サンプルのソースはこちらからGitHub
phina.tiledmap.jsを読み込むと使える様になります。
突貫で作ったので色々雑ですが、おおまかな使い方は踏まえております。

サンプルにぴぽやさんのマップチップを使用しています。
ありがとうございます。

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
minimo
趣味でphina.jsとenchant.jsを使ってゲーム作ってます。最近はphina.jsがメイン。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?