Unityに関連する記事です

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

 4.Canvas内にUI部品を作成する 頁愀淵ぅ瓠璽犬肇瓮奪察璽戸僖Εぅ鵐疋Δ鰺儖佞垢襦親子関係や配置する位置も含めて設置する)
 5.メッセージ表示用のスクリプトを作成する 淵轡淵螢データではなく、まずはデバッグ用の文字列が表示できるようにする)
 6.【4】のUIと【5】のスクリプトを紐づけて、スクリプトで制御しているメッセージがゲーム画面上に表示できるようにする


4.Canvas内にUI部品を作成する 頁愀淵ぅ瓠璽犬肇瓮奪察璽戸僖Εぅ鵐疋Δ鰺儖佞垢襦親子関係や配置する位置も含めて設置する)


 作成したCanvasの中にUI部品を組み込んでいき、ゲーム画面とUIの両方を一緒に整えていきます。
ここではゲームの背景イメージと、メッセージ表示用のウインドウを作成しましょう。

背景用画像の作成


 まずはヒエラルキーのCanvas上でメニューを表示し、 UI => Panel を選択します。Canvasと同じ大きさのImageコンポーネントが作成されますので
こちらの名前をBackGroundに変更します。

 ヒエラルキー上では、Canvasの子としてBackGroundが配置されていると思います。



 BackGroundの持つImageコンポーネントを確認し、Spriteの部分がNoneになっているため画面には白い画像が表示されています。
無料素材なのでよいので、背景用の画像をダウンロードしてUnityにインポートし、それを設定しましょう。



 インポートした画像を選択してTextureTypeがUI/Spriteの設定になっているか確認しておきましょう。
設定されていないと画像の設定が出来ませんので、もしもDefautなどになっていた場合には、UI/Spriteに変更してApplyして変更を適用してアサインしましょう。


 
 

メッセージウインドウの作成 

1.MessageWindowフォルダの作成

 続いてもCanvas上でメニューを表示し、今度はCreate Empty で空のゲームオブジェクトを1つ作成します。名前をMessageWindowに変更します。
このMessageWindowをフォルダ代わりに使い、この中にメッセージ表示用のUIを配置していきます。

 MessageWindowのインスペクターのRectTransformを確認し、Anchorを選択します。小さなポップアップが開きますので
その状態でキーボードのAltキーを押すと形状が変化しますので、Altキーを押したまま、Bottom / Center にセットします。
 AnchorをセットしておくことでUIの位置のズレを防ぐことが出来ますので、必ず設定しましょう。

https://gyazo.com/68a6e136e5ea654663bf30793149c424

2.メッセージを表示用の背景Imageを作成

 今度はCanvas上ではなくMessageWindowの上でメニューを表示し、UI => Image を作成します。
すると、Canvasの子ではなく、MessageWindowの子としてImageが作成されます。
もしもMessageWindowの子オブジェクトとして作成されない場合には削除して、もう一度、MessageWindowの上でメニューを表示して作成しなおしてください。

 作成されたImageの名前をimgMessageBackに変更しましょう。このゲームオブジェクトはメッセージ表示の背景画像になります。
ImageコンポーネントのSpriteはNoneのままでよいので(あるいはBackGroundというSpriteを設定)、Spriteの下にあるColorプロパティを変更しましょう。
常にメッセージ文字が表示される場所ですので、あまり目立つ色ではない方がよいでしょう。

 



3.メッセージ表示用のTextを作成

 次もまたMessageWindowの上でメニューを表示し、 UI => Text を作成します。名前はtxtMessageにします。
このゲームオブジェクトはメッセージを表示する部分になります。
こちらも同じようにMessageWindowの子オブジェクトになるようにします。
またヒエラルキー上では、先ほど作成したimgMessageBackよりも下(階層は同じで並び順だけ)にします。そうすることにより
表示される文字が背景用の画像より手前に表示され、隠れてしまうことを防ぐことが出来ます。

 以下のような画像のヒエラルキーの並び順になるようにします。



 
4.位置と大きさを調整

 メッセージ表示用の背景とテキストはMessageWindowフォルダの子になっていますので、MessageWindowの位置を移動させることで一緒に移動します。
