Zenn
Open7

TailedとTexturePackerでゲームの下準備をする

Phaser
#
ドット絵
#
texturepacker
#
2dゲーム
#
tailed
とり天 こっこちゃんとり天 こっこちゃん

初めて取り組んでみたものの日本語ドキュメントも少なかったり、
この投稿している段階で日本語ドキュメントの実装方法だとバージョンの兼ね合いで
書き方変わっているので備忘録として残します。

下準備

ダウンロードするもの

■ドット絵などの作成
私は創作時にPhotoshopを使っていますが、値段面もあるのでご自身の使いやすいもので良いです。

■ゲームの実装
Phaserを使いますがここも要件次第なのでUnityでもRPGツクールでもなんでも良いです。

■キャラクターのデータ
TexturePackerを使います。
キャラクターなどのスプライトシートやjsonデータなどを合わせて作ることができます（パッキング）
2Dゲームであればスプライトシートのデータだけでも問題はないかと思います。
細かいサイズをゲーム内で調整しながら使う場合はTexturePackerでJsonデータも作ります。

■ゲームの背景(マップ)
Tailedを使います。
TexturePacker同様、画像データとjsonデータなどを合わせて作ることができます。

とり天 こっこちゃんとり天 こっこちゃん

TexturePackerのセットアップまで

  1. 公式サイトに行きTexturePackerをDownloadします

  2. ダウンロードしたTexturePackerを解凍して起動します

  3. 2024年の段階でTexturePackerの設定言語が英語と中国語しかないので、デフォルトの状態で作業します

  4. こちらが画面です。よく使う部分を枠で囲っています

  5. 赤枠部分にスプライトシートにしたいデータが表示されます
    キャラクターは1枚1枚書き出しを事前にしておきます。
    真ん中のおじさんのイラストが載っているエリアにドラックアンドドロップでまとめたい画像データを入れます。
    取り込む段階ですでにスプライトシート状態で入れてしまうと後々うまく表示できなかったりします。

  6. 青枠部分でデータの設定を行います
    　スプライトシートの設定部分をここで行います。
    　詳細は後ほど。

  7. 緑枠の部分で保存などをする
    　一番左の「Open Project」：ここから作成データを開けます
    　↑の隣「Save project」：データを書き出す前にここで保存します。形式は「.tps」
    　右から2番目「Publish sprite sheet」⭐️：ここでスプライトシートなどをエクスポートします。
    　↑の隣「Preview Anims」：取り込んだデータをアニメーションさせてどう動くかを確認することができます。

メモ

TexutePackerでPhaser3用に書き出しをすると一部が赤くなる場合があるが表示に影響はないらしいが、
実装時に赤いのがどうしても出てしまう場合、生成されたpngをPhotoshopで開いて元データを赤くなった部分を上書きすれば問題ない。

とり天 こっこちゃんとり天 こっこちゃん

TexturePackerのスプライトシートの設定

Basic settings

⭐️の部分は大事です!

■Output files
Framework：ここで使用するゲームエンジンを選択します。JsonやXmlなども選択できます
JSON fike：ここに生成するjsonファイルの置き場所やファイル名を決めれます

■Image format
Textur format: PNG-32⭐️
ここは基本的に↑の設定のままで良いです。最上級のpngの設定のなので。

Pixel format：RGBA8888⭐️
ここも色々選べますがRGBA8888が一番綺麗な16bitの書き出しになります。

■Packing
Algorithm：BasicもしくはMax Rects
├ Basic：横一列になった状態でスプライトシートが生成されます。
├ Grid/Strip：Basic同様ですが若干隙間を開けてくれるっぽい雰囲気があります。
└Max Rects：よく見かける長方形でスプライトシートを作成できます。

Max size：2048もしくは1024
PC画面でもスマホ画面でも基本的に↑のサイズで問題ないと思います

これらの設定にしたら一番したの「Advanced settings>>」ボタンで詳細設定に移動します。

