スクラッチを始めよう!番組のスクラッチワールドで遊ぶ

番組を見る

No.14 カエルを家に帰せ

カエルが家に帰ろうとしているが、画面の右はじに行くとつまってしまう。このままではカエルが家に帰れない。画面を横スクロールさせて、カエルを家に帰すのだ。

家に帰るカエルの世界 ~カエルを家に帰せ~

<このスクラッチ・ワールドについて>

今回は、画面を横スクロールさせるのがねらいだ。
横スクロールは、自分があやつるキャラクターなどは動かさずに、背景を動かすことで、キャラクターが移動しているように見せるテクニックで、これができれば広い世界を表現できるようになる。アクションゲームやシューティングゲームでよく見るよね。
でも、本来は、スクラッチに背景をスクロールさせる機能はないんだ。 そこで、今回は、地形をスプライトで表現して、そのスプライトを動かすことで横スクロールを表現している。
これを使えば、みんなが作るスクラッチの世界がきっと大きく広がるはずだから、ぜひ、マスターしてね。

14-1 「横スクロールさせよう」

前準備

スクラッチサイトにアクセスして、サインインしよう。
(まだ自分のアカウントを作っていない人は、「スクラッチのはじめ方」にしたがってアカウントを作ってね)
why_programming_14のスタジオ(※NHKサイトをはなれます)を見てみよう。

why_programming_14のスタジオで、プロジェクト「14_1_横スクロールさせよう」を選び、「中を見る」、次に「リミックス」をおして、自分のアカウントにコピーしてね。
(コピーの仕方は「自分の作品を作ろう!リミックス(改造)をする」も読んでね)

ラム

まずはカエルの世界で遊ぼう

イメージ画像

まずは、この世界を遊んでみましょう。カエルを左向き矢印や右向き矢印で動かして、上矢印でジャンプ!このジャンプのしかたは、「#8カエルをジャンプさせろ」でやったわよね。自由に画面の中を動かせるけれども、画面のはしにいったら、つまっちゃうわね。

ラム

イメージ画像

横スクロールって知ってる?
キャラクターを動かすときに、キャラクターではなく、背景(はいけい)を動かして広い世界を表すやり方。
キノコをとるとちょびヒゲのおじさんが大きくなる、あのゲームでも有名よね。この横スクロールをやってみましょう。
横スクロールさせるには、キャラクターをとめたまま、背景となる地形を動かせばいいの。
たとえば、カエルを右に5動かしたいときは、横スクロールでは、地形を左に5動かせばいい。反対に、カエルを左に動かしたい場合は、地形を右に動かすってわけ。

ラム

カエルを動かさず、動いた距離を記録する

イメージ画像

カエルを動かすプログラムは、
・もし、右矢印キーが押されたなら
・X座標を5ずつ変える

になってるわね。でも、カエルは動かさなくていいから、x座標を5ずつ変える、はいらないわね。
でも、その分、地形を動かさないといけないから、カエルがどれだけ右に進んだのかは記録しておきたいわね。

そんなときに使うのは変数。
「データ」のカテゴリーから「変数を作る」を選んで、名前を入力しましょ。
わかりやすく“進んだ距離(きょり)”という名前にしましょ。
そして、”x座標を5ずつ変える“のかわりに、”進んだ距離を5ずつ変える“という命令を入れておきましょ。

これで記録できるわね。もちろん、旗を押(お)したときには、「進んだ距離を0にする」のをわすれないでね。

ラム

「進んだ距離(きょり)」を使って地形を動かす

イメージ画像

地形1のプログラムをみて。
x座標を0にする、とあるでしょ。でも、この地形1を動かしたいのよね。
カエルが右に進んだ距離がわかっているのだから、その距離だけ、地形を左に動かせばよい。左に動かすにはへらさないといけないから、進んだ距離を最初の位置の0から引いてあげればよいのよ。すると
・ずっと
・地形のX座標を 0-進んだ距離 にする
とすればいい。
この“ずっと”はわすれがちだけど、とても大事。
矢印キーをおすたびに「進んだ距離」はどんどん変わるから、つねに“今”の「進んだ距離」を地形の位置から引いてあげないといけないのよ。
そうそう、番組でははぶいたけれど、かんばんも地形と同じしくみになっているから、同じようにプログラムを変えるのを忘れないでね。
どう?うまく動いたでしょ。
え?次の地形がでてこない?
じゃ、次の地形も動かしていきましょう。続きは14_2で。

