【ティラノビルダー】目パチ・口パクプラグインの導入方法

【注意】

こちらの記事は、violet様制作の目パチ・口パクプラグインの導入方法を解説したものです。

ティラノビルダーのキャラクターコンポーネントは使用せず、ティラノスクリプトコンポーネントを使用します。

①差分パーツの準備・配置

(1)差分パーツの準備

素材を準備します。

差分パーツは全て同じ大きさにそろえます。

※目パチ・口パク用差分パーツは、目パチ・口パクに使用する差分パーツを、横方向に左から順番に連結し、1つの画像にして準備します。

(2)差分パーツの配置

差分パーツを配置します。

プロジェクト一覧画面のフォルダアイコンをクリックします。

fgimageフォルダをクリックします。

charaフォルダをクリックします。

フォルダは空の状態です。ティラノビルダー上でキャラクター登録を行った場合、キャラクターごとのフォルダが作成されます。

新しいフォルダを作成します。今回はtestとしました。

testフォルダの中に、フォルダを作成し、差分パーツをそれぞれのフォルダに配置します。

これで、差分パーツの配置は完了です。

②blank.pngの準備・配置

(1)blank.pngの準備

透過画像(サイズは1×1でも可)を用意し、blank.pngと名前を付けます。

(2)blank.pngの配置

imageフォルダをクリックします。

blank.pngを配置します。

これで、blank.pngの配置は完了です。

③プラグインの準備・配置

(1)プラグインの準備

https://github.com/violet2525/tyranoscript-css-animaton-plugins/releases

こちらのページに移動します。

frameanimation.zipをクリックするとダウンロードが開始されます。

zipファイルを展開します。

(2)プラグインの配置

othersフォルダをクリックします。

pluginフォルダをクリックします。

先程、展開したframeanimationフォルダを配置します。

これでプラグインの配置は完了です。

④plugin.ksの編集

scenarioフォルダをクリックします。

systemフォルダをクリックします。

plugin.ksをメモ帳等で開きます。

[rturn]と書かれています。こちらのコードは絶対に消さないでください。

(1)から(5)のコードを記述します。

(1)プラグインの読み込み

[plugin name="frameanimation" blank_image="data/image/blank.png"]

上記のコードをそのまま貼り付けます。

(2)キャラクターの登録

[chara_new name="test" storage="chara/test/base/base.png" jname="テスト"]

nameが管理上の名前、jnameがゲーム画面上に表示される名前です。

上記の場合、ティラノビルダー上で、#testと書いた場合、ゲーム画面上ではテストと表示されます。

(3)キャラクターの差分パーツの登録

[chara_layer name="test" part="eye" id="eye_01" storage="chara/test/eye/eye_01.png"]
[chara_layer name="test" part="eye" id="eye_02" storage="chara/test/eye/eye_02.png"]
[chara_layer name="test" part="eye" id="eye_03" storage="chara/test/eye/eye_03.png"]
[chara_layer name="test" part="eye" id="eye_04" storage="chara/test/eye/eye_04.png"]
[chara_layer name="test" part="eye" id="eye_05" storage="chara/test/eye/eye_05.png"]
[chara_layer name="test" part="eye" id="eye_06" storage="chara/test/eye/eye_06.png"]
[chara_layer name="test" part="eye" id="eye_07" storage="chara/test/eye/eye_07.png"]
[chara_layer name="test" part="eye" id="eye_08" storage="chara/test/eye/eye_08.png"]
[chara_layer name="test" part="eye" id="eye_09" storage="chara/test/eye/eye_09.png"]

[chara_layer name="test" part="eyebrow" id="eyebrow_01" storage="chara/test/eyebrow/eyebrow_01.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_02" storage="chara/test/eyebrow/eyebrow_02.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_03" storage="chara/test/eyebrow/eyebrow_03.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_04" storage="chara/test/eyebrow/eyebrow_04.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_05" storage="chara/test/eyebrow/eyebrow_05.png"]

