脱出ゲーム始めました!

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

Unityでの脱出ゲームの作り方・基礎編4【オブジェクトの配置】

カレンダーと宝箱2つ、ドアを配置していきます。

ゲームの流れとしては、
カレンダーについた印をヒントに番号を入力、

開いた宝箱からカギを手に入れて、そのカギで別の宝箱を開け、

ドアのカギを手に入れて脱出
となります。

カレンダーの画像
と、
閉じたドア、開いたドアのセット、
閉じた宝箱、開いた宝箱のセットを2つ用意して下さい。

wall1ドアwall2宝箱1wall3カレンダー
wall4宝箱2UI>Image で配置します。

開いた状態のものは入れ替わった時に違和感がないように
うまく重ね、非表示
にして下さい。


カレンダーには、ヒントとして6月13日のところに
UI>Text赤い丸を付けます。
tuto9


カレンダーの拡大


このままでは、数字や印の部分が見づらいので
カレンダーをタッチしたときに大きく表示されるように
画像を用意します。

wall3 の子要素として UI>Image を(一番下に)配置

Anchor Presetsstretch, stretch にし、

left, right, top, bottom, 全てを 0 に、

Source Image部屋の壁と同じものにし、

その子要素にカレンダーをコピーしたものを置き

ScaleX, Y を変更し拡大します。
tuto10
カレンダー拡大画面の一番下に、横長のボタンを設置し
Text V で下向きの矢印を表します。

拡大画像は一旦、非表示にして下さい。

今回はここまでです。



Unityでの脱出ゲームの作り方・基礎編3【壁を4枚にし行き来できるようにする】

まず移動用のボタンを作ります。


wall1 の子要素として UI>Button でボタンを2つ作り
それぞれ以下のようにして画面の両端に配置します。

ボタンの名前leftmove, rightmove に変え

leftmove Anchor Presets middle, left

Pos X 20 Pos Y 0
Width40
 Height300


rightmove Anchor Presetsmiddle, right


Pos X -20 Pos Y 0
Width40 Height300

双方の color の透明度100に落とし

テキストには矢印として <, > を入れ
フォントの大きさを調整します。

tuto7
ボタンを作り終えたら、wall1 をコピーして、wall2, 3, 4 を作り

wall1 itemran の間に並べます。

wall2~4 の間前左のチェックを外し、非表示にしておいてください。

続いて、Main Camera に以下のスクリプトを取り付けます。

   ↓
C#

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

public class tutorialScript : MonoBehaviour {

    public GameObject wall1;
    public GameObject wall2;
    public GameObject wall3;
    public GameObject wall4;

    public void gotowall1()
    {
        wall1.SetActive(true);
        wall2.SetActive(false);
        wall3.SetActive(false);
        wall4.SetActive(false);
    }
   
    public void gotowall2()
    {
        wall1.SetActive(false);
        wall2.SetActive(true);
        wall3.SetActive(false);
        wall4.SetActive(false);
    }

    public void gotowall3()
    {
        wall1.SetActive(false);
        wall2.SetActive(false);
        wall3.SetActive(true);
        wall4.SetActive(false);
    }

    public void gotowall4()
    {
        wall1.SetActive(false);
        wall2.SetActive(false);
        wall3.SetActive(false);
        wall4.SetActive(true);
    }
}

Main Camera
InspectortutorialScript の wall1~4

Hierarchy
wall1~4 をそれぞれドラックして設定します。


時計回りwall1, wall2, wall3 と移動させるために

InspectorOn Click+を押しリストを追加、

スクリプトが取り付けられた Main Camera を選択し


No Function
tutorialScript に変え

wall1 の左ボタンには、gotowall4、右には gotowall2

wall2 の左ボタンには、gotowall1、右には gotowall3

wall3 の左ボタンには、gotowall2、右には gotowall4

wall4 の左ボタンには、gotowall3、右には gotowall1 
tuto8
設定が終わったらゲームを再生してボタンをクリックしてみてください。

全て同じ画像なので今のところは、分かりづらいですが

画像の切り替えが行われているはずです。
(Hierarchy の文字の濃淡で確認できます)

表示: オブジェクト名.SetActive(true);
非表示:オブジェクト名.SetActive(false);


最も基本的なことなので覚えておいてください。

今回はここまでです。

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 の名前左のチェックを外し非表示にしましょう。

今回はここまでです。

スポンサードリンク

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