ティラノゲームフェス2018開催中 ゲームを遊んで豪華賞品を貰おう!

  • iPhone・Androidアプリ化対応。HTML5で動くノベルゲーム製作キット

キャラクターのパーツ差分機能

*この機能はティラノスクリプトV470_rc4以上が必要です。

キャラクターの表情差分を作る時、従来の方法ですと差分の数だけ画像ファイルが必要でした。

しかし、ティラノスクリプトの差分パーツ機能を活用すると、差分パーツを組み合わせて、様々なパターンの表情を表現できるようになります。

例えば、「服装」が3パターン。表情が5パターン。髪型が5パターンの場合、すべての差分を表現するには画像ファイルが75ファイル必要になります。

しかし、差分パーツ機能を使用すると、必要な時に各々のパーツを組み合わせて表現できるので、必要な画像ファイルは13ファイルだけで済みます。

ゲームの容量を小さくできますし、動作も軽くすることができます。ぜひ、活用していきましょう。

キャラクターと差分パーツを準備

ティラノスクリプトの差分パーツは、同一サイズの透過されたpngファイルを重ねて、1枚のキャラクターを表現します。
今回、以下リンクのキャラクター素材を使って説明していきますので、ダウンロードしてみましょう。

キャラクターなんとか機



解凍したフォルダの中に、data/defaultというフォルダが入っており、中にキャラクターのパーツ差分ファイルが入っています。



このように同じサイズの透過されたファイルを準備してください。
これらを重ね合わせて一つのキャラクターになります。


以後、このファイルを使用して、説明していきますので「default」フォルダの名前を「yuko」と変更して data/fgimage/chara/yuko のように配置してください。

差分パーツを定義して、表示する

ティラノスクリプトのキャラクター差分パーツで使用するタグは以下のタグです。

  • [chara_layer] 差分パーツを定義します。
  • [chara_part] 差分パーツで定義した表情を反映します。
  • [chara_part_reset] 差分表示したパーツをデフォルトに一括で戻します。
まず、重要なのは差分にしたい「パーツ」を決めることです。

服装・髪型・目・口 など差分パーツ化したい部品を決定しましょう。

ただし、あまり多くしすぎると、動作が重くなるので、多ければ良いというものではありません。

最初にやることは、普通にキャラクターを表示する時と同様に[chara_new]でキャラクターを定義します。
ただし、いままでと違うのは、キャラクターの一番後ろに表示される土台を、storageに指定することです。
;キャラクターを登録
[chara_new name="yuko" storage="chara/yuko/hair_back/ロング.png" jname="ゆうこ" ]


最後列に配置する変わらない画像を配置するわけですね。
このファイルを土台にして、パーツを定義していきます。

【重要】この土台もパーツとしたい場合は、完全に透明なファイルを[chara_new]で配置してください。

続いて上に乗るパーツを定義していきます。例えば、目のパーツを登録したい場合は以下の用に記述します。

;目の差分パーツ
[chara_layer name="yuko" part="eye" id="1" storage="chara/yuko/eye/普通な目(黒め)1.png" zindex=20 ]
[chara_layer name="yuko" part="eye" id="2" storage="chara/yuko/eye/デフォルメ目1.png" ]



いかがでしょう。[chara_layer]タグは差分パーツを定義するタグです。
この場合「yuko」の表情差分として目のパターンを2ファイル追加しています。

part="eye"となっていますね。ここで、eyeという名前の差分として、ファイルのパターンを登録しています。
そして、id="1" は、この後、実際に目の差分を変更したい時に、指定するためのIDを指定します。
これは、数字じゃなくてもかまいません。わかりやすい名前を付けましょう。

続いて、実際に差分を変更したい場合は[chara_part]タグを使います。


;目の差分パーツを変更
[chara_part name="yuko" eye="2" ]



このように パーツ名とIDをパラメータとして指定することができます。
もちろん、複数を同時に変更することも簡単で、例えば「目」以外に「くち(mouse)」として、差分を定義していた場合

;目と口の差分パーツを変更
[chara_part name="yuko" eye="2" mouse="3" ]



上記のように、同時にパーツを変更することも簡単です。

サンプルパーツからキャラクターを表示する、コードをまるっと載せておきます。



;キャラクターの作成
[chara_new name="yuko" storage="chara/yuko/hair_back/ロング.png" jname="ゆうこ" ]

;体パーツ
[chara_layer name="yuko" part="body_back" id="breza" storage="chara/yuko/body_back/ブレザー1.png" zindex=9 ]

[chara_layer name="yuko" part="body_front" id="breza" storage="chara/yuko/body_front/ブレザー1.png" zindex=10 ]

