スクラッチプログラミング - 上下左右にスクロール!はいけいをうごかそう
プレイヤーのうごきにあわせて画面(がめん)をうごかすプログラムをつくります。つかうはいけいはひとつだけの、かんたんなスクロールです。ゲームづくりに応用(おうよう)してみてくださいね。
更新日:2023年12月27日
サンプルさくひんであそんでみよう
今回(こんかい)しょうかいするのは、上下左右のやじるしキーをつかって、はいけいをスクロールさせる方法(ほうほう)です。
ゲームのあそびかた
- やじるしキーをおすと、はいけいがうごく
- カギを見つけて宝箱(たからばこ)をあけたら、ゲームおわり
(みどりのはたをおして、スタートです。プロジェクトは、ScratchのPyxofyページでもごらんになれます。)
このきじをよむとわかること
- はいけいをスクロールさせる方法(ほうほう)
- 変数(へんすう)のつかいかた
- 上下左右のあたりはんてい
上下左右にスクロールさせるプログラム
ではこれから、はいけいをスクロールさせるプログラムのつくりかたを説明(せつめい)していきます。プログラミングするスプライトは、「はいけい」と「プレイヤー」のふたつです。
![背景とプレイヤーの完成プログラム 背景とプレイヤーの完成プログラム](https://www.pyxofy.com/content/images/2022/04/07-01-scratch-programming-scroller.png)
はいけいをよういしよう
はじめに、ステージのサイズより大きいはいけいをえがいてください。ステージに設定(せってい)するはいけいは、うごかすことができません。スクロールさせたいときは、スプライトではいけいをつくりましょう。
- みどりいろの四角(しかく)をえがく
![ステージのサイズより大きい緑色の四角 ステージのサイズより大きい緑色の四角](https://www.pyxofy.com/content/images/2022/04/07-02-scratch-programming-scroller.png)
はいけいの中に、木やかべなど、障害物(しょうがいぶつ)になるものをかきくわえてください。今回(こんかい)はこのあと、「いろ」であたりはんていをしていくので、枠線(わくせん)のいろを「黒(くろ)」でえがいてくださいね。
- 木とかべをえがく
![黒い枠線で描いた障害物となる木や壁 黒い枠線で描いた障害物となる木や壁](https://www.pyxofy.com/content/images/2022/04/07-03-scratch-programming-scroller.png)
はいけいは、かならずほかのスプライトよりもうしろがわに表示(ひょうじ)されるようにしましょう。
- さいはいめんへいどうする
![表示位置はステージの中央の最背面 表示位置はステージ中央の最背面](https://www.pyxofy.com/content/images/2022/04/07-04-scratch-programming-scroller.png)
はいけいとしてつかうスプライトの用意(ようい)ができました!ステージよりサイズが大きいので、はしのほうにえがいた木などの障害物(しょうがいぶつ)は、ステージでは見えていませんね。
プレイヤーをよういしよう
つぎに、プレイヤーとしてつかう、四角(しかく)のスプライトをえがいてください。
- ピンクいろの四角(しかく)をえがく
![表示位置はステージの中央 表示位置はステージの中央](https://www.pyxofy.com/content/images/2022/04/07-05-scratch-programming-scroller.png)
やじるしキー でそうさできるようにしましょう。
- やじるしキーで上下左右にそうさする
![「ずっと」ブロックの中に「もしやじるしキーがおされたなら」ブロックを組み合わせる 「ずっと」ブロックの中に「もしやじるしキーがおされたなら」ブロックを組み合わせる](https://www.pyxofy.com/content/images/2022/04/07-06-scratch-programming-scroller.png)
じつは、やじるしキーでうごかすのはプレイヤーではありません。プレイヤーの位置(いち)は、ずっとステージのまん中のままです。では「やじるしキーでなにをうごかすのか?」というと、はいけいのスプライトです。
へんすうをつくろう
はいけいをうごかすことで、まるでプレイヤーが移動(いどう)しているように見せることができますよ。そのために、 変数(へんすう) をつかいます。上下左右にうごかせるように、変数(へんすう)をふたつつくりましょう。
- 「x」
左右にうごかすための変数(へんすう) - 「y」
上下にうごかすための変数(へんすう)
![ブロックパレットに変数「x」「y」が表示されている ブロックパレットに変数「x」「y」が表示されている](https://www.pyxofy.com/content/images/2022/04/07-07-scratch-programming-scroller.png)
変数(へんすう)をつかってはいけいをうごかすためのかんがえかたは、つぎのとおりです。
- プレイヤー
…やじるしキーがおされたら、変数(へんすう)をかえる - はいけい
…変数(へんすう)のぶんだけ、はいけいをうごかす
1. やじるしキーがおされたら、へんすうをかえる
やじるしキーがおされたら、変数(へんすう)がかわるようにしましょう。変数(へんすう)の値(あたい)はスクロールするスピードになります。ゆっくりうごかしたいときは小さい数(かず)を、はやくうごかしたいときは大きい数(かず)を入れてください。
- もし上下のやじるしキーがおされたなら、変数(へんすう)yをかえる
- もし左右のやじるしキーがおされたなら、変数(へんすう)xをかえる
![「もしやじるしキーがおされたなら」ブロックの中に変数の値を変えるブロックを追加する 「もしやじるしキーがおされたなら」ブロックの中に変数の値を変えるブロックを追加する](https://www.pyxofy.com/content/images/2022/04/07-08-scratch-programming-scroller.png)
変数(へんすう)は、つかうまえに初期化(しょきか)しておくのをわすれないようにしてくださいね。
- 変数(へんすう)yとxを初期化(しょきか)する
![変数「yを0にする」「xを0にする」 変数「yを0にする」「xを0にする」](https://www.pyxofy.com/content/images/2022/04/07-09-scratch-programming-scroller.png)
2. へんすうのぶんだけ、はいけいをうごかす
はいけいは、ふえたりへったりした変数(へんすう)とは逆(ぎゃく)の方向(ほうこう)にうごかします。そうすると、プレイヤーがやじるしキーの方向(ほうこう)へすすんでいるように見せることができますよ。
- 座標(ざひょう)を、変数(へんすう)とは逆(ぎゃく)むきの値(あたい)にする
![「座標を()マイナス変数にする」 「座標を()マイナス変数にする」](https://www.pyxofy.com/content/images/2022/04/07-10-scratch-programming-scroller.png)
やじるしキーをおすと、はいけいが上下左右にうごくようになりました!でもこのままだと、やじるしキーをおしつづけたときに、はいけいの外(そと)までプレイヤーが出ていってしまいます。
![プレイヤーが背景からはみ出している様子 プレイヤーが背景からはみ出している様子](https://www.pyxofy.com/content/images/2022/04/07-11-scratch-programming-scroller.png)
プレイヤーがはいけいの外(そと)に出ていかないようにするために、「いろ」であたりはんていをしましょう。
あたりはんてい
今回(こんかい)は「黒(くろ)」にふれたかどうかで、あたりはんていをしていきます。ステージに、黒(くろ)のはいけいを設定(せってい)してください。
- はいけいをえがく
![黒い四角で描いた背景 黒い四角で描いた背景](https://www.pyxofy.com/content/images/2022/04/07-12-scratch-programming-scroller.png)
黒(くろ)にふれていないときだけ、やじるしキーでうごかせるようにしましょう。
- やじるしキーがおされていて、かつ、黒(くろ)にふれていないなら、変数(へんすう)をかえる
![変数をかえる条件に「黒色に触れたではない」を追加する 変数をかえる条件に「黒色に触れたではない」を追加する](https://www.pyxofy.com/content/images/2022/04/07-13-scratch-programming-scroller.png)
やじるしキーをおしつづけても、プレイヤーがはいけいより外(そと)へうごかないようになりました!黒(くろ)い枠線(わくせん)でえがいた、木やかべにもぶつかるようになりましたよ。
![黒色に触れると動きが止まる 黒色に触れると動きが止まる](https://www.pyxofy.com/content/images/2022/04/07-14-scratch-programming-scroller.png)
でも、また問題(もんだい)が!!黒(くろ)にふれるとやじるしキーがきかなくなって、それいじょううごかせなくなってしまいました。これを解決(かいけつ)するために、プレイヤーの上下左右、それぞれであたりはんていができるようにしましょう。
上下左右のいろで、あたりはんていをする
プレイヤーに、あたりはんていをするためのコスチュームをつくります。上下左右のどこが黒(くろ)にふれているのかがわかるように、4つのちがういろをつかっていきますよ。
- コスチュームをふくせいする
- 上下左右のはしに、べつのいろの四角(しかく)をえがく
- コスチュームのなまえを「あたりはんてい」にする
![当たり判定に使うコスチューム 当たり判定に使うコスチューム](https://www.pyxofy.com/content/images/2022/04/07-15-scratch-programming-scroller.png)
黒(くろ)にふれているかどうかを、上下左右それぞれでのいろでチェックできるようにしましょう。
- やじるしキーがおされていて、かつ、上下左右のいろが黒(くろ)にふれていないなら、変数(へんすう)をかえる
![変数をかえる条件に「上下左右の色が黒色に触れたではない」を追加する 変数をかえる条件に「上下左右の色が黒色に触れたではない」を追加する](https://www.pyxofy.com/content/images/2022/04/07-16-scratch-programming-scroller.png)
あたりはんていのコスチュームを見えなくする
あたりはんていのコスチュームを見えない状態(じょうたい)にしてうごかせるようにしましょう。コスチュームのブロックを「ずっと」の中に追加(ついか)してください。
- いちばん上に、「コスチュームを(あたりはんてい)にする」
- いちばん下に、「コスチュームを(コスチューム1)にする」
![「ずっと」ブロックの中にコスチュームブロックを二つ追加する 「ずっと」ブロックの中にコスチュームブロックを二つ追加する](https://www.pyxofy.com/content/images/2022/04/07-17-scratch-programming-scroller.png)
プログラムかんせい
はいけいを上下左右にスクロールさせるプログラムができました!
![プレイヤーの完成プログラム プレイヤーの完成プログラム](https://www.pyxofy.com/content/images/2022/04/07-18-scratch-programming-scroller.png)
![](https://www.pyxofy.com/content/images/2024/07/cover-page-320-4.png)
Pyxofy (著)「きょうからはじめるスクラッチプログラミング入門」
Pyxofy が Scratch の電子書籍を出版しました!Kindle・Apple Books からご購入ください。
まとめ
ここまで、上下左右のやじるしキーをつかって、はいけいをスクロールさせる方法(ほうほう)をしょうかいしました。
ステージより大きくえがいたはいけいを、変数(へんすう)をつかってうごかすだけの、かんたんなスクロールです。すきなはいけいをえがいて、あそんでみてくださいね!
最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!