クリエイターの教科書

ChatGPT, Stable Diffusion, Visual Studio, Excelなど教科書

【Unity】スプライト画像の処理[移動・回転・消去・重力・トレイル・切り替え]

Unityで画像を表示するには?

Unityで画像を表示するには?

画像の表示

通常はスプライトを使います。

 

ユニティに取り込むには、JPEGやPNGファイルをアセットへドラッグアンドドロップします。これで画像素材がスプライトとしてステージにおけるようになります。

 

EmptyObjectなどをつくりそこへドラッグアンドドロップするとステージにも表示されます。

 

スプライトの位置、表示比率はインスペクターから変更できます。

 

 

これとは別にUIで画像を貼ることもできます。

これはスコアやHUDといったインタフェースで利用する場合に便利です。

やり方は「UI>Image」を貼り付け、インスペクタの「Source Image」で画像を指定します。同じくインスペクタの「Rect Transform」で幅や高さを変更します。

 

 

スプライト画像の切り替え

以下はキーが押されたら、スプライトを切り替えるサンプルです。

 

public class sSpriteChanger : MonoBehaviour
{
    public Sprite newSprite;
    private SpriteRenderer image;

    void Start()
    {
         image = GetComponent<SpriteRenderer>();
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            Debug.Log("space");
            image.sprite = newSprite;
        }
    }
}

 

 

スプライト画像を移動する

以下はスクリプトでを使って移動する例です。

Translate関数を使います。

void Update()
    {
       this.transform.Translate(-0.005f, -0.005f, 0, Space.World); 
    }

 

 

スプライト画像にトレイルをつける

銃弾や野球のボールが、糸を引くように線の軌跡を残すような効果をつけるのも簡単です。

 

「Trail Renderer」をアタッチすればOK。

 

 

スプライト画像を回転する

transformのrotationをスクリプトを使って変更します。

private float _rotateSpeed = 400f;
private float angle;


    void Update()
    {
      angle += _rotateSpeed * Time.deltaTime;
      transform.rotation = Quaternion.Euler(0, 0, angle);
    }

 

 

スプライト画像を消去

SetActiveをfalseにすると、物体が完全に消去されます。

 

位置判定等で非表示だけどその場にはおいておきたい場合、Colorを取得して色のアルファを0にします。

以下は一度スプライトのカラーを取得。カラーのアルファ値を0にしてからカラーをセットしなおしています。

Color color = this.GetComponent<SpriteRenderer>().color;
color.a = 0f;
this.GetComponent<SpriteRenderer>().color = color;

 

 

スプライト画像を重力をつけて落下

物理属性を2Dにつけるには、AddCompnentから「Rigidbody 2D」を追加します。

 

地面にぶつかったら止まるとさせる場合、地面と落下物それぞれに「Box Collider 2D」をアタッチします。

 

複雑な図形の場合には「2DPolygon Collider」を使います。

 

地面のほうは「Static」などに設定しておきます。

 

 

画像の不具合

ビルドで画像が出ない?

シーンでは画像が出るのに、ビルド後に画像が出ない(ボタンやTextは出る)という場合がありました。

 

まずはサイズ確認。小さすぎたり、大きくしすぎたり、離れていては表示されません。シーンタブ上で確認してみましょう。

 

画像をCanvas下に置き、CanvasではRenderModeをScreenSpace-Cameraに、RenderCameraにMain Cameraを割り当てるといいようです。もしくはここの設定を色々変えて試してみましょう。

 

 

画像が白く表示される

画像を置いただけなのに白っぽく表示されます。

 

パネルの下に画像を配置した場合におきましたが、どうやらパネルは初期設定で半透明、つまり透明度が半分になっているようです。パネルを選び、インスペクタで色を開きます。

 

A=アルファの値を0にすると透明度が抑えられるのでちゃんと画像が表示されるようになります。

 

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

プライバシーポリシー |〇利用規約 |〇問い合わせ