Texture】を使って画像を表示させる方法を初心者向けに解説した記事です。Textureのプロパティを使うと画像の調整ができるので、表示位置などのパラメータを合わせて紹介します。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Textureを使って画像を表示させる方法を初心者向けに解説した記事です。Texture」というゲームオブジェクトが用意されおり、2Dの画像ファイルを直接、ゲーム画面上に表示することができます。本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。Textureの使い方を学習するよ。Textureは2Dの平坦な画像をゲーム画面に表示させる機能だよ。画像の表示位置も自由に決めれるのでユーザーインターフェイスなどに使うといいかもしれないね。大石ゆかりなるほど、是非やってみたいです。本記事では以下の流れで解説していきます。Texture」を作成してみましょう。Texture]と選択します。「UnityWatermark-small」というゲームオブジェクトが作成されました。画面には、デフォルトの画像としてUnityのロゴが表示されます。次に、この画像を変更しましょう。今回は「TextureGreen」と言う名前の画像ファイルを用意しました。Inspector上の「Texture」に画像ファイルをドラッグアンドドロップします。すると、画面に表示される画像が変更されました。Texture」で追加する形になるよ。大石ゆかりTexture欄にAssetsから画像をドラッグすると、画面にそれが表示されましたね。田島悠介では次はこれを編集してみよう。場所や大きさなどの変更ができるんだ。Textureのプロパティを使って画像の調整を行います。Textureは、以下のパラメータを持っており、画像の表示位置などを設定可能です。Transform「Position」で画像の表示位置を設定できます。画面左下を原点として、画像の表示位置を0~1の間で値を設定します。画面右端がX=1、上端がY=1です。Texture表示する画像ファイルを設定できます。Color画像の色を設定できます。InsetTransformで設定した位置を基点に、ピクセル単位で画像の表示位置を操作できます。「Width」と「Height」では、画像の幅と高さを変更することができます。Border画像の中で、縮尺の影響を受けない部分をピクセル単位で設定できます。(今回は使用しません。)では、以下のようにパラメータを設定してみましょう。これで画像が画面左上に表示されるようになりました。Textureの各パラメータは、スクリプトからも参照できます。「UnityWatermark-small」に以下のスクリプトを追加してみましょう。Javascriptの場合は以下のように記述します。32);}}C#の場合は以下のように記述します。32);}}}ゲームを再生すると、画像がバーのように伸び縮みします。今回の記事は以上です。田島悠介テクスチャ表示の調整はできたかな?大石ゆかりなるほど、こうやって好きな場所に好きな大きさで配置することができるんですね。「Color」の項目で色を指定すると、全体の色合いを変更することができるんだ。雰囲気を変えたいときなどに使ってみよう。大石ゆかり表現のバリエーションが増えて便利そうですね。活用したいです!Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。複製が簡単にできる!Unityでプレハブ(Prefabs)を作る方法【初心者向け】Unityを使い始めたばかりの初心者向けに、Unityの使い方の基礎を紹介する記事です。今回は複製ができるプレハブ(Prefabs)がテーマです。...UnityUnityでJoystick(ジョイスティック)を追加する方法【初心者向け】ゲームエンジンのUnityでJoystick(ジョイスティック)を追加する方法を初心者向けに解説した記事です。今回は、Unityでキャラクターをジャンプさせる方法について解説していきたいと思います。現在ゲームを作るためのゲームエンジンはたくさんの種類があります。その中でも世界で一番使われているのがUnityです。Unityの勉強を始めたいと思っ...Unityあわせてよく読まれている記事UnityのGUIでボタンを表示させる方法【初心者向け】UnityのGUIでボタンを表示させる方法を初心者向けに解説した記事です。Unityでは、様々な入出力を処理するGUIを簡単に作成できます。今回は、最も一般的なGUIのひとつであるボタン(Button)を紹介します。本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。今回はButtonの実装をやってみよう。これはユーザーのクリックに反応して何らかのアクションを起こすものだよ。大きさの変更や文字の編集も、もちろん可能になっているよ。実際に配置して確認してみよう。Buttonは、シングルクリックに反応するボタンです。ボタンが押された際のイベントをスクリプトに記述できます。スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。Javascriptの場合は以下のように記述します。C#の場合は以下のように記述します。この状態でゲームを再生してみましょう。「Button」と書かれたボタンが表示されました。Button関数は第一引数(Rect構造体)へGUIの表示位置を指定します。第二引数(String)へボタンに表示する文字列を指定します。ボタンを配置してみたよ。Rectで場所や大きさを指定して、””内の文字列がその中に入るんですね。今のままではボタンをクリックしても何も起こらない状態なので、せっかくだから何かしらのアクションが実行されるようにしてみようか。このままではボタンを押しても何も起こりません。そこで、ボタンが押された際のイベントを追加することにしましょう。Button関数の戻り値には、ユーザがボタンを押した際にTrueが返されることを利用します。以下のようにスクリプトを修正してください。“Button”)UnityAndroidアプリ開発でBitmapクラスを使って画像を表示させる方法Androidアプリを開発では、Bitmapクラスを使って画像を表示したり変更したりすることができます。そこで今回はBitmapクラスを使って画像を表示させる方法を初心者向けにご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。それならBitmapクラスを使うと実装できるよ。Bitmapクラスは複数の画像形式に対応しているんだ。Bitmapクラスを使って画像を表示するときに使用できる画像形式は次の3種類です。これらの画像形式で画像を用意するようにしましょう。それでは、実際に使用してみましょう。使用する画像は、resファイル内にdrawableファイルを用意し、画像を配置します。その際、形式が違うファイルで画像の名前が同じにならないように注意しましょう。今回は、次の2つの画像を用意しました。レイアウトファイルにImageViewを用意しておきます。ImageViewはレイアウトエディタのパレットの「Images」から配置できます。パレット内のImageViewを、配置したい場所までドラッグしましょう。すると、以下の画像のようなダイアログが表示されます。これは、表示する画像を選択するためのダイアログです。今回は、後ほど表示する画像を選択するのでキャンセルにしてもいいのですが、画像が変化したことをわかりやすくするため、drawableフォルダにコピーした画像「blue」を選択し、[OK]ボタンをクリックします。これでImageViewの用意ができました。ここでMainActivity.javaには次のように記述します。今回はアプリが起動したときに実行されるonCreateメソッド内に次のように記述してみましょう。この行では、drawableに保存した画像をBitmapに変換しています。この行で、上で変換したBitmapをレイアウトに用意したImageViewにセットしています。これで画像の表示の設定ができました。アプリを実行して画面を確認してみましょう。アプリを起動すると、onCreateメゾットが実行されるので、ImageViewに表示されるのは、「red.png」になります。Bitmapクラスを使って画像を表示する方法は以上です。Androidアプリで何か操作した後に画像を変更することってあるだろうから、覚えておいたほうがいいね。Androidアプリ開発をさらに効率よくしたい場合は、Androidアプリ開発のLayoutの使い方も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。Androidアプリ開発UnityのGUIでラベルを表示させる方法【初心者向け】UnityのGUIでラベルを表示させる方法を初心者向けに解説した記事です。Unityでは、様々な入出力を処理するGUIを簡単に作成できます。今回は、文字やテクスチャを表示するためのGUIを紹介します。本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。今回はGUIのひとつ、Labelを実装してみよう。Labelは文字やテクスチャを画面に表示させるものだよ。ユーザーがそれで何か操作するというタイプのものではなく、指定した要素をそのまま出力するんだ。Labelは、文字やテクスチャをゲーム画面上に表示します。ユーザからの操作を受け付けない表示のみのGUIです。スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。Javascriptの場合は以下のように記述します。C#の場合は以下のように記述します。この状態でゲームを再生してみましょう。「Label」と書かれたラベルが表示されました。再生すると、文字列が表示されましたね。先ほど入力したコード内で座標や文字列の内容を変えたりすることができるよ。テクスチャの場合は使用する画像を用意してから、コードを編集する必要があるんだ。次の手順を見てみよう。Label関数は第一引数(Rect構造体)へGUIの表示位置を指定します。第二引数(String)へラベルに表示する文字列を指定します。第二引数には文字列のかわりにテクスチャ(Texture2D)を指定することもできます。実際にやってみましょう。Assetsフォルダの配下にTextureフォルダを作成し、画像ファイルを保存してください。(画像ファイルの追加方法は、こちらで詳しく紹介していますので、ご参照ください。コードを以下のように修正しましょう。スクリプト内でテクスチャをあつかう場合は、Unityに用意されているTexture2Dクラスを使用します。最後に、[Inspector]タブでスクリプトコンポーネントの「labelTexture」へテクスチャをドラッグ&ドロップしてください。ラベルにテクスチャが表示されました。今回の記事は以上です。LabelTextureの欄が表示されていない場合は、スクリプトコンポーネントの名前の部分をクリックして表示させよう。表示させるテクスチャの内容はLabelTextureに他の画像をドラッグ&ドロップすることでいつでも変更できるからね。文字列同様座標を変えることで表示位置を調整することも可能だよ。Buttonでボタンを表示させる方法を合わせてご覧ください。[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。UnityWordPressでアイキャッチ画像を設定する方法【初心者向け】WordPressでは、記事1つ1つにサムネイル画像(アイキャッチ画像)を設定することができます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。TechAcademyマガジンの場合は、このように表示されています。そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面ではまだ表示されていないことが多いので、これを表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアが出来ます。これでアイキャッチ画像追加の準備はできました。アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除する」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これアイキャッチ画像の設定は完了です。このように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。WordPressUnityのGUIでSlider(スライダー)を表示させる方法【初心者向け】UnityのGUIでSlider(スライダー)を表示させる方法を初心者向けに解説した記事です。Unityでは、様々な入出力を処理するGUIを簡単に作成できます。今回は、スライダー式のGUIを2種類紹介します。本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。スライダーは水平方向と垂直方向の二種類のものが作成できるよ。横と縦のスライダーだね。水平方向のスライダーにはHorizontalSliderを使うんだ。Slider(スライダー)とは、ある一定の範囲の数値を変化させるのに利用するGUIです。iPhoneアプリのUIパーツにもスライダーが用意されています。Unityのスライダーには下記2つの種類があります。それぞれ紹介していきます。HorizontalSliderは、値を一定の範囲内で操作できるスライダーです。スライダーの向きは水平(横)になります。スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。Javascriptの場合は以下のように記述します。C#の場合は以下のように記述します。20),Unity覚えると便利!UnityでGUIを作成する方法【初心者向け】ゲームエンジンのUnityでGUIを作成する方法を初心者向けに解説した記事です。覚えておくとゲーム開発が便利になるので、この記事を参考にして実装してみてください。本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。今回はUnityでGUIを実装する方法を見てみよう。interfaceの略で、ユーザーが操作を行う際に使用するグラフィカルなインターフェイスのことだよ。各種メニューボタンやテキスト入力エリアなどだね。色々なところで必要になりそうですね。GUI(グラフィカルユーザインターフェース)とは、ユーザが視覚的に操作できる入出力機能です。ボタンやテキストフィールドといったGUIは、どのアプリケーションでも一般的に使用されていますね。Unityでは、GUIをスクリプトから実装します。様々なGUIが用意されており、コードを1行記述するだけで簡単に実装できます。GUIエディタのデモビデオは公開されているので、今後さらに簡単に使えるようになるかもしれません。UnityのGUIのうち、代表的なものを紹介しましょう。1行のテキストフィールドを表示します。ユーザはフィールド内の文字を編集することができます。シングルクリックに反応するボタンです。ユーザがボタンを押した際のイベントをスクリプトに記述できます。ラベルとして文字やテクスチャを画面に表示します。ユーザからの操作は受け付けない表示機能のみのGUIです。マウスのドラッグ操作で値を設定するスライダー式のボタンです。ユーザは最小値から最大値の間でスライダーを操作して、値を調節できます。画像を表示させることができます。実際にGUIを作成してみましょう。ボタンなんかは特によく使うことになりそうですね。実際に、GUIを追加する一連の手順を見ていこう。オブジェクトの作成からだよ。今回は、ラベルを例にしてGUIの追加方法を解説します。スクリプトを追加するためのゲームオブジェクトを作成します。Empty]と選択します。作成したゲームオブジェクトは、名前を「MenuWindow」としました。次に、スクリプトを作成します。初めにスクリプトを保存するためのフォルダを作成しましょう。[Project]タブで「Assets」フォルダを右クリックし、[Create]→[Folder]と選択します。作成したフォルダは、名前を「Script」としました。フォルダ内にスクリプトを作成します。「Script」フォルダを右クリックし、[Create]→[Javascript]と選択します。作成したファイルは、名前を「MenuWindow」としました。※注意:スクリプトファイル名を「GUI」にしてはいけません。Unityのシステムで使用される名前のため、エラーの原因となります。最後に、ゲームオブジェクトへスクリプトを追加しましょう。Component]→[Scripts]→「MenuWindow」と選択します。スクリプトファイルは、ゲームオブジェクトへ直接ドラッグ&ドロップして追加することもできます。スクリプトにコードを追加し、GUIを画面に表示させましょう。「MenuWindow」スクリプトをテキストエディタで開き、以下のコードを追加してください。C#の場合は以下のようになります。Script]を選択し、スクリプトファイル名のクラスに追加してください。Rectはラベルの表示位置を決める構造体です。ゲーム画面の左上を原点にして、表示位置の「X座標」、「Y座標」、GUIの「幅」、「高さ」の順に値を設定します。“で囲まれた文字列は、画面に表示される文字列です。コードを追加した状態で、ゲームを再生してみましょう。ゲーム画面に「MenuWindow」と書かれたラベルが表示されました。今回の記事は以上です。表示される座標を変えたり、テキストを変更したりして実際に画面でどのように実装されるかを確認するといいよ。基本の方法が分かったら他のGUIにも挑戦してみよう。チャレンジしてみます。Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。CORPORATION.。