こがしぱんるーむ

初心者のゲームプログラミング勉強記録

ティラノビルダー始めました~CGモードをつくる~

こがしぱんです。

 

前回は「独自フォントを使う」をやってみました。

 

今回は「CGモードをつくる」です!

 

CGモードといえば、素敵なCGを後から見直すことができるノベルゲームの定番ですね!!

 

改めて、CGモードとは!

 

CGモード

→ゲーム中で一度見たイベントCGを、後から見返すことができる機能。

 

ティラノビルダーでは、なんと、スクリプトを使用せずに、簡単に作れるようになっているとのこと!

さっそく、やっていきましょう!

 

以下、2つの画像(公式より画像引用)をゲーム中に表示したら、CGモードでいつでも見返す事ができるという画面を作ってみたいと思います。

 


まずは、プロジェクトの「ゲームコンフィグ」をクリック。

 

ゲームセッティング画面の「CGモード」をクリック。

 

次に「シナリオ名」を入力します。

ここのシナリオは、CGモードの1ページ目を表しています。

 

シナリオに「cgpage1」と入力し、「作成」をクリック。

 

「cgpage1」が追加されました!

追加されたら必ず「更新する」をクリック。

 

保存のポップアップが出てきました!

 

次に、「CG管理」をクリックして登録するCGイメージを設定していきます。

 

CG登録一覧の「識別するための名前」に「home」と「beach」の2つの名前を入力し、登録をクリック。


そして、この2つにそれぞれ、実際のイメージ画像を設定します。

「home」を選択した状態で、イメージ差分の「+」ボタンを押して、

画像ファイルを指定。

 

「更新する」をクリック。

ポップアップが出てきましたので、設定完了です。


「beach」も同じように設定。


また、複数のCGを登録したい場合は「+」ボタンで複数登録が可能です。

 

複数登録することで、クリックのたびに差分として表示できます!

 

次は、CGページのデザインです。

「ギャラリー」の「シナリオ」に戻って「cgpage1」をクリック。

 

「デザインエディタで開く」をクリック。

 

「ビジュアルデザインツール」という画面が開きます。

ここで、CGページのデザインが可能です!

 

まずは、CGモードの背景を設定します。

プルダウンをクリックして、「背景イメージ」を選択。


「パーツ追加」をクリック。


クリックしただけで、背景が追加されました!!

最初は、デフォルトの画像が設定されるようです。

「クリックで画像変更」を押せば、好きな背景に切り替えることも可能です!

 

続いて、「CGモード」の↓タイトル画像を配置します。↓


「パーツの追加」画面に戻って、「イメージ」を選択。

 

「パーツの追加」をクリック。

 

「クリックで画像変更」を選択。


画像を設定したら、ドラッグ&ドロップで好きな位置に配置して完了です。


次は、「CGモード」用のボタン配置です。

 

プルダウンを「CGボタン」にして「パーツの追加」をクリック。

 

↓の画面が表示され、①が「ボタンにする画像を変更」、②が「登録CGを割り当てる部分」になります。


CGが解放されると、①で設定したCG画像をクリックできるようになり、

実際のCGを確認できるという動作になります。

 

次に、「CGモードからタイトル画面に戻るためのボタンの追加」と

タイトル画面からCGモードに移動するボタンをタイトル画面に追加」をします。

 

まず、「ジャンプ」を選択して、「パーツの追加」をクリック。

 

この「ジャンプ」は、「クリックすると好きなシナリオにジャンプできるボタン」になります。

 

「クリックで画像変更」をクリックして、ジャンプボタンの画像を設定します。

 

ジャンプボタンの画像を設定したら、ジャンプ先として「title_screen.ks」を選択。

 

ジャンプボタンを任意の位置に配置したら、「保存」をクリックして、

一旦「デザインエディタ」を閉じる。

 

次に、タイトル画面にも、CGモードに移動するためのボタンを配置します。

 

メニューのシナリオから「title_screen.ks」を開く。

 

「画像ボタン」コンポーネントをドラッグ&ドロップで配置。

 

パラメーターエリアのストレージは「cgpage1.ks」を選択。

 

次に、CGボタンの画像を設定するために、ファイル選択から「CGモード」の画像を選んで登録。

 

「領域選択ツール」をクリックして、

 

任意の位置にドラッグ&ドロップで配置。

 

これで、ボタン配置完了です!

 

さっそく、保存してプレビュー!!

ちゃんと表示されてます!

 

CGモードをクリック。CGモードいけるか...!

CGモード表示されました!!

まだ、CGの開放処理をしていないので「NO IMAGE」となっており、

CGボタンが選択できない状態になっています。

 

そして、この「BACK」ボタンをクリックでタイトル画面へ戻れるか...!

戻れましたー!

 

それでは、最後の仕上げにCGが開放される処理をシナリオに挿入します。

 

まずは、「CG開放」コンポーネントを追加します。

 

メニューの右上に金槌アイコンがあります。

こちらが「コンポーネント管理ボタン」になります。

 

クリックするとコンポーネント管理画面が開くので、「CG開放」を選択して、

「適用する」をクリック。

 

左エリアに追加されました!

 

それでは、CG開放処理をしていきます!

 

今回は、新規でシナリオ「cgtest」を作成して、こちらに入力していきます。

 

とりあえず、コンポーネントを配置してみました。

CGが表示されるタイミングで、CG開放コンポーネントを配置します。

 

CG開放コンポーネントのパラメーターエリアから開放するCG名を選択。

 

保存してプレビュー!

 

まずは、CGを開放します。

 

タイトル画面からCGモードをクリックして確認!

おおおーー!家のCGが開放されてます!!

 

選択してクリックも可能です!

 

CGモード完了しました!!

 

そして、CGデータを初期化して再度、動作を確認したい時は、

プロジェクトから「ゲームコンフィグ」をクリック。

 

ゲームセッティングのメニューから「セーブデータ」を選択。

 

「セーブデータを初期化する」をクリック。

 

ポップアップが出てきたら初期化の設定が完了です。

 

確認してみたところ、バッチリ初期化されていました!

 

また、「未開放ボタンの画像」を変更したい時は、ゲームセッティング画面の

①CGモード→②その他→③「未開放のボタン画像を変更する」をクリックすれば、

変更可能です。

 

次に、CGページを複数ページにしたい時の設定です。

ゲームセッティング画面から「cgpage2」を作成して、

 

デザインエディタで同じ様に作成。

 

「cgpage1」のデザインエディタに戻り、「次へ」や「戻る」などのジャンプボタンを配置、ストレージを「cgpage2」に設定。(適当な画像をとりあえず、ジャンプボタン画像にしてます。)

これで、設定は完了です!

 

できているのか...、さっそく保存してプレビュー!

配置されてました!

 

クリックすると2ページ目が表示されました!やったーー!

 

CGモードの複数ページの設定も完了です!

 

ということで、今回は、ここまで!!

 

今回は「CGモードをつくる」をやってみました。

めちゃくちゃ盛りだくさんな内容でしたが、ノベルゲームのCG開放の仕組みが

知ることができたので楽しかったです!

 

次回もゲーム制作やっていきます!