;目のパーツ
[chara_layer name="yuko" part="eye" id="1" storage="chara/yuko/eye/普通な目(黒め)1.png" zindex=20 ]
[chara_layer name="yuko" part="eye" id="2" storage="chara/yuko/eye/デフォルメ目1.png" ]

;髪型のパーツ
[chara_layer name="yuko" part="hair_front" id="ナチュラル" storage="chara/yuko/hair_front/ナチュラル.png" zindex=40 ]
[chara_layer name="yuko" part="hair_front" id="くせ毛" storage="chara/yuko/hair_front/くせ毛.png" ]

;顔のパーツ
[chara_layer name="yuko" part="head" id="1" storage="chara/yuko/head/普通な顔1.png" zindex=11]
[chara_layer name="yuko" part="head" id="2" storage="chara/yuko/head/青ざめた顔1.png" ]

;表情のパーツ
[chara_layer name="yuko" part="face" id="1" storage="chara/yuko/face_front/素.png" zindex=20 ]
[chara_layer name="yuko" part="face" id="2" storage="chara/yuko/face_front/驚き.png"]

;アクセサリのパーツ
[chara_layer name="yuko" part="megane" id="0" storage="none" zindex=30 ]
[chara_layer name="yuko" part="megane" id="1" storage="chara/yuko/accessory_front/メガネ.png"]


;キャラクターを表示
[chara_show name="yuko"]

実行すると、キャラクターが表示されます。



いかがでしょう、続いて、差分パーツを切り替えてみます。


;髪型と表情を変更
[chara_part name="yuko" hair_front="くせ毛" face="2" ]


切り替わりました。



簡単ですね。
キャラ差分機能を使った場合でも、例えばアニメーションや強調表示といったキャラクターに関連する機能はすべて利用可能です。
あと少し、重要なことがありますので説明させていただきます。

重なる順番を決めるzindexパラメータ

[chara_layer]タグで差分を定義した時、zindexパラメータで数値を指定していましたね。


[chara_layer name="yuko" part="eye" id="1" storage="普通な目(黒め)1.png" zindex=20 ]



これは、パーツが重なったときに、どちらが前面に表示されるかを指定するものです。
数値が大きいほど前に表示されます。

最初にpartを指定する時に定義しておくと、それ以後はその値が採用されますので、最初の1回だけでOK。
(最初のpart="eye"で指定すれば、その後のeyeは全てそのzindexになる)

差分のデフォルト値について

[chara_layer]で最初に登録したパーツはデフォルトとして、扱われます。


;目の差分パーツ
[chara_layer name="yuko" part="eye" id="1" storage="普通な目(黒め)1.png" zindex=20 ]
[chara_layer name="yuko" part="eye" id="2" storage="デフォルメ目1.png" ]



このような場合、1個目のid="1"がデフォルトです。

デフォルトは[chara_show]した時に表示されるパーツです。

なぜ、これが重要かというと[chara_hide]タグで、キャラクターを退場させた後、再度表示すると前回の差分を記憶しています。
[chara_part]タグで元に戻してもよいのですが少し面倒です。

そこで[chara_part_reset]タグを使うと、簡単にデフォルトのパーツに戻すことができます。
あと、このタグの便利なところとして、特定のパーツのみをデフォルトに戻すという事ができます。以下を見てくだ浅い。

[chara_part_reset name="yuko" part="face" ]

この場合、表情のみデフォルトに戻すことができます。カンマ(,)で区切ると複数のパーツを指定してデフォルトに戻すことも可能

[chara_part_reset name="yuko" part="face,mouse,eye" ]


*partを指定しない場合は全てのパーツがデフォルトに戻ります。

最初は非表示で、後から表示するパーツ

例えばアクセサリのように、[chara_show]時は非表示で、差分であとから表示させたい場合があるかもしれません。

この場合、以下のようにすることで実現できます。

;アクセサリのパーツ
[chara_layer name="yuko" part="megane" id="なし" storage="none" zindex=30 ]
[chara_layer name="yuko" part="megane" id="あり" storage="メガネ.png"]



最初の[chara_layer]はデフォルトですね。ここにstorage="none"を指定しています。

すると、表示しないパーツを作れます。その後


[chara_part name="yuko" megane="あり" ]


あとから、パーツが追加されました!



その他、詳しくはタグリファレンスもご確認ください。



差分を確認しながらタグを発行できる「キャラクターパーツマネージャー」


キャラクターのパーツ組み合わせを、リアルタイムに確認しながら
タグを作ることができるツールが公開されています。



>>ツールのダウンロードはこちらから

うまく活用してみましょう。