[chara_layer name="test" part="mouth" id="mouth_01" storage="chara/test/mouth/mouth_01.png"]
[chara_layer name="test" part="mouth" id="mouth_02" storage="chara/test/mouth/mouth_02.png"]
[chara_layer name="test" part="mouth" id="mouth_03" storage="chara/test/mouth/mouth_03.png"]
[chara_layer name="test" part="mouth" id="mouth_04" storage="chara/test/mouth/mouth_04.png"]
[chara_layer name="test" part="mouth" id="mouth_05" storage="chara/test/mouth/mouth_05.png"]
[chara_layer name="test" part="mouth" id="mouth_06" storage="chara/test/mouth/mouth_06.png"]
[chara_layer name="test" part="mouth" id="mouth_07" storage="chara/test/mouth/mouth_07.png"]
[chara_layer name="test" part="mouth" id="mouth_08" storage="chara/test/mouth/mouth_08.png"]
[chara_layer name="test" part="mouth" id="mouth_09" storage="chara/test/mouth/mouth_09.png"]
[chara_layer name="test" part="mouth" id="mouth_10" storage="chara/test/mouth/mouth_10.png"]
[chara_layer name="test" part="mouth" id="mouth_11" storage="chara/test/mouth/mouth_11.png"]
[chara_layer name="test" part="mouth" id="mouth_12" storage="chara/test/mouth/mouth_12.png"]

nameに先程指定した管理上の名前を指定します。
partに部位の名前、idに部位の番号を指定します。

※idは数字のみではプラグインは動作しません。必ず文字と数字を組み合わせて下さい。
(誤)　id="１"
(正)　id="eye_01"

(4)目パチ・口パクアニメーションのコマ数の指定

[iscript]
tf.eye_blink = [
  ["0%", 1],
  ["1%", 2],
  ["2%", 3],
  ["3%", 4],
  ["4%", 3],
  ["5%", 2],
  ["6%", 1],
  ["94%", 1],
  ["95%", 2],
  ["96%", 3],
  ["97%", 4],
  ["98%", 3],
  ["99%", 2],
  ["100%", 1]
]

tf.lip_sync = [
  ["0%", 1],
  ["1%", 2],
  ["2%", 3],
  ["3%", 2],
  ["4%", 1],
  ["5%", 2],
  ["6%", 3],
  ["7%", 2],
  ["8%", 1],
  ["93%", 1],
  ["94%", 2],
  ["95%", 3],
  ["96%", 1],
  ["97%", 2],
  ["98%", 3],
  ["99%", 2],
  ["100%", 1]
]
[endscript]

上記の場合、目パチのアニメーションは、0%(一番最初)に1コマ目を表示、その後1%まで進んだら2コマ目を表示させています。

アニメーションに名前を付けます。
tf.の後にお好きなお名前を付けて下さい。

今回は、tf.eye_blink、tf.lip_syncと付けました。

(5)目パチ・口パクアニメーション全体の設定

[fa_animation name="test" part="eye" id="eye_09" w="1127"  s="6" anime="&tf.eye_blink"]

[fa_animation name="test" part="mouth" id="mouth_12" w="1127" s="7" anime="&tf.lip_sync"]

nameに先程指定した管理上の名前を指定します。
partに部位の名前、idに部位の番号を指定します。

wに目パチ・口パク用差分パーツの1コマ分の横幅を指定します。
sに秒数を指定します。

animeに先程名前を付けたtf.eye_blink、tf.lip_syncをそれぞれ指定します。
この時、&を先頭に付けて下さい。

(6)保存

これで、plugin.ksの編集は完了です。上書き保存を忘れないようにしましょう。

参考用に、(1)～(5)までのコードをまとめておきます。

[plugin name="frameanimation" blank_image="data/image/blank.png"]

[chara_new name="test" storage="chara/test/base/base.png" jname="テスト"]

