Unityに関連する記事です

 この手順ではタイトルシーンからアルバム機能を持つアルバムシーンへの遷移と、アルバムシーンの実装を行います。
手順が多いので2つの工程に分けて実装していきます。

 以下の内容で実装していきます。

36.シナリオの内容に合わせてCG画像を表示する機能と、表示したCGの番号をセーブする機能を追加する



実装する概要


 シナリオの内容に合わせて、背景画像をCGか、あるいは普通の背景画像にするかを自動で切り替える制御処理を追加します。
またCGが表示された場合には、メッセージの最後まで再生終了後にCGの番号をセーブして回収状態として登録します。
次回のゲームスタート時にこの情報を取得して、次の手順で作成するアルバムシーンで活用します。


<実装動画>
ゲーム中にCG画像が表示されるか確認。表示されたシナリオをすべて再生すると回収済CGとしてセーブされる
https://gyazo.com/b60f6027a335c0ac0887e7f0b5d2bad4


ゲーム中に回収後、ゲームを再度スタートした際にタイトルシーンで回収済みのCGの番号を取得(GameData の getCGNos の値が自動で代入される)
https://gyazo.com/cb4df400ebbac82d0ade1088147f8cc0


設計


 Resources フォルダにCG用のフォルダを作成し、背景画像と同様に、シナリオのデータに合わせて動的に画像を差し替える処理を行います。
シナリオデータがCG画像の指定であればCGを読み込んで表示し、背景の場合には今までと同じように背景用の画像を読み込んで表示します。

 この制御はシナリオデータを読み込んで自動的に制御を行うようにロジックを組みます。
画像の番号によって分岐し、CGの番号か、背景の番号かで画像の読み込むフォルダを分けるようにします。

 CG用の画像ですが、ゲーム画面では背景画像と同列に扱います。そのためExcelデータ上は、100 からスタートするように設定してください。
100以上の値を持つ画像の番号をCG、それ以下の値を持つ画像の番号を背景、と制御するようにします。

 CGを表示した場合、そのシナリオ内のメッセージがすべて再生されたときに、GameData スクリプトに新しく作成するセーブ用のメソッドを呼び出して、CGの番号をセーブします。
この値をゲーム再開時のタイトルシーンで読み込んで、回収済のCGの番号を取得するように設計します。この値を参照してアルバムシーンではCGのサムネイル画像を表示させます。


実装手順


 以下の手順で実装を行います。

 1.CG画像をUnityにインポートしてロードできる準備をする
 2.GameData スクリプトを修正し、アルバム機能にかかわる処理を追加する
 3.TextMessageViewew スクリプトを修正して、CG画像の読み込み処理と、アルバム機能にかかわる処理を追加する
 4.Title シーンと Title スクリプトを修正して、アルバム機能にかかわる処理を追加する
 5.ゲームを実行して動作を確認する


1.CG画像をUnityにインポートしてロードできる準備をする


 CGとして使用する画像をUnityにインポートしてゲーム内で利用するための準備を行います。

 Resources フォルダの中に CG フォルダを作成します。その中にCG用の画像を配置します。

 配置した画像ファイルは "cg_"で始まるファイル名に、通し番号をつけて名前をつけてください。
Resources フォルダのロード機能を利用してゲーム中にCG画像をロードして読み込んで利用する際に、このファイル名を指定しますので
異なる名前になっているとロードが成功せずに、画像が表示されません。画像のファイル番号は 0 からスタートし、連番で用意してください。

 また未回収時の画像について、小文字で "frame" というファイル名にして登録をしてください。
CG画像を回収していない場合には、そのファイル名を利用して未回収用の画像を呼び出しますので、名前の指定が違うと白い画像(画像未設定時のもの)になります。


Resourcesフォルダのファイル設定画像



 以上でこの手順は完成です。


2.GameDataスクリプトを修正し、アルバム機能にかかわる処理を追加する


 アルバム機能にかかわる処理を実装するために必要となる変数を3つ追加します。

 1つ目はロードしたCGの番号を代入する List<int> 型の getCGNos 変数です。ゲーム実行時に、ここに回収済のCGの番号をロードして代入します。

 2つ目は回収したCGの番号のセーブ・ロードに使用する string 型の GET_CG_NO 変数です。固定値を入力するため、変数を分かりやすく大文字にしています。
この文字列にCGの番号を付与して、セーブする際のID(Key)にします。そしてこの変数を利用してセーブデータの確認をし、ロードを行います。

 3つ目はゲームに登場するCGの総数を設定する、 int 型の cgTotalCount 変数です。インスペクターより、実際にゲームに登場するCGの総数を登録します。
 

 回収したCGの番号のセーブ・ロード用にメソッドを2つ追加しています。


GameData.cs

 <= クリックすると開きます。



GameDataゲームオブジェクトを確認する


 新しく追加した cgTotalCount 変数が 0 で表示されています。これはゲーム内に用意するCGの総数です。今回は 15 に設定をします。


 もう1つ新しく追加した getCGNos 変数は List ですので、Size 0 になっています。この部分はそのままで問題ありません。
CGを回収したデータをロードした場合に、ここにCGの番号が代入されて、そのデータをアルバムシーンにて参照する設計にしています。
なおデバッグしやすいように public 修飾子を利用してインスペクターに表示していますので、ここに回収したCGの番号を登録することでデバッグが可能です。
 

GameData ゲームオブジェクトのインスペクター画像



 以上で完了です。


3.TextMessageViewew スクリプトを修正して、CG画像の読み込み処理と、アルバム機能にかかわる処理を追加する

