この記事のポイント
キーボードのキー操作でスプライトを動かせるようになります。
はじめに 3Dカーレースゲーム(車運転ゲーム)をつくってみよう!
このコースではカーレースゲーム(車運転ゲーム)を作ることでスクラッチのさまざまなプログラミング方法をさらに学んでいくコースになります。
最終作品は下の動画のように、車を左右に動かしてライバルカーたちを抜き去り、どれだけ先に進めるかを競うゲームをつくります!キーボード操作だけでなくスマホのタッチ操作でも遊べるようになります。
第1回は、キーボードを使ってスプライト(今回は車)を動かす方法を説明します。
自分で操作できるものが作れると一気にゲームっぽさが高まりますよ!
スクラッチの始め方
スクラッチの始め方は以下リンク先でまとめています。初めての方、やり方を忘れてしまった方はぜひここから読んでみてください。
完成作品 カーレースゲーム(車運転ゲーム)
完成作品は以下のようになります。緑色の旗:実行ボタンを押して試してみてください。
操作方法
- キーボードの「←」キーを押すと車が左に移動します。
- キーボードの「→」キーを押すと車が右に移動します。
完成スクリプト(プログラム)
今回の記事で作るスクリプト(プログラム)は以下のとおりになります。
スクラッチプロジェクト
スクラッチプロジェクトは以下です。プログラムや画像の素材は自由に使用してもらってOKです。
作りたいモノ・コト(仕様)を考える
今回の作るモノ・コト(仕様)は以下のとおりです。これをプログラムできればゴールです。
- キーボードの「←」キーを押すと車が左に移動する。
- キーボードの「→」キーを押すと車が右に移動する。
- 車線によって車の向きを変える。
はじめに作りたいモノをおおざっぱでもいいので、書き出すことがプログラミングで重要です。
いきなりプログラムを組み始めるよりスムーズに進みます。
事前準備
スプライト(マイカー)の用意
今回のカーレースで使用するスプライトの名前は「マイカー」とします。
マイカーの画像を中央車線にいるとき、左車線にいるとき、右車線にいるとき用に別々で用意します。
これをマイカーのコスチュームとして登録します。中央車線用の車のコスチューム、左車線用の車のコスチューム、右車線用の車のコスチュームとして使用します。マイカーの大きさは80くらいにしておきます。
スプライトにコスチュームを追加する詳細な方法は以下記事を参考にしてください。
背景の用意(3Dに見える背景)
次にステージとなる背景を用意します。画像は以下のようにずっと先まで続くような画像を使います。遠くのものは小さく、近くのものは大きくなるように道路を描くと3Dのように見せることができます。
遠近法という技法ですね!
これで車が奥行方向(3D)に進んでいるように見せることができます。
スプライトと背景を設定するとステージ画面が以下のようになります。
プログラミング
初期化(最初の設定)
スクリプト(プログラム)が始まったときのスプライトの状態を固定するための初期化のスクリプト(プログラム)をつくります。以下の考え方でスクリプトを作ります。
- スプライトの最初の位置(x座標=0、y座標=-70)を決める。
- スプライトの最初のコスチュームを決める。
- 他のスプライトの前後関係を決める。
- スプライトを表示させる/隠すかを決める。
キーボードの操作で車を左に動かす(中央車線にいるとき)
最初に決めた作りたいモノ・コトの1つである「キーボードの「←」キーを押すと車が左に移動する。」のプログラミングをしていきます。
以下の動きができるようにスクリプトを作ります。
- 車が中央(x = 0)にいる場合に、「←」キーが押されたら
- 車をx = -250だけ(左車線へ)移動させる
- 車のコスチュームを左車線用に変更する。
先ほどの作った初期化部分に、赤枠のようにスクリプトを追加してください。
何回も行いたい操作は「ずっとブロック」に入れます。
「もしブロック」を使って「車が中央にいるとき」に動作するようします。これがないと「←」キーを押すたびに左方向に車が移動していってしまいます。
キーボードの操作で車を中央に戻す(左車線にいるとき)
今のスクリプトのままでは、左車線に行った車を中央車線に戻すことができません。
当初想定していた考えでは足りないことに後から気づくことはよくあります。その都度修正していけば問題ありません。
左車線に移動した車を中央車線に戻すスクリプトを追加します。これも先ほどの車を左車線に移動させるスクリプトを応用すれば簡単に作ることができます。
以下の動きができるように赤枠のスクリプトを追加してください。
- 車が左車線(x=-250)にいる場合に、「→」キーが押されたら
- 車をx=250だけ(中央車線へ)移動させる。
- 車のコスチュームを中央車線用に変更する。
これで左車線に移動した車を中央車線に戻すことができるようになりました。中央車線に戻った車は何度も左に移動させることができます。
キーボードの操作で車を右に動かす
さて最後にキーボード操作で右車線に車を移動させるプログラムを追加します。ここまで読まれた方であれば、このプログラムは簡単に想像がつくと思います。
ついでに右車線に移動した車を中央車線に戻すプログラムの追加も一気に行います。
以下の動きできるようにスクリプトを作ります。
- 車が中央(x=0)にいる場合に、「→」キーが押されたら
- 車をx=250だけ(右車線へ)移動させる
- 車のコスチュームを右車線用に変更する。
- 車が右車線(x=250)にいる場合に、「←」キーが押されたら
- 車をx=-250だけ(中央車線へ)移動させる
- 車のコスチュームを中央車線用に変更する。
動作確認
ここまでの動きを確認してみましょう。以下のように車が右に左にキーボードで操作できるようになっていれば成功です。
動作確認は「デバッグ」とも言います。
プログラミングは作ったものが一発で動くことはほとんどありません。作る→動作確認を何回も繰り返すことが大切です!
【少し発展】車をスムーズに動かす
このプログラムでも車を左右に移動させることはできています。しかし、キーを押したら「瞬時に」左右に移動するので、かなり危ない運転をしているように見えてしまいます。
現実にこんな運転をしている車がいたら怖いですね・・・
この章では、左右の移動をスムーズに見せる方法を説明します。
スムーズに移動 = 複数回に分けて少しづつ動かす
スムーズに移動させるためには、移動を1回で実施するのではなく、何回かに分けて少しづつ移動させていけば解決できます。
考え方としては、アニメーションと同じです。アニメーションの動きのコマを分ければ分けるほどスムーズに動いて見えるのと同じ原理です。
アニメーションの原理に関しては、以下の記事で紹介していますので参考にしてください。
スクリプト修正:車を左右に少しづつ動かす
今までのスクリプトでは1回キーが押されると、1回でx=250に移動していました。
これを1回キーが押されると、x=25ずつ10回に分けて移動するように変更します。合計で移動する距離は変えないのがポイントです。
次のような動きができるようにスクリプトを変更します。この変更は4つの「もしブロック」すべてに対して行います。
- x座標を「25」ずつ変える に変更する。
- 「x座標を25ずつ変える」ブロックを「10回繰り返す」繰り返すブロックで囲む。
動作確認
これで車の移動の動きを確認してみましょう。スムーズに移動するようになったことがわかると思います。
安全運転第一ですね!
さいごに
カーレースゲームを作る第一段でキーボードで車を操作できるようにプログラムしました。キー(ボタン)で操作できるようになると一段とゲームらしさが出てきて楽しくなりますね!
次回予告は下をスクロールしてください⇩⇩⇩
おススメのスクラッチ参考書
私も参考にしているスクラッチ参考書を紹介します。どちらもとてもわかりやすいです。
私の場合は、図書館で借りて試し読みして、分かりやすかったものを購入しています。試し読みは必須です。
手元にずっと置いておき、いつでも参照できるようにすることも重要です。
【無料体験】【全国に教室多数】おススメのプログラミング教室
私が最もおススメするプログラミング教室は、「QUREOプログラミング教室」です。
「QUREO」の特徴は、以下にあげる点です。
- 教室型であり、直接先生からプログラミングを学ぶことができる。
- 全国に教室数が多く(全国2500教室)、実績豊富
- ビジュアルプログラミングかつゲーム制作を学習教材に使用していて、取り組みやすい
- 月謝が比較的安い。
習い事は、「通いやすさ」と「続けやすさ」の2つが重要ですよね。私も「通いやすさ」を重視して「QUREO」を選びました。
今なら無料体験・キャンペーンも実施しているので、一度お試しすることをおススメします!
次回 第2回 車が前に走っているように見せる
次回は、車が前に向かって走っているように見せる方法を説明していきます。ぜひチャレンジしてください!
次回の作れるものはこんな感じです!白線が動くことで車が前に進んでいるように見えますね!
コメント