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

programmingSchool

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

レッスン2レースゲームを作ろう!!

チャプター01はじめに

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

自動で車を走らせてカーレースをさせてみよう

完成形を見てみよう

まずは、今回のレッスンでつくるものを見ていこう。 今回は、車が用意されたコースを自動で走るレースゲームを作っていくよ。

背景はいけいの灰色の部分がコースになっているので、コースにそって、車が走るようになったら完成だよ! さいごに、自分でつくった車を走らせたり、 コースをつくったりもするので、たのしんでいこう!!

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

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

アニメーションにつかう背景・スプライトを用意して設定していこう

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

・背景を確認しよう

次に、背景を確認しよう。 合計2つ設定されていればOKだよ。

完成だね!

ここまで、みんなの画面でもやってみよう!

チャプター03スタート地点をきめよう

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

車をスタート地点にうごかして発車させよう

・スタート地点をきめよう

まずは、車のスタート地点を決めてみよう。 今回スタート地点はコースの下側にしてみましょう。

スタート地点を決めたら、車のスプライトをうごかしスタート地点におこう。 そして、コースのサイズに合わせて、車のサイズを調整ちょうせいしよう

スタートの合図であるグリーンフラッググをおした時に、 今いる位置に車のスプライトをうごかしたいので、 イベントの中にある[グリーンフラッグがおされた時]と [x座標を~、y座標を~にする]のブロックをつかって スタートの合図で車のスプライトがスタート地点に行くようにしましょう。

今回は、x座標を0、y座標を-138 にしてみよう。 動きの中にある[x座標を~、y座標を~にする]の ブロックに書かれたかずは、 今スプライトがある位置になっているので、ステージ上でスプライトをうごかして数をきめるとわかりやすいよ! 数はスクリプトエリアのなかで変えることもできるよ。

さらに、今車は右をむいているけれど、べつのむきを向いた状態じょうたいではコースを外れてしまうので、スタートの合図で右をむくようにもしてみましょう。 これには、うごきの中にある90度に向けるのブロックをつかうよ! このブロックもセットしてみよう。

数字をえることでむきを設定せっていすることができるよ。 90度が右、-90度が左0度が上、180度が下になっているよ

チャプター04車をうごかそう

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

車をコースに合わせて動かそう

・車を前に動かそう

・車を前に動かそう スタート地点から、まずは車をそのまままっすぐ走らせてみましょう。 これは、これまでのレッスンでもでてきね。制御せいぎょの中のずっとと、動きの中の10歩動かすをつかって車が前にすすむようにしてみましょう。 10歩だと少し動きが大きいので、 今回は数を3に変えてみてね。

スクリプトができたらリーンフラッグして車を走らせてみよう!

車はうごいたけど、コースから 外れて行ってしまったね。

車がコースから外れないようにするには、どうしたらいいかを考えていこう。

・車をコースに合わせてうごかそう

コースに合わせて車をうごかすために、 うごきの中にある15度回すというブロックを使つかっていこう

右と左それぞれに向いた矢印やじるしが書かれているね。 これは、右の方に回転かいてんするか、左の方に回転するかのちがいがあるよ。 それぞれのブロックをクリックして、どっちにがるのかをためしてみよう。

今回コースを左周ひだりまわりに車をうごかしたいので、左の矢印が書かれた方をつかっていこう。

ちなみに、どちらのブロックをクリックしても車のまんなかの黄色い部分ぶぶんはうごかなかったね。 この15度回すのブロックはスプライトの中心点をじくに回転するのでおぼえておこう!

つぎに、左に回るタイミングをきめよう。 今回はコースから外れた茶色のところに はいったら、左に回したいので、 制御せいぎょの中にあるもし~ならの ブロックを使つかて左に回る タイミングをきめよう さっきうごかした左に 15度回すのブロックと組み合わせてうごきを作っていこう。

つぎに茶色のところに入った時という 指示しじを作りたいので、 調しらべるの中にある~色に触れたというブロックをつかって スプライトが茶色のところにふれた時 というブロックを作ろう。

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

