「矢印キーではなく、行きたい場所をクリックしてキャラクターを動かしたい」。ところが、マウスを動かすだけでついてきたり、一瞬で移動してしまったりすると、思っていた操作とは違いますね。
クリックした場所へすべるように動かすには、「マウスが押された」ことを待ってから、「1秒でマウスのポインターへ行く」を実行します。さらに、ボタンを離すまで待つ処理を入れ、押しっぱなしを次の操作として扱わない形にしましょう。
この記事では、パソコンのマウスでステージ内を操作する、キャラクター1体の最小構成を作ります。移動中に行き先を変更する機能は付けず、まず「押した場所に到着して止まる」操作を完成させます。
「クリックして移動」と「マウスについてくる」は別の操作
たとえば、庭の好きな場所を押すと猫がそこへ移動する作品を考えてみましょう。猫が到着した後、マウスだけを別の場所へ動かしても、猫には止まっていてほしいはずです。
一方、「ずっと」の中で「マウスのポインターへ行く」を実行し続ける構成は、ポインターの位置へ繰り返し移動するためのものです。クリックをきっかけにしたい場合は、移動の前に押されたかどうかを調べる処理が必要です。各ブロックはScratch公式のブロック一覧でも確認できます。
| 作りたい操作 | 行き先を決めるタイミング | 到着後の動き |
|---|---|---|
| クリックした場所へ移動 | 押したとき | 次に押すまで止まる |
| マウスを追いかける | 繰り返し更新する | ポインターの移動に合わせて動く |
今回は上の操作を作ります。背景に庭や部屋を描いても構いませんが、最初は何もない背景で試すと、クリック位置と到着位置を比べやすくなります。
移動ブロックは「一瞬で行く」と「時間をかけて行く」から選ぶ
Scratchには、指定位置へすぐに移すブロックと、指定した秒数をかけて移すブロックがあります。公式の「〜へ行く」の説明では、マウスのポインターや別のスプライトの位置へ移動する動作が案内されています。
移動の途中を見せたいときは「1秒で〜へ行く」を選びます。時間をかけて位置を変える動作については、公式の滑らかな移動の説明が参考になります。
- 瞬間移動を見せたい：「マウスのポインターへ行く」
- 移動する様子を見せたい：「1秒でマウスのポインターへ行く」
ここでは後者を使います。「1秒」は練習用の設定例で、おすすめの固定値ではありません。まずは動きが見える設定で組み、その後で作品に合わせて変更してください。
なお、同じ秒数で移動させる場合、近い場所への移動と遠い場所への移動では、見かけの速さが変わります。一定の速さで歩かせる仕組みではなく、決めた時間で目的地へ着く仕組みだと捉えましょう。
クリックした場所へすべるブロックを組む
動かすキャラクターを選ぶ
背景ではなく、動かしたいスプライトを選択します。最初の確認では、そのスプライトを動かす別のプログラムは接続せず、以下の構成だけで試してください。
下の枠は、ブロックの並びを文字で表したものです。貼り付けて実行するコードではありません。Scratchのブロックを選び、字下げの部分を「ずっと」の内側へ入れて組み立てます。
緑の旗が押されたとき x座標を 0、y座標を 0 にする ずっと 「マウスが押された」ではない まで待つ マウスが押された まで待つ 1 秒で マウスのポインター へ行く 「マウスが押された」ではない まで待つ
「1秒でランダムな場所へ行く」と表示されているブロックでは、選択欄を開き、「マウスのポインター」に変更します。座標を数字で入力する移動ブロックと取り違えないようにしてください。
六角形の条件を「まで待つ」に入れる
「調べる」にある「マウスが押された」を、「制御」の「まで待つ」の条件欄へ入れます。離された状態を待つ箇所は、「演算」の「ではない」に「マウスが押された」を入れ、その全体を条件欄にはめ込みます。
「マウスが押された」は、ボタンが押されているかを調べる条件です。「まで待つ」は、その条件が成立するまで下の処理へ進みません。仕組みは公式のマウス押下判定と「まで待つ」の説明で確認できます。
先頭で一度「離された状態」を待つのは、開始時点で押しているボタンを、そのまま移動の合図にしないためです。移動後にも同じ待機を入れ、次の押下と区切っています。
短く押す・長く押す・移動中に押すを比べる
緑の旗を押したらボタンを離し、ステージ中央寄りの空いている場所で試しましょう。画面の端ではなく、キャラクター全体が見える場所を選びます。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
この構成では、滑らかな移動を始めた時点のポインター位置が目的地になります。移動中にマウスを動かしても、その移動の目的地は更新されません。この動作はScratch公式の移動処理の実装で確認できます。
| 試す操作 | この構成で確認したい動き |
|---|---|
| 離れた場所を短く押して離す | 押した場所まで移動して止まる |
| 押したままマウスを動かす | 最初に指定した場所へ移動し、指を離すまで次の移動を始めない |
| 到着後、マウスだけを動かす | キャラクターは止まったまま |
| 到着後、別の場所を押す | 新しい場所へ移動する |
| 移動中に別の場所を短く押して離す | そのクリックでは行き先が変わらない |
この例は、移動中のクリックを予約する仕組みではありません。移動ブロックの実行中は、同じ並びの「押されたまで待つ」へ戻らないためです。試す人にも「到着してから次の場所を押してね」と伝えてください。
途中で行き先を変えたくなった場合は、今回の最小構成とは別の設計が必要です。まずはこの表の動作でよいかを決めてから、機能を増やしましょう。
庭や部屋の作品に使う前に決めておくこと
この操作は、好きな場所へキャラクターを配置して遊ぶ作品の出発点にできます。たとえば「庭の中で猫を移動させる」なら、最初は背景と猫だけで操作を確かめ、その後に花やベンチを加える進め方があります。
ただし、背景に家具を描いただけでは、それを避けて移動する処理は加わりません。今回の構成は目的地まで直線的に移動するもので、障害物の手前で止まる判定や、通れる道を探す機能は含みません。
最初の作品では「庭のどこへでも移動できる」というルールにしても十分です。家具を避けることまで一緒に完成させようとせず、まずクリック操作を作品の遊びとして使えるか確かめてください。
作りたい操作が具体的になったら、「押した位置へ移動できた。次は途中でも目的地を変えたい」のように、現在の動きと追加したい動きを分けて相談できます。CotoMiraiは、年齢・興味・理解度に合わせた個別指導を行っています。体験で扱う内容は、申し込み時に希望を伝えて確認してください。
よくある質問（FAQ）
「このスプライトが押されたとき」では作れませんか？
そのイベントは、キャラクター自身を押す操作のためのものです。今回はキャラクターから離れた場所を目的地として押したいので、「マウスが押された」を待つ構成にします。イベントと調べる条件の違いは、本文で紹介した公式ブロック一覧でも確認できます。
座標や変数を先に勉強する必要はありますか？
この例では、目的地を保存する変数は作りません。移動先として「マウスのポインター」を選びます。開始位置には座標を使いますが、まずは例の値で動かし、位置を変えたくなったときに数字を調整する進め方でも構いません。
近くを押しても遠くを押しても、同じ速さですか？
同じなのは、移動にかける秒数です。例の「1秒」を固定すると、遠い場所へ行くときほど速く動いて見えます。作品上それで困らなければ、そのまま使えます。
移動中のクリックが反映されないのは失敗ですか？
今回の構成では想定した動作です。到着し、ボタンを離した後に、新しく押してください。移動中の操作も受け付けたい場合は、「途中で行き先を変更する」という追加条件として設計し直します。
無料体験で、この操作を作りたいと相談できますか？
申し込み時に希望内容を伝え、扱えるか確認してください。CotoMiraiの公式案内では、年中以上は無料体験会、年中未満はプログラミングトイスポットへの参加が案内されています。申し込み手順や年齢に応じた案内は、次のページで確認できます。
参考にした情報
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。