脱出ゲーム始めました!

Unityで作った脱出ゲームを公開しています。拙い作品ですが暇つぶしにでも遊んでいただければ幸いです。
あわせて簡単な脱出ゲームの作り方もまとめています。

Unityでの脱出ゲームの作り方・基礎編2【アイテム欄の設置】

アイテム欄を作っていきます。
カギの画像を2つ用意してください。

Hierarchy で右クリック、UI>Panelを選択し、名前を itemran に変更

Anchor Presetstop, stretch にし、
left, right0
Pos Y-100
Height 200 に設定します。

更に、Source ImageNone

Color(0, 0, 0, 255)に変えます。
tuto4
続いて、itemran の子要素に UI>Image を2つ選択し、
item1, item2 に名前を変えます。

2つを適当な位置にずらしたら

Source Image UISprite

Color (0, 0, 0, 255)にし、

画面左上 Comportment>UI>Effects>Outline
それぞれに枠線を付けます。

枠線の設定は Color(0, 255, 0, 255)

X 5Y5 に変更します。
tuto5


Toggle を使う

使用するアイテムを選択するのに必要です。

itemran の子要素に UI>Toggle を2つ設け

それぞれの名前を key1, key2

Checkmarkkey1, key2 の子要素にし、

BackgroundLabel を削除します。


key1, key2
, とそれぞれの Checkmark を大きさを合せ

item1, item2 に重ねます。
(Checkmark の座標は key1, key2 の子要素なので 0, 0 でOKです)

CheckmarkSource ImageUISprite

Color (255, 200, 255, 255)にします。


続いて、key1UI>Toggle Group を付け

Allow Switch Off にチェックを入れてください。

key1, key2inspectorToggle (script)

ison のチェックを外し、Group key1 に設定します。


用意したカギの画像(前回のように余白を切り取り
設定を変更してください)を

UI>Image
key1, key2 の子要素(Checkmarkより下に配置)にして、
大きさを調整します。


ゲームを再生してアイテムをそれぞれクリックし、
色が片方だけピンクになれば成功です。

tuto6
一旦、key1key2Inspector の名前左のチェックを外し非表示にしましょう。

今回はここまでです。

Unityでの脱出ゲームの作り方・基礎編1【壁・床の設置】

自分が脱出ゲームを作る際に参考にできるサイトが少なかったので
Unityでの簡単な2D脱出ゲームの作り方をまとめていきます。

独学なので所々おかしなところもあるかと思いますが
そこは大目に見ていただければありがたいです。

今回作るのは4方に壁とドアが1つある簡単なものです。

では始めましょう。

まずゲーム画面に縦横比9:16のものを追加し変更します。
tuto1
続いて、Hierarchy を右クリック、UI>Canvasを選択します。

Canvas Scaler

UI scale ModeScale With Screen Size

Reference ResolutionX 540, Y 960

Screen Match ModeExpand にそれぞれ変更します。
tuto2
壁と床を作る作業に入ります。

まず使用する画像を用意します。

筆者がよく利用させてもらっているイラスト素材サイト
  ↓
いらすとや
イラストAC(メルアドの登録が必要)


画像が準備できたら
Assets 欄を右クリック、Import New Asset で追加します。

追加した画像は、Filter ModePoint (no filter)

Max Size
(大きいほど高画質だが処理が重くなる) を 512 に変更、

画像の外側に余白がある場合は

Sprite ModeMultiple にして切り取ってください。


壁の設置

Hierarchy で右クリック、UI>Panel を選択し、名前を wall1 に変え、
Souce Image Assets から壁用の画像をドラッグし、
color の透明度を255にします。


床の設置

wall1 を右クリックし、UI>Image を選択し、名前を floor に変えます。
Souce Image Assets から床用の画像をドラッグし、
Anchor Presets bottom , stretch にし
left , rightを 0
Pos Y を 100
Height を 200
に設定します。


tuto3
今回は以上です。

壁は4枚必要ですが、今回作ったものをコピーして使います。






Unityでの脱出ゲームの作り方・応用編2【文字が徐々に浮かび上がり消えていくようにする】

ゲームのオープニングなどでよく使われる技法です。

※参考画像
sindo1
      ↓
sindo2

テキストに以下のスクリプトを取り付けます。
   ↓
C#

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

public class fadeinout : MonoBehaviour {

    float alfa = 0;
    float speed = 0.04f;
    float red, green, blue;

    bool onetime = false;
    bool orikaesi = false;
    
    void Start ()
    {
        red = GetComponent<Text>().color.r;
        green = GetComponent<Text>().color.g;
        blue = GetComponent<Text>().color.b;
    }
 
    void Update ()
    {
        if (orikaesi == false)
        {
            GetComponent<Text>().color = new Color(red, green, blue, alfa);
            alfa += speed;
        }
        else if (orikaesi == true)
        {
            GetComponent<Text>().color = new Color(red, green, blue, alfa);
            alfa += -speed;
        }

        if (alfa > 1)
        {
            if (onetime == false)
            {
                StartCoroutine("orikaesiwait");
                onetime = true;
            }
        }
        else if (alfa < 0)
        {
            gameObject.SetActive(false);
        }
    }

    IEnumerator orikaesiwait()
    {
        yield return new WaitForSeconds(1);
        orikaesi = true;
    }
}

透明から完全に表示されるまでの時間は、float speedの数字
で、

完全に表示された状態(alfaの数値が1以上)から
薄くなり始めるまでの時間は
yield return new WaitForSeconds(1)の()内の数字
それぞれ調整できます。


また、<Text><Image>に変えれば画像でも同じことが可能です。

スポンサードリンク

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