Unityで画像の切り替え方法を探している方向け。
例えばプレイヤーが爆弾に触れた時に爆弾の画像を爆発した画像に切り替えるような感じです。
コピペできるようにコード付きで本記事にてわかりやすく解説します。
この記事は以下のような方を対象者としています。
- ゲームアプリ開発に興味がある方
- ゲームアプリを個人開発している方
- Unityで画像の切り替え方法がわからない方
Unity2Dでの画像切り替えの参考例#
まずはこちらのgif画像をご覧ください。
キャラクターが爆弾の画像に衝突した時に、爆発後の画像に切り替わっています。
こちらのやり方を本記事にて詳細に説明していきたいと思います。
小さいドット絵調のウサギがジャンプひとつで様々な世界を冒険するというコンセプトのゲームです。
ダウンロードして遊んでいただけると泣いて喜びます！
1.画像切り替え用のSpriteを用意する#
まずは画像を表示するためのSpriteを生成しましょう。
Spriteとは簡単に言うとUnity2Dで使われる画像データです。
まずは添付画像のようにGameObject->2D Object->Sprites->Squareを選択しましょう。
するとゲーム画面上に白い四角の画像が表示されます。
2.Spriteに衝突できるようRigidbody2DとBoxCollider2Dを設定する#
この辺りは本題にあまり関係がないので簡潔に説明します。
Rigidbody2DをSpriteにセットすることで物理挙動がつけられるようになります。
BoxCollider2Dはオブジェクトに衝突ができるようになります。
また、今回はキャラが爆弾の絵にぶつかっても爆弾自体の位置は動かしたくないので下記添付画像の通り値をセットします。
gravity（重力）を0にすることでオブジェクトが落下しないようにできます。
また、Freeze Position(位置固定)/Freeze Rotation(回転固定)でオブジェクトの位置や回転を制御できます。
3.ImageReplaceスクリプトを作成する#
続いて本題の画像切り替え用のスクリプトを作成します
先ほど作成したSpriteをクリックし添付画像の通りimageReplace.csファイルを作成＆追加しましょう。
そしてこちらのスクリプトをコピペしてください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class bombController : MonoBehaviour
{
// デフォルトの画像(爆弾の画像)
public Sprite defaultImage;
// デフォルトの画像(爆発後の画像)
public Sprite explodeImage;
// 画像描画用のコンポーネント
SpriteRenderer sr;
void Start() {
// SpriteのSpriteRendererコンポーネントを取得
sr = gameObject.GetComponent<SpriteRenderer>();
}
// Playerタグがついたオブジェクトと衝突した時に処理
void OnCollisionEnter2D(Collision2D coll) {
if (coll.collider.tag == "Player") {
// デフォルトの画像を爆発後の画像に切り替える
sr.sprite = explodeImage;
}
}
}こちらのスクリプトにより、元画像の描画コンポーネントを取得し、爆発後の画像に置き換えることができます。
スクリプト作成後は保存を忘れないようにしましょう。
4.元画像と切り替え用画像をSpriteにセットする#
続いて先ほど作成したimageReplaceファイルにdefaultImageとexplodeImageの欄が追加されているのを確認しましょう。
もし追加されていなければ、ファイルの保存が失敗しているか誤記がある可能性があります。
追加されているのが確認できたら、それぞれ爆弾の画像と爆発後の画像をドラッグ＆ドロップでセットします。
これで完了です。
さいごに
ここまでお読みいただきありがとうございました。
私のブログ記事を読んでいる方の中には海外転職・海外移住への興味がある方もいらっしゃるかと思います。
僕はもともと営業職から転職してITエンジニアになり、現在ベトナムで働き始めて7年目になります。
私自身ベトナムで働き始めて7年目になりますが、海外就職を実現するために大事なのは 英語力と開発現場で働いた経験だと感じました。
もし今後海外移住・海外就職を本気で実現させたい方はぜひこれらのサービスを活用してみてください。
また、独学でのベトナム語習得を目指しており現在Youtubeにもベトナム語で動画を更新しております。
日本語字幕もつけて楽しく見れるよう頑張っておりますので、そちらもぜひご興味あればご覧いただけますと幸いです。
ゼロから始めるITエンジニア | テックゲート転職
未経験からITエンジニアを目指すなら「テックゲート転職」がおすすめです。
IT業界に特化したキャリアアドバイザーが、プログラミング未経験者でも安心してスタートできるよう親身にサポートしてくれます。
履歴書・ポートフォリオ作成から面接対策、企業選びまで徹底サポートしてくれるので、キャリアチェンジに不安がある方も安心です。
僕自身も異業種からITエンジニアに転職した経験があるので、第一歩を踏み出すサポートの重要性は痛感しています。
👉「IT業界で働いてみたい」と思ったその瞬間がチャンスです！
▶【公式サイトはこちら】
ゼロから始める英語学習 | スタディサプリENGLISH
ベトナムでITエンジニアとして働く私にとって、英語でのスムーズなやり取りは欠かせません。
スタディサプリENGLISH（新日常英会話コース）は、実践的な会話表現をドラマ仕立てで学べる神アプリ。
1回3分で完結するレッスンだから、忙しい日常でも継続しやすく、自然な表現力が身につきます。英語での雑談や会議がもっとラクになります！
👉今すぐ無料体験して、自信を持って話せる自分に近づきましょう！
▶【公式サイトはこちら】
ゼロから始めるベトナム語学習 | ベトナム語動詞クイズ
ベトナム語動詞検定アプリは、日常会話に必須のベトナム語動詞を効率よく習得できる無料学習ツールです。
四択クイズ形式で出題されるため、ゲーム感覚で語彙力を強化でき、スキマ時間の学習にも最適です。
出題はランダム化されており、繰り返し学習することで自然に記憶が定着します。
初級者から中級者まで対応しており、語彙レベルごとに分かれたカテゴリも充実。
音声読み上げ機能が搭載されているため、発音の練習にも活用可能です。
これからベトナム語を本格的に学びたい方、語学試験対策や留学前の準備をしたい方におすすめのアプリです。
今すぐ「ベトナム語動詞検定」で、語学力アップを目指しましょう！
ゼロから始めるベトナム語学習 | ベトナム語漢越語クイズ
「ベトナム語漢越語発音クイズ」は効率的に語彙力と発音を強化できる無料学習ツールです。
四択クイズ形式で、視覚と聴覚の両方からアプローチし、記憶に残りやすい設計になっています。
日本語の漢字の意味をヒントに、ベトナム語の正しい読み方を選ぶトレーニングができるため、日本人学習者に特化した内容になっています。
音声付きで、ネイティブ発音を繰り返し聞けるのも大きな魅力。発音の基礎を固めたい初心者から、中級者の語彙強化まで幅広く対応しています。
漢越語の理解を深めたい方は、今すぐ「ベトナム語漢越語発音クイズ」で楽しく学習を始めましょう！