HOME技術レッツ!スクラッチレッツ!スクラッチ (5) インベーダーゲームをつくろう ― 画面にプレイヤーを表示しよう

レッツ!スクラッチ (5) インベーダーゲームをつくろう ― 画面にプレイヤーを表示しよう

さあ、ゲームの設計もかんたんですが、おわりました。
いよいよプログラミングをしていきましょう!

最初は、画面を用意して、プレイヤーを表示するところまでをやっていきます。

画面の背景を指定しよう!

まずは画面を用意します。
今は画面の背景は真っ白です。
これでは味気ないので、インベーダーゲームらしく、宇宙の背景にしてみましょう。

スプライトペインの右側に、「ステージ」と表示されていると思います。
この下の丸いアイコンにマウスカーソルをもっていくと、「背景を選ぶ」と表示されて、メニューが4つ表示されます。

このうちの一番下の虫めがねのようなアイコンをクリックしましょう。

「背景を選ぶ」という画面に切り替わります。
「宇宙」というボタンを選ぶと、宇宙に関係する背景のみが現れます。
その中から、自分の気に入った背景画面を選びましょう。
ここでは、「Stars」を選びました。

なお、背景は自分でつくったり、画像をとりこんだりすることもできます。ここではスクラッチで用意されている画像をつかいます。

背景を選ぶと、ステージペインの背景も変わります。
宇宙っぽくなりましたね?

プレイヤーを設定しよう!

次はプレイヤーの画像を変えます。
今、スプライトペインには、ネコのようなキャラクターが表示されていると思います。
でも、宇宙でインベーダーを倒すゲームなので、動物ではなくロケットにしたいですよね。
ネコをロケットに変えてみましょう。

スプライトペインに表示されているネコをクリックします。

「コスチューム」タブをクリックします。
ネコの絵が大きく表示されます。

左下のアイコンにマウスカーソルをもっていくと、メニューが4つ表示されます。
一番下の虫めがねのアイコンをクリックします。

「コスチュームを選ぶ」画面になります。
「すべて」を選んで、ロケットっぽいイラストを探します。
見つかりました!

クリックすると、スプライトペインやステージペインのネコの絵がロケットに変わります。

ちょっと大きいけど、大きさは後で調整するとして、今はこのままでいきましょう。

ロケットのサイズを調整しよう!

まず、「コード」タブに切り替えます。

次に、ロケットの初期設定をします。
「初期設定」とは、「ゲームをスタートさせたときの、一番最初の状態」という意味です。
例えば、ロケットの大きさや、最初に表示する位置などのことです。

初期設定をするには、左側のブロックパレットから、「イベント」をクリックします。

「イベント」のブロックが表示されるので、

というブロックをブロックパレットから、スクリプトエリアまで動かします。
動かすときは、動かしたいブロックの上でマウスの左クリックを押したまま、スクリプトエリアまでブロックを動かしてから左クリックを放します。

なぜ、この旗のマークのブロックが初期設定なのか、というと、スクラッチではゲームを最初の状態に戻すときに右上の旗のマークをクリックする、というルールになっているからです。
旗のマークをクリックすると、リセットされて最初の状態に戻る、と覚えておきましょう。

次に、ブロックパレットの左側から「見た目」をクリックします。

「大きさを100%にする」というブロックをスクリプトエリアまで動かします。

ここで、「大きさを100%にする」ブロックを、先ほど置いた旗のマークのブロックの下に持っていきます。
ブロック同士が合体します。

これで、初期設定でロケットの大きさを元のサイズから100%で表示する、という設定ができました。
でも、元のサイズの100%の大きさって、結局同じ大きさのことですよね。
元のサイズが大きすぎるので、小さくするのが目的ですから、今度は100%を小さい数字に変えていきます。

半分にする場合には、何%にすればよいでしょうか?

そうです、100%の半分の50%です。

ブロックの100の部分にマウスカーソルを持っていき、クリックします。
「100」という数字の背景が青くなったでしょうか。
この状態の時にキーボードから入力すると、別の数字に変えることができます。

ここでは「50」と入力してみましょう。

ここで一つ、注意点があります。

