【GB Studio】GBVM背景タイルのアニメーション化_日本語版_要約ドキュメント（ver3.1.0用）

Animating Background Tiles (3.1)Animating Background Tiles (3.1)

⚠️このノートは、上記公式サイトを翻訳しできるだけ要約したものです。個人の勉強用にまとめたものにすぎないこと、また翻訳により齟齬や説明、解釈が異なる場合があります。ご注意ください。

GBVMスクリプトイベント

• GBVMは主に「GBVMスクリプト」イベントにより使われる。

• ユーザーはパラメータ設定不要で自由にコードを入力可能。

• スクリプトの文字数制限はなし。

• 必要に応じてコードを分割して整理できる。

• GBVMでほぼ全てのコーディングが可能だが、数学イベントなどはGB Studioの標準イベントが便利。

GBVM構文

• GBVMはアセンブリ言語に似た構文で、他の言語と比べて緩やかです。

• コメントはセミコロン(;)で開始し、それ以降の行内テキストは無視されます。

• コードの可読性とデバッグの容易さを目的として、コメントを活用してメモやマークダウンを行う。

• コードは1行ずつ実行され、各行は改行で終わる。

• GB Studioではテキストの折り返しに注意が必要。視覚的に複数行に見えても実際は1行。

• 改行の誤用はコンパイルエラーを引き起こす。

• GBVM コマンドは「VM_」で始まり、それにコマンド名が続く。

• 「アクション、場所、内容」のロジックに基づき、場合によって追加パラメータも使用可能。

• GBVMには他にも特徴があるが、これらが基本的な知識として重要。

チュートリアル

• GBVMに関する多くのチュートリアルがコミュニティの努力で公開されている。

• 背景タイルのアニメーションの記事など、GBVMの機能を紹介するティーザーがリリースされている。

• Itch、GitHub、GB StudioのDiscordには他にも有用な記事がある。

• GBVMについての質問があれば、Discordの専用チャンネルで助けを求められる。

• Discordのディスカッションからは役立つ情報が得られている。

Animating Background Tiles (3.0.3)Animating Background Tiles (3.0.3)

ソースコード

• GBVMの命令セットはGitHub上（https://github.com/chrismaltby/gbvm/blob/master/include/vm.i）で公開されている。

• これらの命令セットはGB Studioがアプリをコンパイルする際に利用される。

• 命令の機能について多くは説明されていないが、簡単な説明から学び始めることが推奨される。

• Pautomasが作成したより詳細なコマンドリストが別のGitHub Gistで提供されている。

• このリストは作成途中だが、使用可能なコマンドの説明としては良いリソースである。

背景タイルのアニメーション化 (3.1)

NalaFalaさんの「GB Studio 3背景タイルスワッピングガイド」を参照して、このチュートリアルが構築されています。⇩

ここでは、スプライトの制限を超越したアニメーション化された滝をGB Studioで再現することを目的として説明しています。
この具体的な目標を達成するために、以下の流れで進めることになります。

1. 分析：

   • DuckTales 2で実際にどのような技術が使われていたのかを分析します。

   • ゲームボーイの制約の中で、どのような画面効果が使われていたかを理解します。

2. 計画：

   • 取得した情報を基に、GB Studioで実現可能なアニメーション手法を計画します。

   • 背景タイルスワッピングをはじめとする可能な技術をリストアップします。

3. 実装：

   • 実際にGB Studioにおけるタイルスワッピングの手順を説明します。

   • 必要なスプライトや背景の準備、およびスクリプトや命令セットの使用方法を案内します。

• 複数の滝が画面上にアニメーションとして表示される。

• プレーヤーキャラクターは滝の前でちらつきなくレンダリングされる。

• スプライトの制約により、背景タイルを使用する必要がある。

• GB Studioで背景タイルをアニメーション化する機能が利用できる。

• アニメーションは背景タイルをメモリ内の別のタイルに交換することで作成される。

GBVMには下記の機能もある

• GBVMスクリプトのグローバル変数アクセス機能。

タイル交換の５つの基本的な側面についての説明

• タイル交換用関数の使用方法。

• 簡単なアニメーションの作成手順。

• タイル交換の影響と制限事項。

• 単一タイル交換の実行方法。

• 複数のユニークなタイル置き換え手法。

GBVMスクリプトイベント

• GBVMでコードを記述するには「Miscellaneous: GBVM Script」イベントを追加する。

• イベントインターフェイスにはテキストボックスと「参照の追加」ボタンのみが含まれる。

• 今後のバージョンでコードのオートコンプリート機能が期待される。

