Unity事例ノート

UNITY

クリックするたびに画像を切り替える

クリックするたびに、画像を順送りで切り替えできるように、スクリプトを作成しましょう。

3枚の写真を用意し、クリックすれば順番に表示が変わっていきます。

関連記事:
画像の切り替えをループ(Resources.Load)
条件によって画像表示を切り替える
ボタンで画像を切り替える
画像(UI.Image)の設定項目
Resources.Loadを使ったファイル指定
ドロップダウンで画像表示を切り替え
画像データをMaterialとして扱う方法
画像をスクリプトで動かす
複数のマテリアルをスクリプトで切り替え

クリックで写真を順送りで表示

Resourcesという名前で、フォルダを作成します。
(※フォルダ名は必ず、「Resources」にしてください。)

Resourcesの直下に、Imageというフォルダを作りました。

画像ファイルをインポートします。

Imageフォルダ内で右クリック > 新しいアセットをインポート。

今回は、通し番号のついた画像ファイルを3枚読み込みました。

photo1~3すべて、テクスチャタイプを「スプライト(2DとUI)」にします。

こういうダイアログが出てきますので、適用するをクリックしましょう。

Resources.Loadで画像ファイルのパスを指定

UI > 画像をクリックして、画像のオブジェクトを作成します。

中央に配置して、画像の解像度に応じて、幅と高さを変更します。

ソース画像には、1枚目の画像を入れておきます。

CanvasのUIスケールモードを「画像サイズに拡大」にしておけば、ゲーム画面のサイズに応じて、写真のサイズも変わります。

空のオブジェクトを作成します。

PhotoChange.csを作成し、GameObject(空のオブジェクト)に追加します。

PhotoChange.csを記述します。

UI画像を扱う際には、4行目の using UnityEngine.UI; を忘れずに書いておきましょう。

ゲームプレイします。

ゲームビューをクリックすれば、画像が順番に変わっていきます。

Resources.Loadを使えば、Resourcesフォルダ内のパスを参照できます。

count変数をクリックで変え、それに応じて、通し番号をつけたファイル名も変わっていきます。

関連記事:
画像の切り替えをループ(Resources.Load)
条件によって画像表示を切り替える
ボタンで画像を切り替える
画像(UI.Image)の設定項目
Resources.Loadを使ったファイル指定
ドロップダウンで画像表示を切り替え
画像データをMaterialとして扱う方法
画像をスクリプトで動かす
複数のマテリアルをスクリプトで切り替え

SCHOOL教室案内