ティラノスクリプト 要素の表示と非表示
ティラノスクリプトは、ファイルからファイルへジャンプしても、表示されているものには影響がないので
タイトル画面 → 出題画面 → タイトル画面
移動するとき、表示している要素を自分で上書き/非表示/消去する必要がある。
でも、表示する命令と非表示にする命令が違うタグで消せなかったり
まとめて消去になって消えてたところに非表示命令が重なるとゲームが停止したり
単なる場面転換に苦労した。
画面上の何がどのレイヤーに書き出されているのかをまとめてやっと管理が簡単になった。
表示と非表示のタグのまとめ
- 背景画像
- 背景レイヤーに表示される
- 表示
[bg storage="bg.jpg"]
- 非表示
[freeimage layer="base"]
- もしくは上書き
- Live2Dモデル
- 表示する前にプラグインの読み込みや定義等の準備が必要。
- 表示
[live2d_show name="model_id"]
- 非表示
[live2d_hide name="model_id"]
- 非表示ではなく削除するとまた表示前に定義が必要
- メッセージウィンドウ
- 表示
[layopt layer="message0" visible="true"]
-
- 非表示
[layopt layer="message0" visible="false"]
- 名前表示用の画像
- 表示（メッセージウインドウより上に表示させたいので、message0レイヤーを指定して、更にzindexで重なりを上に指定している）
[image layer="message0" name="nameflame" visible="true" zindex="101"]
-
- 非表示
[free name="nameflame" layer="message0"]
- 名前表示用の画像上に名前文字を表示する枠
- 表示
[ptext name="chara_name_area" layer="message0"]
[chara_config ptext="chara_name_area"]
-
- 非表示
[free name="chara_name_area" layer="message0"]
- ボタン
- buttonもglinkもどちらも同じ機能ー画像が使えてクリックされたときの指定ができるけれど、ボタンの場合は画像上にテキスト表示機能がない。なのでテキストを変更したい選択肢ボタンはglinkで作っている)
- 表示
[glink graphic="gazou.png" text="画像の中の文字"]
[button graphic="gazou.png"]
-
- 非表示
[cm]
- scine1.ksで常に表示されているBACKボタン
- fixレイヤーに表示されている
- 表示
[button graphic="image.png" fix="true"]
-
- 非表示
[clearfix]
＃で名前枠に表示される名前も＃だけで呼び出して空にしておかないと、次使うときに、前回使っていた名前が一瞬表示されてしまう
ティラノスクリプト 要素の配置
最初にプロジェクトのサイズの決定
PCでプレイするイメージだったので、1280×720、横長を選択
必要なのは、タイトル画面（title.ks）と出題画面(scine1.ks)
画面の要素の位置サイズや、レイヤー構造はいきあたりばったりで決めたけれど
決めてからは画像サイズ、位置、レイヤー構造、フォントはメモが必要～なくて面倒でつくったらスムーズだった…
必要になった画像は
- 背景画像
- タイトル、選択肢のボタン用画像、通常とカーソルon（クリック時も兼ねる）の2枚ずつ
- キャラクターの名前枠用画像（メッセージウィンドウは枠・画像なしで透明度を下げてる）
- クリック待ち記号のpngアニメーション
- Backボタン（サンプルから流用）通常とカーソルonの2枚
- Live2Dモデル
ティラノスクリプトとティラノビルダー、サクラエディタ
せっかくつくったLive2Dモデルを活用したくて探していたところ
ティラノスクリプトはLive２Dモデルを動かせる
ということで、クイズゲームを作ることにした。
同じティラノスクリプトをつかうけれど、GUIベースで作業できるティラノビルダーもあったけれど、
- 同じことを繰り返すのにコピペが出来ないこと
- 機能的にビルダーの方ができないことが多そうなこと
- プログラミングの基礎の基礎は学んだことがあったので、スクリプトをかくことに抵抗がないこと
ティラノビルダーではなく、ティラノスクリプトを選択した。
ややこしかったのだけど、ティラノスクリプトにはティラノスタジオが必須。（最新のV5の場合。以前のバージョンではティラノライダー）
テストプレイするにも、exeファイルにするにも、最初から最後までティラノスタジオとテキストエディタを開いてた。
テキストエディタは有名なのが２つあったみたいで、自分はなんとなくサクラエディタを選択。クイズをスクリプトとは別ファイルで管理していて、csvファイルにクイズをまとめたのだけど、サクラエディタでcsvファイル用モードがあって管理しやすかった。
ティラノスクリプトで使うためのモデル
#勢いでLive２Dモデルをつくったら、動かしたくなって、ティラノスクリプトでクイズゲームを作ってしまった話。
ティラノスクリプトで使えるLive２Dモデルをどう用意するかは、まずこの動画をみながらつくった。
【後半戦】ティラノスクリプトにLive2Dの立ち絵を反映させるテスト - YouTube
アイドルモーションが１つはないとだめ
Viewerで（もしくは手動で）アイドルモーションであることを書き込まないとだめ
バージョンは、４だと表示されない。3.3までなら大丈夫
モーションと表情は使うパラメーターをわけておくといいらしい。
そうしないと同時に適用されたときに、思ったのと違う結果になってしまう。
私はすべてモーションにした。理由は
- モーションでも短い
- モーションに表情も指定した
- スクリプトで表情とモーションを指定するのに、混乱してまちがえる可能性を感じたので、モーションだけに減らしたかった
Cubism Editorで、音をアニメーションに関連付けることができたけれど、それを保持したままティラノスクリプトへはいけず、関連をスクリプトで指定し直す必要があったので、その機能は使わなかった。
ティラノスクリプト上で単にモーションの再生とSEの再生をスクリプトでそれぞれ書いた。
Live2D Cubismでのモデリング
#勢いでLive２Dモデルをつくったら、動かしたくなって、ティラノスクリプトでクイズゲームを作ってしまった話。
『Cubismは形と形を指定すれば、その間を自動で作ってくれる』
なんとなくそういうイメージで理解してたから
極端な話、最初の形と最後の形を別の絵で用意しても間を埋めてくれるのかな？と思ってた！
（Illustratorにそういう機能あったよね…）
そうではなくて！！
『このパラメーターのときはこの形、そしてパラメータがこれになったらこの形に変形する。って指定して、間のポイントの動きを作ってくれる』というものだったので
正面顔のキャラクターを横にむかせたいなら、横向き輪郭の形を”変形”でつくらないといけない。
だから、Cubismで用意されている変形のための手段を知って、それを駆使して理想の形に変形させるのがモデリング。
”パラメータがこれのときはこの形”って、ちゃんとパラメータと関連させないといけないのだけど
失敗しまくったのが
- パラメーターを指定しわすれて、デフォルトの形を変形した
- 動かすつもりのないパラメーターが動いている状態で作業した
とにかくこれをくりかえしてデータがくちゃくちゃに。
対策としてはとにかく慣れるしかないのだけど
- デフォルトの形をロック
- ソロ機能
- デフォルトに戻してから作業するのを癖づける
- いまどのパラメーターに何の変形を登録しているかをちゃんと意識する
慣れてきたら、この辺を使って事故を減らしていけた。
とにかく、初めてのモデルはどうしようもないと割り切って、１体どうしても完成をさせる！というのを一番優先として、モデリングを終わらせた。
『マスクの反転』は、ティラノスクリプトでつかえるバージョンのモデル（3.3）では使えないので
- マスクなしでもはみださないように変形する
- 描画順を調整してみる
- 透明にしたオブジェクトでマスクする
こんな感じで調整した。
綺麗に形をつくるには、まずは手動でメッシュを作るときに、輪郭のライン上にポイントをおく。
変形は、ポイントを１つ１つ動かしていくというより、仕上がり線を描くイメージをするほど、それにあわせてポイントを移動したら綺麗な形をつくれたと思う。
ワープデフォーマーの移動やコピー、反転のやりかたがまだおとしこめていない。
右目だけつくれば、右髪だけつくれば、反転した同じものができる！
グルーはデータがとても軽いと公式の動画であって便利なので、積極的につかっていきたい。
あれ？なにかおかしい、変形できないと思ったら
- 原画を読み込んだだけでメッシュがまだない
- 一時変形ツールを無効にする
- パラメーターに関連付けができていない
- ソロ機能
- ロック機能
原因はこんな感じだった
物理演算で揺れる分は別でパラメーターをつくってそこに動きを指定する必要がある
縦の動きに反応する物理演算用の動きと
横の動きに反応する物理演算用の動きは別で作る
（うなずくときは髪が広がり、首をふるときは同時に動く）
呼吸の動きはおおげさにつくっておかないと、ゆっくり動くためにわかりにくい
初めてつくったけれど、とてもきにいるものができた。
Live2Dモデル用のPSDファイルの用意
#勢いでLive２Dモデルをつくったら、動かしたくなって、ティラノスクリプトでクイズゲームを作ってしまった話。
後悔したことや自力で学習したことは赤で。
お絵描き
何年仕事でクリスタ使ってるかわからないけど、対象定規初めてつかった。
便利～！！！！
左右対称のキャラクターを描くことがとても好きなので、楽しんでたらあっという間に線画完成。
輪郭線のペンタッチはできるだけつけないほうがよかった。
変形したときに、何故凹んだ？何この変な形？と思うと、ペンタッチが原因だった。
塗りながら調整してPSD完成。
- 使うレイヤーはすべて表示しておく
- ごみをちゃんととっておく
- クリッピングマスクはしたままでもいいけど指定しなおすことになる
- 乗算・発光以外のレイヤー効果は使えなくなる
- 髪（ゲソ）を広がった状態に描いていたけれど（感覚として広げて絵のバランスをとってた）、動かしてこの状態にもどると違和感があったのですぼめた。
- 変更したり書き足したりしたくなっても、コピーをつくり、このPSDは必ず保存しておく
- 画像の中央がキャラクターの中央が便利でよい
→読み込んだ状態に戻せる機能があるけれど、読み込んだ状態から移動させて作業すると、戻すたびに移動しなくてはならないので、その必要がないようにしておく
（Live2D Cubism Editorに”この状態戻す形状登録”機能があったらいいなぁ）
Live２Dモデリングのためのレイヤー分けについて
レイヤーはパーツごとに分ける
例えば耳なら、「耳のベース」「影」「光」「線画」を結合したあと、→耳/←耳の二つに分けた。
右耳は、絵をみて右にある耳ではなくて、キャラクターの右耳、ということでややこしいので矢印が便利ということで、使ってみた。
左右完全対象のキャラを対象に動きを付けたい場合、動きをつけてからコピーしたので、結局矢印がごちゃごちゃになったｗ
目元のレイヤー分けが特殊なので、前の記事の動画を参考にとにかく分けた
- まぶたの三角
- 上まつげ
- 下まつげ
- 横のまつげ
- 目玉の大きいハイライト
- 目玉
- 白目
下半身は分けたけど、動かさなかったので、下半身は1枚でよかった。
白衣の缶バッチは白衣とは別にしておいた方がよかった。１枚だと金属なのに布のように変形してしまう。小さいし隠れるから見逃した。
首はもっと長くてよかった。本当に思ったより見えた。
改めて考えて見たらわかったのだけど、斜め下をむいたら、耳から鎖骨までが首として見えるので、少なくとも耳の真ん中までは必要。
変形は縮めることより大きくすることが難しい
曲げることより、まっすぐにすることが難しい
とにかくこれ大事。
正面で潰れた丸でも、横を向いたときに正円になって、横を向かせるのなら、丸で描いておいて正面でつぶしたほうが綺麗に仕上がる
たとえば口で横一文字の直線が必要になるなら、直線で唇を用意しておく。それをあいうえおの形に変形させたほうが綺麗に仕上がる
横髪（ゲソ）は最初３パーツだった（色部分、白部分、突起）が、あとで5パーツ（ハイライト、色部分、白部分、突起外丸、突起内丸）にしてPSDを読み込みなおした。
- 突起は横を向いて一番丸くなった時の形を描いて読み込んだ
- 突起の外と内の丸はわけたほうが立体感の表現が楽
- ハイライトはわけておくと、変形に影響されなくて少し便利
色部分とホワイト部分はグルーを使い変形した。とてもよかった。
横向きの変形はメッシュ変形している。
個人的な感覚なのだけど、”絵を描くように”ラインを調整する感じがうまくいった。
白い部分をずらして、重なっていた紫の部分の見え具合が変わることで、帽子の横向きや上向きを表現したのはうまくいったと思う。
もし帽子のサイドにラインが必要だったりしたら、それは別パーツで描いたと思う。
おなじことをつばの上面と側面でやってもよかった。
つばは、下を向いていちばん大きくなったところを描いておいて、正面のときにつぶしたほうが綺麗に描けたかもしれない。とくに横向きがきつかった。
つばの上面と側面や、ひもの黒いパーツと、それより上の部分は分かれていた方が変形が綺麗で楽だったと思う。
初めてのモデルだから、凝りすぎるより完成させることを意識したのと、データが重くなりすぎることを警戒して、パーツをわけなかったけれど。
口のレイヤー分けは
- 上唇
- 下唇
- 上歯
- 下歯
- 下
- 口内
前回動画を紹介したダテさんの動画ほう方針”口回りを塗らない”やり方を採用した。
ただ、直線ではなく唇のラインをとぎれさせたくてそこは少し頑張った。
唇はライン。
笑ったときにと線がぎれているのが下になってほしいので、下唇が途切れている方。
途切れている部分を肌の色で塗ってあるので、口を閉じたときに下唇がそこに隠れる。
白衣の裏は、首部分も裾部分も”白衣裏”としてしまったけれど、わけた。
上半身と下半身なので、同時に変形しないほうが多いので、わけるべきたっだ。
白衣はベスト状態と袖でわかれているけれど、もしもっとうごかすなら、襟が分ける必要が出てくることがわかった。
レイヤー分けは
一緒に同程度変形したら困るところでわけると楽。
きっかけ
#勢いでLive２Dモデルをつくったら、動かしたくなって、ティラノスクリプトでクイズゲームを作ってしまった話。
”仕事仲間がVtuberを作る仕事を始めたらしい”
どんなソフト使ってるんだろうと、少しググって、Live2DCubismのページを見つけた。
あ、これ、ツイッターでよく見る”動く絵”作れるんだ！
絶対変形でアニメーションしてるなぁ、どうやるんだろうって思ってた！
最近は遠ざかってるけどゲーム制作好きなんだよね。とくにＡＤＶゲームで使ってそう。
自分で描いた絵を動かせるってめっちゃワクワクする…
インターフェースも普段使ってるフォトショ/クリスタと似てるし、変形も普段仕事でメッシュ変形とかしてるし、レイヤー構造も想像つくし…作れるなぁ！！
仕事が繁忙期で忙しかったので、すぐにはとりかかれなかったけど、その間は動画をみたりして、方針を決めて、手順を頭に入れてた。
いきなりじゃなくてむしろよかったと思う！
方針
- 正面全身モデル・左右対称定規を使ってを書き下ろす
- 絵が用意できてからLive2Dのトライアル期間を開始する
- とにかく１体完成させる
特に助けてもらったオンライン講座
☆公式のチュートリアル動画
☆はちゃちさんの「最初に読むべき「Live2D Cubism3」入門講座」
とにかくソフトの基本。短いしまずは見る。
☆ディープブリザードさんの「はじめてのLive2D」①～③
これだけ見れば、”とにかくキャラクターモデルを１体完成させる！”ができる素晴らしいはじめて講座！
この動画で初めて知り、優しい話し方が好きで他の動画も見るようになった。
☆Date【ダテ】さんの「
０からって言ってるのに玄人臭がすごすぎるダテさんｗ 繰り返し見てた。
ベテランさんが初心者講座をしてくれるってすごいことだと思う。常識とか小技とか、ありがたかった。
ソフトを起動してまず画面配置の真似をした！
自分が仕事場でクリスタ講座を開いたときに、ショートカット使うせいで「早すぎる」「何しているかわからない」と言われたのを思い出したり。
☆フィルさんの「
作る前より１体完成させたあとに見て面白かった。よくある失敗とその直し方とか、ショートカットランキングとか。