[chara_layer name="test" part="eye" id="eye_01" storage="chara/test/eye/eye_01.png"]
[chara_layer name="test" part="eye" id="eye_02" storage="chara/test/eye/eye_02.png"]
[chara_layer name="test" part="eye" id="eye_03" storage="chara/test/eye/eye_03.png"]
[chara_layer name="test" part="eye" id="eye_04" storage="chara/test/eye/eye_04.png"]
[chara_layer name="test" part="eye" id="eye_05" storage="chara/test/eye/eye_05.png"]
[chara_layer name="test" part="eye" id="eye_06" storage="chara/test/eye/eye_06.png"]
[chara_layer name="test" part="eye" id="eye_07" storage="chara/test/eye/eye_07.png"]
[chara_layer name="test" part="eye" id="eye_08" storage="chara/test/eye/eye_08.png"]
[chara_layer name="test" part="eye" id="eye_09" storage="chara/test/eye/eye_09.png"]

[chara_layer name="test" part="eyebrow" id="eyebrow_01" storage="chara/test/eyebrow/eyebrow_01.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_02" storage="chara/test/eyebrow/eyebrow_02.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_03" storage="chara/test/eyebrow/eyebrow_03.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_04" storage="chara/test/eyebrow/eyebrow_04.png"]
[chara_layer name="test" part="eyebrow" id="eyebrow_05" storage="chara/test/eyebrow/eyebrow_05.png"]

[chara_layer name="test" part="mouth" id="mouth_01" storage="chara/test/mouth/mouth_01.png"]
[chara_layer name="test" part="mouth" id="mouth_02" storage="chara/test/mouth/mouth_02.png"]
[chara_layer name="test" part="mouth" id="mouth_03" storage="chara/test/mouth/mouth_03.png"]
[chara_layer name="test" part="mouth" id="mouth_04" storage="chara/test/mouth/mouth_04.png"]
[chara_layer name="test" part="mouth" id="mouth_05" storage="chara/test/mouth/mouth_05.png"]
[chara_layer name="test" part="mouth" id="mouth_06" storage="chara/test/mouth/mouth_06.png"]
[chara_layer name="test" part="mouth" id="mouth_07" storage="chara/test/mouth/mouth_07.png"]
[chara_layer name="test" part="mouth" id="mouth_08" storage="chara/test/mouth/mouth_08.png"]
[chara_layer name="test" part="mouth" id="mouth_09" storage="chara/test/mouth/mouth_09.png"]
[chara_layer name="test" part="mouth" id="mouth_10" storage="chara/test/mouth/mouth_10.png"]
[chara_layer name="test" part="mouth" id="mouth_11" storage="chara/test/mouth/mouth_11.png"]
[chara_layer name="test" part="mouth" id="mouth_12" storage="chara/test/mouth/mouth_12.png"]

[iscript]
tf.eye_blink = [
  ["0%", 1],
  ["1%", 2],
  ["2%", 3],
  ["3%", 4],
  ["4%", 3],
  ["5%", 2],
  ["6%", 1],
  ["94%", 1],
  ["95%", 2],
  ["96%", 3],
  ["97%", 4],
  ["98%", 3],
  ["99%", 2],
  ["100%", 1]
]

tf.lip_sync = [
  ["0%", 1],
  ["1%", 2],
  ["2%", 3],
  ["3%", 2],
  ["4%", 1],
  ["5%", 2],
  ["6%", 3],
  ["7%", 2],
  ["8%", 1],
  ["93%", 1],
  ["94%", 2],
  ["95%", 3],
  ["96%", 1],
  ["97%", 2],
  ["98%", 3],
  ["99%", 2],
  ["100%", 1]
]
[endscript]

[fa_animation name="test" part="eye" id="eye_09" w="1127"  s="6" anime="&tf.eye_blink"]

[fa_animation name="test" part="mouth" id="mouth_12" w="1127" s="7" anime="&tf.lip_sync"]

⑤キャラクターの登場

[chara_show name="test" top="77"]

キャラクターを登場させます。上記の例は登場する位置を調整しています。

⑥目パチ・口パクの開始

[fa_chara_part name="test" eye="eye_09" mouth="mouth_12"]

目パチ・口パク用の差分パーツを指定します。

⑦目パチ・口パクの停止

上記の例では、本文の前に、差分パーツを変更し口パクを停止させています。

以上で解説を終わります。おつかれさまでした。