数字を入力するときには「半角」(はんかく)で入力しなければなりません。
パソコンの文字の種類には、大きく「半角」と「全角」(ぜんかく)の2種類があります。
パソコンのキーボードの左上のほうに、「半角/全角」というキーがあります。

このキーを押すと、そのたびに入力する文字の種類が半角か全角に切り替わります。
今、半角なのか全角なのか知りたいときには、右下の文字が、「A」となっているか、「あ」となっているかで判断します。

「A」の場合には半角、「あ」の場合には全角です。
今は半角で入力しなければならないので、ブロックの「100」の文字をクリックしたときに右下が「A」になっているか確認してください。
もし「あ」になっていたら、「半角/全角」キーを押して「A」にしてください。


↑ 半角の場合


↑ 全角の場合

全角だとコンピューターが数字だと思ってくれないのです。
ここを注意しておかないと、大きさが半分になりません。
この間違いはよくあるものなので、思った通りにならないときには確認してみましょう。

さて、「大きさを50%にする」になったでしょうか?
この状態で、右上の旗のマークをクリックしてみましょう。

ロケットの大きさが、前の大きさの半分まで小さくなったのがわかるでしょうか。
小さくなったら成功です。

ロケットの表示位置を決めよう!

今、初期設定だとロケットは画面のちょうど真ん中に表示されています。
これでは敵が現れたらすぐに敵に当たってしまいます。
次は、初期設定でロケットの位置を下の方にしてみましょう。

ロケットの位置を設定するには、座標を指定します。
座標とは、物の位置を数字で表現したものです。
Xは横の座標、Yは縦の座標を示しているので、覚えておきましょう。

ブロックパレットの左側から、「動き」をクリックします。

ブロックから、「x座標を0にする」を選んで、スクリプトエリアまで移動して、先ほどつくった「大きさを50%にする」ブロックの下に合体させます。

スクラッチでは、ゼロというのはちょうど真ん中の位置のことを言います。
真ん中よりも右に動かしたいときにはx座標はゼロより大きい数字にします。
真ん中よりも左に動かしたいときには、x座標はゼロより大きい数字にします。
ゼロより大きい数字とは、「-1」などです。数字をゼロより小さくするには、「-」(マイナス)を数字に付ければよいのです。
ここでは、初期設定はx座標は真ん中でよいので、「0」のままにしておきます。

次に、「y座標を0にする」ブロックを、先ほどの「x座標を0にする」ブロックの下に合体させます。
y座標の場合、真ん中はゼロです。真ん中より上に動かすにはゼロより大きい数字にします。
真ん中より下に動かすには、ゼロより小さい数字にします。
ここでは、y座標を-150にします。

今、y座標を-150にしましたが、適当に考えたわけではありません。
ステージペインに表示されているロケットは、マウスカーソルで動かすことができます。
それで、表示したい位置に動かしてみましょう。

すると、スプライトペインで、x座標とy座標の数字が表示されます。
この数字は、現在、ロケットがどこにあるかを表しています。
大体一番下に表示すると-150くらいになるので、これをみて-150にしたのです。

さて、ここまでやったら、右上の旗マークをクリックしてみましょう。
ロケットが画面の下の方に表示されるようになったでしょうか。

ところで、ブロックパレットをよく見てみると、「x座標を0にする」「y座標を0にする」のほかに、「x座標を0、y座標を0にする」というブロックがあることに気づいたでしょうか?

このブロックを使えば、一度にx座標とy座標を設定することができるので、こちらに変えてみましょう。

まず、スクリプトエリアにある、「x座標を0にする」ブロックにマウスカーソルを持っていき、左クリックして動かします。
すると、「大きさを50%にする」ブロックから外すことができます。

外したブロックはそのままブロックパレットに持っていって、左クリックを放すと消えます。もしくは、ブロックをクリックした後で、キーボードの「delete」キーを押しても消すことができます。

次に、「x座標を0、y座標を0にする」ブロックの、y座標の数字を-150に変えます。
そして、「x座標を0、y座標を-150にする」ブロックを、ブロックパレットからスクリプトエリアに持ってきて、「大きさを50%にする」ブロックに合体させます。

