キミも未来のトビラをひらこう!!

programmingSchool

できたを育むプログラミングスクール

レッスン12アクションゲームを作ろう!

チャプター01はじめに

このチャプターのポイント

アクションゲームを作ろう

・完成形を確認かくにんしよう

これまでいろいろなScratchの使い方を勉強したきたね。 さいごのレッスンでも、これまでおぼえたことを活用して、本格的なゲームを作っていこう! まずは、今回のレッスンで作るものを見ていくよ。

今回は、ねこがステージを横に移動しながらゴールを目指すアクションゲームをつくっていくよ。 障害物を避けながらステージを進んでいきゴールまでたどり着けたらクリアになるよ!

実際に作っていこう!

チャプター02スプライトと背景を確認しよう

このチャプターのポイント

ゲームにつかう背景・スプライトを用意して設定していこう

・スプライトを確認かくにんしよう

まずは、スプライトを確認するよ。 1つ設定されていればOKだよ。

次に、コスチュームを確認しよう。

  • ねこのコスチューム1
  • ねこのコスチューム2
背景を確認しよう

次に、背景を確認しよう。

  • 背景1
  • 背景2
  • 背景3
  • ゲームクリア

合計4つ設定されていればOKだよ。

最後に、背景の順番を整えて、 背景1、背景2、背景3、ステージクリアの順番に並べ替えて、背景1を選択しよう。 ここまで、みんなの画面でもやってみよう!

チャプター03重力をつけよう

このチャプターのポイント

アクションゲームに必要な重力を作ろう

・変数を使ってy座標を変えよう

今回のゲームでは、ステージをねこが移動しているようにしていきたいので、ステージ上で常に地面を歩くように、重力をつけていくよ。

まずは、ねこのスプライトを選択。

そして、[データ]の中から「落下スピード」という変数を作ろう。

この変数をつかって、ねこが地面にいない時にy座標を変えていくことで、常に地面を移動できるようにしていくよ。 変数のブロックをつかって、常にy座標を-1ずつ変えることで、スプライトがステージの下に向かうようにするよ。

これで、ブロックをクリックすると、 スプライトがステージのしたにむかって移動するようになるよね。

スタートした時から、重力を発生させられるようにブロックを追加しておこう。

ねこを空中にドラッグして、グリーンフラッグを押してみよう。

チャプター04地面でねこを止める

このチャプターのポイント

ねこが背景の地面の上を移動できるようにしよう!

・重力を打ち消そう

前のチャプターで、ねこに重力をつけることができたね。 次に、重力で落ちるとき、背景の緑色の地面に着いたら止まるようにしよう。

ねこを止めてしまうと、また地面よりも上に行った時に重力が効かなくなってしまうので、重力を打ち消すようにねこを上方向に移動させるようにしよう。 重力を打ち消すためには、y座標を1ずつ変えてあげればいいよね。

[もし(~色に触れた)なら]の色の部分は、地面の色をクリックして設定しよう。 色を手動で設定する場合は次のようにしておこう。

  • 色:20
  • 鮮やかさ:96
  • 明るさ:94

これで、スクリプトを実行してうごきを見てみよう。

地面で止まるようにはなったけれど、ステージの上の方から落とすと地面に入り込んでしまっているよね。 これは、落下のときにy座標を変える変数の数字が大きくなってしまっているからなんだ。

なので、地面に入り込んだままにならないように、地面の上まで移動するようにしていくよ。

これで、地上に出るようになったね!

ただ、なんだかゆっくりと地面から浮き上がってくるので、少し不自然だよね。 つぎのチャプターで動きを自然にしていくよ。

チャプター05定義ブロックを作ろう

このチャプターのポイント

定義ブロックを使って自然な動きにしよう

・定義ブロックを作ろう

