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

2023年01月11日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PhotoChange.csを記述します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PhotoChange : MonoBehaviour
{
    private Image img;
    private int count = 1;
 
    void Start()
    {
        img = GameObject.Find("Image").GetComponent<Image>();
    }
 
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if(count<3)
                count++;
            else
                count=1;
 
            img.sprite = Resources.Load<Sprite>("Image/photo" + count.ToString());
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class PhotoChange : MonoBehaviour

{

private Image img;

private int count = 1;

void Start()

{

img = GameObject.Find("Image").GetComponent<Image>();

}

void Update()

{

if (Input.GetMouseButtonDown(0))

{

if(count<3)

count++;

else

count=1;

img.sprite = Resources.Load<Sprite>("Image/photo" + count.ToString());

}

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

ゲームプレイします。

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

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

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

< 前の記事次の記事 >

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

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

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

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室