2018年08月02日

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

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

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

Anchor Presets を top, stretch にし、
left, right を 0
Pos Y を -100
Height を 200 に設定します。

更に、Source Image を None に

Color を（0, 0, 0, 255）に変えます。

続いて、itemran の子要素に UI>Image を２つ選択し、
item1, item2 に名前を変えます。

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

Source Image を UISprite に

Color を（0, 0, 0, 255）にし、

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

枠線の設定は Color を（0, 255, 0, 255）

X を 5、Y を 5 に変更します。

Toggle を使う

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

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

それぞれの名前を key1, key2 に

Checkmark を key1, key2 の子要素にし、

Background と Label を削除します。

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

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

Checkmark の Source Image を UISprite に

Color を（255, 200, 255, 255）にします。

続いて、key1 に UI>Toggle Group を付け

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

key1, key2 の inspector 内 Toggle (script) の

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

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

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

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

一旦、key1 と key2 の Inspector の名前左のチェックを外し非表示にしましょう。

今回はここまでです。

2018年08月02日

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

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

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

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

では始めましょう。

まずゲーム画面に縦横比９：１６のものを追加し変更します。

続いて、Hierarchy を右クリック、UI>Canvasを選択します。

Canvas Scaler の

UI scale Mode を Scale With Screen Size に

Reference Resolution を X 540, Y 960 に

Screen Match Mode を Expand にそれぞれ変更します。

壁と床を作る作業に入ります。

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

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

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

追加した画像は、Filter Mode を Point (no filter)

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

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

Sprite Mode を Multiple にして切り取ってください。

壁の設置

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 に設定します。

今回は以上です。

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

2018年07月18日

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

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

※参考画像
sindo1

　　　　　　↓

テキストに以下のスクリプトを取り付けます。
　　　↓
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>に変えれば画像でも同じことが可能です。