メッセージ表示用の背景の大きさを調整し、またメッセージ表示用のテキストの表示範囲もその背景内に収まるように調整します。

 これでMessageWindowの完成です。ここまでのゲームシーンを確認してみましょう。



 これでも充分にアドベンチャーゲームの体裁が整ってきました。
(ゲーム背景用の画像は無料素材を利用させて頂いております。ありがとうございます。)
 
ヴィントドルフ様
https://winddorf.net/

5.メッセージ表示用のスクリプトを作成する

 
 メッセージ表示用のウインドウが完成しましたので、次は、メッセージを表示させるスクリプトを作成していきます。
まずはデバッグ用に、文字列がまとめて表示できるようにしていきます。それが出来たら文字送り、タップを促す表示を出す、といった形で追記していきます。
一度にすべての機能を作る必要はありませんので、順序を作り、その手順通りに作っていきましょう。

 Project内に新しいフォルダを1つ作成します。Project内でメニューを表示し、Create => Folder を選択して、名前をScriptsに変更します。
次にこのScriptsフォルダ内でメニューを表示し、 Create => C# Script を選択して、名前をTextMessageViewerに変更します。

 TextMessageViewerをダブルクリックして開いて、スクリプト内にコードを記述していきます。

<= クリックするとサンプルコードが開きます。


 書き終わったらセーブして(ctrl + s)エラーがないか確認します。エラーがあるとゲームオブジェクトにスクリプトをアタッチできませんので
問題の箇所を探して修正していきましょう。

 問題がなければ、ヒエラルキー上にてメニューを表示し、Create Empty を選択して空のゲームオブジェクトを1つ作成します。
こちらの名前もスクリプトと同名のTextMessageViewerに変更します。このゲームオブジェクトはゲーム画面に表示されるオブジェクトではありませんので
Canvasの子である必要はありません。(ヒエラルキー上にいれば大丈夫です。)

 このゲームオブジェクトに、先ほど作成したTextMessageViewerスクリプトをドラッグアンドドロップしてアタッチしましょう。
インスペクターを確認して、画像のようになっていれば問題ありません。



6.【4】のUIと【5】のスクリプトを紐づけて、スクリプトで制御しているメッセージがゲーム画面上に表示できるようにする


 ここまでの手順によって、メニュー表示を行うスクリプトと、それを表示するMessageWindowが完成しました。
それではここで、スクリプトの文字を表示するという命令を、MessageWindow内にあるtxtMessageのTextコンポーネントと紐づけて
実際にスクリプトの内容が画面上に表示されるようにしていきます。

 ヒエラルキー上にあるTextMessageViewerを選択してインスペクターを確認します。
public 修飾子で宣言した情報である messages と txtMessage がアサインできるようになっているはずです。

 messagesは配列ですので、Size 0を別の数字に変更して配列を作成しましょう。ここでは3つ作成することにします。
数字を入れるとその下にElementという情報が追加されて入力が出来るようになります。作成される数はSizeの数と同じです。
(配列のため、Elementの番号は0からスタートします)

 ここに入力された文字列が、ゲーム画面に表示されるメッセージになります。Elemnt1つが1ページ分です。
3こElementがある場合には3ページ分の情報を登録できることになります。なんでもいいので、文字列を入力しましょう。

 messagesの下にはtxtMessageをアサインする場所ができています。ここに登録したゲームオブジェクトが持つTextに対して
メッセージを送ることになりますので、MessageWindowの子であるtxtMessageゲームオブジェクトをヒエラルキーでドラッグアンドドロップして
こちらにアサインしましょう。これで、スクリプトのメッセージを表示する機能と、それをゲーム画面上に表示する機能がつながりました。




 早速ゲームを実行してみましょう。Element0にて設定した文字列がまとめて表示されれば正常です。
その状態で画面をクリック(タップでも動作します)してみてください。次のページのメッセージ(Element1)が表示されれば、こちらの処理も正常です。

 最後のElementまで表示が終了してタップすると、コンソールにDebug.Logで書いておいたログが表示されます。
そうすればすべての処理は問題なく動作していることになります。

https://gyazo.com/63b039238017208fd445c947ab10faa3

 確認をしてみましょう。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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