• GB Studio 3.1では構文の強調表示や行番号が導入された。

• GB Studio CentralにはGBVMの入門ガイドがあり、GBVMソースファイルにない情報が記載されているなど、公式ドキュメントよりも追加情報が得られる。（GBVM操作リファレンスを読もう）

▼GBVM入門ガイド

Understanding GBVM

▼GBVMソースファイル
https://github.com/untoxa/gbvm/blob/master/include/vm.i

▼GBVM操作リファレンス

GBVM Operations | GB Studio

このチュートリアルでは「VM_REPLACE_TILE_XY」、「VM_SET_CONST」、「VM_POP」のGBVMコマンドを使う。

• 詳細な説明は記事では行わない。

• 追加の質問があれば、Discordの＃gbvm-helpチャンネルで尋ねると良い。

• GB Studio Discordには親切なメンバーが多く、有益なリソースを提供している。

▼VM_REPLACE_TILE_XY

GBVM Operations | GB Studio

▼VM_SET_CONST

GBVM Operations | GB Studio

▼VM_POP

GBVM Operations | GB Studio

▼#gbvm-help Discord チャンネル

Discord - A New Way to Chat with Friends & Communities

タイルスワッピング機能

• GBVMにはタイルのメモリ内交換用に２つの関数がある：「VM_REPLACE_TILE」と「VM_REPLACE_TILE_XY」。

• 筆者は「VM_REPLACE_TILE_XY」を好んで使用する。

• このコマンドはターゲットタイルを特定しやすくする。

• チュートリアルでは画面上のタイルを「ターゲット」とし、交換する側のタイルを「ソース」と呼ぶ。

VM_REPLACE_TILE_XY X, Y, TILEDATA_BANK, TILEDATA, START_IDX

タイルセット

• ゲームビルド時にタイルセットはGB Studioによって自動的に作成される。

• タイル交換用のシーンは、特有の背景タイルのみを含む。

• シーンは通常のタイル制限のルールが適用され、タイルの最適化が行われる。

• タイルインデックスを決定するのは複雑になるため、シンプルなシーンを選ぶのが良い。

• シーンのビジュアルはGBVMスクリプトで参照されるだけなので、外観は重要ではない。

• 192個を超えるタイルを使用する際は、警告を避けるためにロゴモードを利用する。

• タイルセットはファイル名に基づく参照名が割り当てられる。

• ファイル名が重複すると、参照名に番号が自動追加される。

• TILEDATA_BANKは___bank_bg_filename_tileset、TILEDATAは_bg_filename_tilesetと命名される。

• 背景参照を確認するにはGBVMイベントの「参照の追加」ボタンをクリックする。

• 欲しいファイルはリストから選択または名前で検索できる。

複数のタイルセットの例

• 「letters.png」と「Waterfall.png」は、それぞれ___bank_bg_letters_tileset、___bank_bg_waterfall_tilesetとしてGBVM TILEDATA_BANKで参照される。

• GBVMイベントに追加された各参照の横にある鉛筆アイコンをクリックすることで、参照名を変更可能。

• GBVMスクリプトでこれらの参照を使うため、参照にマウスオーバーすると表示されるタイルセット名をクリックする。

• クリックすると、TILEDATA_BANK と TILEDATA がコピーされ、後で使用するためにクリップボードに保持される。

タイルインデックス

• タイルセット内の固有のタイルにはインデックス番号がゼロから割り当てられる。

• セット内の全ての一意のタイルを横一列に並べたときの順番がインデックス番号になる。

• 例えば、インデックス番号35は、位置 X=15 Y=1 の最初の小文字「a」のタイルに対応する。

• タイルのインデックス番号を視覚的に探すためにはbgbのVRAMビューアが有効。

ゼロから始まる番号付け：
https://en.wikipedia.org/wiki/Zero-based_numbering

BGB VRAMビューア：
https://bgb.bircd.org/

数学

• 全てのタイルが一意である場合、インデックス計算は簡単になる。

• 計算式: ( (TileY \times BackgroundWidth) + TileX = TileIndex )

• ( TileX )、( TileY )はシーンエディター内で確認可能で、左下に表示される。

• BackgroundWidthはシーンの幅のタイル数。例えば「文字」の背景は幅20タイル。

• 文字「a」の例: 位置( (15,1) )なのでインデックスは( (1 \times 20) + 15 = 35 )

• 文字「v」の例: 位置( (17,2) )なのでインデックスは( (2 \times 20) + 17 = 57 )

---

【実践】タイル交換をしよう

• ボックスは ( X=14 )、( Y=9 ) の位置にある。

