ヨイチカの冒険譚

日々の思い付きを日記のように書き留めていく

ドラッグ&ドロップの実装

完成したもの

f:id:yoitika:20201018005005g:plain


準備


コードを書いていく前にシーンにイメージを配置してわかりやすいよう画像を分けておきます。

f:id:yoitika:20201018005512p:plain


実装


ドラッグ
  • ItemオブジェクトにDragAndDrop(名前は適当)を作成してアタッチしてスクリプトを開きます。
  • 初めはオブジェクトのドラッグから実装していきます。 ドラッグに必要なものはドラッグ中のマウスの位置になります。それを取得するための方法は簡単でUnityが用意しているDragHandlerで簡単に取得できます。
    f:id:yoitika:20201018010725p:plain
    ハンドラを実装したら中身を書いていきます。
    処理内容は自身の位置をマウスのポジションに合わせて移動させるものになります。
    f:id:yoitika:20201018011405p:plain
    参考API
    anchoredPosition
    delta
    これでドラッグが完成しました。 ですが、試してみるとわかりますがただ位置を移動させるだけでスナップも初期位置にも戻りません。

初期位置に戻す

次に初期位置に戻すための処理を記述していきます。
初期位置に戻すために必要なものは動かす前の初期座標とドラッグを離したことがわかることです。
初期座標はフィールドを使い値を保持しておきます。
ドラッグを離したことを知るためにはEndDragHandlerを使い取得します。
f:id:yoitika:20201018012750p:plain


スナップ 

最後はスナップの処理を書いていきます。
スナップ処理に必要なものはFieldの上にドラッグしたオブジェクトがあるかどうかです。
これを得るためにはFieldにDropHandlerを実装していきます。
中の処理にはオブジェクトがあるならそのオブジェクトをFieldに合わせるという処理になります。
f:id:yoitika:20201018013446p:plain
これでほぼ完成ですがこのままだとオブジェクトがFieldにあるのにEndDragの元の位置に戻る処理が走ってしまいます。
そのため修正してドラッグを離したときにレイを飛ばしてItem以外に合ったっているオブジェクトがない場合のみ元に戻るようにします。
f:id:yoitika:20201018013856p:plain
これで完成になります。
ここからはおまけでわかりやすくItemにcanvasGroupを付けてドラッグ中は透明度を下げてRayが貫通するようにしておき離したら元に戻るようにしておきます。

f:id:yoitika:20201018014545p:plain

TODO

ほかにはこのままだと大きさはそのままなのでFieldに合わせて調節したり音を付けて移動させている感を出せばそれなりに見えると思います。

MarkDownの練習

MarkDown記法 h1 見出しは#

h2

h3

h4

h5
h6
  • 強調する文字はアスタリスク 太字 にしたいときはアスタリスク2個
    改行は <br>

  • リストは伸ばし棒

    • ネストもできる
      • ネスト
  • リスト

  • 番号付きリスト    1. ネスト  

    引用文章 だいなり?をつかう

    ネストもできる

    ne


水平線は伸ばし棒3つでできる

リンクの文字 リンク文字は[リンク文字]に(URL)でできる

画像表示 リンク文字とほぼ同じで前に!マークを付けることで画像になる

ソースコードはバッククォートで囲む バッククォートはシフト+@ 複数行は3つ付ける

var tte= 10;

num = 0
while num < 2 do
   print("num = ", num)
end
print("End")