前のチャプターで、重力を打ち消すことができるようになったけれど、地面に入り込んだあと、浮き上がってくる動きが少し不自然だったね。 浮き上がってくるように見えるのはy座標を1ずつ変えるのスクリプトを何度も繰り返し実行しているからなんだ。 今回、これを直すのに、定義ブロックをつかっていくよ。

定義ブロックというのは、ブロックのかたまりをひとまとめにして新しいブロックを作る機能だよ。 それでは早速、実際に作っていこう。 まずは、「重力」という定義ブロックを作ってみよう。 [ブロック定義]の中にある、ブロックを作るのボタンをクリック。

ブロックの名前は、「重力」と入力しよう。 オプションをクリックして、ひらいて [画面を再描画せずに実行する]にチェックを入れてOKボタンをおそう。

スクリプトエリアに[定義 重力]という大きな帽子の形のブロックが出てきたね。 つぎに、ずっとの中のブロックを[定義 重力]の下に移動しよう。

そして、[ブロック定義]の中にある重力のブロックを代わりに、[ずっと]の中に入れよう。

こうすることで、地面にむかってうごく重力のうごきと、重力を打ち消す上への動きが自然になるよ。

これは、ブロックを作る時に、画面を再描画せずに実行するにチェックを入れたことで、定義の中にあるブロックは途中の動きが省略されていて、動きが素早くなっているんだよ。 これで、重力と重力の打ち消しが自然な動きになって、地面でねこが止まるようになったね!

また、定義ブロックのオプションは、ブロックエリアの定義ブロックを右クリックして、編集をクリックすればいつでも変更することができるよ。

チャプター06ジャンプできるようにしよう

このチャプターのポイント

ねこがジャンプできるようにしよう

・地面にいる時だけジャンプできるようにしよう

地面にいるときだけジャンプできるようにしよう。 変数をつかって、ねこの状態を調べることで、ジャンプのスクリプトを制御できるようにしていくよ。

ねこが今、空中にいるかどうかをおぼえさせるために、「滞空時間」という変数を作ろう。 空中にいる間はずっと「滞空時間」の変数をふやして、地面にいるときは0にすることで、「滞空時間」が0、つまり地面にいるときだけジャンプできるようにすればいいよね。

地面にいない時、つまり重力の下への動きが実行されている時は、「滞空時間」を1ずつ変えるようにしよう。

そして、地面にいる時には、滞空時間を0にするようにしよう。 また、wキーが押されたときではなく、 Y座標>90つまりマウスカーソルが上の方にあるときという条件に変えよう。 これは、キーボードではなくタブレットでも遊べるようにするための変更だよ。 これで、0であれば地面にいる。 1以上であれば空中にいる。 ということが分かるようになったね!

最後に、ジャンプの条件を地面にいる時に変更してあげれば完成だよ! 実際に、ステージ上でうごかして試してみよう!

チャプター07スプライトを動かそう

このチャプターのポイント

ねこをカーソルの位置に対応させて動かそう!

・左右に動かそう

さあ、ここまでで、ねこがステージでジャンプができるようになったね! つぎに、ねこが左右に動かせるようにしていこう。

キーボードを使わずにマウスカーソルの位置で動く仕組みをつくることに挑戦しよう。(タブレットの場合は、触れた場所に対応して動かす仕組みになります)

  • 画面の右の方に触れたとき:右に動く
  • 画面の左の方に触れたとき:左に動く

という仕組みをつくっていくよ。

まずは、グリーンフラッグがクリックされたとき、ねこがステージの右側をむいて、スタート地点に行くようにしよう。

今回、スタート地点は x座標を-220、y座標を-110としよう。 これはもう簡単かな。

まずは、右側にすすむようにしていくよ。 マウスのX座標が160より大きいときに右側に進むようにしていこう。

そして、右側へのうごきができたら、こんどは右側への動きのブロックを複製して、左側への動きも作っていこう。 ブロックの固まりを右クリックして複製。 (Shift+クリックでもOK)

複製されたブロックのかたまりをくっつけて、完成だよ。

これで、ねこがステージ上で左右に移動するようになったね!

