子どもがScratchで着せ替えやカード遊びを作っていて、「絵の端をつかんだのに、中心がマウスへ飛んでしまう」と困っていませんか。つかんだ場所を保つには、押した瞬間の「スプライトの座標－マウスの座標」を覚え、移動中のマウス座標に足します。
この記事では、マウスで一枚のカードをつかみ、押している間だけ運び、離した位置に置く操作を作ります。クリックした場所へ自動で移動する処理や、正しい場所へ吸着させる処理は加えません。
なぜカードの中心がマウスへ飛んでしまうのか
ドラッグ中に「マウスのポインターへ行く」を繰り返すと、スプライトの基準位置をマウスへ合わせることになります。カードの端を押しても、その端を持ち続ける指定にはなっていません。
そこで、マウスの位置そのものではなく、つかんだときの位置関係を使います。「マウスのx座標」はポインターの横位置を調べるブロックです。基本の働きはScratch公式のマウス座標の説明でも確認できます。
次の数字は、仕組みを説明するための例です。横方向だけで考えてみましょう。
- カードのx座標：20
- つかんだ瞬間のマウスのx座標：50
- 覚える差：20－50＝－30
マウスをx座標100まで動かしたら、カードは「100＋（－30）」で70へ動かします。カードの基準位置は、マウスより左に30離れたままです。
縦方向も同じ計算にすると、上下左右のどこをつかんでも、その位置関係を残せます。大切なのは、差を計算するのはつかんだ瞬間だけという点です。
まずはカード一枚と二つの変数を用意する
練習用には、塗りつぶした四角形のスプライトを一枚用意してください。最初から着せ替えの服や細い飾りを使うより、つかむ場所の違いを見比べやすい構成です。背景は無地で構いません。
カードを選択し、「変数」で「横の差」「縦の差」を作ります。どちらも「このスプライトのみ」にしておくと、このカード用の値として扱えます。変数には全スプライト共通と選択したスプライト専用の区別があり、Scratch公式の変数作成の説明にも示されています。
今回はドラッグの計算を自分で組むため、緑の旗の直後に「ドラッグモードを［ドラッグできない］にする」を置きます。標準のドラッグ設定と自作処理を重ねないためです。ドラッグモードを切り替える処理は、Scratch Foundation公開の実装で確認できます。
また、練習用カードでは、ほかの位置変更のプログラムを外しておきましょう。自動移動や元の場所へ戻す処理が同時に動くと、今回の計算だけを確かめられません。
押す・運ぶ・離すを分けてブロックを組む
下は、カードに組むブロックを文字で表したものです。貼り付けて実行するコードではありません。字下げを目印に、囲むブロックの内側へ組み立ててください。
緑の旗が押されたとき
ドラッグモードを［ドラッグできない］にする
［マウスが押された］ではない まで待つ
ずっと
［マウスが押された］まで待つ
もし［マウスのポインターに触れた］なら
［横の差］を（x座標 － マウスのx座標）にする
［縦の差］を（y座標 － マウスのy座標）にする
［マウスが押された］ではない まで繰り返す
x座標を（マウスのx座標 ＋ 横の差）、
y座標を（マウスのy座標 ＋ 縦の差）にする
end
end
［マウスが押された］ではない まで待つ
end
「ではない」は「演算」のブロックで作ります。移動には「動き」の「x座標を○、y座標を○にする」を使い、それぞれの入力欄に足し算を入れます。
押されたことと、カードに触れたことは別に調べる
「マウスが押された」だけでは、カードを押したかどうかは分かりません。背景を押していても、押している状態として調べられます。この働きはScratch公式のマウスボタンの説明で確認できます。
そのため、押されたら「マウスのポインターに触れた」も調べます。こちらはスプライトとポインターの接触を判定するものです。判定対象の違いはScratch公式の接触判定の説明を参照してください。
差を覚える処理は、移動の繰り返しの外へ置く
「横の差」「縦の差」の設定は、内側の「まで繰り返す」より前に置きます。ここで押した瞬間の位置関係を保存し、その後は同じ値を使い続けます。
移動中にも差を計算し直す構成では、最初につかんだ位置を保存する役割が崩れます。「覚える部分」と「使う部分」を分けて見てください。
最後の「離すまで待つ」も残す
背景を押した場合はカードを動かさず、マウスを離すまで待ちます。この待ちを入れると、背景で押し始めて、そのままカードへ滑り込ませても、途中からカードを拾わない構成になります。
「カードの上で押し始めたときだけつかむ」というルールを、ブロックの順番で決めているのです。
中央・端・背景から試すドラッグ確認表
ブロックを組んだら、ステージを全画面表示にして緑の旗を押し、カードを動かします。編集用の配置操作と区別し、遊ぶときの動きとして確かめるためです。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
以下は、この練習で目指す動きの確認表です。単に「動いた」で終えず、押し始める場所を変えて比較してください。
| 試す操作 | 目指す動き | 違ったときに見る箇所 |
|---|---|---|
| カードの中央付近を押して運ぶ | 大きく飛ばずについてくる | ほかの移動処理が残っていないか |
| カードの右端付近を押して運ぶ | 右端付近をつかんだまま動く | 横の差の引き算と、移動時の足し算 |
| カードの上端付近を押して運ぶ | 上端付近をつかんだまま動く | 縦の計算にy座標を使っているか |
| カードを運んでからボタンを離す | その位置で止まる | 「ではない」が終了条件に入っているか |
| 背景を押したままカードへ移動する | カードを拾わない | 最後の「離すまで待つ」があるか |
横だけずれるなら、縦の計算までまとめて作り直す必要はありません。「横の差＝カードのx座標－マウスのx座標」「移動先＝マウスのx座標＋横の差」の組み合わせを見ます。
負の数が分かりにくいときは、「マウスより左に離れている」「右に離れている」と位置で確かめてから、変数の値を見比べる進め方でもよいでしょう。
自分の作品へ移す前に、完成の範囲を決める
今回は、カードがつかんだ場所を保って動き、離すと止まれば完成です。まず一枚で確認し、その後で着せ替えや家具の配置など、自分の作品へ移しましょう。
カードを置ける場所を決めたり、複数のカードが重なったときに手前だけを選んだりする処理は、このブロックには含めていません。特に、重なったスプライトへ同じ接触判定を入れる場合は、どれを選ぶかの追加設計が必要です。
既存記事のクリックした場所へ移動する作り方は、指定した地点へ向かわせたいときの方法です。一方、パズルのピースを正しい場所へ吸着させる作り方は、置く場所を判定したいときに使います。今回のドラッグとは、受け持つ場面が異なります。
よくある質問（FAQ）
単に自由に動かしたいだけでも、座標差の計算は必要ですか？
必ずしも必要ではありません。まず標準の「ドラッグできる」設定を試す選択肢もあります。この記事は、運んでいる間の位置を自分のブロックで制御したい場合に、つかんだ位置を保つ方法を扱っています。
引き算を逆にしても作れますか？
作れます。ただし、差を「マウス座標－スプライト座標」で覚えた場合、移動先は「マウス座標－差」にします。この記事の足し算だけを残すと合わなくなるため、保存と移動を一組で変更してください。
カードの中央では成功するのに、端ではずれるのはなぜですか？
中央付近では差が小さく、計算の間違いが目立ちにくいためです。端をつかんで、差を保存する向きと移動先の計算を確認します。横と縦の変数を取り違えていないかも見てください。
カードを複製すれば、そのまま何枚でも使えますか？
まずはカード同士を離して試してください。この記事の構成には、重なったカードから一枚だけを選ぶ仕組みがありません。一枚での動作を確認してから、必要な選択ルールを別に考えます。
幼児には計算が難しそうです。どこまで取り組めばよいですか？
式を一人で説明することを今回のゴールにしなくても構いません。大人が組んだものを使い、中央と端をつかんだときの違いを試す役割から始める案もあります。本人が気になった動きを、次に確かめる対象にしましょう。
つかみ方の工夫を、子どもの作りたい作品へ
CotoMiraiでは、年齢・興味・理解度に合わせた個別指導で、プログラミングやロボット、デジタルものづくりに取り組みます。指導方針はCotoMirai公式サイトでも紹介しています。
南青山周辺で体験を検討している方は、「カードの端をつかんでも飛ばないようにしたい」など、実現したい操作を一つ挙げてご相談ください。体験で扱う教材や制作内容は、申し込み時にご確認いただけます。
参考にした情報
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。