Advanced settings

Advanced settingsでは以下の部分を追加で設定します。

■Layout
Size constraints：POT（Power of 2）
POT（Power of 2）は読み込みをスムーズにしてくれる設定になります

とり天 こっこちゃんとり天 こっこちゃん

TexturePackerの注意点

スプライトシートにしたい画像をバラバラで準備しないといけない理由。
実装側でJsonデータを扱う場合は特に注意。

TexturePackerでは取り込んだ画像をまとめて

  • スプライトシート（pngなど）
  • Jsonデータ
    の2ファイルを生成できます。

Jsonデータではバラバラで取り込んだ画像が配列状態になっており
サイズ（w,h）やスプライトシート上の位置（x,y）のデータを持っているため

TexturePackerに取り込む際にすでに1枚のスプライトシート状態になっていると
実装の際にJsonを使って調整をかける際に一手間かかる場合があります。

実装でJsonを使うかどうかを選定する

Phaserの場合、Jsonを使わずともスプライトシート状態になっているデータがあればキャラクターの調整をすることができます。（もちろんJsonデータを使う場合のソースの下記かは変わる）

そのため、Jsonが必要なのか、Pngデータだけで完結できるのか.....など要件によってTexturePackerを使うかどうかを決める必要があります。

TexturePackerは異なるサイズの画像データをスプライトシートにまとめてもJson側でサイズなどのデータを持っているため「異なるデータサイズの画像があったりすでに作ってしまった場合」などでは実装側で調整することが可能というメリットがあります。

とり天 こっこちゃんとり天 こっこちゃん

キャラクターデザインの際に注意しておきたいこと

マップチップなどもですが、基本的に2Dゲームなどのサイズは

  • □32px
  • □64px
    などで作られることが多いです。
    どのサイズで作るかは実装担当者と相談して作成を始めましょう。

作り込みのサイズについて

キャラクターの4面図やモーションによっては縦横の比率が変わってしまう場合があります。
TexturePackerや実装側で調整するのであればそのままでも問題ないです。

pngデータのスプライトシートのみで実装をする場合

サイズがバラバラになると実装の際に表示がずれたりする恐れがあるため
選択したサイズに収まる範囲で作る・書き出しサイズを揃えなければならないです。
⚠️スプライトシートも選択したサイズを連ねてください

□32pxと□30pxが混同している....ということがないように気をつけてください!

とり天 こっこちゃんとり天 こっこちゃん

Tailedのセットアップまで

  1. 公式サイトに行きTiled map editorをダウンロードします

  2. 「Download Now」を押す

  3. モーダルが出てきて金額が云々の表示が出ますがあくまでもゆとりあったら寄付してね!の内容なので「No thanks, just take me to the downloads」を押します。Tailedは無料です。
    　

  4. ようやくダウンロードページに飛びますので自分の環境に合ったものをダウンロードしてください

  5. Tiledを起動します。デフォルトは英語のままなので、日本語にしたい場合は「Tiled」>「Preferences（環境設定）」から2つ目のタブ「interface」一番上のLanguageから「Japanese（Japan）」を選びます

とり天 こっこちゃんとり天 こっこちゃん

マップの作成

  1. 起動したら「新しいマップ」を選択します

  2. ポップアップが出ます
    ■マップ
    種類：□型タイル（長方形マップ）
    タイルの出力形式：CSV　
    　　データの読み込みがスムーズになります
    ■タイルの大きさ⭐️
    32pxもしくは64px
    　タイルの大きさは実装担当者と相談の上データサイズを決めてください
    ■マップの大きさ
    タイルの大きさで指定したサイズによってタイル数の数と画面サイズが変わってきます
    サイズ指定の下に画面のサイズが出るのでここも確認してください

  1. エディタ画面

赤枠部分：マップ描画エリア
青枠部分：タイルセットを入れる部分
緑枠部分：マップのレイヤーになります。要素を重ねたいときはここを増やしていきます