🫠

UE5初心者がAIとヴァンサバ風ゲームを作った話(9日目)マップの設定

に公開
Unreal Engine
初心者
初心者向け
gamedev
UE5
tech

UE5で2DシューティングSTGを作る — 9日目の開発記録

前回、UE5.7をゼロから始め8日で、ここまで作りましたと記事にしました。
https://zenn.dev/arianankururu/articles/b3295762939f35

そしてこの記事では9日目となります。
概要は以下の通りです。

  • 9日目
    • マップの作成
      2Dのテクスチャからタイルセットを作成
      タイルセットからタイルマップを設定
      タイルマップをゲーム内に呼び出して表示
    • マップのちらつき問題
      ピクセルパディングによるちらつき

マップの作成

  • この日はソースファイルは全然いじらなかったので、内容としてはかなり簡潔にお伝えすることになります。
  • UE5にはタイルセットという機能でチップセットを作り、タイルマップでチップを配置して、2Dのマップのようなパターンを作れます。
    RPGツクールのようなゲーム作成のツールを触ったことがあれば感覚として理解しやすいと思います。

タイルセットの用意

  • マップチップの選定をする
    これはどのテクスチャを用意しているかで変わってしまいますので、私が制作している環境下での説明をさせて頂きます。
    まず、タイルセットを用意します。
    私はKenney氏の「Tiny Dungeon」を使わせて頂いていますので
    アセットの中にある「tilemap」を使用します。
  • 「tilemap」で右クリックを行い、「スプライトアクション」 → 「タイルセットを作成」で決定します。
  • 作成したタイルセットを開きます。
    このテクスチャの場合は、1チップが16px × 16px,更にタイル間の隙間(パディング)が1pxになっています。
  • 右の詳細からTileSizeを16,16に、Per-Tile Spacingを1,1に設定します。(これはテクスチャによって異なるので調整してください。)

    この設定が完了すると、左のチップ部分に正常な範囲が表示されます。

上がPer-Tile Speacingを0,0にしていた時

下ががPer-Tile Spacingを1,1にしていた時

白い枠でずれが分かるようになっています。

  • コリジョン(当たり判定)を作る

    ※ 2Dゲームにおいて、ここですべてのコリジョンを設定することは推奨しません。
    非常に重くなります。ですが、ひとまず9日目においては設定し、後に軽量化します。

    地面になるチップを選択して、上部のメニューより、ボックスを追加を選択します。

    これを選択すると、右上のタイルに水色の四角が表示されます。これがコリジョンです。

    ボックスの場合は頂点が4つあるので、これを選択して動かすことで大きさが変えられます。

    ※　ここでの指定については、スナップのサイズ単位になるので、メインのエディタ上部でスナップのサイズを変更してください。これを1にしないとかなり大雑把になります。

  • コリジョンを設定したら、ファイルを保存して閉じます。

タイルマップの用意

  • 作成したタイルセットで右クリックを行い、「タイルマップを作成」を選択します。
  • 作成したタイルマップを開くと、左にタイルセットが表示されたエディタが開きます。

    右の詳細枠にある、Map Width,Map Heightがサイズになります。
    何枚のチップをセットするかをここで決めてください。(とりあえず4 × 4で進めます。)
    左から使いたいチップを選択して、それをマップに塗っていきます。
    右のレイヤーを追加すると、上に物を置くことも出来ます。

    好きな形にしたらこれを保存します。

タイルマップの配置

作成したマップを実際に表示します。

  • レベルエディタの枠の中に直接タイルマップをドロップします。

    画像のように垂直に配置されます。
    これを手動で回転させ、上向きにします。

    右の枠で「詳細」を選択、タイルマップを選択し、「回転」の270,0,90にすると上に向くと思います。
    後は座標を0,0,0にするなどして調整してください。
  • セットしたタイルマップをコピペして並べます。これで簡易的にマップができます。

    2つずつ並べました。タイルマップも拡大しています。
    元々配置してあった床は削除しても大丈夫です。
    これでゲームを開始するとコリジョンを設定したチップの上に乗ることが出来るはずです。

    ※ もしも乗れなかった場合、タイルマップを開き、以下の項目を確認します。
    「選択したレイヤー」 → 「LayerCollides」
    「コリジョン」 → 「CollisionThickness」が低すぎないか、「SpriteCollisionDomain」が設定されているか。


    後はマップの上部にある「ライティングあり」を「可視性コリジョン」で確認してください。

    白塗り枠はコリジョンがある、という設定です。
    もしもこれで設定しているのに乗れなかった場合、レベルエディタでタイルマップを選択、詳細より、コリジョンプリセットを確認してください。
    BlockAll等、プレイヤーに当たるコリジョンになっていれば乗れるはずです。

これで、タイルマップの設定は完了です。

マップのちらつき問題

これでマップを表示して動かしたとき、とある問題が発生しました。
マップにちらつきが発生していたのです。


画像は制作時のもの、上下に移動すると黒い線が入ってる様子が見えると思います。

これについてはGeminiに確認しながらカメラの設定を変えたり色々試していたのですが、原因は非常にオーソドックスなものでした。
それは、ピクセルパディングによるちらつきでした。
Geminiにどういう現象なのかを確認すると、画像を表示する際、カメラとマップチップの角度や距離の関係でマップチップの範囲の1マス外を参照してしまうことがあり、その参照時にラインが入ってしまうというものだと教えてくれました。
これそのものはシステム上発生してしまうことを避けられない様です。

なぜそうなのかはAIに質問したり、技術をまとめている方の情報を確認してみてください。

力技でこれを補間するのが現状最適解みたいです。
やり方はテクスチャを1マス外に広げる、です。
その手段について、私の手元で行ったのはテクスチャを変換して1マス外に広げる、でした。
このやり方についてはclaudeが教えてくれましたが、pythonの環境が必要であり、コードに関しての汎用性や実用性については確実と言えるものではありませんので、この問題に直面した場合はAIに確認して解決方法を模索することを推奨します。
自力でペイントで修正する方法の他、パディングを行ってくれるツールも存在するようです。

パディングを行ったテクスチャを使ったタイルセットはこうなりました。

上下1pxずつ広がっており、隙間ができていますが、この隙間は参照されることのない場所なので問題ありません。
これをそのまま使うことで解決しました。

このパディングについては、もっと別の方法で解決できないか模索しましたが、断念しました。
これは意外にリリースされてるゲームで発生しているものもあるかもしれないと思います。
マップ作成時はこの現象が発生するかどうかを確認してから、パディングするかどうかを決めても良いと思います。

以上が9日目の内容になります。
最後までお読みいただきありがとうございました！

↓次の10日目、レベルアップ時のウィンドウ表示をメインとしたエフェクトの調整などの記事です。
https://zenn.dev/arianankururu/articles/c7c789d487e48d

本プロジェクトのグラフィックには、Kenney氏（www.kenney.nl）制作の「Tiny Dungeon」を使用させていただきました。
Assets: Tiny Dungeon by Kenney (www.kenney.nl)

Discussion