• ボックスのタイルは__bank_bg_letters_tilesetでインデックス57のもの（文字シーンの文字「v」）と交換される。

◼︎GBVMスクリプトの例

; start of GBVM script; lines starting with ; are comments and are ignored by the compiler

; Use VM_PUSH_CONST to store value we want to be called by START_IDX onto the stack, it can be accessed by the alias .ARG0 in the command.

VM_PUSH_CONST 57

; call the swap function by passing the START_IDX using .ARG0 alias VM_REPLACE_TILE_XY 14, 9, ___bank_bg_letters_tileset, _bg_letters_tileset, .ARG0

; free memory assigned to .ARG0 with VM_POP

VM_POP 1

; end of GBVM script

• 数値をReplace Tileコマンドで使う前に、VM_PUSHコマンドでスタックに保存する。

• 保存された数値はエイリアス.ARG0を通してアクセスする。

• この手順でタイル交換が行われる。

【実践２】同じボックスのタイルをインデックス2のウォーターフォールタイルセットのタイルに置き換える

◼︎GBVMスクリプトの例

; start of GBVM script
VM_PUSH_CONST 2 VM_REPLACE_TILE_XY 14, 9, ___bank_bg_waterfall_tileset, _bg_waterfall_tileset, .ARG0
VM_POP 1
; end of GBVM script

• 上記のスクリプトは似たコードを使用している。

• 最初に「2」という値をスタックにロードする。

• VM_REPLACE_TILE_XY コマンドを使用してウォーターフォールバンクとタイルセットに置き換える。

• 最後にスタックから「1レベル」をポップし、使用したメモリをクリアする。

GBVMスクリプトでのグローバル変数の使用

• GBVMスクリプトではハードコード値も使えるが、変数を使うことで柔軟性が向上する。

• グローバル変数を使うには変数名の先頭にVAR_をつけて、スペースはアンダースコア_に置き換える。

• グローバル変数は全部大文字で呼び出す。

• 例: 「ループ インデックス」をGBVMスクリプトで使う場合はVAR_LOOP_INDEXと記述する。

; Loop Index is referenced in GBVM via: VAR_LOOP_INDEX

◼︎GBVMスクリプトの例

• VAR_LOOP_INDEXというグローバル変数をVM_REPLACE_TILE_XYコマンドで使用する場合、スクリプト内で次のように参照します。

VM_REPLACE_TILE_XY 14, 9, ___bank_bg_letters_tileset, _bg_letters_tileset, VAR_LOOP_INDEX

タイトルのアニメーション化

• 変数の値をループし、アニメーションフレームを更新

• 更新された変数を使用してスワップタイルスクリプトを実行

• アニメーション状態はグローバル変数Loop Indexに保存

• ループごとにLoop Indexに1を加算

• Loop Indexが255を超えると0にリセット（クランプ値オプションが有効）

• 通常はアニメーションインデックスが範囲を超えていないか検証必要だが、256個のタイルがあるこの例では問題なし

タイル特定のシーケンスによるアニメーション化

タイル範囲のアニメーションを処理する方法の説明です。

• シーケンス内に全タイルがある場合、アニメーション範囲の上限値と下限値を定義

• 上限値を超えた場合、ロジックを使用して値を下限値に戻す

• タイマーイベントは最初の10タイルをループ

• Loop Indexが10を超えたら0にリセット

• 上限値と下限値は任意のタイルインデックスに調整可能

• タイルが順不同の場合、ロジックで次のタイルインデックスを計算

• ゲームボーイでの処理は単純さが求められるため、可能な限りタイルを順番に配置

単一タイルの置換

• 単一タイル変更時はターゲットアートワーク内で一意であることが必要

• 描画例のタイル1、2、3はそのシーン固有

• タイルセットで1が2または3に置き換わっても、異なるメモリアドレスにより一意性が保たれる

複数のユニークタイルの置換

• 複数固有タイルのアニメーション化には各タイルを別々に置き換える必要がある

• 複数のGBVMスクリプトが必要だが、1つのGBVMスクリプトコマンドで複数のスクリプトを記述可能

---

最後に

• このチュートリアルのコード例が含まれるGB StudioプロジェクトはItchページで入手可能

• ファイルをダウンロードし、動作確認を推奨

• GBVMの機能詳細についてはこの記事で解説

• GBVMの使用方法は別記事で説明予定

• GBVMを使用してアニメーション全体を記述できる

• タイル交換は進んだUIやメニュー作成の基礎で、近いうちに解説予定

Itchページ
https://gb-studio-central.itch.io/animating-background-tiles-31