スクラッチでマス目にそってなめらかに移動させる

今回はスクラッチでマス目をスムーズに移動させる方法を解説します。アクションゲームやロールプレイングゲームを作る時にマス目を移動させるシチュエーションはたくさんありますが、１マスずつトントンと移動するのではなく、なめらかに移動させるにはちょっとした工夫が必要です。基礎をマスターしてゲーム作りに活かしていきましょう。

今回つくるもの

今回作るものはこちらになります。上下左右の矢印キーを押すとマス目に沿って曲がっていきます。つねにマス目から外れていないことがポイントとなります。

そして、この動きをつくるコードは以下の通りです。

コードはこちらからも確認できます。自由に活用してください。

マス目をなめらかに移動させる

では、ここから順番に解説していきます。

背景とスプライトをセットする

マス目を移動させるゲームを作る時には背景にXy-grid-30pxを選択するところからはじめます。

１マスが30ピクセルになっていて、このマス目にあわせて、コースを作ったり、アイテムを作ったりするとゲームを作りやすいです。

例えば、マリオやボンバーマンなど、すべてこの背景をベースに作っています。

次に、マス目を動かすスプライトは以下のように、ちょうどマス目にはまるように作っていきます。これをターゲットと呼びます。ここでは向きがわかりやすいように目と口をつけていますが、これは何でもいいです

自由に動かせるようにする

まずはマス目上をターゲットが自由に動けるようにします。

以下のコードをターゲットに書いていきます。

こうすると、矢印キーを押した方向に自由にターゲットが動いていきます。以下のようにうごけば成功です。ただ、これでは、マス目と関係なく動けてしまうので、次にマス目にそって動けるようにしていきます。

マス目に沿って動けるようにする

スクラッチの”１歩動かす”は”１ピクセル動かす”と同じ意味です。

1歩動かす ＝ １ピクセル動かす

マス目は30ピクセルなので、30歩動くと１マス進むことになります。

ですので、１マス進むというブロック定義を作り、30歩動かして0.2秒待つと定義していきます。

これで実際に動かしてみると、以下のようにトントンと動いていくのがわかります。これでもいいのですが、なめらかに動いた方がゲームとしての完成度はあがります。

マス目にそってなめらかに動かす

さきほどは３０歩いっきに動かしていたからトコトコ動きましたが、”３０歩動かす”を”３歩を１０回動かす”に変更することでなめらかに動くようになります。

30歩動かす ＝ 3歩を10回動かす

ただ、3歩を10回動かしている間に向きが変わってしまうとマス目にそって動かなくなるので、3歩を10回動かしている間は、方向転換できないようにしなければなりません。

そこで曲がれるという変数を使います。１マス動いている間は曲がれる＝０で、１マス動いたら曲がれる＝1になります。矢印キーが押された時に曲がれる＝１まで待つことでマス目に沿ってなめらかに動けるようになります。

実際に動かしてみましょう。

端で止まるようにする

最後に画面の端に着いた時に止まるようにしましょう。これもスクラッチでよく使う技ですが、30歩進めて、壁にあたれば戻すし、当たらなければ戻してまた進めるようにすることで制御できます。

コードは以下の通りです。

これで、マス目にそってなめらかに動かしながら、端では止まるようにできました。