Tiled Map Editorを使ったPhaser3のチュートリアルを試した

2021年1月9日

試したかったPhaserチュートリアルがTiledを使っていた。

なのでそのチュートリアルの前に、まずTiledを使うチュートリアルを探した。

とても親切にマップについて説明してくれている。例も多く面白い記事だった。カメラを使った例もある。ただ、「Tiledの使用方法については詳しく説明しません。」と書かれているので他にもないか探してみた。

このチュートリアルを試してみた。次のページで動かせる。

• 矢印キーで移動。プレイヤーがスパイクと衝突すると初期位置に戻る。
• Tiledを使って地面やスパイク等を配置する。
• debugをtrueにすると衝突境界が見れる。
• ひとつ注意することは、タイトルセット名が「kenny_simple_platformer」だが、game.jsの中では’kenney_simple_platformer’と使っているのでJavaScriptのエラー「phaser.min.js:1 No data found for Tileset: kenney_simple_platformer」がConsoleに表示される。タイトルセット名に’e’がひとつ足りないので修正しないと背景だけが表示される画面となる。

Tiledには色々な使い方があるようなので知らないことが多いが、とりあえずちょっとだけ使えるようになった。

Phaser3.0.0のリリースが2018年2月13日なのでそれ以前のチュートリアルはPhaser3ではないようだ。Tiledが使えるようになったら試そうと思っていたチュートリアルが2017年のものなのでPhaser3では動かないかも…

Phaser4

Phaser4は2019年8月から開発されているようだが、2020年にもリリースはなかったようだ。TypeScriptを使うようだ。