条件によって画像表示を切り替える

2021年07月28日

プレーヤーがぶつかった相手によって、画像表示を切り替えるしくみを作ります。

赤のボールに触れたら赤の画像、青のボールに触れたら青の画像を表示します。

Colliderを使って条件分岐し、画像エリアに出力するスプライトを変えています。

オブジェクトの準備

▼球体のpngファイルは、こちらのフリー素材を使用させていただきました。
イラストカット.com

平面とCubeを作成し、CubeのYを0.5にします。

Cubeにリジッドボディを追加します。

コンポーネントを追加 > 物理 > リジッドボディ

グレーのマテリアルを作成し、Plane（平面）に追加しました。

ゲームビューではこのような見た目になっています。

Sphereを作成し、名前をRedSphereに変更。

位置を変更し、赤のマテリアルを付けます。

もう一つSphereを作成し、名前をBlueSphereに変更します。

位置を変更し、青のマテリアルを付けましょう。

ゲームビューではこのような見た目になっています。

画像の作成

画像を出力するエリアを作成します。UI > 画像。

幅、高さをそれぞれ50、アンカーピボットを下に配置し、位置Yを60に設定しました。

ゲームビューではこのように配置されています。

このエリアに、画像を表示させるようにします。

2つの画像をインポートします。

プロジェクトビュー上で右クリック > 新しいアセットをインポート

それぞれの画像のテクスチャタイプを、スプライト（2DとUI）に変更しましょう。

こういったダイアログが出てくれば、適用するをクリックします。

条件により画像をさし変えるスクリプト

CubeMove.csを作成し、Cubeに追加します。

CubeMove.csを記述します。

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

public class CubeMove : MonoBehaviour
{
    [SerializeField] Sprite imageRed;
    [SerializeField]  Sprite imageBlue;
    [SerializeField]  Image myPhoto;
    private float speed = 3.0f;

 
    void Start () 
    {
        myPhoto = GameObject.Find("Image").GetComponent<Image>();
        myPhoto.enabled = false;
    }
 
    void Update()
    {
        float moveX = Input.GetAxis("Horizontal") * Time.deltaTime * speed;
        float moveZ = Input.GetAxis("Vertical") * Time.deltaTime * speed;
        transform.position = new Vector3 (
        transform.position.x + moveX,
        transform.position.y,
        transform.position.z + moveZ
        );
    }
 
    void OnCollisionEnter(Collision other)
    {
        if (other.gameObject.name == "RedSphere" )
        {
            myPhoto.enabled = true;
            myPhoto.sprite = imageRed;
        }
 
        if (other.gameObject.name == "BlueSphere" )
        {
            myPhoto.enabled = true;
            myPhoto.sprite = imageBlue;
        }
    }
 
    void OnCollisionExit(Collision other)
    {
        if (other.gameObject.name == "RedSphere" )
            myPhoto.enabled = false;

        if (other.gameObject.name == "BlueSphere" )
            myPhoto.enabled = false;
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class CubeMove : MonoBehaviour

{

[SerializeField] Sprite imageRed;

[SerializeField] Sprite imageBlue;

[SerializeField] Image myPhoto;

private float speed = 3.0f;

void Start ()

{

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

myPhoto.enabled = false;

}

void Update()

{

float moveX = Input.GetAxis("Horizontal") * Time.deltaTime * speed;

float moveZ = Input.GetAxis("Vertical") * Time.deltaTime * speed;

transform.position = new Vector3 (

transform.position.x + moveX,

transform.position.y,

transform.position.z + moveZ

);

}

void OnCollisionEnter(Collision other)

{

if (other.gameObject.name == "RedSphere" )

{

myPhoto.enabled = true;

myPhoto.sprite = imageRed;

}

if (other.gameObject.name == "BlueSphere" )

{

myPhoto.enabled = true;

myPhoto.sprite = imageBlue;

}

void OnCollisionExit(Collision other)

{

if (other.gameObject.name == "RedSphere" )

myPhoto.enabled = false;

if (other.gameObject.name == "BlueSphere" )

myPhoto.enabled = false;

}

4行目の using UnityEngine.UI; を忘れずに記述しましょう。

CubeMoveの中に3つのフィールドが出来るので、ここにそれぞれのデータを入れます。

ゲームプレイして、表示を確認しましょう。

赤のオブジェクトにぶつかればRedを表示、青にぶつかればBlueを表示します。

< 前の記事次の記事 >

条件によって画像表示を切り替える

オブジェクトの準備

画像の作成

条件により画像をさし変えるスクリプト

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室