見出し画像

[#4]GB Studio ゲーム制作ログ｜失敗作のドット絵を修正した

Melano B(i/y)te Pixels

はじめに

前回はドット絵作成用の「Aseprite」というソフトを買ったので、こちらを使って、大失敗したドット絵をGB Studio用に修正をかけていきます。

修正したキャラクターをGB Studioで動かすところまでの記録。

▼前回の記事はこちら。

まずAsepriteを起動します

お豆腐みたいでかわいい

File＞Openから一括で失敗作を広げていきます。
一枚ずつ開かなくていいのが楽！（無料のではできなかった）

これらを全て修正したいので一気に選択しちゃう
インポート完了

改めて、GB Studioで使える色を確認する

画像の要件
スプライトの.pngは以下の4色のみであること：
#071821
#86c06c
#e0f8cf
#65ff00

https://www.gbstudio.dev/docs/assets/sprites

▼こちらの#2の記事にも記載しています。

失敗作をこの４色のみで修正・仕上げていく！

そのために、GBStudio用のカラーパレットを保存することにしました。
毎回、カラーコードを入力していくのは手間そうだと思ったので。

カラーパレットのプリセットを作ろうとしたら・・・

なんと、すでにGameBoy用のカラーパレットが！

すごい！
デフォルトでGame Boyのプリセットが用意されてる！
ということで開いてみました。

「Game Boy」カラーパレット

カラーコードを見たところ、左から
#9bbc0f
#8bac0f
#306230
#0f380f

GB Studioで使うカラーコードと違う・・・

なぜ？
ということで少し調べてみたら、
実機でプレイした時の色味がこちらのカラーコードで構成されているとのこと。

さっきのプリセットのカラーコードと一致。


GB Studioで扱うカラーとは異なるということでサラッと納得しました。

▼こちらのサイトがわかりやすかったので載せておきます。

というわけで、やっぱり自分でGB Studio用のプリセットを作っていくことに。

◼︎パレットに色を追加する
・何も登録されていないカラーを選択

5つ目の四角をクリック

・カラーコードを入力してEnter＞赤いビックリマークをクリックして確定

・新しいカラーがパレットに追加されます。他の３色も同じように追加。

GBStudio用のカラーを4色追加登録！

元々表示されているカラーは使わないので、コピペで上書き。

いらないカラーは先ほど追加したカラーへ置き換えました。
コピペ使えて感動しました。

◼︎作ったカラーパレットをプリセットとして保存

・三本線＞「Save Palette as Preset」

・好きな名前をつけて保存。わかりやすくGBSTUDIOにしました。

拡張子.asepriteのプリセットデータを保存

・Asepriteに戻ってオプションボタンをクリックすると、作成したプリセットのパレットが登録されていることが確認できました。

これでいつでも呼び出せる！

ちなみに、パレットのプリセットデータの保存先は
/Users/[username]/Library/ApplicationSupport/Aseprite/palettes/GBSTUDIO.asepriteになっていました。

このパレットをひらけばいつでもGB Studio用のカラーセットでドット絵が描けるようになりました！

📂GB Studio用カラーパレットデータはこちら

せっかくなので、私が作ったプリセットのデータを置いておきます。
Asepriteを使用している方はインポートもできるので、もし欲しい人がいたらダウンロードして使ってください🦈
特に報告は不要です。クレジットは気が向いたらでOKです。

◼︎パレットインポート方法
・三本線＞「Load Palette」＞ダウンロードしたパレットのファイルを選択。

・プリセットとして好きな名前で保存すればOKです。

このパレットを使って、失敗したドット絵の修正をしていく

修正対象はこちら。

11パターンを訂正していきます。

・左右反転すれば良いものは、「Edit」>「Frip Horizontal」で簡単に反転できたので、カラー修正後に反転して完了。

あっという間に反対バージョンが完成。

ちまちま編集していきます。
４色制限、難しい・・・
▼なんとか完成したスタイルシートがこちら

これをサンプルプロジェクトに入れてみます。

今回は焦げてなさそう！

⚪︎詳しい入れ方は#2に記載しています。

ワクワクしながらビルドしてみた！

！？

な、なんか赤い・・・

よくみたらGBのカラー設定じゃない…
あれこれ設定を見ている間に変更してしまったようなので、設定を確認してみると、GB Color Optionsが有効になっていたので、チェックを外して無効化しました。

いつの間にかチェックが入ってしまっていた…

設定を元に戻して、もう一度ビルド。

４色カラーでビルドできた！

ちゃんと背景も透過されて、綺麗に表示することができました！
嬉しい〜〜〜

前回の透過失敗例

と思った矢先、背中を向けると何やら白いラインが・・・

あなたに剣を持たせた覚えはないぞ。

スタイルシートを作るときに、１行ずれていたせいで、透過できないカラーが読み込まれてしまっているみたいでした。
FireAlpacaにてささっと修正・・・

何も…なかった…！

おわりに

なんとかちゃんと使えるキャラクターのシートを作り上げることができてほっとしてます。

GB Studio内でのイベントの作り方も調べながら、サンプルデータをいじくりまわし、色々できることを増やしていきます。

アニメーションもゆくゆくは作っていきたいなあ。

ここまで読んでくれた人ありがとう〜🦈
ではまた。

▼次の記事はこちら。

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