ひつじ🐏おやすみ毛布

[ゲーム制作/ティラノスクリプト]制作開始の流れ、UI変更とLive2d表示

Added 2022-12-27 09:00:00 +0000 UTC

　今回はゲーム作りのお勉強を共有するための記事です。

❖使用ソフト

　太古の昔、人類もとい偶蹄類は吉里吉里やLiveMakerでアドベンチャーゲームを作ったものでしたが、最近ではティラノスクリプトというやつが簡単かつメジャーな同人アドベンチャーゲーム作成ツールみたいですね。こっちの名前の方が太古感あるな。

(frame embed)

　有料ですが、naninovelという、Unityのアドベンチャーパート制作用の拡張機能も気になりました。今回はティラノスクリプトの使い方を覚える事にしますが、もしアドベンチャーパート以外の事がしたくなった場合を考えるとUnityを覚える所から始めた方が結果的に良いかもしれません。一応リンクを貼っておきます。

(frame embed)

　ティラノスクリプトはHTML5を利用してゲームを作成する仕組みのようで、メインプログラムの部分は吉里吉里で見覚えのある.ksですが、見た目の構築にはCSSを使ったりします。

　スクリプトを触れない人のために直感的にゲームを構築できるティラノビルダーなるものもあるようですが、古のオタクは吉里吉里とCSSちょっとできるので普通にティラノスクリプトを使っていきます。ビルダーは既に形の決まっているブロックを組み上げていくような制作方法になるので、スクリプトの方が融通が効くはずです。多分。

　ティラノスクリプトで作ったゲームをプレビューやデバッグするために、ティラノスタジオもDLしておきます。

(frame embed)

　ついでにエディタを見繕っておきましょう。普段使いで気に入っているものがある場合はそれを使えば良いのですが、メモ帳などしか無いという場合は必須だと思います。公式おすすめのVisual Studio Codeにティラノスクリプトの入力支援と色分けができるプラグインがあるようなのでDLしました。

(frame embed)

tyranos.me

https://tyranos.me/archives/1769

　フォルダごと開いて横に展開してくれるシステムや、エラーお知らせマークがつくのが便利～。

　他のエディタにもティラノスプリプト入力支援プラグインがあったりするようなので、一度調べてみるのも良いかもしれません。

❖制作開始前に形から入る奴

　早速ダメそうな見出しになっていますが、UIを整えないと気になって仕方がないので……。とはいえ、まるで何も分かっていないと流石に方針が立たないので、文字表示とキャラクター表示ぐらいはさせてみます。

(frame embed)

　公式チュートリアルを参考にfirst.ksというファイルを書き換えて、同梱の背景素材とキャラクター素材を表示させ、テキストを書き込みます。上記リンクのページを順番にこなし、仕組みを理解したので、次は基本的なUIを整えていきます。

■何はともあれUI

　FGOのように下にテキストがあって、上に選択肢が出てくる形式にしたいので、テキスト表示XY位置の指定をしたり、選択肢をglinkで作ったりして色々と試してみます。glinkのデフォルトの見た目がやだやだと駄々をこねながら「glink デザイン変更」などで検索して情報を集めます。スクリプトを書き換える気概のある方は「CSS ボタン」とかで検索しても良いです。

　私はティラノスクリプトに特化して形成済みのデザインを公開してる方を探していたわけですが、するといらっしゃるわけですよ。UIを一括で変えるプラグインを公開してくださっている方が……。

(frame embed)

　感謝しながら気に入ったデザインをDLして、導入方法を見ながらゲームに入れます。

　作ったゲームに合わせて後からデザインを変える事もあるかもしれませんが、とりあえず制作中のモチベーションはいっきに上がりますし、心が楽になります。

　プラグインを探している最中に開発支援プラグインも見かけたので入れておきます。こんなの入れない理由ないですからね……。ありがとうプラグイン開発者さん。

(frame embed)

　あとはフォントを変更したいのでゲームに組み込んでも良いフォントをDLしてきて「data\others\」に入れ、「tyrano\css\font.css」の中身をDLしてきたフォントに書き換え、「data\system\Config.tjs」のuserFaceを書き換えるだけ。参考にさせていただいた記事はこちら。

(frame embed)

　UIは一旦満足しました。

　色々と公開してくださっている方々のおかげですぐに解決できて嬉しいです。下手しなくてもUI作りだけで何日もかかって疲れてゲーム制作そのものを終了する事、ありますからね。

■Live2dも使えるだって？

　最後に、気になっていたのでうまく導入できるのかチェックします。Live2d立ち絵です……。ひとまず公式のチュートリアルを見てみましょう。

(frame embed)

　解説の通りに進めていったらできましたとしか言いようが無い。元々Live2dのモーションとモデルを紐付ける能力があれば問題ありません。無い場合はちょっと戸惑うかもしれません。VtubeStudio用のデータそのままでモーションも問題無く動きました。ただし、ゲーム用に頂点の扱いなどに気を配っておかないと重いです。

2022-12-15_03-32-57

　こうなるとLive2d入れたい欲も上がり、完成しないゲーム制作の泥沼へとはまっていくわけです。

　入れたい欲のままにLve2dを作ってきました。一瞬でも正気を失った時に作業をやりきってしまうのが完成させるコツです。

2022-12-27_11-08-32

　あとはシナリオと音楽を入れていくだけですね。変数処理……うっ頭が……。