進捗 メッセージシステム編 #04

 obake   character   progress 

背景をやるつもりだったが…

…すっかり忘れてた。作業自体は先週から継続、キャラクタをやっていた。

キャラクタは表情や動作のパターンを地道に増やしつつ、表情とシナリオを一致させるため、表情に合わせてシナリオの方を多少暫時変更している。

表情のパターンは増えたが、やはり 1024px のテクスチャに一括して収まる量とは思えなくなってきた。

試しに線画のままだが実際に Spine で少し動かしてみることにした。

Spine へインポート

蹴りを入れるシーンが簡単に動かせそうなので実際に作ってみた。

最初に出た星少年の原画だと以下こうなっていたが、

キック動作用、初期原画

実際には体格がちょっと合わないため、手直しが必要。で、直しの加わった線画は以下。

キック動作用、修正線画

当然だが全然違うものになった。描き直しだからな。がハハ。

ケリを入れるキャラクタの画像はレイヤーで三つに分割、足と体とエフェクトという構成にしてみた。

これを Spine へインポートして、足にボーンを入れる=完成。簡単。

キック動作用、Spine - Hierarchy TREE - Screenshot

次にエクスポート、Gif にする場合必要無いけれど本番は JSON 形式で出力するから Texture Packer を使って Atlas も出力する。

Texture Packer の設定は以下。

Spine - Texture Packer Setting - Screenshot

Pages の Max Width と Height を 1024 にして Power of two にチェック。これは GPU が効率的にテクスチャを処理できるようにする条件を満たすために必要な仕様。

上記設定でエクスポートされた Atlas が以下。

Spine - JSON Exported with Atlas - sample png

1024px なのでまだスペースには余裕がある。悪く言うと無駄が多い、まだ色々差分を詰め込んだりパーツを分割して工夫することもできる。ただし工数が増えるから時間が許す限り、という制限が普通はある。

今回はテスト出力なので GMS の HTML5 エクスポートは使わず、キックする動作を GIF アニメーションにした。ブログ用だとアニメーションはカスタムした gif が一番効率良くリソースサイズを削れる。

Spine - Simple Kick Animation -

この Gif 画像のリソースサイズは 63 KB。ただし 1024 px ではなく、ブログ用に縮小したので縦は 595 px となっている。原寸 ( 1024 px ) の 60 %程度の大きさ。

JSON とともに出力した Atlas の png 画像のファイルサイズは 144 KB だった。これも GMS の HTML5 出力機能を使ってしまうとゲーム動作用ランタイムが含まれるため読み込まれるリソースの容量はもっと増える。

こんな感じでキャラを作っていますが

来週は背景をですね…いやいやいや、背景です。背景やりましょう。




次へ

前へ