チャプター08引数付きのブロックを作ろう

このチャプターのポイント

引数をもったカスタムブロックを作ろう

・左右のうごきをカスタムブロックで作ろう

前のチャプターで作った、右に動く仕組みと左に動く仕組みはブロックが同じで数字が異なるだけだったね。 このような仕組みは「引数のある定義ブロック」を使うと見通しが良くなるんだ。やってみよう。

まずは、[ブロック定義]のブロックを作るをクリックして、ブロックを作ろう。 名前は「歩く」としよう。 オプションをひらいて、数値の引数を追加を2回クリックしてみよう。

これで、定義ブロックに引数を2つ追加することができるよ。 それぞれに「歩く」「向き」「歩数」という名前をつけよう。 最後に、画面を再描画せずに実行するにもチェックを入れて、OKボタンを押そう。

ブロックが完成したら、引数を組み込んだ処理をつくろう。 これで、歩くのブロックで向きをきめて前に進むことができるようになったね。 つぎに、[~度]と[~歩]の部分に、さっき作った引数のブロックを当てはめよう。 こうすることで、それぞれの引数に入れた数字が定義のブロックにわたされて、数字に合わせたうごきになるよ。

このように、カスタムブロックをつかうことで、少ないブロックで同じようなうごきが実行できるようになるよ! カスタムブロックをつかって、元々のかたまりも修正していこう。 さらに、[もし~でなければ~]のブロックを組み合わせて、3通りの場合わけをしよう。

これは、マウスのX座標が80と160の間だったらスプライトが右にも左にも行かない設定のための処理だよ! これで、左右のうごきは完成!

このチャプターでは、引数という新しい機能をべんきょうしたね! 引数を設定するとで、定義ブロックにデータを渡すことができるよ。 このデータのことを引数と言うんだ。 今回は、「向き」と「歩数」の引数を作って、「歩く」の定義ブロックにそれぞれのデータを渡すようになっているよ。

チャプター09動きを制限しよう

このチャプターのポイント

動きに制限をつけて障害物を越えていくようにしよう

・障害物の天井で跳ね返るようにしよう

さあ、ここまでで、ねこのうごきができてきたね! ただ、今のままでは、背景の障害物をすり抜けてしまうので、ゲームとしては成り立たないよね。 障害物にぶつかった時に動きに制限をつけるようにしよう。

まずは、障害物の天井にぶつかった時に、すり抜けず、跳ね返るようにしていこう。 これは、障害物の天井つまり茶色の部分にぶつかった時に、上に行く動きの[y座標の動き]が止まればいいよね!

なので、「落下スピード」の変数を0にして、その場所以上に、上に上がらないようにしていこう。 まず、この時の条件は、ジャンプをしている時、つまり「滞空時間」の変数が0よりも大きい時(=地面にいない時)と、更に茶色にふれた時なので、2つの条件を設定していこう。

これで、天井とぶつかった時に変数が0になって、動きが止まり、空中にいるのでそこから重力で下におちていくようになるよね。 実際に、うごかしてみると、地面に入り込んでしまった時と同じように、ゆっくりと天井からおちるようになってしまっているので、地面の時と同様に茶色にふれなくなるまでy座標をへらす、動きを追加しよう。

さあ、これで、障害物の天井にぶつかった時に、すり抜けず、跳ね返るようになったね!

ただし、じつはもう少しステージを進めてみると、別の問題が出てしまっているんだよ。 背景の中央にある、灰色の壁にむかってジャンプしながら横からぶつかると、地面深くまでねこが落ちてしまうようになっているよ。

これは、茶色にぶつかった時に、ずっとy座標を-1ずつ変えるが実行されてしまっているからなんだ。 これではゲームが上手く行かないので、修正しよう! このように、ゲームを作っているとバグ(エラー)がいっぱい出てくるので、1つずつ無くしていく事でゲームの完成に近づけていくんだよ!

