アプリ開発からお金の節約まで幅広く気になったネタを記録していきます

さくらいらぼ

mac Unity

【Unity】 Unity2D-スプライト画像をスクリプトから切り替える方法

スポンサードリンク

投稿日:2014/05/31 更新日:

何かのボタンをおした時などアクションやトリガーなどを起こしたときに、ゲームオブジェクトに設定しているスプライト画像を切り替えたいときがあります。
ここではuguiを使ってスクリプトファイルでスプライト画像を切り替える方法について書いていきたいと思います。

■環境

Mac OS Sierra 10.12.6
Unity 2017.1

■更新

2017-08-02 Unity 2017.1版を追記

スポンサーリンク

スクリプトファイルからスプライト画像を切り替える方法

  1. 適当な画像ファイルを「変更前」「変更後」で2つ用意。
    変更前:1.jpg
    変更後:2.jpg

  2. Projectビューに2つのファイルをドラッグしインポート。
    2つの画像ファイルを選択後、InspectorビューでTexture typeを『Sprite(2D and UI』に変えてApplyを押します。

  3. HierarchyへCanvasを作って、Imageを配置。

  4. 作ったImageオブジェクトを選択し、InspectorからSpriteの画像(変更前1.jpg)を設定します。

    選択するとSource Imageの項目の「1」が設定されます。

  5. 作ったImageオブジェクトを選択して、「Add Component->UI->Button」からButtonをアタッチ。
    ButtonのOnClick()欄 にある「+」を押しておきます。

    これにより関数を指定する欄が追加されます。

  6. 作ったImageオブジェクトのインスペクターからAdd Componentを押して、
    chgSpriteと入力して「NewScript」を押します。

    chgSprite.csを作ってアタッチします。

  7. chgSprite.csをアタッチしたら、Scriptの名前欄をダブルクリックしてchgSprite.csを開きます。
  8. chgSprite.csを編集します。
    uguiを使うのでusing UnityEngine.UI;を忘れないこと。

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    public class chgSprite : MonoBehaviour {
    public Sprite spriteMae;
    public Sprite spriteAto;
    public void changeSprite(){
    this.gameObject.GetComponent<Image> ().sprite = spriteAto;
    }
    }
    
  9. ファイルを保存したらインスペクターに変更する前のSpriteと後のスプライトを指定します。

  10. hierarchyビューでImageを選択してから、
    ButtonのOnClickの欄へドラッグします。

    右側のプルダウンからchgSpriteを選び、呼び出す関数「changeSprite()」を選択します。

  11. プレイスタートしてボタンを押すとスプライト画像が1=>2へ切り替わります。
  12. 次に画像を押すと1⇔2で切り替わるように編集します。

    public class chgSprite : MonoBehaviour {
    public Sprite spriteMae;
    public Sprite spriteAto;
    private bool chFlg = false;
    public void changeSprite(){
    if(!chFlg){
    this.gameObject.GetComponent<Image> ().sprite = spriteAto;
    chFlg = true;
    } else {
    this.gameObject.GetComponent<Image> ().sprite = spriteMae;
    chFlg = false;
    }
    }
    }
    
  13. プレイスタートしてボタンを押すとスプライト画像が1⇔2へ切り替わります。

下の例はUnity Javascriptでマウス左ボタンをおしたときにスプライトを切り替える例。

//変更後スプライトをInspectorビューから指定できるようにpublic
public var newSprite : Sprite ;
public var knockSound : AudioClip;
function Update () {
if (Input.GetMouseButtonDown(0)) {
var tapPoint : Vector2 = Camera.main.ScreenToWorldPoint(Input.mousePosition);
var collition2d : Collider2D = Physics2D.OverlapPoint(tapPoint);
if (collition2d) {
var hitObject : RaycastHit2D = Physics2D.Raycast(tapPoint,-Vector2.up);
if (hitObject) {
//押したゲームオブジェクト名をコンソールで表示
Debug.Log("hit object is " + hitObject.collider.gameObject.name);
//スプライト切り替え
OpenDoor();
//サウンドを鳴らす			
audio.PlayOneShot(knockSound);
}
}
}
}
function OpenDoor(){
//スプライト切り替え
GetComponent(SpriteRenderer).sprite = newSprite;
}

Unityのことでわからなくなってつまづいたらネットで聞いてみよう!

質問をすると答えてくれるQ&Aサイト「teratail(テラテイル)」ではUnityの質問が5000件以上あり、
毎日様々な質問が投稿されています。

Q&Aサイトなんてたくさんあるじゃないかと言われてしまいそうですが、
teratailの良いところはエンジニアが抱える問題の解決を全力でサポートするところ。
つまりプログラミング、エンジニアリングに特化している点です。

WordPressフォーラムよりも早く返答がくることもありますので、
わからなくなったことを溜め込まずにサクッと解決してしまいましょう。
WordPressの情報収集にもおすすめです。

>>エンジニアのためのQ&Aサイト【teratail】の詳細はこちら[公式サイト]

Unityの独学がつらくなったらTechAcademy

TechAcademy
はオンライン完結するプログラミングスクール。
ネット上で完結するのでお手頃価格なのが強み。もちろん先生への質問もできます。
相談相手には現役のプロエンジニアがサポートしてくれます。

TechAcademyにはUnity+Androidアプリコース、Unity+iOSアプリコースがあるので
独学で上手くいかないときの相談相手にもなってくれます。

コース申込別に「無料」で10分程度の説明会動画が見られるので、勉強の指針として見てみて下さい。

TECH ACADEMYの無料説明会動画を見る

□参考書籍
スポンサードリンク

-mac, Unity
-,

Copyright© さくらいらぼ , 2018 All Rights Reserved.