Unityに関連する記事です

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

10.Canvas内にUI部品を作成する◆淵瓮奪察璽犬すべて表示された際にタップを促すイメージを追加)
11.メッセージ表示用のスクリプトを作成するぁ福擅隠亜曚離織奪廚鯊イ好ぅ瓠璽犬髻▲瓮奪察璽犬良充┥態に合わせて制御する)
12.【10】のタップ用イメージを点滅させるスクリプトを作成する


10.Canvas内にUI部品を作成する◆淵瓮奪察璽犬すべて表示された際にタップを促すイメージを追加)


 TextMessageViewerスクリプトにおいて、文字送りについての処理の実装が終了しました。
次はユーザーに向けて、現在のゲームの状態を知らせるための機能を追加しましょう。

 1ページ分すべてのメッセージの表示が終了した際に、次のメッセージがあることを知らせるため、
メッセージウインドウ内に画面のクリック(タップ)のイメージやアニメを表示をさせることにより、
ゲームの進行を促すようにします。

 今回は1枚のイメージを利用して、メッセージの表示が終了した際にメッセージウインドウ内にそれを表示させるようにします。
なおこの処理もまた、TextMessageViewerスクリプトに追加していきます。

 まずは、クリック用のイメージを作成しましょう。
 
 ヒエラルキーのMessageWindowゲームの上でメニューを表示し、UI => Image を新規で1つ作成します。名前はimgTapIconに変更します。
imgTapIconのインスペクタ−を表示し、ImageコンポーネントのSpriteに適宜な画像をアサインしてください。
(タップアイコンや指先のアイコンが無料のアイコン素材としてダウンロードできますので、検索してUnityにインポートして使用してください)



 MessageWindow内での並び順は画像を参考にしてください。(表示順位の問題があります。)




 このイメージの配置場所はMessageWindow内であれば任意の位置で構いません。他のゲームを参考に配置してみましょう。
ここではMessageWindowの右下に表示させるようにしています。


 

11.メッセージ表示用のスクリプトを作成するぁ福擅隠亜曚離織奪廚鯊イ好ぅ瓠璽犬髻▲瓮奪察璽犬良充┥態に合わせて制御する)


 以前、TextMessageViewerスクリプトのメッセージの表示の命令とTextコンポーネントを紐づけて、スクリプトの処理を画面につなげたように、
ここではメッセージの表示状態に合わせて、先ほど作成したimgTapIconが表示されたり、非表示になったりする動作を制御させていきます。

 やり方はTextの場合と同じで、TextMessageViewerスクリプトとimgTapIconゲームオブジェクトとを紐づけて、命令が伝わるようにします。

 TextMessageViewerをダブルクリックして開いて、スクリプト内のコードを修正しましょう。
追加するのはpublicの変数を1つと、あとはStart()メソッドの中に1か所、NextTouch()メソッドの中に2か所です。今回は他の部分は略して記載してあります。

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




 先ほど追加したCompleteOneMessageメソッドに処理を追加します。このように同じ処理を行う箇所はメソッド化しておくことで
このメソッドの修正を行うことによって、この処理を行っている2カ所の部分で一緒に処理の修正が可能です。
メソッド化していない場合には、それぞれで修正を加えないとならなくなりますし、修正漏れの可能性もあります。


 スクリプトを修正後、エラーがなければTextMessageViewerゲームオブジェクトのインスペクタ−を確認します。
publcの情報が1つ増えています。



 こちらはGameObject型のアサインを求めていますので、先ほど作成したimgTapIconゲームオブジェクトを
ヒエラルキー上からこちらにドラッグアンドドロップしてアサインしましょう。


 
 
 それでは実行してみましょう。動画のようにメッセージの表示後にクリックすると画面にアイコンが表示されれば成功です。

 https://gyazo.com/46c2f18064b8c92301a3f33e58f5e6f3

 ただし、アイコンが表示されただけではユーザーには気づいてもらえないかもしれません。
次は、このアイコンがクリックされるまで点滅するように機能を追加しましょう。

12.【10】のタップ用イメージを点滅させるスクリプトを作成する

 
 タップアイコンが表示されたら、クリックされて非表示になるまでの間、アイコンを点滅させるようにしましょう。
画面に動きがあるとユーザーは気が付きやすくなります。

 Scriptsフォルダ内で新しいスクリプトを1つ作成して、名前をBlinkIconにしましょう。作成後は、imgTapIconゲームオブジェクトにアタッチします。
ここでもDoTweenの機能を利用していきます。今回はDoFadeという機能を使って点滅処理を実装します。

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

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


 クラス名の1行上に新しい情報が追加されました。[] で書かれた情報は属性(Attribute)と呼ばれるものです。
属性を付与する事で他の変数と区別したり、特別な挙動を設定することが出来ます。

 今回の属性は[RequireComponent(typeof(コンポーネント名))]です。
この属性を持つスクリプトをゲームオブジェクトにアタッチした際に引数に指定したコンポーネントがアタッチされていない場合には
そのコンポーネントを自動的にアタッチしてくれる機能です。(スクリプトの動作に必要なコンポーネントを強制的に用意してくれるものです。)

 属性についてはUnityの公式リファレンスを確認してみてください。

 作成したBlinkIconスクリプトをimgTapIconゲームオブジェクトにアタッチしてみましょう。自動的にCanvasGroupというコンポーネントがアタッチされたはずです。
これが今回使用した[RequireComponent(typeof(CanvasGroup))]属性の機能になります。
アタッチされたCanvasGroupは特に変更箇所はありませんので、そのままで問題ありません。
 
 imgTapIconゲームオブジェクトのインスペクタ−を確認します。BlinkIconスクリプトには3つのpublic 変数がありますので、こちらを設定する必要があります。

 durationは点滅する時間を設定します。例えば1と入力すれば1秒間隔で、0.5なら0.5秒間隔で点滅を繰り返すようになります。

 easeTypeはDoTweenの機能の1つであるSetEaseの引数になっている情報です。始めはUnsetとなっていてセットされていません。
こちらを変更することで点滅のアニメーションが変化します。
インスペクタ−にプルダウンメニューが出ますので、その中で色々と試してみるといいでしょう。なお基本的にはLinearが多く利用されます。


 それでは準備が出来たら、実行してみましょう。
メッセージが表示されおわってアイコンが表示されると同時に、一定の間隔でアイコンが点滅を繰り返すようになっていれば成功です。

https://gyazo.com/aee1d3d1207d82a9d4286eb5629ac8f5

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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