色:8鮮やかさ:62明るさ:61

これで、~色にふれたら、左に回すというブロックが完成かんせいだね。 そして、さいごに、今回は左に回す角度かくどは 10度に変更変更へんこうして完成だ! グリーンフラッグをおしてスタートしてみよう!

あれ、車の向きは変わるようになったけど、なんだかへんなうごきをしてるね。もう少し変更へんこう必要ひつようだね

チャプター05中心点をめよう

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

回転かいてんする時の中心点をえることでコースに合ったうごきにしよう

・中心点の変更へんこう

コースから外れた時に車が回転するようになったけど、どうにもうごきがおかしかったね。 これは、車が回転する時のじくを変えることでかいけつすることができるよ!

まずは、今の中心点ちゅうしんてんを見ていこう。

絵をかくところの中心に中心点があるよ。 今は車でかくれているので、 ずらして確認かくにんしよう。 図のように、中心点が車の後ろあたりにくるように 調整ちょうせいしてね。中心点とは、画像がぞうの中心となる点で、 ここを中心に画像が回転するよ。

絵が小さかったら大きさを 少し大きくしてみよう

10度回すのブロックが実行じっこうされたとき、 車はこの中心点をじく軸にして回転します。 コースを外れた時に、車の先頭の向きを左に回転させてあげれば、 コースに合ったうごきになるね。 そのときは、中心点を車のおしりのところにしてあげることで、車が正しく回るようになるよ。 そして、もう1度右上の十字をクリックすると中心点が確認かくにんできます。

車のおしりのところに中心点がかわったら、グリーンフラッグをしてスタートしてみましょう。

一周いっしゅうするようになったら、ここまでは完成だよ!

チャプター062つの条件じょうけんで車をうごかそう

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

もし~ならのブロックを2つ、つかってべつ条件じょうけんを 組み合わせてうごきを作ろう

・条件の追加ついか

つぎにべつのコースを走らせてみましょう。

車のスプライトは今のものをそのままつかうので、背景だけ 2つ目の背景に変更しましょう。

こんどは、複雑ふくざつなカーブのあるコースになったよ。 スタート地点はまえの背景とかわってないから、このままとりあえずゲームをスタートしてみよう途中とちゅうまではいいけど、 車が緑色みどりいろ芝生しばふに入って、コースを一周いっしゅうしないね。

車がこのコースをちゃんとたどってくれるようにするには、どうしたらいいかな

茶色の部分ぶぶんに入ったら左に回転するようにしているから、 こんどは、緑の芝生しばふの中に入ったら少し右に回転かいてん させてコースにもどしてあげることで、コースから外れないようにしてみよう。 今は背景の設定せっていをしているがめんだったから、 車のスプライトをクリックして、スクリプトのタブをひらこう。

制御制御せいぎょの中からもし~なら、 しらべるの中から~色に触れたら、 うごきの中から右に15度回すをつかって、 先に作ったスクリプトにうごきを追加ついかしましょう。 先に作ったスクリプトと同様どうように、回す角度かくどを10度にして、 色は芝生しばふをクリックしてみどり変更へんこう変更しましょう。

いろの指定していは、つぎのとおりにしよう

色:36鮮やかさ:79明るさ:67

これでうごかしてみましょう。 ふくざつなコースも一周いっしゅう するようになったね

チャプター07オリジナルの車を作ろう

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

自分でスプライトをつくって車がレースをするようにしてみよう

・スプライトをつくろう

ここまで車がコースに合わせて自動じどうでうごくようになったね。 今は、さいしょに用意よういした車だけが走っているだけだから、 もう1台、じぶんでつくったべつの車を走らせてみよう!

まず、つかうスクリプトは同じだから、さいしょのスプライトを複製ふくせいしよう 上のバーの複製ふくせいのボタンを クリックして、車のスプライトの上でもういちどクリックします。

そうすると同じスクリプトをもった スプライトが複製ふくせいされるよ

そして、複製されたスプライトを選択せんたくしている状態じょうたいで、コスチュームのタブをひらこう