・壁に入り込まないようにしよう

さきほどあった、横の移動で茶色の壁に入ってしまったときは、横の反対方向に同じだけ移動させることで、壁側への横移動が取り消されて、壁の中に入らなくなるよ!

今は、「歩く」の定義ブロックで6歩前に進むようにしているので、-6歩動かしてあげれば、むいている方向と反対の方向に6歩動かせるよ! マイナスにするために、演算の掛け算をつかっていくよ。 これで、ゲームをスタートして確認してみよう。 茶色の部分に入り込まなくなるよ!

チャプター10歩くアニメーションを作ろう

このチャプターのポイント

コスチュームを変えて歩く動きを作ろう

・コスチュームを変える

つぎに、ねこが歩いている間、コスチュームを変えて歩く動きをさせよう。 これまで何度も作っているので、もうやり方はおぼえたかな? 今回も、変数をつかって動きをするようにしていくよ。

まずは、「歩いた回数」という変数を作ろう。 そして、「歩く」の定義ブロックが実行されたら、「歩いた回数」の変数を1ずつ変えるようにしよう。

そして、歩いた回数が6より大きくなった時にコスチュームを入れ替えるようにしよう。

これで、動かした時に、自然に歩く動きができるようになるよ! 最後に、スタートした時に変数を0にしてリセットするのもわすれないようにしよう。 実際にゲームをスタートして動かして見てね!

チャプター11背景の変更

このチャプターのポイント

ねこが右端に行った時に背景が変わるようにしよう

・背景の変更

つぎに、ねこがステージの右端にたどり着いたら、つぎの背景にすすめるようにしていこう。 背景は、背景1→背景2→背景3→ゲームクリアの順番にならべかえているので、ゲームクリアの背景にむかって進めていくことになるよ。

ねこのx座標をもとに、背景の切り替えを行うようにしよう。 x座標が235になったらつぎの背景に切り替えよう

そして、つぎの背景にきりかわっただけでは、ねこの位置が右端のままになってしまいおかしいので、きりかわった後に、x座標を-220にして、左端に移動させるようにしよう。

これで、背景の移動ができるようになったね! 最後に、ゲームスタートした時に、背景1からはじまるように、ステージのスクリプトを作ろう。

スタートした時に、[背景1]になるようにしよう。 これで、背景の設定は完成だよ!

チャプター12ゲームクリアを作ろう

このチャプターのポイント

ゲームクリアの背景まで到達したらゲームクリアになるようにしよう

・ゲームクリアでスクリプトを止めよう

今回のゲームでは、背景が「ゲームクリア」になったらゲームクリアだよ! ゲームクリアの動きを作っていこう。 まずは、ゲームクリアになったら、スクリプトがすべて止まるようにしよう。

引き続き、ステージを選択。

背景がゲームクリアになったら、スクリプトをすべて止める。

ゲームクリアになったら、ねこのスプライトも隠してうごきを止めるようにしよう。

ゲームクリアになった時に隠して、[スプライトの他のスクリプトを止める]

そして、かならず[隠す]とセットで、[表示する]でもう一度ねこがスタートした時に現れるようにしよう。 これでOKだよ!

・ゲームクリアの音楽を鳴らそう

つぎに、ゲームクリアになったらクリアの音が鳴るようにしよう!

まずは、ステージを選択。

つぎに音のライブラリーから選択をクリック。

音ライブラリーの中の、triumph追加しよう。

つぎに、ゲームクリアになった時のスクリプトに音を鳴らすスクリプトを追加。

これで、ゲームクリアになったら、音がなってすべてのスクリプトが止まるようになったね! これで、ゲームクリアのうごきは完成だよ! 実際にスタートしてためしてみよう!

チャプター13やり直しを作ろう

このチャプターのポイント

赤い溶岩に落ちてしまったらやり直しにしよう

・スタートに戻る

