ドラッグ先のものを残す

せっかくだからドラッグ処理をもっと深掘りしようと思います。

いや、ちょっとだけ触って見てこのまま使わなかったら完全に忘れるからそのまとめ。

前回やったのは、ドラッグの動きを簡単に動かすこと。

Unity ドラッグを試す　その１

ドラッグをするとちょっと自由に動きしすぎる（求める以上に自由に動ける）ので、やはり今回のアプリでは使わない予定。・・・Y軸固定とかすればいいけど。

とりあえず、やろう。

ドラッグ先のオブジェクトを残す

この状態だど、ドラッグするオブジェクトを丸ごと動かす状態。

今画像で動かして「１」をそのまま残してドラッグの動きをさせたい。参考にしたのは、こちら。

・記事名：uGUIでドラッグドロップ
・サイトリンク：http://qiita.com/ayumegu/items/c07594f408363f73008c

ドラッグ先のオブジェクトのコピーを作り

ドラッグ先のオブジェクトを残したい、つまり、ドラッグするものを新たに作り（コピーして）それを動かす。

もしくは、ドラッグ先のオブジェクトの初期状態のコピーを作りを固定させてあげて、元のオブジェクトを動かすか。その２択かな？

私は、まずコピーを作りその子を動かすことにしました。(その方がDragEndの時破壊しやすい・・・？）

「１」のボタン（あれはボタンです）をドラッグすると、テキストオブジェクト「COPY！」が現れます。

結果物がこちら。

以下はそのソースC＃です。

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

public class DragAndDrop: MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {

	private Transform canvasTran;
	private GameObject CopyTextObject;
	private Text CopyText;

	private Text thisText;
	private RectTransform thisTextRect;
	private Vector3 thisTextPosition;
	private Vector3 mousePosition;

	// Use this for initialization
	void Start () {
		canvasTran = transform.parent;
	}
	
	// Update is called once per frame
	void Update () {
		
	}

	// ドラック開始時
	public void OnBeginDrag(PointerEventData eventData)
	{
		Debug.Log("drag Start");

		//ドラッグ先テキスト
		thisText = this.GetComponentInChildren<Text> ();
		thisTextRect = GetComponent<RectTransform>();
		thisTextPosition = thisTextRect.localPosition;

		CreateDragObject ();

	}

	// ドラック中
	public void OnDrag(PointerEventData eventData)
	{
		Debug.Log("dragging");


		mousePosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10);

		CopyText.transform.position = Camera.main.ScreenToWorldPoint (mousePosition);
	}

	// ドラック終了時
	public void OnEndDrag(PointerEventData eventData)
	{
		Debug.Log("dragEnd");

		Debug.Log("thisText = " + thisText.text);
		Debug.Log("copyText = " + CopyText.text);
	}

	private void CreateDragObject(){
		CopyTextObject = new GameObject ("copyText");
		CopyTextObject.transform.SetParent (canvasTran);
		//最前面表示
		CopyTextObject.transform.SetAsLastSibling ();
		CopyTextObject.transform.localScale = Vector3.one;

		CopyTextObject.transform.localPosition = thisTextPosition;

		CopyText = CopyTextObject.AddComponent<Text> ();

		CopyText.text = "Copy!";

		CopyText.font = Resources.FindObjectsOfTypeAll<Font>()[0];
		CopyText.fontSize = thisText.fontSize;
		CopyText.color = Color.white;
		CopyText.alignment = TextAnchor.MiddleCenter;

	}
}

噛み砕いて行こう

あくまで私の理解ですよ。間違いも多々あると思います。

さて、まず、宣言のところ。

	private Transform canvasTran;
	private GameObject CopyTextObject;
	private Text CopyText;

ゲームのオブジェクトを配置しているキャンバスと親子関係を持たせるための「canvasTran」。
ドラッグ先のコピー用テキストのゲームオブジェクトしての宣言のための「CopyTextObject」。
そのゲームオブジェクトにつけるコピー用テキスト「CopyText」。

