2021.10.20ゲームのスコア表示ってどうやるのだろう?UI(ユーザーインターフェース)ですね!今回は、画面上にテキストやボタンなどを表示する方法について解説していきます。ゲーム開発において、欠かせない要素です。ご理解を深めるために、実際に画面操作をしながら進めていただくことをオススメしています。解説では、以下の続きとして解説をしていきます。エッセンスだけを知りたい方は、スキップして本文へとお進みください。以下の2記事の内容をベースに解説しますので、事前に実施をお願いします。「Unityはインストールしたけど、何から作ろう...」とお困りの方向けに、キーボード操作で動くゲームの作り方を解説していきます。基礎的な内容のため、最初にぜひ身につけてステップアップしてください。【Unity】当たり判定!アイテムをGETするエフェクト実装|Colliderの基礎ゲームでは欠かせない当たり判定!これを実装するには、Colliderを使います。実際の画面に沿って、使い方を解説していきます。takugymnastics.com2021.10.18解説画面と全く同じ環境にしたい場合は、追加で以下の4記事を実施お願いします。【Unity】オブジェクトに色を付ける|ようこそ、カラフルな世界へ!Unityのオブジェクトに色や模様を付けてみよう!デフォルトでは、グレー一色の味気ない世界をカラフルに染める方法をご紹介します。【Unity】オブジェクトの複製|同じ作業を徹底的に効率化!同じオブジェクトを複数作ること、あるあるですよね!ただ、途中で方針が変わったりして、一つ一つを修正していく作業は骨が折れます。そんな手間を一挙に解決してくれるのが、Prefab(プレハブ)という機能。【Unity】Public変数はこう使う|エディタでパラメータ調整プログラムからオブジェクトを操作する場合、付いて回るのが「パラメータの調整」です。何度も修正して確認するのは、なかなかの手間なのです。そこで、エディタから直接操作する方法で効率化をしていきましょう。【Unity】回転するアイテム配置|超簡単!Rotateメソッドの使い方ゲームにおいて変化をもたらすのが「アイテム」です。回転するアイテムを配置するまでを解説していきます。takugymnastics.com2021.10.17ここまでで、事前準備は完了です。作成していきましょう。目次Consoleウインドウに表示Scriptの追加Consoleウインドウで確認Gameビューに表示Canvasの確認UIオブジェクトの設置Textの配置の調整Scriptの追加TextとScriptの関連付けGameビューで確認UI用語集Consoleウインドウに表示Gameビューに表示する前に、Consoleウインドウで練習をしてみましょう。[Player]がGETしたアイテム数をConsoleウインドウに表示します。Scriptの追加[Player]視点での数のため、[Player]に関連付けられたScriptにコードを追加します。ProjectウインドウでScript[PlayerController]を開きます。開いたScriptに、以下の流れで変更を加えていきます。GETしたアイテムをカウントするitemcountというint型(整数)の変数を定義します。ゲームスタート時はカウンタをリセットします。ゲーム中は常時カウントを更新します。Debug.Log(変数)がコンソールウインドウに変数を表示するという意味です。アイテムをGETする度にGETした個数を1つずつ加算します。以下のようになります。Consoleウインドウで確認[▶︎]ゲームプレイを押して、実行結果を確認します。スタート時は、Consoleウインドウには、0が表示されています。アイテムをGETする度に、Consoleの数値が更新されています。(現時点では2つGETしたので、最終行に2が表示される。)これで、Consoleの表示は完了です。今回はGameビュー上にTextを表示させる方法を解説します。ここでは、Canvasを使用します。Hierarchyウインドウ下の[+]をクリックして、[UI]>[Canvas]を選びます。Hierarchyウインドウに[Canvas]と[EventSystem]の2つのオブジェクトが作成されます。EventSystem:UIのイベントを管理。UIのScript実行に使用される。Canvasの確認Canvasが配置されている場所を確認しましょう。Sceneビューの[2D]をクリックして、2Dにしてマウスホイールを回転させて画面を引きます。Canvasは、UIオブジェクトを配置するための領域です。以下のような特徴を持ちます。作成したCanvas上にTextを配置します。Hierarchyウインドウの[Canvas]を右クリックして、[UI]>[Text]をクリックします。Text」が表示されます。Sizeの変更を実施します。表示したTextの配置を調整していきます。Transform]で調整します。方法は2通りあります。今回は、後者を解説していきます。決められた位置に配置する場合は、topとcenterで囲まれた図形をクリックします。[Shiftキー]+[Altキー]を押したまま、配置したい場所をクリックします。図の青丸がアンカーと言い、配置する場所の基準になります。Scriptの追加Projectウインドウで[PlayerController]を開きます。UnityEngine.UI」を宣言する必要があります。「itemcount.ToString();」はint型の整数(itemcount)をString型(文字列)の数字に変換するメソッドです。追加したら、保存をします。TextとScriptの関連付けScriptの内容をTextと関連付けて、Gameビューに表示するように設定します。Text]にドラッグして離します。Gameビューで確認[▶︎]ゲームプレイを押して、実行結果を確認します。これでUIの完成です。補足として、メソッドを使ってコードを簡略化していきます。先ほどのコードでは、StartメソッドとUpdateメソッドに同じコードが記述されていました。仮に修正が必要になった場合に、2つに変更を加える必要があり、エラーやミスにつながる可能性があります。そのため、変更を1つで済むように変更します。これで、メソッドを定義したので、呼び出すだけで、処理が実施されます。変更する際には最後に記述したメソッドだけを変更すれば良いので効率が良くなります。今回紹介できなかった項目についても解説しています。困った時にご参照ください。前に、まずはボタンの意味や役割を確認しておくことは重要です。Uniyエディタは少々複雑ですので、まずは全体像を把握して、わからなくなった時や必要な時に参照して、少しずつマスターしていきましょう。takugymnastics.com2021.10.10以上で、UIは終了です。development【Unity】オブジェクトの複製|同じ作業を徹底的に効率化!同じオブジェクトを複数作ること、あるあるですよね!ただ、途中で方針が変わったりして、一つ一つを修正していく作業は骨が折れます。そんな手間を一挙に解決してくれるのが、Prefab(プレハブ)という機能。development【Unity】カメラワーク自由自在|Cinemachine入門カメラワークの設定を簡易にするCinemachineについて解説していきます。development【Unity】Public変数はこう使う|エディタでパラメータ調整プログラムからオブジェクトを操作する場合、付いて回るのが「パラメータの調整」です。何度も修正して確認するのは、なかなかの手間なのです。そこで、エディタから直接操作する方法で効率化をしていきましょう。Storeへの接続から、Scneビューにオブジェクトの追加するまでを解説します。development【Unity】ARオブジェクトに影を付けるARのオブジェクトに影を付ける方法について解説します。development【Unity】落下判定エリアの設置|落ちたらリトライ!RPGやアクションゲームなど、落下はつきもの。その度に、復活して再トライすることでゲームは続いていきます。そんなゲームに欠かすことができない落下判定エリアの設置方法について解説していきます。developmentプロフィール管理人まくろアラサーエンジニア。ふたり息子(0歳・3歳)のパパ。息子達に伝えていきたい内容を書き留めるために、ブログ執筆を開始。検索タイトルとURLをコピーしました。