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;を忘れないこと。

    [csharp]

    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;

    }

    }
    [/csharp]

  9. ファイルを保存したらインスペクターに変更する前のSpriteと後のスプライトを指定します。

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

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

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

    [code]
    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;
    }

    }

    }

    [/code]

  13. プレイスタートしてボタンを押すとスプライト画像が1⇔2へ切り替わります。

下の例はUnity Javascriptでマウス左ボタンをおしたときにスプライトを切り替える例。
[csharp]
//変更後スプライトを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(&quot;hit object is &quot; + hitObject.collider.gameObject.name);
        //スプライト切り替え
        OpenDoor();
        //サウンドを鳴らす          
        audio.PlayOneShot(knockSound);

        }
    }
}

}

function OpenDoor(){
//スプライト切り替え
GetComponent(SpriteRenderer).sprite = newSprite;

}

[/csharp]

□参考書籍

created by Rinker
ボーンデジタル
¥5,060 (2020/11/25 08:16:57時点 Amazon調べ-詳細)

created by Rinker
¥5,060 (2020/11/25 11:22:39時点 Amazon調べ-詳細)

Unityを本格的に勉強したくなったらTECH STADIUM

ゲーム製作は孤高の道です。
そしてゲームの作り方を学びながら市場ではやっているものを探し、自分流のアレンジを加えてオリジナリティのあるゲームを作る。
少しでも効率よく進めていかないと時間ばかりが過ぎてゲームがなかなか出来上がらない事態に陥ります。

本格的にゲームづくりをしたいなら、最初はゲームづくりの基礎をしっかりと勉強し体に身につけるのが大事になります。

そこでおすすめしたいのがコスパ最強のオンラインゲーム授業がうけられる「TECH STADIUM 」です。

テックスタジアムとは?

第一線で活躍するプロのエンジニアやクリエイターから、ゲーム制作に必要なプログラミング等のスキルを『完全オンライン』『実質無料』で学べるスクールです。

「ゲームクリエイターになりたい」「業界でエンジニアとして働きたい」「ゲームの仕事をするのが夢だった。もう一度チャレンジしたい」人を、卒業後すぐに現場で働けるレベルにまで育成することを目的としています。

Unity、UE4、サーバー、AI、XR等、IT・ゲーム業界で活躍するための技術習得が可能であり、既に多くのの卒業生たちが憧れの業界で活躍しています。

テックスタジアムでは【無料オンライン相談】を随時受け付けています。
本気で勉強してゲーム業界に携わりたいならどういうことを学べるのか、これから自分はどういうことを学んでいったら良いのか?
プロに相談して自分の将来の道標を見つけましょう!

ゲームづくりでわからないことがあったり躓いてしまって誰にも相談できないときがありますよね? そういったときもテックスタジアムで学習する場合には先生に質問し放題となっています。


テックスタジアムのオンライン相談は【無料】でうけられます。

ゲーム制作を学べるオンラインスクール [テックスタジアムのオンライン相談はこちらから >>]

スポンサードリンク
スポンサーリンク

-mac, Unity
-,

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