つぎに、新しいコスチュームと書かれたところのふでのマークをクリックしてみよう。 そうすると、じぶんで絵がかけるようになるから、自由じゆうに車をかいてみよう

今回はコスチュームのぶぶんからオリジナルの 絵を書いていくけれど、 左下の新しいスプライトを追加ついか する部分ぶぶんにもおなじふでのマークがあってオリジナルのスプライトをつくることができるよ。

コスチュームの左側ひだりがわにある、 道具どうぐをつかって自分のすきなように車の絵をかいてみよう。

この時、いくつか注意ちゅういしてほしいことがあるので、気をつけてみよう!

自分で書いた車がコースに入るように縮小しゅくしょうボタンでサイズを合わせよう 右にかうスクリプトなので、右向みぎむきの絵にしよう 前のスプライトと同じように、中心点ちゅうしんてんはおしりのところにしよう

できたら、スタートさせて実際じっさいに うごかしてみよう! こんかい、レースゲームなので、 テキストでは、じぶんが作った車の 歩数を10歩にかえてスピードを あげてみるよ!

車がはやくうごくようになって、レースが完成かんせいしたよ

もし、うまくうごかない時やうごきがへんな時には、うごく時の歩数や回転かいてんする角度かくど の数をかえてコースにあったうごきになるように、ためしていこう!

チャプター08オリジナルの背景はいけいを作ろう

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

オリジナルの背景を作って自分だけのコースで車を走らせよう

・背景を作ろう

こさいごに自分でコースをつくってみよう 左下の新しい背景の左から 2番目のふでのボタンをクリックしよう そうすると今の背景がきえて、 あたらしい背景をつくれるようになったよ

まずは、車がはしるコースを作ってみよう テキストでは、ふでのツールをクリックして、 線の太さを太く設定せっていしよう そして、コースの色は グレーを選択せんたくしてみよう

もちろん書いたものをけしたり、 やりなおしたりすることもできるから、自由じゆうにかいてみてね!

とちゅうで切れないように線をつないで 一周いっしゅうできるようなコースにしよう。 そして、コースを作ったら、 つぎにりつぶしの道具どうぐを つかって、外側そとがわ内側うちがわに色をつけてあげましょう。

完成したらこんどは車の スプライトの位置いちをきめていこう!

さいしょにやったように、 まずはスプライトをうごかして位置いちを きめたあとに、うごきの中にあるx座標を~、y座標を~をつかってスタートの時の位置をきめよう。 元からあったスクリプトとれ替えよう

どちらのスプライトも今のコースでのスタート位置いちにつくように変更へんこうできたらスタートまではだよ! ただ、これでグリーンフラッグを おしても、うまくコースをまわって くれないね。

・コースに合わせて条件じょうけん変更へんこうしよう

こコースをかえたらうまく車が はしってくれなくなってしまったね。 これは、もし~ならの色の条件じょうけんがかわってしまったからだ! さいしょに変更へんこうしたときと おなじように、色の条件じょうけん変更へんこうしてみよう。

コースによっては、歩数は角度かくどをかえないとコースを外れてしまうから、 数をかえてためしてみよう!

コースに合わせて車がうごくようになったかな! これで、レースゲームは完成かんせいだよ!

チャプター09最後さいご

さいごにここまで勉強勉強した ことをまとめておさらいしてみよう。 もし~ならをつかうことで、条件じょうけんをきめて、うごきをつくることができたね。

また、複数ふくすう条件じょうけんをきめることで、複雑ふくざつ 複雑なうごきもつくることができたね。 この条件じょうけんをつかって、このあともいろいろなうごきをつくっていくことになるから、よくおぼえておこう! 自分のしたいうごきを作るためには、 「どうなった時に、どうするか」を頭のなかで整理せいりしてスクリプトをつくっていこう。

スプライトや背景は自分で すきなようにつくることができたね。 Scratchでは、こんなふうに、じぶんで考えたことをすぐにカタチにできるから世界せかいに1つだけの自分の作品さくひん を作ってみよう!