スライドショー

【Unity入門】UIの基本を完全攻略!いろいろなUIを表示してみよう

みなさんこんにちは!

フリーランスプログラマーのsatoです。

今回はUIについて学びましょう。

今回の記事をすべてマスターすれば、画像の表示ボタンの作成Text表示まで一通りできるようになるでしょう!

初心者向けに実例ベースで書いていますので、とりあえず動かしたい人も基礎の基礎を学びたい人もぜひお読みください。

それでは今回のアジェンダです。

[基本]UIとは?
[基本]どんなUIが作れるの?
[基本]実際にtext表示をしてみよう!
[応用]textを表示しよう!
[応用]imageを表示しよう!
[応用]buttonを使ってみよう!
[応用]canvasについて
[応用]動的なUI生成について

まずはとりあえず、基本を学び、実例としてText表示を行いましょう。

なんと単純なTextだけなら2クリックで表示が行えますよ!

そこから先は各項目に分けて、その詳細やプログラムでの操作方法などを詳しく見てみましょう。

UIとは?

UIとは「ユーザーインターフェース」の略です。

もっとわかりやすく今回のUIを一言で言うと「ユーザーに対しての、何かしらの情報表示」とも言えるでしょう。

例えばゲームを作るとして、HPバーやスコア表示、タイトル画面の「Push Start」みたいなボタンもUIと言えるでしょう。

そしてUnityではそれらが非常に簡単に行えます!

どんな風に作れるのか?

そして、どんなものが作れるのか?

それをこれから順に見ていきましょう。

実際に作ってみよう!

まずはどれだけ簡単に、UIが表示できるか実体験してみましょう!

Hierarchyウィンドウ上で右クリック→UI→Textを選択しましょう!

unity-ui-1

選択すると以下の画面のように、UIが生成されます。

unity-ui-2

そしたら実行をしてみましょう!

unity-ui-3
やりましたね!

非常にシンプルに「New Text」と表示しているだけですが、こんな簡単に文字の表示が行えました!

このようにUnity上で文字を出すだけなら、非常に簡単に行えます!

こんなに簡単に作ることができる!ということをまずは覚えておいてください。

※Textの文字の変え方や、プログラムからのアクセス方法などは、次の項目で説明しますね!

いろいろなUIを作ろう!

ここから先は、各リンクで主要なUIの作り方を説明しています。

どれも数クリックで生成を行えるので「難しいかも…」なんて謙遜せずに気楽に読んでみましょう!

生成した後の、よくあるやりたいことを実現する方法までちゃんも網羅してありますよ。

textを表示しよう!

まずは先ほど作ったtextについてです。

【Unity入門】1分でTextを表示しよう!スコアの表示まで簡単解説!
更新日 : 2018年12月24日

こちらの記事では以下のようなことを説明しています。

[基本] まずはtextを表示してみよう!
[基本] スクリプトからスコアを表示してみよう!
[応用] textで出来るいろいろなこと!

textの文字列の変更から、スクリプトによるスコア表示の方法まで説明しています!

ぜひマスターしてみてください。

imageを表示しよう!

【Unity入門】Imageの使い方!UI上に好きな画像を出そう
更新日 : 2018年12月25日

こちらではImageを使った、UI上での画像表示についてまとめています。

[基本] Imageとは?
[基本] Imageを使ってみよう!
[基本] Imageを詳しく見てみよう!
[応用] プログラムでいじってみよう!

画像の表示の仕方を前半に見つつ、後半ではプログラムでの画像変更などをまとめあります。

buttonを使ってみよう!

UnityではUI常に非常に簡単にボタンを配置可能です。

ゲーム制作に必須の機能なのでぜひマスターしておきましょう。

以下のリンクに詳細をまとめておきました。

【Unity入門】Buttonの作り方!押された判定はどう取るの?
更新日 : 2018年12月25日

canvasについて

UIを触る上でCanvasの機能は切り離せません。

深く学んでおきたい人は以下のリンクを読んでおきましょう。

【Unity入門】Canvasって何が出来るの?UIの基礎を学ぼう!
更新日 : 2018年12月25日

動的なUI生成について

この項目は少し難しいため、初心者は読み飛ばして頂いても問題ありません。

ここまでUIの表示作成方法を説明してきました。

ただし特定状況下でのみUIを表示したくなることもありますよね?

最初の頃はシーン切り替えで「タイトルシーン」「ゲームシーン」「ゲームオーバーシーン」と分けることで、対応可能でしょう。

しかしより汎用的にするためには、動的にUIの作成を行う必要が出てくるのもまた事実です。

動的にUIを生成するためには、今回のように作成したUIをプレハブ化し、動的に生成する必要があります。

以下のリンクを読み、プレハブや動的生成について学んでおきましょう!

【Unity入門】オブジェクトを動的生成!prefabを使いこなそう!
更新日 : 2019年5月13日
【Unity入門】動的生成の基本!Resources.Loadを覚えよう!
更新日 : 2018年12月25日

まとめ

今回はUIについて一通り見てきました。

Unityでは非常に簡単にUIが作れます。

とはいえ、使いこなすには学ぶべきことが多いのもまた事実です。

ぜひ各リンクからそれぞれの内容を学び、素敵なUIを作れるようになりましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説