初めは、「CopyText」だけでゲームオブジェクトとして成り立つかと思ったのですが、どうやら、ゲームオブジェクトの中のテキストという位置付けのよう。単体では表示されませんでした。

	private Text thisText;
	private RectTransform thisTextRect;
	private Vector3 thisTextPosition;

ドラッグ先の（コピー元の）テキスト情報を保持するためのもの。位置（ポジション？）情報などをコピー先に渡すためのもの。

	void Start () {
		canvasTran = transform.parent;
	}

スクリプトでオブジェクトを作成するのですが、他オブジェクトと同じくキャンバスさんの子供として扱って欲しいのです。なので、親子関係の情報を取って置きます。コピーオブジェクトにも持たせてやるから。

ドラッグのたびにやる必要はないので、スタートで取っておく。

・記事名：オブジェクトの親子関係のまとめ
・サイトリンク：http://qiita.com/hiroyuki7/items/95c66aee26115cf24a19

	// ドラック開始時
	public void OnBeginDrag(PointerEventData eventData)
	{
		Debug.Log("drag Start");

		//ドラッグ先テキスト
		thisText = this.GetComponentInChildren<Text> ();
		thisTextRect = GetComponent<RectTransform>();
		thisTextPosition = thisTextRect.localPosition;

		CreateDragObject ();

	}

ドラッグを開始したら、ドラッグ先のテキスト情報を取っておいて、コピーオブジェクト作成メソッドへ。

	private void CreateDragObject(){
		CopyTextObject = new GameObject ("copyText");
		CopyTextObject.transform.SetParent (canvasTran);
		//最前面表示
		CopyTextObject.transform.SetAsLastSibling ();
		CopyTextObject.transform.localScale = Vector3.one;

		CopyTextObject.transform.localPosition = thisTextPosition;

		CopyText = CopyTextObject.AddComponent<Text> ();

		CopyText.text = "Copy!";

		CopyText.font = Resources.FindObjectsOfTypeAll<Font>()[0];
		CopyText.fontSize = thisText.fontSize;
		CopyText.color = Color.white;
		CopyText.alignment = TextAnchor.MiddleCenter;

	}

ここでちょっと手こずった。やはりuGUIは偉大ですねぇ。スクリプトオブジェクト作るの面倒臭い。全部設定してやらないと出てこない。

初期状態の位置とか、どう表示させるか、フォントのサイズから種類から真ん中寄席の情報やら。

先に枠だけおいておいた「CopyTextObject」をチャット、ゲームオブジェクトして名前を与えて宣言してあげます。これによって、ドラッグを開始した時に初っ端はなかった「copyText」というオブジェクトがキャンバスにできます。

まだ、DragEnd処理で削除とかしないので、ドラッグが終わってもそのままオブジェクトは残っています。

	// ドラック中
	public void OnDrag(PointerEventData eventData)
	{
		Debug.Log("dragging");


		mousePosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10);

		CopyText.transform.position = Camera.main.ScreenToWorldPoint (mousePosition);
	}

前回はドラッグ先オブジェクトにmousepositionを入れていたけど、それをCopyTextさんに設定すればこの状態に。

こんなものかな

コピーオブジェクトがずっと残りっぱなしだとうっとおしので、削除する処理をちらりと入れました。

	// ドラック終了時
	public void OnEndDrag(PointerEventData eventData)
	{
		Debug.Log("dragEnd");

		Destroy (CopyTextObject);
	}

これだけ。
あとは、コピーオブジェクトのテキストを、ドラッグ先のテキストにしてやりました。あとはカーソルのせいで文字がうまく見えないので大きくして見た。

結果はこう。

終わり。

ドロップ処理は、今のところ予定ない。

イメージと実際のものは違ったりする

勝手に、こうすればすぐできるだろうと思うこむことがよくあって、変に詰まることがよくある。本当によくある。

この思い込みでものすごい時間をかけたりする。

