GBAでドット絵を表示させる(butano)

きれいな陶濬

まえがき

きれいな陶濬と申します。ほんの少しドット絵描けます。
裏ドット絵 Advent Calendarに参加させて頂くのは2度目となります。

（ちなみに2021年に書いた記事は↓）
https://note.com/niri002/n/n32287b9bf15d

最近はC++言語でゲームボーイアドバンスのソフト(ROM)が作れる
「Butano」というゲームエンジンをよく触っています。

このエンジンは積極的に更新されており、いろいろな機能が次々追加されて便利になってきたと思うのですが、マイナーなのか日本語での情報がほぼ無いです。
プログラミングド素人の自分が情報源になれるかは正直微妙ですが、備忘録もかねてザックリ書きます。

なお初代ゲームボーイのソフトを作る記事(GBStudio)については、
表のドット絵Advent Calendarの方であまねさんやうたさんが紹介されていますので是非。


今回はドット絵をGBAで表示させる方法を書きます。

なお、今回はエミュレーター上での表示を想定してますが、
GBA実機で表示させたい場合
・フラッシュカートリッジ(何もデータが入ってないカセット)
・ライター(作ったゲームデータをカセットに書き込む機材)
が別途必要となります。

事前準備

詳しい導入方法は以下URLに記載されています。ので正直この項目は読み飛ばしても良いです。

【必要な物】
devkitARM(ゲーム開発環境。これが有ればGBAからSwitchまで色々作れる…らしい)
Python(Butanoを扱うにあたって必要)
Butano(ソフトをC++言語で作るためのエンジン)
EDGEもしくはUsenti等(ドット絵エディタ。基本はEDGEで問題ないと思います。Asepriteでも後述のカラーモードに注意すれば行けるとは思います。)

GBAのエミュレーター(任意の物。自分はmGBAを使ってます)

devkitARM
devkitARMのホームページから最新版をDLしてインストーラーを起動します。

GBA以外にもDSやゲームキューブ等のソフトも作れるらしいです。

今回はGBAの開発環境が欲しいので「GBA Development」を選択、
Nextへ進んでインストールを完了させます。
なお、今回はCドライブ直下にインストールしたと想定します。

その後、コマンドプロンプトを開き、
cd C:\devkitPro\examples\gba\audio\maxmodと入力
enterを押した後makeと入力、enterを押してmaxmodをビルドします。

ROM fixed!と表示が出れば成功です。

C:\devkitPro\examples\gba\audio\maxmod\basic_soundのフォルダを開き
basic_sound.gbaが生成されていれば正常にインストールできていると思います。

Python
Pythonのホームページから最新版をDLしてインストーラーを起動します。

ウィンドウ下にあるAdd python.exe to PATHにチェックを入れ、「Install Now」を選択でインストール完了

コマンドプロンプトで「python」と入力して導入したバージョンが表示されてれば
正常にインストールされてます

Butano , EDGE若しくはUsenti
Butanoは上記URLから最新版をDLしてzipファイルの中身をCドライブ直下に解凍してください。EDGE・UsentiはDLして任意の場所に解凍で問題ないです。

これで準備は完了です。実際にソフト(ROM)を作ってみましょう。

ファイル構成

まずはButanoでROMを作るにあたってファイル構成を確認します。
Cドライブ→butano-master→templateとクリックしてフォルダを開いてください。ここにはROM作成に使うテンプレートファイルが入ってます。

6つのフォルダと1つのファイルが有ると思います。
・audio
ゲームに使う音源を入れるフォルダ。BGMはMOD,S3M,XM,ITなどの音源ファイルに対応しており、最大16音使えます。効果音はWAVファイルのみ対応。

・build
ROMを作る際に必要なヘッダーファイル等が保存されています。
あまり弄る機会は無いかも

・dmg_audio
ゲームに使うBGMを入れるフォルダ。audioフォルダと似ていますが、
此方は初代ゲームボーイと同様、4音のみの音源用？(使った事無い)
対応ファイルはMOD,S3M,VGM。
GBStudioで使っていたMODファイルをそのまま流用する時に使えるかも

・graphics
背景、キャラスプライト等全ての画像ファイルを入れるフォルダ。
使える画像は256色までのbmpファイルという少しだけ特殊な仕様。
この為、24bitや32bitのbmpは使えません。

・include
キャラクターのステータスや名前等の決まり事(ヘッダーファイル)を入れるフォルダ。

・src
「このタイミングで画像を表示する」とか、「この処理を指定回数繰り返す」とか、いわゆるメインのプログラムを入れるフォルダ。

・Makefile
ROMを生成する時に必要な設定事項。
txt形式にして開くと各種ファイルのパスやBGMを再生する時のビットレート等の設定が可能。
基本的にはあまり弄らないかも

取りあえずROMを生成する

まずは何も考えずROMを生成してみましょう。
コマンドプロンプトを開き、cd C:\butano-master\templateと入力してEnterキー。
その後makeと入力してEnterを押します。

ズラーっと文字が出て最後にROM fixed!が表示されたら成功です。

C:\butano-master\templateフォルダを開いてみて、中に「template.gba」が作成されていると思います。

template.gbaファイルを任意のエミュレーターへドラック＆ドロップして起動してみましょう。

無

真っ暗な画面が表示されたでしょうか？これでGBAのROMが出来ました。
実際、カセットにこのROMを焼いて実機で起動する事もできます。
表示されるのは虚空だけですが。

画像の準備

