0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[Unity]2D牧場ゲームを作ってみる その3[メッセージ表示]

Posted at

前置き

子供からの夢で「牧場物語やルーンファクトリーみたいな牧場ゲームを作ってみたい!」と思っていました。
QiitaでUnityを使った2Dゲームはないかと調べたところ、素晴らしい記事を発見しました。

こちらの神記事を参考に2D牧場ゲームを作成していこうと思います。

今回作成するもの

  • 1.文字を表示するメッセージウィンドウの作成
  • 2.接触時にボタンを押したら反応するためのスクリプト作成
  • 3.Inspectorにスクリプトを追加して設定
  • 4.イベントトリガのためのBox Colldierを追加

1.文字を表示するメッセージウィンドウの作成

  • 他のキャラに話しかけたとき、会話を始められるよう、メッセージを表示できるように設定していきます。

1-1.メッセージウィンドウの準備

  • 右クリック > UI > Canvasでメッセージを表示する領域を設定しましょう。名前はmessage_windowとしましょう。

image.png

  • ImageとTextも同じように設定しましょう。
  • Imageはウィンドウの枠を描画に関する設定、Textはウィンドウに表示するテキストの設定です。

image.png

  • 以下の画像のように名前を設定しましょう。

image.png

1-2.ウィンドウの領域を設定

  • Canvas(message_window)のCanvas Scaler(Script)UI Scale ModeScreen With Screen Sizeに設定します。
  • これで表示時にウィンドウの大きさに合わせてお要素などの大きさが調整されます。

image.png

1-3.ウィンドウの色や画像を設定

  • 次はImage(window)のImage(Script)を編集して、色や画像を設定していきます。
    • Source Image:デフォルトのAssetであるBackgroundを選択
    • Color:好きな色を選択
    • ImageType:SlicedのままでOK

image.png

1-4.テキストのオブジェクトを設定

  • 最後にメッセージを表示するためのテキストオブジェクトを設定する。
  • TextFont Sizeを好きに設定。

image.png

2.接触時にボタンを押したら反応するためのスクリプト作成

2-1.親クラス

  • まずは親クラスを設定。
  • 親クラスはフィールド全般でオブジェクトに適応できる共通クラス。
  • 以下のコードはキャラが接触しているときにボタンを押したら特定のメソッドを呼び出すことができます。
using System.Collections;
using UnityEngine;
using UnityEngine.UI;

/**
 * フィールドオブジェクトの基本処理
 */
public abstract class FieldObjectBase : MonoBehaviour
{

    // Unityのインスペクタ(UI上)で、前項でつくったオブジェクトをバインドする。
  // (次項 : インスペクタでscriptを追加して、設定をする で説明)
    public Canvas window;
    public Text target;

    // 接触判定
    private bool isContacted = false;
    private IEnumerator coroutine;


    // colliderをもつオブジェクトの領域に入ったとき(下記で説明1)
    private void OnTriggerEnter2D(Collider2D collider) {
        isContacted = collider.gameObject.tag.Equals("Player");
    }

    // colliderをもつオブジェクトの領域外にでたとき(下記で説明1)
    private void OnTriggerExit2D(Collider2D collider) {
        isContacted = !collider.gameObject.tag.Equals("Player");
    }

    private void FixedUpdate() {
        if (isContacted && coroutine == null && Input.GetButton("Submit") && Input.anyKeyDown) {
            coroutine = CreateCoroutine();
            // コルーチンの起動(下記説明2)
            StartCoroutine(coroutine);
        }
    }

    /**
     * リアクション用コルーチン(下記で説明2)
     */
    private IEnumerator CreateCoroutine() {
        // window起動
        window.gameObject.SetActive(true);

        // 抽象メソッド呼び出し 詳細は子クラスで実装
        yield return OnAction();

        // window終了
        this.target.text = "";
        this.window.gameObject.SetActive(false);

        StopCoroutine(coroutine);
        coroutine = null;
    }

    protected abstract IEnumerator OnAction();

    /**
     * メッセージを表示する
     */
    protected void showMessage(string message) {
        this.target.text = message;
    }
}

2-2.子クラス

  • 子クラスに設定をしていきます。
  • 子クラスが親で特定のメソッドが呼ばれたとき、メッセージ表示の処理を行います。
  • セリフはInspector上で設定できるようにします。
public class MessageCharactor : FieldObjectBase {

    // セリフ : Unityのインスペクタ(UI上)で会話文を定義する 
  // (次項 : インスペクタでscriptを追加して、設定をする で説明)
    [SerializeField]
    private List<string> messages;

    // 親クラスから呼ばれるコールバックメソッド (接触 & ボタン押したときに実行)
    protected override IEnumerator OnAction() {

        for (int i = 0; i < messages.Count; ++i) {
            // 1フレーム分 処理を待機(下記説明1)
            yield return null;

            // 会話をwindowのtextフィールドに表示
            showMessage(messages[i]);

            // キー入力を待機 (下記説明1)
            yield return new WaitUntil(() => Input.anyKeyDown);
        }

        yield break;
    }
}

3.Inspectorにスクリプトを追加して設定

  • 話しかけるキャラクター、以下のキャラを設定します。
  • 名前は「セルザウィード」と言うルーンファクトリーのキャラクターになります。

image.png

  • 話しかけるキャラクターにMessage Charactorのスクリプトを追加します。
  • Messages+ボタンを押してElementを追加します。
  • Elementに表示したいメッセージを書き込みましょう。

image.png

4.イベントトリガのためのBox Colldierを追加

  • Box Collider 2Dを2つに設定し、片方はIs TriggerをON、片方はOFFにします。
    • Is TriggerをONにすると、キャラへの衝突判定がなくなります。
    • Is TriggerをOFFにすると、キャラに触れてエンターを押してもメッセージが表示されません。
    • Box Colldier 2Dを2つ用意することで、解決することができます。

image.png

完成

Videotogif (5).gif

次回作成するもの(仮)

  • アイテムの持ち上げの設定
  • (できれば)キャラクターに話しかけたときに、主人公の動きが止まるように設定する

参考にしたサイト

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?