【ウディタ講座】滑らかに画像をドラッグ移動する方法

以前、ドラッグ移動のサンプルコードを掲載しました。

【ウディタ講座】長押し判定とドラッグの作り方

その際に次のようなことを言っていまして、今回の記事はその補足編となります。

ピクチャの「位置」は「中央」にしておくと、いちばん見栄えのいい動きをします。
あんまり速く動かすとすっぽ抜けたりしますが……

なぜドラッグの位置を「中央」とおすすめしたのか、なぜ「すっぽ抜け」が起こるのか

まずはサンプルコード

以前(上の記事)で紹介したドラッグのサンプルを改めて作成してみましょう。

 

こんな感じで、よさげに動いてくれそうです。

ところが……

動かしてみてわかる”処理のクセ”

上のコードでどうなるでしょうか。

ドラッグしたい画像として赤い丸(ID100の<CIRCLE>)を用意してみました。

マウスカーソルの位置は小さな水色の点で示しています。

クリックしただけ(まだドラッグ移動がはじまっていない)という状態から、ピクチャは上の図のようにちょっとだけ動いてしまいます。

マウスカーソルの位置を基点として都度、再描画されるため、このようなことになります。

しかも、ピクチャの描画位置が「左上」なんかだと、カーソル位置に画像の「カド」が動いてしまうので見かけの挙動はかなりバグっぽい。

1f前のカーソル位置を記憶して、カーソルが動いた分だけ画像を動かす……という手もありますが、それもそれで手間だし、ごちゃごちゃしています。ウディタはゲームの画面外のカーソル位置をうまく拾えないので(下のリンクを参照)、バグらそうと思ってガチャガチャやると簡単に「すっぽ抜け」も起こるのです。

【ウディタ講座】マウスカーソルを自作化する

 

すっぽ抜けを予防した滑らかなドラッグ設定

どうすればよいのでしょうか。

答えは、クリックした瞬間のマウスカーソルの位置と、画像の表示位置との「差」を記憶しておくことです。

 

上のサンプルコードを次のように修正します。

紫のラインで囲ってある部分が変更点です。

つまり、最初のやり方で起こる「クリックしただけでズレてしまう量」をあらかじめ取得して、打ち消すように足し引きしているわけですね。

 

あとは最初のドラッグ講座で行っているように「カーソルが画面外へ出ないようにする」コモンを置くことで、快適なドラッグが実現できます。

 

【ウディタ講座】長押し判定とドラッグの作り方

 

 

 

コメントはお気軽にどうぞ!