ラム

今回のまとめ

  • カエルを動かさず、背景である地形を動かすのが“横スクロール”
  • カエルを動かす代わりに、動いた距離を記録しておいて、地形の位置からそれを引けばよい。
  • “ずっと”を使って、「進んだ距離」を常に地形の位置に反映するのを忘れないでね。

今回のリミックス

・カエルがもっと早く動くようにしてみよう

14-2「すべての地形を横スクロールさせよう」

前準備

スクラッチサイトにアクセスして、サインインしよう。
(まだ自分のアカウントを作っていない人は、「スクラッチのはじめ方」にしたがってアカウントを作ってね)
why_programming_14のスタジオ(※NHKサイトをはなれます)を見てみよう。

why_programming_14のスタジオで、プロジェクト「14_2_すべての地形を横スクロールさせよう」を選び、「中を見る」、次に「リミックス」をおして、自分のアカウントにコピーしてね。
(コピーの仕方は「自分の作品を作ろう!リミックス(改造)をする」も読んでね)

ラム

それぞれの地形のx座標を設定する

イメージ画像

あれ、すべての画面が重なっちゃってるわね。2番目の地形、地形2のプログラムを見て。
・ずっと
・x座標を 0-進んだ距離 にする
これは14_1で地形1用に作ったプログラムそのままね。
“0”は地形1が最初にある場所。それからカエルが進んだ距離を引いて、地形を動かしている。ここが“0”のままだから、地形2が地形1と同じ場所になっちゃうのよ。

ラム

イメージ画像

左を見て。スクラッチの画面の横はばは480だから、地形2の中心の位置は480になるのよ。
だからプログラムには、“0”の代わりに“480”を入れればいいの。
すると、地形3は480×2、地形4は480×3となるはずよね。それぞれのプログラムにその数を入れればいいの。さあ、これで横スクロールは完成。遊んでみてね。

ラム

さらに上を目指すために その1

イメージ画像

さて、横スクロール、できたかな。すごいでしょ。でも、実はこれはまだまだよくできるのよ。たとえば、画面のはしっこをよーく見て。実はここにほかの地形の左はしが表示されちゃっているの。
スプライトのX座標が大きすぎると画面の外に消えてしまうから、ここにはしが残って見えるようになっているの。
でも、横スクロールさせるためには、ちょっとじゃまね。これをどうすれば解決できるのか?いろいろなやり方があるから考えてみてね。

ラム

さらに上を目指すために その2

イメージ画像

また、ほかのいろんなゲームみたいに別のキャラクターを出したいなんてことがあるわよね。これはどうしたらいいかしら?
地形3にいるヘビ。実はこれは地形として表現していて地形のコスチュームを切りかえることでアニメーションさせているの。でも、これだとキャラクターを歩かすことはできないわよね。では、どうしたらいいか?

ヒントは、「家→」というかんばんと家の前に出てくるカエルの家族よ。プログラムを見ると、地形と同じように、それぞれの最初の位置からカエルの進んだ距離を引いているの。

それぞれのキャラクターが進んだ距離を表す変数を作って、それをたしたり、へらしたりしてあげれば、そのキャラの移動が表現できるはずよね。よーく考えて、やってみて!

ラム

今回のまとめ

  • それぞれの地形の最初の位置を指定する。
    スクラッチの画面の横はば分、480ずつ変えていくとよい。
  • はしに見える他の地形をかくす、ほかのキャラクターを動かすなど、もっと工夫ができる。

今回のリミックス

・地形3にいるヘビに触れるとゲームオーバーになるようにしてみよう。
・ハエがとんでいて、カエルが食べると大きくなるようにしてみよう。