設計


 SetUpScenarioDataメソッドの中に、シナリオに応じて背景画像を読み込むのか、あるいはCG画像を読み込むのかを制御する処理を追加します。 

 NextTouch メソッドの中に、シナリオ内の全メッセージの再生が終了した際に、そのシナリオでCG画像が使用されていた場合にはそのCG画像を回収済画像としてセーブを行う処理を追加します。


TextMessageViewewスクリプトを修正する


 public 修飾子を持つ変数の追加はありませんので、修正が終了したらインスペクターの確認をして、アサイン漏れがないかチェックだけしてください。


TextMessageViewer.cs

 <= クリックすると開きます。



 以上で完了です。


4.Title シーンと Title スクリプトを修正して、アルバム機能にかかわる処理を追加する

事前準備


 Titleシーンへ移動し、Titleシーンの Canvas ゲームオブジェクト内に、アルバムシーンへの遷移用のボタンを設置してください。位置や大きさは適宜に調整してください。


Titleシーン ヒエラルキー画像



Titleシーン SceneビューとGameビュー画像



参考画像
btnAlbum ゲームオブジェクト インスペクター画像



btnAlbum ゲームオブジェクト インスペクター画像



btnAlbum ゲームオブジェクト 子オブジェクトの Text ゲームオブジェクト インスペクター画像



設計


 Titleスクリプトを修正して、ゲームの実行時に、GameDataにセーブされているCGの番号があるかチェックを行い、セーブされた番号がある場合にはCGの番号を取得する処理を追加します。
また Titleシーンに設置したアルバムシーンへの遷移用のボタンを制御し、ボタンを押すことによってアルバムシーンへ遷移する処理を追加します。
いまはまだアルバムシーンを作成していませんので、処理だけ事前に作成しておき、後程、アルバムシーンを作成してから遷移処理を確認します。

 変数にはアルバムシーンへの遷移用のボタン用の変数を追加します。



Title スクリプトを修正する



Title.cs



Titleゲームオブジェクトの設定を行う


 スクリプトの修正が終了したので、Titleゲームオブジェクトを選択してインスペクターを確認します。
新しく追加した btnAlbum 変数が表示されていますのでアサインしてください。

 btnAlbum 変数には、Titleシーンに設置している、アルバムシーンへの遷移用のボタンをアサインします。
ヒエラルキーにある、アルバムシーンへの遷移用のボタンのゲームオブジェクトをドラッグアンドドロップしてアサインしてください。
このボタンを押すと、アルバムシーンへ遷移する処理を行いますが、今はまだシーンがないためエラーになります。


Titleゲームオブジェクト インスペクター画像



 以上で完了です。


5.ゲームを実行して動作を確認する


 以上で完成です。まずは、シナリオデータの元となるExcelファイル、あるいはJsonファイルを修正して、
いずれかのシナリオの背景画像用の backgroundImageNo の値を 100 に設定してください。
この値と Resourcesフォルダの cg ファイルの通し番号とが連携しています。
backgroundImageNo の値を 100 に設定することで、ResourcesフォルダのCGフォルダにある cg_0 をロードする処理になっています。


参考用Jsonファイル
{
  "senario": 
  [
    {
      "senarioNo": "0",
      "messageString": "あいうえお,かきくけこ",
      "charaNoString": "1,2",
      "branchString": "-1",
      "displayCharaString" : "3/0,1",
      "backgroundImageNo" : "100",
      "bgmNo" : "0",
      "branchMessageString" : "123,aaa",
      "autoScenarioNo": "1",
      "endingNo": "0"
    },
    {
      "senarioNo": "1",
      "messageString": "さしすせそ\nなにぬねの,たちつてと",
      "charaNoString": "0,1",
      "branchString": "5/1/0,1,2",
      "displayCharaString" : "0,2/1",
      "backgroundImageNo" : "1",
      "bgmNo" : "0",
      "branchMessageString" : "fff,ddd,kkk",
      "autoScenarioNo": "0",
      "endingNo": "1"
    },
    {
      "senarioNo": "2",
      "messageString": "わをん",
      "charaNoString": "2,3",
      "branchString": "0",
      "displayCharaString" : "0,1,2",
      "backgroundImageNo" : "2",
      "bgmNo" : "0",
      "branchMessageString" : "gggg",
      "autoScenarioNo": "0",
      "endingNo": "0"
    }
  ]
}

 このJsonファイルでは、最初のシナリオデータの背景画像をCG画像に差し替えるようにしています。
ゲームを最初からスタートして、通常の背景画像ではなく、新しく用意したCG画像が表示されれば成功です。


 <実装動画>
ゲーム中にCG画像が表示されるか確認
https://gyazo.com/b60f6027a335c0ac0887e7f0b5d2bad4


 CGが無事に表示されたら、そのままシナリオをすべて再生すると回収済CGとしてセーブされます。
セーブ処理が成功すればDebug.Logが処理されますので、Console にCG回収済と表示されます。

 セーブの確認が取れたらゲームを一度終了し、再度ゲームを実行しなおしてください。タイトルシーンで
回収したCGの番号がセーブされている場合には、その番号を取得して、GameDataのリストに代入する処理が実行されます。
こちらもロードが成功した場合には、Debug.Logが処理されてConsoleに表示されます。


Console セーブとロードに成功した場合の処理表示



ゲーム中に回収後、ゲームを再度スタートした際にタイトルシーンで回収済みのCGの番号を取得(GameData の getCGNos の値が自動で代入される)
https://gyazo.com/cb4df400ebbac82d0ade1088147f8cc0


 以上でこの手順は終了です。おつかれまでした!
次の手順では、回収したCGの番号を参照して、アルバムシーンとサムネイル画像を表示する処理を実装します。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます