【Unity】マップエディターを自作してみる(前編)

前回、タイルパレットを使った背景作りを記事にしました。
背景作りには便利そうなのですが、オブジェクトの配置には、
どうしたらいいのかなと考えております。

おそらくプレハブなんかもタイルパレットは使えそうなのですが、
配置をデータ化してcsvファイルに保存する事はできないのでは?と思っています。

今回は、マップエディターを自作して、
オブジェクトの配置をデータ化してみようと思います。

タイルパレットほど機能は無くても、自作ゲームの配置くらいは、
処理できるような物にしたいと思います。

機能としては、
・スプライトの選択
・選択したスプライトをポジション位置に貼り付け
・消しゴム機能
・一括クリア
・csvデータファイルの保存

これがあればエディターとして機能しそうです。

ます、UIを作って行くのですが、
ポジションを無限にするのは、敷居が高いので6×6マスの範囲で作ってみます。

エディターは、Unity上で動けば問題ないので、
プラットホームはなんでもOKかと。

今回は、androidにセッティングしています。

キャンバス配置からBackのベースを作って、
二枚のイメージを追加します。
MapTest②.jpg
右の木目調がFieldParent
左がPalletParent

この中にボタンを配置していきます。
ただ、Buttonオブジェクトを追加しても選択中の処理がしにくいので、
今回は、ImageのEventtriggerで処理していきます。

4つほどスプライトを取り込んで、パレットボタンを作成します。

まず、PalletParentの中に空のオブジェクトを二つ作って、
FrameParentとButtonParentに名前を変更します。

FrameParent内にImageオブジェクトを追加して、Marker1とリネームします。
Marker1を複製して4つのフレームを作成します。
MapTest⑤.jpg
これは、選択中のスプライトを分かるようにするマーカーとなります。
選択中の文字は、有っても無くてもいいです。この辺りは適当に…

続いて、ButtonParentの作成をします。
ペアレントの中にImageオブジェクトを追加して、PalletBt1とリネームします。
これがスプライトの選択ボタンになるので、Eventtriggerを追加します。
MapTest④.jpg
イベントのタイプはPointerDownを選択します。

これでボタン機能ができたのですが、複製はまだしないで下さい。
Eventtriggerはスクリプトのアタッチやイベントタイプ設定が一括でできないので、
全ての準備ができてからでないと、オブジェクト毎に設定する必要があります。

先にスクリプトを作成します。
スクリプトは、2つ用意します。
・PalletManager
・PalletButton
PalletManager

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

public class PalletManager : MonoBehaviour
{
private int SelectSprite; //パレットの選択ボタンナンバー

// Start is called before the first frame update
void Start()
{

}

// Update is called once per frame
void Update()
{

}

//選択スプライトの数値を管理
public int SelectProperty
{
get { return SelectSprite; }
set { SelectSprite = value; }
}
}




PalletButton

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

public class PalletButton : MonoBehaviour
{
public GameObject []Marker;       //各マーカーオブジェクト取得
public GameObject palletManager; //PalletManagerオブジェクト取得

private PalletManager palletM; //PalletManagerのキャッシュ変数


// Start is called before the first frame update
void Start()
{
palletM = palletManager.GetComponent<PalletManager>();
}

// Update is called once per frame
void Update()
{

}

//パレットボタンを押した時の処理
public void SelectButton(int num)
{
//選択中のナンバーと押したナンバーを比較
if (num == palletM.SelectProperty)
{
//ナンバーが同じならMarkerをfalseして0を登録
Marker[num].SetActive(false);
palletM.SelectProperty = 0;

//選択中のナンバーが0か確認
}else if (palletM.SelectProperty == 0)
{
//0なら押したナンバーのMarkerをtrueして登録
Marker[num].SetActive(true);
palletM.SelectProperty = num;
}
else
{
//選択中のMarkerをfalseして新規選択のMarkerをtrueして登録
Marker[palletM.SelectProperty].SetActive(false);
Marker[num].SetActive(true);
palletM.SelectProperty = num;
}
}
}

PalletManagerは選択したスプライトの管理用です。
後で、csv変換などを組み込んで行きます。

PalletButtonは、押したパレットボタンナンバーをPalletManagerに登録しています。
選択中は、各ボタンナンバーを登録、非選択なら登録値を0にしています。

登録値の値からボタンが選択中かを判断して、選択中なら対応したMarkerをアクティブに
して、選択中と分かるように処理しました。

スクリプトはPalletButtonは、PalletParentにアタッチして、
PalletManagerは、空オブジェクトを用意してアタッチします。(PalletManagerにリネーム)

