見出し画像

[#11]GB Studio ゲーム制作ログ|GBVMで背景アニメーションを設定する_Part1

はじめに

こんばんは。前回はタイトル画面を作成して、ゲーム開始からセーブデータをロードするか、新しくゲームを始めるか選択させることに成功しました。

▼前回の記事はこちら。

前回使ったサンプルゲーム内に、「スクリプト」という項目があることに気付き(遅い)、さらにドキュメントを確認したら「GBVM」という項目を発見。
今回はこちらのGBVMを使って、背景をアニメーション化していきたいと思います。作業途中なので、Part1です。

スタックベースの仮想マシンで実行していて、
スクリプトイベントを使って直接マシンにアクセスできるよ。
詳しくはリンク先のドキュメント読んでねとだけ書いてある。

GBVM背景アニメーション化doc(翻訳)

英語で長々と書かれているととっつきにくいので、ざっと翻訳&要約しました。外部リンクのものはまだ翻訳できてないので追加予定です。⇩

GBVMで何ができるの?

GBVMは、ドキュメントをみると自分でスクリプトを書いたり公式ドキュメントでも間に合っていない部分があったりするので、割とハードルが高そうでした。このハードルを無理して乗り越える必要はあるのか?と思ったけど、一言で言うと「GB Studioの標準機能のリミッターをはずし、より自由度のあるゲーム製作が実現可能になる」ということ。

じゃあどんなメリットと機能があるのかというのは、下記にまとめた。

  • GBVM(Game Boy Virtual Machine)はゲームボーイで実行できるスクリプトと命令セットが存在している。

  • 【カスタマイズ性】「標準のGB Studio」よりもさらに細かくカスタマイズでき、より複雑にゲームを作成することができる。例:独自の戦闘システムや複雑なパズルなど

  • 【パフォーマンスの向上】ゲームボーイのリソースを効率的に使えるように工夫されているため、「標準のGB Studioイベント」よりも高速で動作することができる。そのため、ゲームの応答時間が向上し、より滑らかなゲームプレイができる。

  • 【カスタムデータ構造の導入】カスタムデータ構造(例えば、リスト、キュー、スタックなど)を作成し、ゲーム内でより高度なデータ管理を行うことができる。

  • 【高度なアニメーションとエフェクト】より高度なアニメーションとビジュアルエフェクトの作成を可能にし、ゲームボーイの限界を押し広げるような視覚表現が可能になる。

  • 【サウンドと音楽の制御】より高度な制御を通じて、カスタム音楽トラッカーやサウンドエフェクトの振る舞いを細かく定義することができる。

標準GB Studioの制限を知る

シンプルに私が考えていたのは、背景にアニメーションをつけたいということ。標準GB Studioの制限は、「背景上に192個までしかユニークタイルを配置できない」という点。また、背景サイズなどによって変わるが「アクター最大20個、トリガー最大30個、96〜64のスプライトしか使用できない」という点。

シーンの下に書いてある数字でリミットがわかる。
この場合はアクター10/トリガー96/スプライト30が上限。

この制限を超えて設置してしまうと、アクターやトリガーが動かなくなtたり表示されなかったり、ゲームのパフォーマンス性が低下するようです。

だから、GBVMで効率化して、複雑な構成でも最適なパフォーマンスでゲームを動かせるようにしようね!ということなんだと解釈しました。

やりたいこと

背景の一部をアニメーション化する

本当はこういう感じの背景を作ってみたいなと思っています⇩

金・スズのとう-ゆらゆらする扉
銀・うずまきじま-水面の動き

ドキュメントにあったこの水の動きに近いかも。

今日は色々調べすぎて頭が爆発しそう(煙は出てる)なので、苦手意識を持ってしまう前に、ここでは少しハードルを下げて、サンプルゲームを拝借して少し触ってみることにしました。

プラグインをインストール

まず、こちらのプラグインをインストールしておきました。インストール手順も書いています⇩

チュートリアル用サンプルゲームをダウンロード

背景タイル交換のサンプルプロジェクトがあったので、入れてみました。
▼ダウンロードはここから。

起動するとチュートリアルがゲームになっていて、タイル交換の設定(スクリプトなど)が確認できるようになっていました。

ありがたい…

【実装】ポケモン銀・うずまきじまのワンシーンをコピーしてみる

◼︎目標のシーン

こんな感じに水面を揺らしたい

◼︎ラプラス作る

ラプラスに乗りたいので、スプライト(右2、前2、後2)を作りました。完コピです。

かわい〜

◼︎交換用の背景画像(Banks)を作る

プロジェクトファイルのassets/backgrounds配下に、交換用の背景画像(166px x 144px)を配置して呼び起こして使っているようです。

▼交換用背景画像は左上(番号が割り振られていて、左上から0番となっている)からセットしていくようです。

サンプルゲームの背景画像

ラプラスが泳いでいたような水面を作りたいので、シーンのコピーをしてみることにしました。

水面の交換用背景の作成

①Asepriteで166px x 144pxのアニメーション用画像を作っていきます。
交換用タイルは8pxで作っていきます。 

水面。8px x 8pxを4枚繋げた

②背景画像をassets/backgroundsへ保管して、シーンを追加します。

waterというシーンを追加。

交換用のタイルは全てユニークタイルでないといけないと記載があったので、かぶっているものはありません。(動いて見えるようにちょっとずつずれている)

◼︎メインシーンの背景画像を作る

①土台となるシーンが必要なので、うずまきじまのマップを作ります。

入り口のところ
どうしても完コピしたい()

は、果てしない…

何を始めてしまったんだろう、今日中に、いや今年中に全く終わる気配がない。でもやると決めたからにはやり遂げたい。焦らずゆっくり作っていくことにしたので、今日はここまで。。
続きはまた進捗があれば書きます!

おわりに

GBVNの底が見えないほど深い沼につま先を突っ込んでしまい、絶望しながらも新しい知識の習得にわくわくしています。できることが増えるのって楽しいよね。

ここまで読んでくれた方ありがとう〜
もしかしたら年内最後のnoteかも。

それではまた🦈

▼次の記事はこちら。

この記事が参加している募集

やってみた

この記事が気に入ったらサポートをしてみませんか?