Scratch

スクラッチプログラミング - 上下左右にスクロール！はいけいをうごかそう

プレイヤーのうごきにあわせて画面(がめん)をうごかすプログラムをつくります。つかうはいけいはひとつだけの、かんたんなスクロールです。ゲームづくりに応用(おうよう)してみてくださいね。

Pyxofy

May 1, 2022 • 5 min read

Photo by Ashin K Suresh / Unsplash

更新日：2023年12月27日

サンプルさくひんであそんでみよう

今回(こんかい)しょうかいするのは、上下左右のやじるしキーをつかって、はいけいをスクロールさせる方法(ほうほう)です。

ゲームのあそびかた

やじるしキーをおすと、はいけいがうごく
カギを見つけて宝箱(たからばこ)をあけたら、ゲームおわり

（みどりのはたをおして、スタートです。プロジェクトは、ScratchのPyxofyページでもごらんになれます。）

このきじをよむとわかること

はいけいをスクロールさせる方法(ほうほう)
変数(へんすう)のつかいかた
上下左右のあたりはんてい

上下左右にスクロールさせるプログラム

ではこれから、はいけいをスクロールさせるプログラムのつくりかたを説明(せつめい)していきます。プログラミングするスプライトは、「はいけい」と「プレイヤー」のふたつです。

はいけいをよういしよう

はじめに、ステージのサイズより大きいはいけいをえがいてください。ステージに設定(せってい)するはいけいは、うごかすことができません。スクロールさせたいときは、スプライトではいけいをつくりましょう。

みどりいろの四角(しかく)をえがく

はいけいの中に、木やかべなど、障害物(しょうがいぶつ)になるものをかきくわえてください。今回(こんかい)はこのあと、「いろ」であたりはんていをしていくので、枠線(わくせん)のいろを「黒(くろ)」でえがいてくださいね。

木とかべをえがく

はいけいは、かならずほかのスプライトよりもうしろがわに表示(ひょうじ)されるようにしましょう。

さいはいめんへいどうする

はいけいとしてつかうスプライトの用意(ようい)ができました！ステージよりサイズが大きいので、はしのほうにえがいた木などの障害物(しょうがいぶつ)は、ステージでは見えていませんね。

プレイヤーをよういしよう

つぎに、プレイヤーとしてつかう、四角(しかく)のスプライトをえがいてください。

ピンクいろの四角(しかく)をえがく

やじるしキーでそうさできるようにしましょう。

やじるしキーで上下左右にそうさする

「ずっと」ブロックの中に「もしやじるしキーがおされたなら」ブロックを組み合わせる

じつは、やじるしキーでうごかすのはプレイヤーではありません。プレイヤーの位置(いち)は、ずっとステージのまん中のままです。では「やじるしキーでなにをうごかすのか？」というと、はいけいのスプライトです。

へんすうをつくろう

はいけいをうごかすことで、まるでプレイヤーが移動(いどう)しているように見せることができますよ。そのために、変数(へんすう) をつかいます。上下左右にうごかせるように、変数(へんすう)をふたつつくりましょう。

「x」
左右にうごかすための変数(へんすう)
「y」
上下にうごかすための変数(へんすう)

変数(へんすう)をつかってはいけいをうごかすためのかんがえかたは、つぎのとおりです。

プレイヤー
…やじるしキーがおされたら、変数(へんすう)をかえる
はいけい
…変数(へんすう)のぶんだけ、はいけいをうごかす

1. やじるしキーがおされたら、へんすうをかえる

やじるしキーがおされたら、変数(へんすう)がかわるようにしましょう。変数(へんすう)の値(あたい)はスクロールするスピードになります。ゆっくりうごかしたいときは小さい数(かず)を、はやくうごかしたいときは大きい数(かず)を入れてください。

もし上下のやじるしキーがおされたなら、変数(へんすう)yをかえる
もし左右のやじるしキーがおされたなら、変数(へんすう)xをかえる

「もしやじるしキーがおされたなら」ブロックの中に変数の値を変えるブロックを追加する

変数(へんすう)は、つかうまえに初期化(しょきか)しておくのをわすれないようにしてくださいね。

変数(へんすう)yとxを初期化(しょきか)する

2. へんすうのぶんだけ、はいけいをうごかす

はいけいは、ふえたりへったりした変数(へんすう)とは逆(ぎゃく)の方向(ほうこう)にうごかします。そうすると、プレイヤーがやじるしキーの方向(ほうこう)へすすんでいるように見せることができますよ。

座標(ざひょう)を、変数(へんすう)とは逆(ぎゃく)むきの値(あたい)にする

やじるしキーをおすと、はいけいが上下左右にうごくようになりました！でもこのままだと、やじるしキーをおしつづけたときに、はいけいの外(そと)までプレイヤーが出ていってしまいます。

プレイヤーがはいけいの外(そと)に出ていかないようにするために、「いろ」であたりはんていをしましょう。

あたりはんてい

今回(こんかい)は「黒(くろ)」にふれたかどうかで、あたりはんていをしていきます。ステージに、黒(くろ)のはいけいを設定(せってい)してください。

はいけいをえがく

黒(くろ)にふれていないときだけ、やじるしキーでうごかせるようにしましょう。

やじるしキーがおされていて、かつ、黒(くろ)にふれていないなら、変数(へんすう)をかえる

やじるしキーをおしつづけても、プレイヤーがはいけいより外(そと)へうごかないようになりました！黒(くろ)い枠線(わくせん)でえがいた、木やかべにもぶつかるようになりましたよ。

でも、また問題(もんだい)が！！黒(くろ)にふれるとやじるしキーがきかなくなって、それいじょううごかせなくなってしまいました。これを解決(かいけつ)するために、プレイヤーの上下左右、それぞれであたりはんていができるようにしましょう。

上下左右のいろで、あたりはんていをする

プレイヤーに、あたりはんていをするためのコスチュームをつくります。上下左右のどこが黒(くろ)にふれているのかがわかるように、4つのちがういろをつかっていきますよ。

コスチュームをふくせいする
上下左右のはしに、べつのいろの四角(しかく)をえがく
コスチュームのなまえを「あたりはんてい」にする

黒(くろ)にふれているかどうかを、上下左右それぞれでのいろでチェックできるようにしましょう。

やじるしキーがおされていて、かつ、上下左右のいろが黒(くろ)にふれていないなら、変数(へんすう)をかえる

あたりはんていのコスチュームを見えなくする

あたりはんていのコスチュームを見えない状態(じょうたい)にしてうごかせるようにしましょう。コスチュームのブロックを「ずっと」の中に追加(ついか)してください。

いちばん上に、「コスチュームを（あたりはんてい）にする」
いちばん下に、「コスチュームを（コスチューム1）にする」

プログラムかんせい

はいけいを上下左右にスクロールさせるプログラムができました！

まとめ

ここまで、上下左右のやじるしキーをつかって、はいけいをスクロールさせる方法(ほうほう)をしょうかいしました。

ステージより大きくえがいたはいけいを、変数(へんすう)をつかってうごかすだけの、かんたんなスクロールです。すきなはいけいをえがいて、あそんでみてくださいね！

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！