UnityのGUIの基本的な作り方――uGUIのPanel、Button、Text、Imageの使い方ゲーム開発初心者のためのUnity入門(15)(5/5 ページ)

» 2017年04月03日 05時00分 公開
[薬師寺国安PROJECT KySS]
前のページへ 1|2|3|4|5       

uGUIのTextでゲームタイトルを表示させて完成

 最後に、UIオブジェクトのTextを使ってタイトルを表示してみよう。

 Hierarchyの「Create」→「UI」→「Text」と選択する。図24のようにTextが追加されるので、図25の位置まで移動させておく。

図24 TextがCanvasに追加された
図25 Textを上部に移動した

Textの各プロパティ設定

 TextのInspector」→「「Rect Transform」の「Width」に「400」、「Height」に「60」と指定する。「Text(Script)」の「Text」には「ユニティちゃんアクション」と入力しておく。「Font」には「s1-mplus-2c-medium Font」を選択してみた。「Font Size」には「30」を指定した。

 「Paragraph」の「Alignment」には「Center Align」と「Middle Align」を選択した。「Color」には赤色を指定した。全て設定すると図26のようになる。

図26 Textの各プロパティを設定した

 図26の設定で、「ユニティちゃんアクション」の文字は図27のような表示になる。

図27 「ユニティちゃんアクション」の表示

Textに影やアウトラインを装飾する

 図27の文字には、影やアウトラインを設定できるので、装飾してみよう。

 Hierarchyから、図27のTextを選択し、Inspectorの「Add Component」から「UI」→「Effect」→「Shadow」を選択する。するとInspector内に「Shadow(Script)」が表示される。「Effect Color」はデフォルトの黒のままにし、「Effect Distance」で「Y」の値に「-5」と入力してみた。この「Y」の値を大きくすると、文字と影との距離が大きくなって表示される。

 この結果が図28だ。図27と比較すると、影が表示されているのが分かる。

図28 影を表示させた

 次に、アウトラインを表示してみよう。それには、「Shadow(Script)」は削除しておいた方が分かりやすいので、「Shadow(Script)」項目の先頭のチェックを外しておく。

 「Add Component」から「UI」→「Effect」→「Outline」と選択すると、Inspector内に「Outline(Script)」が表示される。「Effect Color」に「青色」を指定し、「Effect Distance」の「Y」に「-5」と指定してみた。図29のように表示される。

図29 アウトラインを表示した

完成したサンプルを実行し、シーンを保存

 以上で完成だ。これで動作させたのが動画4になる。

動画4 ユニティちゃんアクションの完成動画

 ここでUnityメニューの「File」→「Save Scene as」から「uGUIの使い方」という名前で保存しておこう。

次回は、uGUIのSlider、Dropdown、Scrollviewの使い方

 このようにフォントの種類や、影やアウトラインをTextに適用するだけでも画面の雰囲気は大きく変わる。

 またボタンを配置する背景画像を指定するだけでも、画面が華やかになる。どんなゲームにおいてもGUIは大変に重要な役割を果たすことが分かるだろう。

 次回は、uGUIのSlider、Dropdown、Scrollviewの使い方などを解説するので、楽しみにしてほしい。

参考文献

■更新履歴

【2017/4/3】Windows 10、Unity 5.5に対応しました。C#のスクリプトを追加しました。


ユニティちゃんライセンス

このコンテンツは、『ユニティちゃんライセンス』で提供されています

著者プロフィール

薬師寺 国安(やくしじ くにやす) / 薬師寺国安事務所

薬師寺国安事務所代表。Visual Basicプログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。

1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。

1997年に薬師寺聖とコラボレーション・ユニット「PROJECT KySS」を結成。

2003年よりフリーになり、PROJECT KySSの活動に本格的に参加。.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。

Windows Phoneアプリ開発を経て、現在はWindowsストアアプリを多数公開中。

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。

Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。

Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。

Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。


前のページへ 1|2|3|4|5       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。