ノベルゲームのグラフィックを作ってみた【ティラノスクリプト】
■はじめに
はじめまして。あかつき はるかと申します。
先日二次創作でノベルゲームを作ってみました。
学生のころ、『TRUE REMEMBERANCE』や『カイダン実ハ。』などのフリーノベルゲームが大好きで、私もノベルゲームを作ってみたいなぁと思っていたのですがプログラムは未経験で、取っ付き難いイメージがありなかなか行動に移せずにいました。
ですが社会人になりまして、色々と理解が深まってきた今なら作れるんじゃないかと思い、土日などの空いた時間に作ってみることにしました。
ティラノスクリプトの技術やシステム面はまだまだ勉強中なので、今回はグラフィック製作で工夫したことをつらつら書いていきます。
半ば私に向けた備忘録のような内容にはなりますが、
初めてティラノスクリプトを用いたゲーム制作で、自分でグラフィックを作るぞ！という方に向けて、少しでも参考になる内容になればいいなと思います。
よろしくお願いいたします。
【！注意！】
・絶対こうしろ！という内容を書いているわけではございません。
また、記事中で「もっとこうしたら良くなるのに…！」と感じるポイントもあるかもしれません。その時はあなたの胸にしまっておくか、コメントなどでこっそり教えて頂けるととても嬉しいです。
・また、絵の描き方やツールの使い方を載せている訳では無いので、ご了承ください。
────────────────────
🔳製作したゲームの概要
【タイトル】マイナス・ショコラティエ
【ジャンル】KOUGU維新 非公式二次創作ビジュアルノベル
【原作】KOUGU維新
【公開日】 2024/02/03
【プレイ時間】30分〜1時間程度
【制作ツール】ティラノスクリプト
【動作OS】 Windows (ブラウザ版リリース済)
【制作期間】 2023,9〜2024,2
総制作時間がどのくらいか測っておらず痛恨のミスなのですが、およそ450時間くらいだと思います。
それぞれ工程ごとの制作時間のざっくりした割合ですが、
企画・シナリオ/2割
スクリプト実装/3割
グラフィック/5割
といったイメージです。
────────────────────────────────────────
0.目標を立てる＆シナリオを書く
グラフィックの前に、計画を立てることから始めます。
まずはぼんやりでいいので、目標を立てます。普段絵を描くときや、CGを作るときもまずここから始めます。
制作を通じて、何を得たいか。逐一目標を立てることで、日々の成長を実感できるからです。その成長の証は作品として残ります。
今回はノベルゲーム制作において、以下の目標を立てました。
【目標】
・二次創作で、自分が思う推しキャラの可能性を、思う存分表現する
・ティラノスクリプトのツールに慣れる
・ゲームを完成させる
私は、ゲームは誰かに遊んでもらうためのものであり、遊んでもらうユーザーのことを第一に考えて作るべきだと考えているのですが、
今回は個人制作なので、推しキャラの可能性を表現することと、ティラノスクリプトのツールを触って学ぶことをメインにしました。
次に文章でストーリーやキャラ設定を書いていきました。ストーリー本文、キャラ設定、メモなど文章を書く際はこちらのツールを使っています。
ストーリーをポチポチスマホで打っていきます。
もっと便利＆効率的なやり方やツールがあるかもしれません…
ノベルゲームとはいえ、ソシャゲの会話パートのような、ADVのような雰囲気や会話のテンポにしたいと思ったので、セリフ量を多めにしてみました。(実装しながら、色々文章を変えたりしています。)
＊文章を書き始める代わりに、ゲームでどんな場面を見せたいかなど1枚絵などを描いてから、シナリオに取り掛かるのもいいかもしれません。
────────────────────────────────────────
1.画面フローやレイアウトをざっくり描く
先程に続き、計画第2弾です。
シナリオができた段階で、どんな絵を見せたいか、どんな場面や一枚絵を作りたいかをラクガキみたいに描いていきました。
このボタンを押したらこの画面に飛んで...みたいなのもイメージできるように描いておきます。
『こんなゲーム画面にしたい！』というのをラフに詰め込みます。
この段階である程度決めておくと、あとはラフに従って画面を完成させていく作業になるので、制作に迷いが生じず時短にもなり、まっすぐゴールに向かうことができます。
全てのラフができた段階で、どんなボタンやテロップ画像が必要か、どんな1枚絵や立ち絵が必要なのか、必要な画像データをメモなどに書き出しておくと、作業量が見えてきて後々計画を立てやすくなるので良いかもしれません。
終わったものには✅を付けていくと、毎日の達成感も感じれて良いです！
────────────────────────────────────────
2.画面を作る
ここからの工程はかなり前後したり、シナリオの実装と並行して進めていきました。
ボタンや背景などのグラフィックを画像編集ソフトで作っていきます。
■テーマを決めて、グラフィックをつくる
ボタンなどのシステム画像(UI)を作るときは、作品にテーマやメインカラーを決めて作ると、統一感が出て良いです。
今回はバレンタインがテーマの作品なので、茶色や赤色をメインカラーにボタンなどを設計していきました。
良い感じです！
今回のストーリーは日常のほのぼのした雰囲気です。
それに伴い、画面の雰囲気も淡く柔らかい、優しいイメージを持たせたかったので、背景は水彩調で明るめに表現しています。
この画像を…
このように、ある程度作品に一貫したテーマをあらかじめ持っておくと、グラフィックが作りやすくなると思います。
この要領で、メイン画面やコンフィグ画面などの各ボタンも作っていきました。
────────────────────
【ティラノスタジオべんり機能】座標ツール
ティラノスクリプトのデバッグツールである、「ティラノスタジオ」
こちらで使用できる座標ツールが便利です。
作ったボタンや立ち絵をゲーム上に配置する時は座標ツールを使ってみましょう。
こちらのページに詳細があります。
ゲームプレビュー中に配置したいボタン画像を選んで決定を押すと、移動させることでボタンの座標位置を教えてくれます。シナリオファイルにコピペすることで、簡単にその位置へ実装することができます。
───────────────
2a.ロゴをつくる
引き続き、ロゴを作っていきます。ネットなどでロゴを参考にしつつ、資料を集めながら作っていきます。
雪が降る都会のドラマチックな雰囲気を出したかったので、おしゃれな雰囲気にしました
ロゴデザインが出来上がったら、先ほど書いた画面のラフに位置を合わせ、リサイズします。
画面のレイアウトはまず画像編集ソフトで配置を行ってから、ティラノスクリプト上で実装していきました。
各画像は後々タイトル画面に配置することを考えて、
透過PNGで保存します。
────────────────────
【便利ソフト】PureRef
資料集めには、PureRefというソフトが便利です
ネットの画像をコピペして1つのウィンドウ内にまとめることができます。
シンプルで使いやすいです。
────────────────────
※画像データのサイズ・容量について※
ゲーム画面を形成するロゴ、ボタンやキャラ立ち絵など全てのグラフィックにおいて、最終ゲームに使う用の素材は、なるべく容量を少なくしましょう。
普段からデジタルでイラストを描いていると、やはりキレイに見えた方が良いので高解像度で描きたいものです。(私の場合ですが…)
例えば、『解像度は350dpiで、A4サイズで〜...』と印刷用に大きなキャンバスサイズで作りがちなのですが、
ゲーム制作において無意味に大きい容量の画像データは悪です。
容量が大きいほど、その分ゲームは重くなり、最悪ゲームプレイ中にフリーズしてしまいます。
なので、ゲームに使う用の画像は必ずゲームの解像度に合うように、キャンバスサイズを縮小して書き出ししましょう。
(私はこの作業を怠り、ブラウザでゲームが動かない事態に陥ったことがあります...)
画像を選んで右クリック→プロパディでも確認できます。(Windows)
後々設定資料集などの本を作る予定があれば、印刷用に高解像度で作らなければいけませんが、ゲームにしか使わない！という場合には、等倍のサイズで作ってしまった方が手間も減ります。
印刷用にも耐えれるように、立ち絵や1枚絵は、ゲームに使用するものより2倍以上のサイズで作っておくと良いかもしれません。
────────────────────────────────────────
3.スチル(1枚絵)を作る
ストーリー中の一枚絵を描きます。
一枚絵で画面いっぱいに見せたい場面を、ゲーム上でどんな演出にしたいかを考えつつ、シナリオからピックアップして描きます。
一枚絵はいつもデジタルイラストを描くときと同じような工程で描いていくのですが、キャンバスサイズには注意が必要です。
(※画像データのサイズ・容量について※を参照)
また、ゲームプレイ中に演出を挟みたい場合や、表情差分を作りたい場合は、加工・加筆をします。
絵描きにとって絵を描くのは一番楽しい工程ですが、キャラメインのビジュアルノベルを制作するにおいて必然的に一番時間がかかる工程でもあると思っています。
私は描きたい絵や世界観で絵の描き方や画材を変えたりするので、今回絵の描き方はある程度統一し、ルーティン化して描いていきました。
カラーパレットなどを作っておくとより良いかもしれません
という感じで、簡単単純な塗り方にしてみました。
────────────────────
※データの命名には注意する※
イラストが完成したら、ゲーム実装用にjpegやpngなどでデータを保存するかと思います。
その際データの名前は半角英文字で、ゲームに実装しやすく、内容が分かりやすいものにしましょう。
今回はある程度命名規則を儲けて実装しました。
実装予定のシナリオファイルの名前の頭文字を入れ、何をしている場面なのかを英文字で表記しました。
どこに使用する画像だったか分かるので、個人制作ではこれで良いかなと思います。
データ名に含まれるひらがな、カタカナなどはエラーの原因になるので、含めないようにします。
また、一度データの名前を決めたらなるべく変えないようにしましょう。
ゲームを実装する際にエラーなどを防げますし、イラストを修正したいと言った場合にも差し替えが楽になります。
────────────────────
■3DCGを用いた背景制作
個人的に背景を0から描くのが苦手なので、ベースには3DCGを用いました。3DCGで出力した画像を元に、画像編集ソフトで線画抽出/色味などの加工や加筆を行い、背景に使用しました。
ゲームエンジンの無料アセットを用いて、部屋背景を3Dで制作。
淡くて暖かい雰囲気にしたかったため、水彩っぽく加工しました。
また、自分のスマホで撮影した写真を加工し背景として用いている場合もあります。旅行中に撮影した写真を使ったりしています。
(※2.画面を作る を参照)
普段から写真を撮っておくと、ゲームやイラスト、3DCGを作るうえでの資料や素材になります。自ら撮影した写真なので著作権も安全です。
(東京タワー、スカイツリーなど、建築物自体に権利がある場合もあるので、注意が必要です。)
フリー画像を用いる際は、利用規約をよく確認した上で使用しましょう。
────────────────────────────────────────
4.キャラの立ち絵を作る
ストーリー画面に表示させる、キャラの立ち絵を描いていきます。
一枚絵の制作と異なり、差分制作ががっつり入ってくるので、データ管理が重要になってきます。
また、バリエーションを豊かにするために複数立ち絵を描く場合もあります。今回、メインキャラは大きくわけて2種類の立ち絵を用意しました。
差分を描くときは、フォルダごとにパーツを分けて管理します。
【表情】フォルダの中に【目】【口】フォルダを作り、そこに表情差分を描いていきます。
────────────────────
■ポーズ差分メモ/下書き
まずメインのデフォルトポーズを描いたあと、
ゲームのシナリオ上でこういうポーズをさせたい！というのをメモや下描きで描いておきます。
キャラ差分の実装には、こちらのサイトを参考にしつつ制作します。
キャラクターの胴、腕、表情…といった感じでパーツを分けて描いていきます。
このような感じで切り替えれるようにします。
(途中海〇瀬人みたいになりますね)
腕周りのポーズなら、キャラ差分タグを用いることで実装できるでしょう。
またこの時、衣服の差分も描いておきます。
キャラの上半身の服がシナリオ上でシャツのみになったり、白衣を羽織ったり…というのを制作します。
────────────────────
※立ち絵・一枚絵を描く順番※
先に立ち絵を描いてから一枚絵作業に取り掛かる方が良い場合もあります。
立ち絵でキャラの色合い/絵柄を確立させてから、それを参考にしつつ一枚絵を書き始める方が絵柄や色合いがブレないためです。
たった数ヶ月の間でも、絵柄の変化は起こります。
今回はまず立ち絵の色ラフを完成させた時点で、一枚絵の下絵を描き始めました。
ガイドとして事前に描いておいた立ち絵の色ラフを表示しながら書いていきます。
(ペイントソフトに資料ツールがあればそれを使うのもありですね…)
作りたいゲームやコンセプト、状況などに応じて、どちらが先に描いた方がより良いか、考えながら描いて行きます。
『順番とか考えてる時間が勿体ねえ！さっさとゲーム作るんだよ！』という場合もあるかもしれません。
ルールを守りつつ、自分の好きなように作って楽しみましょう。
────────────────────────────────────────
5.メイン画面(ストーリー画面)を作る
ストーリー画面を作っていきます。新たに本文を表示するメッセージウィンドウと、キャラが喋っている時用に表示させるネームウィンドウを制作しました。
これらのシステム画像を作る時に、画像編集ソフトでガイド線やテンプレートとなる画像を作っておくと、メッセージウィンドウやボタンがバランスよく配置できて良いかもしれません。
キャラの立ち絵はどこに表示させよう？などを一旦ソフト内で考えることができます。
────────────────────
■印象の違いと終わらない微調整
画像編集ソフトで素材を置いてみた印象と、実装後ゲームプレイ時の画面の印象が異なることがあります。
いざプレイしてみると「文字の位置が下すぎて/上すぎて見づらいな？」と思ったりします。その時は納得するまで微調整します。
ですが、ずっと同じ画面を見ていると何が良いのか分からなくなるので、誰かに見てもらったり、一晩時間を置いて見てみて調整するのも大事です。
先ほどのラフ画像と比べ、上にあったポーズボタンをタッチしやすいよう下部に移動し、
フォントを変えたりしてみています。
────────────────────
【ティラノスタジオべんり機能】キャラ差分切り替えツール
先ほど4.キャラの立ち絵を作る でも少し触れましたが、
ティラノスクリプトのデバッグツールである、「ティラノスタジオ」
こちらで使用できるキャラ差分切り替えツールが便利です。
メイン画面の実装で、キャラの立ち絵差分を変化させたいときはこのツールを使いましょう。
こちらのページに詳細があります。
あらかじめ差分登録しておいた立ち絵を、グラフィックと共に簡単にクリックで切り替えてくれるツールです。
(時々コードに反映されていない時があるため、キリのいい段階でプレビューでのチェックは欠かさないようにしましょう。)
────────────────────────────────────────
6.Live2Dモデルを作る
今回はキャラの関係性ややりとり、性格を全面に押し出した作品なので、
タイトル画面でキャラのイメージを強く出したいと思い、ゆらゆら動くLive2Dモデルを作ってみました。
Live2Dは基本的に有料のソフトなのですが、機能制限で無料版が出ています。簡単にキャラをゆらしたり、目パチ口パクくらいだと無料版で実装することができます。
(Vtuber的なことも出来ます！)
Live2D用のイラスト制作も立ち絵や1枚絵とほぼ同じワークフローで描いていき、本塗りが終わった後にLive2Dの作業が加わってきます。
→③加工・データ書き出し→④Live2D作業
【①下書き】
生地冒頭の1.で書いた画面ラフに従いつつ下書きを描いていきます。このとき、どの部位をどう動かすかを別レイヤーでメモしておきます。
どこをどう動かしたいか、頭の中でイメージしながらパーツ分けするメモを描きます。
【②線画・色分け/色塗り】
下書きにそって線画・色分けをしていきます。
下書きの段階で書いておいた、動かす部位メモを見ながら、部位ごとにフォルダを分けて、その中に線画と色レイヤーを入れ込みながら作業を行っていきます。(立ち絵制作と同じ感じです)
立ち絵制作を行う時よりも細かく、前髪や上まつ毛や下まつ毛など、
動かしたい部分をパーツ分けしていきます。
【③加工・データ書き出し】
グラデーションマップやカーブなどを使ってイラストを加工した後、データ書き出しの作業に入ります。
※このとき、必ずデータを複製(バックアップ)してから行います。
バックアップを取ったら、Live2D用にデータを整理していきます。動かしたい部位ごとに分けていたフォルダを、丸ごと統合してしまいます。
目まわりは細かく分けています。これで準備完了です。
【④Live2D作業】
さっそくLive2Dに、各パーツを統合したpsdデータを読み込みます。
Live2Dのモデル制作は公式HPに詳しくチュートリアルが載っているので、それに沿って作業していきます。
今回はゆらゆら動くだけなので、目以外のパーツは全て同じパラメータで付けてしまいました。
目のみゲーム内で瞬きが連動するように設定しています。
完成したら、ティラノスクリプト内に組み込んでいきます。
※ティラノスクリプトでLive2Dモデルを実装する際は、基本的に[live2d_restore]タグが必要です。
ですが今回、Live2Dモデルはタイトル画面に表示したいだけだったので、タイトル画面を形成するシナリオファイルにnewタグとdeleteタグを付けて実装しました。
引き続き、ティラノスクリプト側でフェードインなどの演出を入れます。
プレビューで何回も画面を推移してみて、問題がなければ実装完了です。
主なグラフィック作業は以上になります。
他にも細かい作業や調整を行いましたが、グラフィック作業の9割が上記内容のため、割愛します。
────────────────────────────────────────
🔳おわりに
最後に、初めてティラノスクリプトでノベルゲームを作ってみた感想ですが、すごく楽しかったです！
作っている途中に「これ実装できないかな？」というアイデアが湧いて、やり方やタグを調べたりしてとりあえずやってみて、できたときの楽しさは絵を描いたり3Dモデリングしている時と似ています。エラーが出たときは、代替案を考えたり解決する過程が案外楽しかったりもします。
(なかなか解決できないと苦しくなりますが...💦)
なんといっても、自分の好きなキャラや自分の作ったキャラをゲーム上で喋ったり動かしたりするのがとても楽しいし、完成したときはとても嬉しいです...！
ティラノスクリプトのホームページには
「イラストレーターさんも作りやすい」という内容が書いてあり、半信半疑で使い始めました。
確かにプログラミングの知識必要なくゲームを作れますし、ティラノスタジオの便利機能も相まってすごく親切で簡単にノベルゲームを作れることに驚きました。
ぜひみなさんも、ノベルゲームを作ってみてください！ものすごく楽しい世界です！
また、本ゲームの原作である『KOUGU維新』にこの場を持って最大級の感謝を込めます。
最高のコンテンツを本当にありがとうございます。大好きです！
この記事が気に入ったらサポートをしてみませんか？