今回はスクラッチでマス目をスムーズに移動させる方法を解説します。アクションゲームやロールプレイングゲームを作る時にマス目を移動させるシチュエーションはたくさんありますが、1マスずつトントンと移動するのではなく、なめらかに移動させるにはちょっとした工夫が必要です。基礎をマスターしてゲーム作りに活かしていきましょう。
今回つくるもの
今回作るものはこちらになります。上下左右の矢印キーを押すとマス目に沿って曲がっていきます。つねにマス目から外れていないことがポイントとなります。
こちらの動画でもわかりやすく解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします!
そして、この動きをつくるコードは以下の通りです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-13.59.48.png?resize=849%2C653&ssl=1)
コードはこちらからも確認できます。自由に活用してください。
では、ここから順番に解説していきます。
背景とスプライトをセットする
マス目を移動させるゲームを作る時には背景にXy-grid-30pxを選択するところからはじめます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-19.47.26-1024x556.png?resize=1024%2C556&ssl=1)
1マスが30ピクセルになっていて、このマス目にあわせて、コースを作ったり、アイテムを作ったりするとゲームを作りやすいです。
例えば、マリオやボンバーマンなど、すべてこの背景をベースに作っています。
次に、マス目を動かすスプライトは以下のように、ちょうどマス目にはまるように作っていきます。これをターゲットと呼びます。ここでは向きがわかりやすいように目と口をつけていますが、これは何でもいいです
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-19.48.47-1024x556.png?resize=1024%2C556&ssl=1)
自由に動かせるようにする
まずはマス目上をターゲットが自由に動けるようにします。
以下のコードをターゲットに書いていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-13.49.53.png?resize=610%2C561&ssl=1)
こうすると、矢印キーを押した方向に自由にターゲットが動いていきます。以下のようにうごけば成功です。ただ、これでは、マス目と関係なく動けてしまうので、次にマス目にそって動けるようにしていきます。
マス目に沿って動けるようにする
スクラッチの”1歩動かす”は”1ピクセル動かす”と同じ意味です。
1歩動かす = 1ピクセル動かす
マス目は30ピクセルなので、30歩動くと1マス進むことになります。
ですので、1マス進むというブロック定義を作り、30歩動かして0.2秒待つと定義していきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-13.57.50.png?resize=849%2C562&ssl=1)
これで実際に動かしてみると、以下のようにトントンと動いていくのがわかります。これでもいいのですが、なめらかに動いた方がゲームとしての完成度はあがります。
マス目にそってなめらかに動かす
さきほどは30歩いっきに動かしていたからトコトコ動きましたが、”30歩動かす”を”3歩を10回動かす”に変更することでなめらかに動くようになります。
30歩動かす = 3歩を10回動かす
ただ、3歩を10回動かしている間に向きが変わってしまうとマス目にそって動かなくなるので、3歩を10回動かしている間は、方向転換できないようにしなければなりません。
そこで曲がれるという変数を使います。1マス動いている間は曲がれる=0で、1マス動いたら曲がれる=1になります。矢印キーが押された時に曲がれる=1まで待つことでマス目に沿ってなめらかに動けるようになります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-13.55.59.png?resize=847%2C656&ssl=1)
実際に動かしてみましょう。
端で止まるようにする
最後に画面の端に着いた時に止まるようにしましょう。これもスクラッチでよく使う技ですが、30歩進めて、壁にあたれば戻すし、当たらなければ戻してまた進めるようにすることで制御できます。
コードは以下の通りです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-19-13.59.48-1.png?resize=849%2C653&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
端に触れた時に-15歩になっているのは、スクラッチが端より先には進めないためです。障害物を置いて、進めなくするときはこの部分が-30歩になります
これで、マス目にそってなめらかに動かしながら、端では止まるようにできました。