ウォーリーを探せ風ゲーム

前回ボタンの使い方を学んだので、それを利用したゲームとしてウォーリーを探せ風のゲームを作るらしい。ボタンを透明に設置しクリック時に正解の表示を出すという流れ。早速やってみる。

写真の準備

写真を準備しなきゃならないが、番組のキャプチャを使用したい！吉田綾乃クリスティーを探すぜー。

画像をUnityに取り込む

Assetsに画像を放り込む。GameのRatioを＋から新規作成し、画像サイズに合わせる。Canvas上で右クリック、UI→Image。InspectorのSourceImageにAssetsから先ほど取り込んだ画像をD&D。画像が小さくしか表示されない場合、RectTransform内のWidthHeightを同じく画像サイズに合わせる。

ボタンの配置

Canvas上にボタンを配置し、色を透明にする。Colorのアルファ値を透明にする。大きさも正解のエリアの大きさに変更する。まぁほぼ前回と同様。

スクリプトを書く

これもほぼ前回と同様。正解表示のためのTextを置く。で前回は推測でAddCoｍponentsで追加したのだがほんとは違かったらしい。Assets上で右クリック、create→C# scriptで作ってた。ただそこで番組では説明終わってしまった。また推測になるが、どのオブジェクトでもいいのでAddComponents上にさっきのスクリプトをD&Dして、スクリプトのTextに正解のTextオブジェクト、ボタンのonclickにオブジェクト指定してfunction指定すれば動く。これでいいのかなぁ？

ふむー。

不正解をアレンジしてみる

間違ったところをクリックしたときに、不正解の表示を出したい。番組では小さい不正解ボタンを作っていたが、うんうん考えてみたら、ボタンを画像いっぱいに大きくすればいいんでないかと考えた。

同様にスクリプト等を準備した。ここで重要なのがHierarchyの順番で、これは上にあるほうが、画面上は奥にあり、下にあるほうが、画面上は手前にある。分かりずらいですね～。まぁそれを踏まえて順番を変えた。

そしたら実行！

おーうまくできた^^

効果音をつける

ボタンごとに正解のSEと不正解のSEが鳴るようにする。効果音を用意し、Assetsに取り込む。Hierarchyで正解ボタンを選択し、AddComponentsでAudioSourceを選択する。AudioClipの項目に先ほど取り込んだSEを設定する。PlayOnAwakeのチェックは外す。正解用スクリプトを編集する。

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

public class CorrectButton : MonoBehaviour
{
    public void Clicked()
    {
        text.text = "正解!!";
        audioSource.Play();
    }

    public Text text;
    public AudioSource audioSource;
}

こんな。AudioSourceの変数を用意し、関数内でPlay()を実行する。いったん保存し、正解ボタンのAddComponentsにスクリプトをD&D。スクリプトのAudioSourceにButtonを設定する。ここでAssetsから音をそのままD&Dしようとしてできなくて悩みまくった。onclickにButtonとFunctionを設定出来てたら実行！

できたーけどうまく撮影できんかったから動画はなしだ。完成～！