ドラッグ＆ドロップの実装
完成したもの
準備
コードを書いていく前にシーンにイメージを配置してわかりやすいよう画像を分けておきます。
実装
ドラッグ
- ItemオブジェクトにDragAndDrop(名前は適当)を作成してアタッチしてスクリプトを開きます。
- 初めはオブジェクトのドラッグから実装していきます。
ドラッグに必要なものはドラッグ中のマウスの位置になります。それを取得するための方法は簡単でUnityが用意しているDragHandlerで簡単に取得できます。
ハンドラを実装したら中身を書いていきます。
処理内容は自身の位置をマウスのポジションに合わせて移動させるものになります。
参考API
anchoredPosition
delta
これでドラッグが完成しました。 ですが、試してみるとわかりますがただ位置を移動させるだけでスナップも初期位置にも戻りません。
初期位置に戻す
次に初期位置に戻すための処理を記述していきます。
初期位置に戻すために必要なものは動かす前の初期座標とドラッグを離したことがわかることです。
初期座標はフィールドを使い値を保持しておきます。
ドラッグを離したことを知るためにはEndDragHandlerを使い取得します。
スナップ
最後はスナップの処理を書いていきます。
スナップ処理に必要なものはFieldの上にドラッグしたオブジェクトがあるかどうかです。
これを得るためにはFieldにDropHandlerを実装していきます。
中の処理にはオブジェクトがあるならそのオブジェクトをFieldに合わせるという処理になります。
これでほぼ完成ですがこのままだとオブジェクトがFieldにあるのにEndDragの元の位置に戻る処理が走ってしまいます。
そのため修正してドラッグを離したときにレイを飛ばしてItem以外に合ったっているオブジェクトがない場合のみ元に戻るようにします。
これで完成になります。
ここからはおまけでわかりやすくItemにcanvasGroupを付けてドラッグ中は透明度を下げてRayが貫通するようにしておき離したら元に戻るようにしておきます。
TODO
ほかにはこのままだと大きさはそのままなのでFieldに合わせて調節したり音を付けて移動させている感を出せばそれなりに見えると思います。