前のチャプターでゲームクリアができたので、こんどはゲームのやり直しを作ろう。 ねこが背景2と背景3の赤い溶岩に触れてしまったらミスで、ゲームをやり直せるようにしよう。 やり直しになったら、スタート地点に戻るようにするよ。

今回、やり直しになった時に実行したいスクリプトが複数あるので、まずは、ねこが赤い溶岩にふれたら、「ミス」というメッセージをおくれるようにしよう。

触れた時の色は背景2の溶岩の部分をクリックして設定するようにしよう。

色の指定は、次の図を参考に設定しよう。

  • 色:0
  • 鮮やかさ:100
  • 明るさ:100

そして、ミスを受け取った時に背景1にもどすようにしよう。 ステージを選択。

スクリプトエリアにブロックを追加していくよ。

これで、溶岩におちた時に背景1のスタートにもどるようになったね。

更に、音のライブラリーから[drip drop]の音の鳴らせるようしよう。

最後に、グリーンフラッグでも「ミス」のメッセージでも、背景1になった時に、いつでもねこが最初から動きはじめるように、[グリーンフラッグがクリックされたとき]を背景が [背景1 になったとき]に変えよう。

チャプター14BGMをつけよう

このチャプターのポイント

BGMをつけてゲームを楽しくしよう

・BGMをつけよう

ゲームの最中にBGMの音楽が流れるように設定していこう。

まずは、ステージを選択。

スクリプトエリアに、[ずっと~]と[おわるまで~の音を鳴らす]を追加して、dance magicの音が、BGMとしてずっと再生されるようにしよう。

これで、BGMの設定ができたね! ただし、ゲームをスタートしてゲームクリアかミスをした時に音がまざってしまうので、これはなおしておこう。

・音楽が重ならないようにしよう

音が重ならないようにするには、ゲームクリアやミスの音が鳴っている間は[dance magic]のBGMを止めよう。 BGMを止めるには「BGMストップ」という変数を作り、「BGMストップ」の変数が0のときだけBGMを鳴らすようにしよう。

まずは、「BGMストップ」の変数を作るよ。

そして、ゲームがスタートした時に、「BGMストップ」の変数を0にして、変数が0の間はずっとBGMがながれるようにしよう。

そして、BGMを止められるように、ゲームクリアとミスの音がながれる前に合図として、「BGMを止める」のメッセージをおくるようにしよう。

[~を送って待つ]は、メッセージをうけとったブロックの実行がすべておわるまで待つブロックだよ。 [~を送る]は、ほかのブロックが終わるのを待たずに実行がすすむよ。 [終わるまで ~] の音を鳴らすより先にすべての音を止めるが実行されるようにするために、[BGM止める を送って待つ]をつかっているよ。

「BGMを止める」というメッセージをうけとったらBGMが止まるようにブロックを追加しよう。 今鳴っているBGMをすぐに止めるためすべての音を止めるも一緒につかおう。

これで、BGMの設定も完成だ! 実際にゲームスタートしてみよう!

チャプター15最後に

・まとめ

ゲームが完成したね! はじめてのレッスンからどんどんむずかしくなってきたけれど、ブロックの意味やどうやったら動きが実行できるかを一つずつしっかりとおぼえていけば、今回作った本格的なゲームも作れるようになったよね。 これまで勉強したことをいかして、さらに難しいゲームやアニメーションにもとりくんでいくと、もっとプログラミングが楽しくなっていくよ! 今回のゲームも、時間がある人は、自分なりのゲームに改造してみよう。

これまで勉強したことから、追加できそうなヒントを出しておくね。

  • 敵のキャラクターを登場させる
  • 敵のキャラクターにぶつかった時にやり直しになるようにする
  • 背景3に自分なりに障害物を登場させてみる
  • 時間制限をつけてみる

といったことがあるよ!ゲームを改造して自分だけのゲームで楽しもう! 本当にここまでよくがんばったね! これまで勉強したことを活かして、もっともっとプログラミングとなかよくなっていこう!