前のページへ戻る

キミもレスキュー隊に入隊

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で。

ラム

今回のまとめ

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

今回のリミックス

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