先に説明したROM生成では画像ファイル＆プログラムが何も入ってない状態でmakeを行った為、何も表示されないROMが出来たという流れです。
ここからは画像の仕様と準備について記載します。

ゲーム上で使える画像には種類があり、ざっくり「スプライト」と「背景」に分かれています。（この他にもタイル画像やアフィン画像なんかもありますが、説明がめんどいので今回は省略します。）

スプライト：キャラクターやUIなどの画像。複数を同時に表示できる。各スプライトのサイズは8x8～64x64まで。アニメーションなども可能。

背景：マップや1枚絵の画像。基本的にスプライトの下に表示される。256x256、256x512、512x256、512x512の中から選んで使用可能。

今回は背景画像を表示させるので下の画像を例に説明していきます。

ゲームに使う予定の背景。
240x160サイズ

背景素材は最大512x512まで使用可能ですが、GBAの画面解像度は240x160なので画面からはみ出た部分は表示されません。なので今回は256x256のキャンバスを用意し、240x160分だけ描いて後は空白で大丈夫です。

こんなかんじ

注意点として

  • 一つのゲームに使う背景素材は全て同じカラーパレットを使用する事
    色の数やパレットの並び順まで全て統一でない場合、ROM生成に失敗したりします。

  • GBAではカラーパレットの一番最初の色は透明色として認識される事
    下の画像で言うと左上にある赤色の位置。ここに配置されている色はGBA上では透明色として認識される為、使えなくなります。

上の背景素材に使っているカラーパレット。
この背景自体に使っているのは27色だけだが
のこり39色は別の背景で使う為の色。

EDGEやUsentiでドット絵を描く場合はそのままbmpで保存した物が素材として使えます。(Asepriteはカラーモードでインデックスを選べば使える…筈)

EDGEの場合、背景素材が描けたらカラーパレットウィンドウのパレット(C)→15ビットカラー化を選択する事でGBAで表示する時の色合いに近くなります。

ROM化した時の色見を確認したいときに

上手く描けたらtemplate内にあるgraphicsフォルダにbmp形式で保存してください。(この例ではtest.bmpとして保存します)

次にプログラムで画像を表示させる処理の為に、事前にどの種類のデータかを表記する必要があります。(背景なのか、スプライトなのか、タイルなのか等)
graphicsフォルダを開いてフォルダ内を右クリック→新規作成からテキストドキュメントを選択します。

テキストの名前はbmpファイルと同じ名前を付け、拡張子を.jsonに変更してください。(test.json)

その後test.jsonをメモ帳などで開き、
{
"type": "regular_bg"
}

と入力し保存。

こんな感じ

これで画像の準備は終わりです。

プログラムを用意してROM生成

srcフォルダの中のmain.cppをメモ帳等で開きます。
中に書いてある記述をすべて消し、下記のプログラムを記入してください。

#include "bn_core.h"
#include "bn_regular_bg_ptr.h"
#include "bn_regular_bg_items_test.h"

int main()
{
    bn::core::init();
    bn::regular_bg_ptr regular_bg = bn::regular_bg_items::test.create_bg(8, 48);

    while(true)
    {
        bn::core::update();
    }
}

まるで参考にならない説明
#include "bn_core.h"
このプログラムはbutanoエンジンを使います。と言う意思表明

#include "bn_regular_bg_ptr.h"
このプログラムでは背景画像を表示させます。と言う意思表明

#include "bn_regular_bg_items_(用意した背景画像の名前).h"
このプログラムではこの背景画像を使います。と言う意思表明

bn::core::init()
Butanoゲームエンジンを始動させるための命令。これを実行することで、ゲームを動かすための様々なシステムが準備され、画像表示や入力受付などの機能が使えるようになります。

bn::regular_bg_ptr (任意の名前) = bn::regular_bg_items::(用意した背景画像の名前).create_bg(8, 48);
背景画像を表示する為の準備命令。これ単体では画像表示できません。
銃で言うと撃鉄を起こした状態。
(任意の名前)の部分は今回はregular_bgとしていますが、画像を表示するだけならaaaaでもdottoe_daisukiとか適当な名前でも問題ありません。でもゲームを作るなら分かりやすい名前の方が色々楽です。
(用意した背景画像の名前)の部分は必ずgraphicsに入ってる画像の名前にしてください。
末尾の(8, 48)という部分は、画像の表示位置を指定しています。(0,0)は画像の中心点を意味し、test.bmpの場合は「128x128」の位置に相当します。
わかり辛いですね。

bn::core::update();
画面の更新や入力等、準備してきた処理を実行する命令。
銃で言うと引き金を引く状態。

これで画像を準備できた＆プログラムも書けたので
「取りあえずROMを生成する」で行った手順をもう一度実施し、生成されたROMファイルをエミュレーターで起動してみましょう。

これで無事画像を表示するGBAソフトが出来ました。


まとめ

これでGBAソフトを作成する第一歩を踏み出せたと思います。
後は背景の上にキャラクターのスプライトを表示させたり、キー入力の方法とif文などの分岐命令が分かれば簡単なゲームも作る事が出来ます。
GBAソフト形式の動くドット絵画集とか作るのも面白いかもしれませんね。
実機で自分のドット絵が動いてるのを見ると感動も一入なので、本格的にソフトを作りたい人は是非カートリッジとライターを買う事をおすすめ致します。

長々と駄文を書き連ねましたが、自作ソフトに少しでも興味を持つ人が増えてくれれば幸いです。
では、よいクリスマスを

申し訳程度のドット絵要素

いいなと思ったら応援しよう！