
プログラミングでキャラクターを自由自在に動かそう!【マウス編】
本記事は2021年09月10日にLINE entry公式ブログにて掲載されたものを再掲載した記事です。
ゲームではマウスや上下左右のカーソルキーなどを使ってキャラクターを操作しますよね。今回はマウスを使ってキャラクターを自由自在に動かすプログラミングを2つ紹介します。
それでは下記のリンクからLINE entryのワークスペースにアクセスしてプログラミングを始めましょう。
ワークスペース
マウスを使ってキャラクターを動かそう!その1
1つめはマウスポインターにくっついてくるようにキャラクターを動かす方法です。まるでマウスで直接キャラクターを操作しているような感覚になりますよ。

まずは動かしたいキャラクターをキャラクターレイヤーからクリックして選びます。今回はワークスペースにアクセスしたときに最初から用意されている「歩くブラウン」を選んでいます。キャラクターが1つしかないときは問題ありませんが、キャラクターが2つ以上になるとどのキャラクターにプログラミングをするかを選ぶ必要があるので、プログラミングする前に必ず確認しましょう。

最初に用意されている「スタートボタンをクリックした時」ブロック以外は右下のゴミ箱にドラッグして消しておきます。

使うブロックは
「開始」カテゴリーから「スタートボタンをクリックした時」ブロック
「制御」カテゴリーから「ずっと繰り返す」ブロック
「動作」カテゴリーから「”キャラクター名”の位置に移動する」ブロック
です。
上記のブロックを取り出したら、「”キャラクター名”の位置に移動する」ブロックの”キャラクター名”をクリックすると表示されるメニューから「マウスポインター」を選び、以下の画像のように組み合わせます。

このプログラムは、キャラクターをマウスポインターの位置に移動することをくり返します。こうすることで、マウスポインターを動かすといっしょにキャラクターを動かすことができるというわけです。 このテクニックは「みんなの作品」の「洞くつ生き残りゲーム」でコウモリくんを操作する仕組みに使われています。どんな作品に使われているのか実際に見てみると、作りたい作品のアイデアがうかぶかもしれませんね!
マウスを使ってキャラクターを動かそう!その2
つぎはまるでキャラクターをつかんで動かすように、マウスでキャラクターをドラッグする方法です。
動かしたいキャラクターをキャラクターレイヤーからクリックして選びます。
使うブロックは
「開始」カテゴリーから「キャラクターをクリックした時」ブロック
「制御」カテゴリーから「”正しい” ”になるまで”繰り返す」ブロック
「動作」カテゴリーから「”キャラクター名”の位置に移動する」ブロック
「判断」カテゴリーから「マウスをクリックしたか?」ブロック
です。
上記のブロックを取り出したら、さきほどと同じように「”キャラクター名”の位置に移動する」ブロックの”キャラクター名”をクリックして「マウスポインター」を選びます。 つぎに「”正しい” ”になるまで”繰り返す」ブロックの「正しい」に「マウスをクリックしたか?」ブロックを組み合わせ、「になるまで」をクリックしてメニューから「の間」を選びます。

ブロックの準備ができたら以下の画像のように組み合わせます。

これでキャラクターをクリックしているあいだだけ、マウスポインターといっしょに動かすことができるようになりました。マウスのボタンを離すとそれ以上キャラクターは動かなくなります。これは、パソコンでファイルなどをドラッグしたときと同じ動作ですね。このプログラムはキャラクターをクリックしたときに始まります。そしてマウスをクリックしている(マウスのボタンを押している)あいだだけ「マウスポインターの位置に移動する」をくり返しています。だから、マウスのボタンを押すのをやめるとキャラクターはもうそれ以上動かなくなるのです。
このテクニックは「みんなの作品」の「フルーツピアノ」でフルーツを動かす仕組みに使われています。同じ動きでも使われているブロックは少しちがうので、ぜひチェックしてみてください。
今回はここまで。
マウスでキャラクターを動かす方法について2つ紹介しました。 「洞くつ生き残りゲーム」や「フルーツピアノ」のようにキャラクターを画面の中で自由に動かして遊んでもらいたい作品にはピッタリのテクニックです。
ほかにもマウスだけを使った操作方法は考えられます。たとえば、「避けて避けて避けまくれ!プレゼントゲットゲーム」という作品では、キャラクターがマウスポインターを追いかけるような動きを実現しています。どのような仕組みになっているのか、ぜひ「ブロックを見る」ボタンをクリックしてプログラムを見てみましょう。きっと新しい発見がありますよ。
次回はキーボードでキャラクターを動かす方法について紹介する予定です。お楽しみに!