今日は「ドラッグ＆ドロップ」をやってみようと思いました。

簡単なパズルゲーム（またもや算数系アプリで）を作ってみようと思っているのですが、ドラッグ＆ドロップを使うかは、まだ未定。だったのですが。

ドラッグの動きを見て「これじゃない」と思ったので、ドロップまで行かなかった。使わないと思った瞬間からやりたくなくなったから。

とりあえず、やって見たところまでは記事にします。

ちなみに、ゲームそのものは、純粋にクリックするだけの動きにしようとも思っています。

参考にしたサイト。
・記事名：uGUIでドラッグについてちょっとだけ詳しく
・サイトリンク：http://qiita.com/okuhiiro/items/4c313038798da6923205

オブジェクトをドラッグしてみよう

まずはuGUI配置と簡単な実装

配置したuGUIの「Text」さんは、下の四つのボタンを押すと、押したボタンの数字に変化するようにしました。

で、私がこの「ドラッグ＆ドロップ」でここから何がやりたかったというと、「１」のボタンをドラッグして「２」のボタンにトロップさせると、「３」になるという足し算仕組み。

実装しよう

ソースはこちら。

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

public class DragAndDrop: MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
		
	}

	// ドラック開始時
	public void OnBeginDrag(PointerEventData eventData)
	{
		Debug.Log("drag Start");

	}

	// ドラック中
	public void OnDrag(PointerEventData eventData)
	{
		Debug.Log("dragging");
	}

	// ドラック終了時
	public void OnEndDrag(PointerEventData eventData)
	{
		Debug.Log("dragEnd");
	}
}

drag&dropは「EventSystems」にある機能らしい。なので、使わせての宣言をする。
これを抜かして怒られました。

using UnityEngine.EventSystems;

ドラッグ開始時は「OnBeginDrag」というメソッドで、ドラッグ中は「OnDrag」、ドラッグ完了後（離した後？）「OnEndDrag」でそれぞれ行われます。これを実際に動かしてみると、以下の通り。

「１」にこのスクリプトをアタッチしています。ただ、オブジェクトが動く処理は入れていないので・・・。
Debugは吐き出しているけど、動いているのかいまいちわからない状態に。

オブジェクトを動かす

「１」を動かすよう、「OnDrag」処理に位置情報を追加してやります。

	// ドラック中
	public void OnDrag(PointerEventData eventData)
	{
		Debug.Log("dragging");
		Vector3 mousePosition = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 10);
		this.transform.position = Camera.main.ScreenToWorldPoint(mousePosition);
	}

スクリプトが付いているオブジェクトさんをマウスポジションに動かしてあげます。

どこ？！

ドラッグっぽい動きを0.1秒くらいして消えました。左下にいます。「１」さん。

数字すら見えない状態。ということは、もしかして位置情報が、uGUIさんたちと、マウスさんで噛み合っていないということかしら。

ということで、調べると、おそらくこれでしょう。

今回もお世話になります、椿さんのテラシュールブログ。

World SpaceをScreenSpace-Cameraへ変更

Canvasの「Render Mode」wp「ScreenSpace-Camera」へ変更。

「Render Camera」カメラは、一つあるMain Cameraを追加してあげます。そうするとほら。治った。

やってみるとわかる

やはり、簡単なテストプロジェクトを開いて作って見てからやればどんな感じなのかわかりますね。

ドラッグ＆ドロップ処理をしようとして、ドラッグの時点でこれじゃないと思ったので、ドロップ処理は、無視。

こんなに滑らかに動いてほしい訳でもなく、自由に色々動いて欲しい訳でもなく、範囲を決めて動かせればいいじゃんという感じの動きでもない。もっと硬い感じで動いて欲しかった。

結局使わなかったけれど、おそらくこれが一番参考になるのではと思った記事。

・記事名：uGUIでドラッグドロップ
・サイトリンク：http://qiita.com/ayumegu/items/c07594f408363f73008c

Unity ドラッグを試す　その２