仕様を決めよう
Scratchで作るゲーム、できればムスコ（３歳）に楽しく遊んでもらいたいので、本人の要望を聞いてみました。
お母さんゲーム作ってみようと思うんだけど、どんなゲームがいいかなぁ？
車のゲームがいい！
車がジャンプして、ガケや海に落ちるのー！
むむむ…なんかイメージが全然わかないけど…。
すると、オットからの提案で、
ファミコンのシティコネクションみたいにしたら？
とのこと。
シティコネクションって、こんなゲームのようです。
なるほどね。
というわけで、まずは仕様をざっと書き出してみることにしました。
- 横スクロールで車を運転するゲーム。
- 走るところは３段ある。ジャンプと落下で別の段に移動できる。
- 一番下は海。海だと、走るスピードが少し遅くなる。
- ← キーと → キーで、左右に方向転換できる。
- スペース キーでジャンプする。
- くだものを拾うと点数アップ。
- 岩にぶつかると点数ダウン。
- 制限時間は40秒で、得点によってゲーム終了後の画面が変わる。
３歳のこどもが遊べるように、難易度はあまり高くなく、でもやっていて飽きないゲームを目指します。
素材を集めよう
Scratchにはもともと素材が用意されているので、そこから選んでもよいのですが、どうせならこどもが好きそうなかわいいタッチの絵で作りたいなぁ…ということで、フリー素材サイトいらすとやさんからお借りすることにしました。
音源については、フリー効果音が豊富な効果音ラボさんからお借りしました。
さあ、制作開始！
完成イメージ
一足先に、完成したゲームの映像をチラッとお見せしますね。
それでは、作っていきましょう！
車のスプライトを作ろう
画像をアップロードする
まずは車の画像をアップロードします。
登録した車の画像はこちら。
←１つめの画像（車１）
←２つめの画像（車２）
この２つ、ほとんど変わらないように見えますが、車２は、車１の高さを少し縮小した絵です。
スプライト情報を変更する
スプライトの左上の
マークをクリックして、スプライト情報を変更します。
スプライト名を「車」に変更します。
また、このスプライトは左右にしか向きを変えないので、回転の種類を左右のみにします。
スプライトの左上の
をクリックすると、元の画面に戻ります。
ついでに、プロジェクトのタイトルも書き換えておきましょう。
車のスクリプトを書いてみよう
では準備が整ったところで、車のスプライトにスクリプトを書いていきます。
画像を入れ替え続ける
車のスクリプトエリアに、下記のようにブロックを並べて、先ほど登録したコスチュームを交互に表示させるようにします。
最初は右向きに走らせたいので、「90度に向ける」ブロックを入れています。
すると、こんなふうに動きます。
オープニングを作る
車が「３、２、１、スタート！」と言ってから、ゲームがスタートするようにします。
「ゲームスタートを送る」ブロックは、イベントの「メッセージ1を送る」ブロックを使って、「新しいメッセージ」を選択すると、作ることができます。
この「ゲームスタートを送る」をきっかけに、ゲームが開始するように作っていきます。
左右に方向転換できるようにする
ゲームスタート時は右向きの車ですが、← キーが押されたら左向きに、→ キーが押されたら右向きに方向転換できるようにします。
道のスプライトを作ろう
つづいて、道のスプライトをつくります。
画像をアップロードする
スプライトリストのアップロードボタンをクリックし、道の画像をアップロードします。
マークをクリックし、回転の種類で「回転しない」を選択しておきます。
スクリプトを書く
ちょうど車のスプライトの下に配置されるように、y座標を調整します。
また、このあと登場するくだものや岩のスプライトより下の層にしたいため、「10層下げる」を入れます。
最初、車は右を向いているので、道は右から左へと動きます。
そのため、x座標をマイナスの方向に動かします。
ここでは、「x座標を -8 ずつ変える」ようにしています。
この状態で
旗マークをクリックすると、このように動きます。
繰り返しの処理を入れる
道が右から左へ行ったら、再び右から左へと繰り返すようにしたいので、繰り返しの処理を入れます。
このスプライトの場合、一番左にあるときのx座標が-471、一番右にあるときのx座標が471なので、「x座標が-470よりも小さくなったら、471にする」としています。
ここで「x座標＝-471なら」ではなく「x座標＜-470なら」としているのは、-8ずつ動いているので、ちょうど-471にならない可能性があるからです。
この処理のおかげで、道が延々と右から左へ流れていくようになりました。
車の向きに合わせる
今のままだと、道は右から左へと流れるだけなので、車が右向きのときは右から左へ、車が左向きのときは左から右へ流れるようにします。
「もし○○なら、でなければ」という制御ブロックを使って、「もし車の向きが90（右向き）なら」のあとに、先ほど作った「x座標を-8ずつ変える」以降のブロックを入れます。
「でなければ」のあとには、車の向きが右向きでない、つまり左向きのときの処理を入れます。
車が左向きの場合は、逆にすればいいだけなので、以下のようなスクリプトになります。
これで、車の向きと連動して、道が動くようになりました。
スプライトを複製する
今の状態だと道がない部分が長すぎるので、道を複製して重ね、道がない部分を短くします。
スプライトリストの「道」の上で右クリックし、複製します。
新しくできた「道２」のスプライトにも、「道」と同じスクリプトがコピーされているので、x座標だけ書き換えて、道１と道２をずらして表示させます。
道が伸びて、道がない部分が短くなりました。
道を２段にする
道を２段にしたいので、さらにあと２つ、「道」のスプライトを複製します。
複製したら、スプライト名はわかりやすいように「中段１」「中段２」「上段１」「上段２」と名前を書き換えておきます。
上段１は「x座標を-300、y座標を102にする」、上段２は「x座標を-100、y座標を102にする」と書き換えます。
あとは、コピーされたスクリプトをそのまま使います。
これで、道が２段になりました。
さて、次回はいよいよ、果物や岩や海などが登場します！お楽しみに！
コメント