UnityのGUI Textureを使って画像を表示させる方法【初心者向け】
Unityで【GUI Texture】を使って画像を表示させる方法を初心者向けに解説した記事です。GUI Textureのプロパティを使うと画像の調整ができるので、表示位置などのパラメータを合わせて紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
UnityのGUI Textureを使って画像を表示させる方法を初心者向けに解説した記事です。
Unityには、画像を表示するために「GUI Texture」というゲームオブジェクトが用意されおり、2Dの画像ファイルを直接、ゲーム画面上に表示することができます。
なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。
今回はGUI Textureの使い方を学習するよ。
田島メンター！！GUI Textureは何をする機能なんですか～？
GUI Textureは2Dの平坦な画像をゲーム画面に表示させる機能だよ。画像の表示位置も自由に決めれるのでユーザーインターフェイスなどに使うといいかもしれないね。
なるほど、是非やってみたいです。よろしくお願いします！
目次
本記事では以下の流れで解説していきます。
GUI Textureの作成
では早速、「GUI Texture」を作成してみましょう。
まず、画面上部のタブで[GameObject]→[Create Other]→[GUI Texture]と選択します。
「UnityWatermark-small」というゲームオブジェクトが作成されました。
画面には、デフォルトの画像としてUnityのロゴが表示されます。
次に、この画像を変更しましょう。
今回は「TextureGreen」と言う名前の画像ファイルを用意しました。
Inspector上の「Texture」に画像ファイルをドラッグアンドドロップします。
すると、画面に表示される画像が変更されました。
バージョンによっては「Create Empty」で空のオブジェクトを作成してから「Add Component」→「Rendering」→「GUI Texture」で追加する形になるよ。
Texture欄にAssetsから画像をドラッグすると、画面にそれが表示されましたね。
では次はこれを編集してみよう。場所や大きさなどの変更ができるんだ。
[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中
GUI Textureのプロパティ
次にGUI Textureのプロパティを使って画像の調整を行います。
GUI Textureは、以下のパラメータを持っており、画像の表示位置などを設定可能です。
Transform
「Position」で画像の表示位置を設定できます。
画面左下を原点として、画像の表示位置を0～1の間で値を設定します。画面右端がX=1、上端がY=1です。
Texture
表示する画像ファイルを設定できます。
Color
画像の色を設定できます。
Pixel Inset
Transformで設定した位置を基点に、ピクセル単位で画像の表示位置を操作できます。
また、「Width」と「Height」では、画像の幅と高さを変更することができます。
Left Border～Bottom Border
画像の中で、縮尺の影響を受けない部分をピクセル単位で設定できます。
（今回は使用しません。）
では、以下のようにパラメータを設定してみましょう。
これで画像が画面左上に表示されるようになりました。
スクリプトからパラメータを設定する
GUI Textureの各パラメータは、スクリプトからも参照できます。
「UnityWatermark-small」に以下のスクリプトを追加してみましょう。
Javascriptの場合は以下のように記述します。
public var textureWidth : float;
function Update () {
textureWidth += 1;
if ( textureWidth >= 128 ) {
textureWidth = 0;
}
else {
gameObject.guiTexture.pixelInset = Rect(2, -34, textureWidth, 32);
}
}
C#の場合は以下のように記述します。
public class NewBehaviourScript : MonoBehaviour {
public float textureWidth;
void Update () {
textureWidth += 1;
if ( textureWidth >= 128 ) {
textureWidth = 0;
}
else {
gameObject.guiTexture.pixelInset = new Rect(2, -34, textureWidth, 32);
}
}
}
ゲームを再生すると、画像がバーのように伸び縮みします。
今回の記事は以上です。
テクスチャ表示の調整はできたかな？
なるほど、こうやって好きな場所に好きな大きさで配置することができるんですね。
「Color」の項目で色を指定すると、全体の色合いを変更することができるんだ。ちょっと雰囲気を変えたいときなどに使ってみよう。
表現のバリエーションが増えて便利そうですね。活用したいです！
Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。
[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