PalletButtonの変数にMarkerをアタッチしますが、
配列の場合、0番目から代入されてしまうので、あえて0番を空けてアタッチします。
MapTest⑥.jpg
PalletManagerオブジェクトもアタッチしておきます。

続いて、PalletBt1のEventtriggerにPalletParentをアタッチして、
SelectButtonメソッドを指定します。
MapTest⑦.jpg
数値入力の部分は1を入力します。
これがボタンナンバーとなります。

これでボタン機能が完成したので、複製して4つボタンを作ります。
複製したボタンナンバーは、順に2~4に変更します。
各ボタンのスプライトは好きなものを。

配置の調整をしたものがこちら
MapTest⑧.jpg
ここまで出来たら、Markerオブジェクト4つをfalseしておきます。

実際に動作確認してみます。
MapTest⑨.jpg
ボタンを押すと連動したMarkerがtrueになるようになったと思います。
選択中のボタンを押すと、Markerが消えたと思います。

パレットボタンの機能は、これで完成なので、
続いて、FieldButtonの作成をします。

FieldParentにImageを追加して、FieldPosition0とリネームします。
このImageは選択スプライトを表示するパネルとなります。

クリックしたりマウスのカーソルを通過させると反応して表示するようにします。
まず、Eventtriggerを追加して、2種類のtriggerを用意します。
MapTest⑩.jpg
・PointerEnter
・PointerDown

PointerEnterは、カーソルが上を通過した際、イベントが発生するものです。
ただ通過しただけで反応する厄介なシロモノですが、少しイジルといい味をだします。(^ё^) ♪♪

FieldButtonスクリプトを作成します。
FieldButton

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

public class FieldButton : MonoBehaviour
{
public int PosNum;           //各ボタンのシリアルナンバー
public Sprite[] Pattern; //各スプライト取得
public GameObject palletManager; //PalletManager取得

private PalletManager palletM; //PalletManagerキャッシュ変数

// Start is called before the first frame update
void Start()
{
palletM = palletManager.GetComponent<PalletManager>();
}

// Update is called once per frame
void Update()
{

}

//フィールドボタンを押した処理
public void PushButton()
{
//マウスがクリックされてなければリターンする
if (Input.GetMouseButton(0) == false)
{
return;
}

//選択中のパレットナンバーからスプライトを取得
if (palletM.SelectProperty == 0)
{
//パレットナンバーが0ならスプライトを削除
this.gameObject.GetComponent<Image>().sprite = null;
}
else
{
//パレットナンバーにあったスプライトを表示する
this.gameObject.GetComponent<Image>().sprite = Pattern[palletM.SelectProperty];
}
}
}

処理内容ですが、
if (Input.GetMouseButton(0) == false)
{
return;
}

こいつが重要でっす。

メソッド呼び出しの冒頭に仕込んでおくと、カーソルが通過しただけなら
反応しなくなります。

マウスのクリック状態を検出して、クリック中なら次の処理ができるようになります。
”なぞる”と言う操作が可能になります。

その次の処理は、
選択中のパレットナンバーからスプライトを選択してるだけです。(*¨) ポッ・・・

最後に注意点ですが、スプライトをイジル場合は、using UnityEngine.UI; が必要になります。

スクリプトはFieldPosition0にアタッチします。
各変数をアタッチしますが、スプライト0は無しにしておきます。
MapTest⑪.jpg
各変数がアタッチできたら、Eventtriggerの設定をします。

二つのトリガーにFieldPosition0オブジェクトをアタッチします。
MapTest⑫.jpg
ファンクションはPushButtonメソッドを両方に適用します。

これでボタンの機能が完成したので、複製します。

複製・配置が終わったら
各FieldButtonスクリプトのPosNumを対応したポジションに設定します。
これは、気が遠くなります。その数なんと35個!┐(´~`;)┌ かんべんシテネ

この辺りは、ジグソーパズルでもやりましたが、
プレハブで生成して通しナンバーを振る方が楽に処理できそうでっす。
忘れてました(;^o^) \(ToT )あんたほんとにそれでいいの

0~35番まで設定できれば、実際に動作確認でっす。

選択中なら対応したスプライトを張り付けて、選択無しなら消しゴムの機能になっています。

これで表面上のスプライト貼り付けの処理が行えるようになりました。
簡単なパレットですが、機能的には問題ないかと思います。

記事が少し長くなったので、一括クリアの処理とcsv保存処理は次回にまとめます。
今回はこのへんで(^^)/~~デハデハ

この記事へのコメント