【第4回】GB Studio グラフィックの仕様と使用しているツール
第4回はGB Studioの画像仕様と使用しているツールについてです。
GBである以上、当然ながらフルカラーな画像は使用できませんし、
かなり低解像度な画像を扱うことになります。
まぁ、限られた中でドット絵を描くの楽しいですけどね。
ツールについては、自分が使いやすいものを使うのが良いですが、
こんなツールで、こんなこと出来るんだっていう参考になれば幸いです。
GB Studioの画像仕様について
GB Studioでは、キャラクターや背景など役割によって、解像度や使用出来る色数に違いがあります。
また拡張子は基本PNGファイルです。
今回の対象はGB Studio Ver1となりますので、他のバージョンでは仕様が異なる部分があるかもしれません。
ここでは、公式ドキュメントから仕様を記載します。
なお、使用しているカラーのテンプレファイルも、ここからダウンロード出来ます。(フォトショップ / Aseprite)
https://5f786d0447e09d0007759b43--youthful-varahamihira-d6b430.netlify.app/docs/sprites/
スプライトとは
こういうヤツです。
マップ上にいる人や物などの画像のことです。
スプライトは、基本的に縦16✕横16pxを1フレームとなり、
フレーム数で横幅が異なります。
使用できる色数は下記の4色ですが、一番下の緑色(#65ff00)は、ゲーム中は、透明色扱いになるため表示されず実質3色しか使えません。
もし、この色以外の色が使用されている場合、強制的にこの3色に変換されます。
背景色で利用できる緑色(#306850)を使用して、ゲームをプレイしてみるとキャラが真っ黒に塗りつぶされている…
ってトラブルがよくあったります。
静的スプライト
看板や標識などに使われるアニメーションしない画像ですね
16✕16pxの3色となります。
3色しか使えないし静止画のため、ほぼ使ってないです。
(宝箱を開けたあとの、空いた宝箱とかに使用するのに良いとか)
私は、透明なスプライトを用意して、背景の調べられるポイントに重ねて使用しています。
そこに透明のスプライトを置いてます。
アニメーションスプライト
縦16✕横32pxの2フレームが最低となり、縦16px✕横400pxの25フレームが最高となります。
ただし縦16✕横48pxの3フレームにすると、後述の静的アクター スプライト扱いとなってしまい、待機中にアニメーションなどの設定ができなくなります。
なお、一つのシーン上で使用できるフレーム数は、最大25フレームまでとなっており、縦16px✕横400pxのを使っちゃうと、それ一つしかスプライトが置けません。(5フレームのスプライトなら5つ置けると言った感じです。)
静的アクター スプライト
固定位置にいてアニメーションの必要がない、四方向から話しかけることが出来るキャラクターです。
縦16✕横48pxの3フレームとなります。右向きの画像を用意すれば
勝手に左右反転するため左向きの画像を用意する必要はありません。
ただこの仕様、眼帯をしているアシンメトリーなキャラが作れないんですよね…
アニメーション アクター スプライト
主人公やネームドキャラに使うスプライトになります。
縦16✕横96pxとなり、一つの方向に対し2フレームでループアニメーションします。
こちらも左右反転となるため左向きの画像は不要です。
また、1キャラ6フレームなので、アニメーションするキャラは、
最大でも4キャラまでしか1画面に置けません。
3色でどこまでキャラクターが描けるかがポイントですね
かなり悩みながら描くことが多いです…
背景
マップ、タイトル画面、イベントの一枚絵、メニュー画面など
あらゆるシーンで使われるのが、この背景画像です。
背景では、8✕8pxのタイルセットという重要な要素が出てきますが、
ここは、一旦置いておいて…
背景の最小サイズは横160✕縦144px、最大は256✕256pxです。
GBの画面の大きさが横160✕縦144pxとなるため、256✕256pxなどの大きさの場合、画面端の方まで歩いて行くとスクロールして表示されます。
使用できる色数は4色となり、スプライトと異なり透明色#65ff00は使用できません。
タイルマップについて
背景の画像は、8✕8pxのタイルセットに分けられ、タイルの種類が192種類以下である必要があります。
(タイル数が193以上になるとエラーが出て、ゲーム画面の表示がバグります)
どういうことかと言うと、まず背景を8✕8pxのグリッドで区切ります。
この8✕8pxで区切られた1マスがタイルとなります。
160✕144pxの画像の場合、この8✕8pxで区切られたタイルが、360個並べられて一枚の画像となっています。
ピッタリ192枚のタイルに収めています。
タイトルの”1日”の部分を拡大してみます。
青枠で囲まれた8✕8pxのマスが9個あります。
緑色が4マス、赤色が5マスで合計9マスということになりますが、
緑色のマスは、全く同じ形のタイルとなるため1タイルとして数えます。
赤色のマスは、全部形が異なるため、5タイルとなります。
つまりこの場合、タイル数は6となります。
背景は360個のタイルのうち192種類のタイルで表現しないといけないと言うわけです。
なるべく同じ種類のタイルを使用してタイル数を節約する必要が出てきます。
タイル数にはコイツを使え！
そんなんどうやって数えれば…
同じパターンかどうか目視で見つけるの無理じゃねって方に朗報。
このサイトに、使用する画像をドラッグ&ドロップで放り投げれば、一発でわかります。
gb-studio-tile-count.glitch.me
次の通りになっていれば、大丈夫です。
Unique Tiles：192以下
Width：160～256
Heigt：144～256
Heatmapは、赤いほどユニークなタイルとなり、薄いとパターンが似た画像があることを示します。
グラフィックツール
さて、ここからは、使用しているツールについて書いていきます。
Aseprite
エースプライトと読みます。
Steamで販売中のピクセルアートに特化したペイントツールです。
GB Studioでも配布ファイルの形式にあるので推奨されていると思います。
普段、私がドット絵を描くときはAsepriteで描いています。(以前はフリーソフトのEDGEを使っていました)
フルカラー画像も読み込めるので、下記に記載のGB Picと組み合わせて、フルカラー画像から4色の画像に変換させる編集などにも使っています。
日本語で直接ファイル名やレイヤー名が付けられないのが玉にキズか…
(メモ帳からコピペで一応入れられるけど)
GB Pic
画像をGB風に変換してくれる優れもの
ドットを1から描くのではなく、写真やイラストを変換したいときに使っています。
変換のコツとしては、背景と対象物を切り分けておくと、うまく行きやすいです。
https://yrlab.zatunen.com/webgl/gbpic/gbpic.html
remove.bg
写真の背景をワンクリックで削除してくれる
フォトショップで切り抜くのが難しい場合、このツールを使うと簡単に背景を消してくれます。
上記の3つのツールを使用して、写真を加工してみる
写真を加工して、GB Studioで表示してみましょう
画像サイズを160✕144pxの倍数となる解像度にトリミングする
GB Picで扱える画像サイズが、160✕144pxの倍数となるため、画像サイズを変更します。
元の画像が大きいので、今回は5倍の800✕720pxでトリミングします。
フォトショップでも、画像を加工できればツールは、何でも良いです。
remove.bgを使って背景を削除する
トリミングした画像の背景を削除します。
削除する理由としては、タイル数を抑えるのと、GB Picで変換しやすくするためと言った感じです。
特にタイル数や変換に支障がなければ、この工程は不要です。
GB Pic でGB風に加工する
背景を削除した画像を変換します。
調整もしていい感じにしてください。
画像サイズを160✕144pxに縮小する
このままだと大きいので、GBサイズにします。
GB Picで変換した画像は640✕576pxになっていたので、25%に縮小すると
ピッタリです。
タイル数を確認する
176個でした。ここで192個を超える場合は、修正が必要です。
最後に
GB Studio プロジェクトのbackgroundsフォルダに作成した画像をいれ、
シーンを追加し、画像を指定すれば完成です!!
次回はトラブル対応
作成中に遭遇したエラーなどをトラブルシューティングしていきます。
この記事が気に入ったらサポートをしてみませんか？