これでさっきと同じでブロックの数が少なくなったので見やすくなりました。

保存しよう!

ここまでつくったプログラムを保存しておきましょう。
保存しなければ、プログラムはすべて消えてしまいます。
プログラムを保存しておけば、パソコンの電源を消しても、つづきからプログラムをつくることができるようになります。

「ファイル」をクリックして、「コンピューターに保存する」をクリックしてください。

「名前を付けて保存」というウィンドウが開きます。
ここで「ファイル名」のところに、好きな名前を入力してください。
ここでは「インベーダーゲーム(レッツスクラッチ)」という名前にしました。
「保存」をクリックします。

今回はここまでです。
次回はロケットを左右に動かせるようにします。

「レッツ!スクラッチ」コンテンツリスト

関連記事

レッツ!スクラッチ (2) スクラッチのインストール

では、さっそくビジュアルプログラミング言語、スクラッチをつかっていきましょう! みなさん、Windowsパソコンは持っていますか? Androidスマホやタブレットでもできないことはありませんが、パソ…続きを読む

レッツ!スクラッチ (4) インベーダーゲームをつくろう ― ゲームを設計しよう

おまたせしました! 「レッツ!スクラッチ」第4回目は、いよいよゲームをつくっていきます。 その中でも、今回はインベーダーゲームをつくります。 ゲームを設計しよう! まずはどんなゲームにするのか、企画を…続きを読む

レッツ!スクラッチ (7) インベーダーゲームをつくろう ― たまを発射する

次は、いよいよ攻撃です。 スペースキーを押したら、ロケットから、たまが発射されるようにします。 たまを発射するには、たまの画像が必要になります。 スプライトペインの右下のアイコンにマウスカーソルを合わ…続きを読む

レッツ!スクラッチ (11) インベーダーゲームをつくろう ― 点数をつけよう!

さあ、これまででロケットからたまを発射して、敵を倒す、という仕組みができました。敵が自分の陣地まで入ってきたらゲームオーバー、という処理も入れています。 さらにゲームらしくするためには、スコアをつけま…続きを読む

レッツ!スクラッチ (1) プログラミングの心得

「レッツ!スクラッチ」では、ビジュアルプログラミング言語「スクラッチ(Scratch)」を使って、わたしが実際につくったプログラムを紹介してくコーナーです。 プログラミングに興味を持つきっかけとして、…続きを読む

レッツ!スクラッチ (14) インベーダーゲームをつくろう ― インベーダーに攻撃させよう!

これまでインベーダーは移動してくるだけでした。 今回はインベーダーも移動しながらたまをうってくるようにしてみましょう。 これでぐっと難易度が上がりますね。 いつものとおり、まずは敵がうってくるたまのス…続きを読む

レッツ!スクラッチ (13) インベーダーゲームをつくろう ― 爆発させよう!

このインベーダーゲームでは、たまをうって敵に当たったときに点数が入ったり、敵が自分の陣地まで来たときにゲームオーバーになったりする処理を入れてきましたが、いずれももう一味ほしいと思いませんか? そう、…続きを読む

レッツ!スクラッチ (8) インベーダーゲームをつくろう ― 敵を表示して動かす

インベーダーゲーム、ついに敵の登場です。 まずは、敵の画像を選ぶところからです。 右下のスプライトペインから、「スプライトを選ぶ」アイコンにマウスカーソルを持っていき、虫めがねアイコンをクリックします…続きを読む

レッツ!スクラッチ (6) インベーダーゲームをつくろう ― プレイヤーを左右に動かそう

いよいよ、プレイヤーを動かせるようにしていきます。 キーボードの右矢印キーを押したら右へ、左矢印キーを押したら左に動くようにしましょう。 「x座標を0、y座標を-150にする」ブロックの下に、「ずっと…続きを読む

レッツ!スクラッチ (9) インベーダーゲームをつくろう ― ゲームオーバーの処理をつくろう!

前回は敵が左右に動き、プレイヤーに迫ってくるところまでをつくりました。 このままだと敵が画面の一番下にたどり着いて左右に行ったり来たりすることになります。 今回は、敵がプレイヤーの位置まで下がってきた…続きを読む