1. HOME»
  2. プログラミング・Web»
  3. Scratch»
  4. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!
前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びました。なんとなくでも、分かってもらえたでしょうか?

少しだけScratch(スクラッチ)についてもふれましたが、まだちょっとよく分からないかもしれません。

そんなわけで、今回はScratchの基本的(きほんてき)な使い方を学んでいきましょう。

また「小学生からのScratch入門」シリーズの一覧(いちらん)は、こちらです。

  1. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  2. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  3. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
目次
  1. プロローグ
  2. 登場人物(とうじょうじんぶつ)
  3. Scratch(スクラッチ)ってどういうものなの?
  4. Scratchのはじめかた
  5. Scratchの画面の名称(めいしょう)を覚えよう
  6. スプライトってなぁに?
  7. スクリプトってなぁに?
  8. スクリプトを実行するには?
  9. 作ったプログラムを保存するには?
  10. 保存したプログラムを読み込むには?
  11. つくったプログラムを公開(共有)するには?
  12. ゲームプログラミングに必要な基礎知識
  13. 変数(へんすう)
  14. 条件分岐(じょうけんぶんき)
  15. 繰り返し(ループ)
  16. エピローグ

プロローグ

りこ

アル、Scratch(スクラッチ)は覚えた?

アル

うーん。やっぱりうまくいかないんだ……りこちゃんは?

りこ

わたしはちょっとだけプログラミングできるもの

アル

ずるい!

りこ

そうだ、山田先生のところにいかない?

アル

うん、行く!

登場人物(とうじょうじんぶつ)

山田先生

ねこの先生。
プログラミングが大得意で、JavaScript(ジャバスクリプト)、Java(ジャバ)、C言語(シーげんご)、Python(パイソン)に至(いた)るまで様々なプログラミングの知識があり、ねこパンチの如(ごと)く1秒で10文字のキー入力が可能。
「てやんでぇ、べらぼうめ!」が口癖(くちぐせ)。しかし実は江戸っ子ではない。
ディズニーランドに行くことを夢見ている。

りこちゃん

りこ

プログラミングが大好きで、少しだけプログラムを書くことができる。得意な言語はJavaScript
(ジャバスクリプト)
。
錦戸(にしきど)君が好きで好きでたまらない。関ジャニを抜けても、いまも好き。はやく大人になって錦戸君のお嫁(よめ)さんになることを夢見ている。
元気が良く、活発な女の子。ちょっとお節介(せっかい)。

アル君

アル

ゲームが好きで、特にポケモンが大好き。
プログラミングははじめてで、まだよく分からない。それでも、ゲームを一度は作ってみたい。
授業中はいつも、居眠りか、ポケモンのことを考えている。よくりこちゃんに注意される。
プログラミングに興味(きょうみ)はあるのだが、全く分からないので集中できず、ついポケモンのことを考え始めてしまう。
山田先生という名前は聞いたことがあったが、ねこだということを最近(さいきん)まで知らなかった。

Scratch(スクラッチ)ってどういうものなの?

山田

おやおや君たち、また来たべか?

りこ

うん、先生にプログラミング教えて欲(ほ)しいってアルが

アル

あっ、自分だって教えてもらいたくて来たくせに!

山田

まぁまぁ。じゃあ、Scratch(スクラッチ)の使い方を、もっとくわしく教えてあげるべよ


前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、Scratch(スクラッチ)について、少しだけ紹介しました。では、Scratchって一体どういうものなのでしょうか?
ここで少しくわしく説明したいと思います。

Scratchは、言語であり、プログラミングができる環境(かんきょう)のことでもあります。マサチューセッツ工科大学こうかだいがく(MITエムアイティ)メディアラボによって作られました。

Scratchでは、ブロックを使って、プログラミングを行います。プログラミングは「コンピューターにやって欲(ほ)しいことを伝えること」でしたね。
つまり、ブロックを使って、コンピューターにやってほしいことを伝えるのです。
他のプログラミング言語では、言葉でお願いしなければいけなかったのですが、Scratchでは、ブロックをドラッグするだけで、かんたんに、コンピューターにして欲しいことをお願(ねが)いできてしまうんです。


山田

マサチューセッツ工科大学と言えば、わだずが行っていた大学だべな

アル

えぇーっ、すごーい!

りこ

きゃー、すごい!

山田

まぁ前を通りかかっただけだべけどな

りこ

……

アル

えっ?

Scratchのはじめかた

さて、お待ちかね、Scratch(スクラッチ)をはじめていきましょう!

Scratchには、ブラウザで動かせるものと、アプリをダウンロードして動かせるものと、2種類(しゅるい)あります。
ここでは、それぞれ「ブラウザ版(ばん)」、「アプリ版」という言葉を使っていきます。

山田

ブラウザ版はお手軽(てがる)なんだべけど、インターネットにつながっていないとだめなんだべ……一方、アプリ版はあらかじめダウンロードしておけば、いつでも、どこでも、Scratchが使えるんだべ

りこ

ふだんはブラウザ版を使って、インターネットが使えないときは、アプリ版を使う方法もいいかもね!

ブラウザ版Scratchのはじめかた

では、ブラウザ版Scratchを使ってみましょう!
まず、Scratchのサイトにいきます。

Scratch

画面の上の方にある、「作る」をクリックします。

すると、下のような画面が開きますので、ここからScratchをはじめることができます。

アプリ版Scratchのはじめかた

アプリ版Scratchは、まず、ダウンロードする必要があります。

では、下のダウンロードページへいきましょう!

Scratch ダウンロードページ

インストールしたいパソコン、もしくはスマホ、タブレットの種類(しゅるい)を選(えら)び、ダウンロードしましょう。

山田

OS(オーエス)について、よく分からなかったら、お父さんかお母さんに、きいてほしいべ

りこ

おうちの人にちゃんと許可《きょか》をもらってからダウンロードしようね

下の画像(がぞう)は、Mac用のアプリ版(ばん)Scratchのものです。
ブラウザ版と同じ感覚で使うことができます。

Scratchの画面の名称(めいしょう)を覚えよう

りこ

私、Scratch(スクラッチ)の画面(がめん)がそれぞれどんな役割(やくわり)をしているのかが分からないの

山田

そうだべな……ここでしっかりと教えてあげるべよ


まずは、スクラッチの画面の、それぞれの名前を覚(おぼ)えましょう。

①ステージ : 作ったプログラムが実際(じっさい)に動くところです。
②スプライトペイン(スプライトリスト) : プログラムに使うそれぞれの画像(がぞう)が表示されるところです。
③ブロックパレット : ここからブロックを選択(せんたく)します。
④コードエリア(スクリプトエリア) : ブロックパレットからブロックをドラッグして、このコードエリアに配置(はいち)します。

かんたんに全体を説明(せつめい)すると、まず②スプライトペインで使いたいスプライト(キャラクターなどの画像)を選(えら)び、③ブロックパレットから、コンピューターにやって欲(ほ)しいことを選んで、コードエリアに置(お)きます。そして、その結果(けっか)を①ステージで確認(かくにん)します。

スプライトってなぁに?

では、スプライトっていったいなんなのでしょうか。

たとえば、ゲームの背景画像(はいけいがぞう)とキャラクターとが1枚(まい)の画像になっていたら、キャラクターを動かすのは大変ですよね。しかし、背景画像とキャラクターが別々の画像だったら、動かすのはかんたんです。
そういった仕組(しく)みのことをスプライトといいます。

むずかしく考えると分からなくなってしまいますので、単純(たんじゅん)に「動かしたい画像」と思っておけば問題(もんだい)ないでしょう。

山田

スプライトを使うと、こんなに自由に動き回れるべ!

スクリプトってなぁに?

スクリプトは、プログラムの家族で……まぁ、プログラムなんです。
プログラムは、コンパイル(コンピューターが分かる言葉に翻訳(ほんやく)すること)をしなければコンピューターに分かってもらえない、という話を「小学生からのプログラミング入門。プログラミングってなぁに?」でしましたね。

この、コンパイルをすっ飛ばして動かすことができるのが、スクリプトです。

なんて言うと、「あれ、コンピュータってプログラムをそのまま理解(りかい)できないんでしょ? 前と言ってることちがうじゃん」って思われちゃいそうですが、私たちには見えないだけで、ちゃんとコンピューターに分かる言葉に、翻訳はされているのです。ただ、ちょっと翻訳の方法が違うのです。

コンパイルをしてから実行するやり方をコンパイル方式というのに対し、コンパイルをすっ飛ばして動かしちゃうやり方をインタプリタ方式といいます。

……ですが、ここでは、むずかしいことを考えるのはやめましょう。

スクリプトも、プログラムといっしょで、「ああしたい、こうしたい」といった、お願(ねが)いを書いていくものです。
例えば、キャラクターを移動(いどう)させたい、画像を変えたい、音楽を流したい、といったことを書いていくことで、キャラクターが動いたりするわけです。だから、スクリプトはプログラムの家族なんです。

スクリプトを実行するには?

作ったものを実際(じっさい)に動かすことを「実行(じっこう)する」と言います。
Scratch(スクラッチ)で作ったものを実行するには、ステージにある旗マークをクリックします。

また、動いているスクリプトを止めたい時は、隣(となり)の赤いマークをクリックします。

作ったプログラムを保存するには?

さて、せっかく作ったプログラムも、Scratch(スクラッチ)をそのまま閉じてしまえば、消えてしまいます。

せっかくプログラミングをしても、作ったものが消えてしまったらさみしいですよね。
でも、しっかりと保存(ほぞん)しておけば大丈夫(だいじょうぶ)です。

作ったプログラムを保存するには、Scratchの画面(がめん)の上のほうにある、「ファイル」から「コンピューターに保存する」をクリックします。

下のようなウィンドウ(Mac(マック)の場合)が開いたら、好きな場所(ばしょ)に、好きな名前をつけて保存(ほぞん)しましょう。
画像はMacのものですが、それぞれのOS(オーエス)に合わせてください。

保存したプログラムを読み込むには?

では、保存したプログラムを読み込む方法です。

保存したプログラムを読み込むには、Scratchの画面がめんの上のほうにある、「ファイル」から「コンピューターから読み込む」をクリックします。

下のようなウィンドウが開いたら、読み込みたいファイルを選びましょう。

つくったプログラムを公開(共有)するには?

さて、みなさんが一生懸命(いっしょうけんめい)プログラミングをして、作品が完成したら、やっぱりみんなに遊んでもらいたいですよね。
そんなときは、作品を共有(きょうゆう)することで、だれでもその作品を見ることができるようになります。

では、つくった作品をみんなと共有する方法を見ていきましょう!

作品を公開(こうかい)(共有)するには、Scratch(スクラッチ)にログインする必要があります。
ログインすると、画面上部のナビゲーションバーがこのようになります。

ログインできたら、名前をつけて、「共有する」ボタンをクリックします。

これで、作品を共有することができました。
あとは、作品の「使い方」や「メモとクレジット」を入力します。

ゲームプログラミングに必要な基礎知識

ここからは、ゲームプログラミングに必要な基礎知識(きそちしき)です。

プログラムはどうやって動くの?

山田

先ほどのが基本的な使い方だべが、実際に作る前に知っておいて欲しいプログラミングの知識があるんだべ

アル

えぇーっ、はやく作りたいよぉ

りこ

もう、ちゃんと先生の言うこときかなきゃだめよ

アル

ちぇ……なんだよー

山田

まぁまぁ。もう少し説明がすんだらちゃんと教えてあげるべからな

アル

わーい

山田

なにかを作る前に、プログラムがどうやって動いているのかを知っておいてほしいんだべ


基本的(きほんてき)にコンピューターは、上から下に、順番にプログラムを読んでいきます。
あなたが本を読むとき、最初(さいしょ)から順番に読んでいくのと同じです。

本の場合、しおりを挟(はさ)んでおいて途中(とちゅう)から読むことができますが、コンピューターはプログラムを最初から順番に読んでいってしまいます。

しかしゲーム内ではプレイヤーの操作によって、キャラクターを自由に動かせたり、会話が変化したりしますよね。
上から順番に読んでいくといっても、色んなパターンでプログラム動作させることができるのです。

色んなパターンで動作させたい時、変数(へんすう)や条件分岐(じょうけんぶんき)の知識が必要となります。
以下でそれらについて説明します。

変数(へんすう)

山田

君たちはプログラミングにおける変数(へんすう)って言葉を知っているべか?

りこ

あ、知ってる! 数字とか、文字とかを入れておくことができるんだよね!

山田

よく知ってるべな

アル

あ、分かった、変(へん)な数だ

山田

てやんでぇ、べらぼうめ! 数に変もなにもあるべか! ちょっと変数について教えてあげるべ


例えば、なぞなぞゲームやシューティングゲームを作るとします。
そういったゲームに欠かせないのが得点(とくてん)です。
なぞなぞゲームであれば正解すると得点をもらえる、シューティングゲームであれば敵を倒すと得点がもらえる、といったものです。

では、この得点はどのように作ればいいのでしょうか?
それには変数(へんすう)というものを使います。変数に得点を覚えさせて、そこに得点を足していってあげればいいんです。

ではScratch(スクラッチ)で変数を使ってみましょう。

「イベント」をクリックし、「旗(はた)マークがクリックされたとき」をコードエリアにドラッグします。
これで、旗マークが押されたとき、プログラムがはじまることになります。

つづいて、「変数」を選んで、「変数を作る」をクリックします。

すると、次のような画面が表示されるので、変数名に「得点」と入力し「OK」をクリックします。
この時の変数名はなんでもいいのですが、この先の解説をわかりやすくするために、同じようにやってみてください。

これで「得点」という変数が作成されました。
この「得点」という変数に、数値を入れます。

「得点を0にする」ブロックをコードエリアにドラッグし、「旗マークがクリックされたとき」に繋(つな)げます。

入れる数値は自由に変更できます。
今回は数値を「100」にしておきましょう。

「見た目」をクリックし、「こんにちは!と言う」をコードエリアにドラッグし、「得点を100にする」に繋げます。

「変数」をクリックし、「得点」をコードエリアの「こんにちは!」と書かれた部分にドラッグします。

コードエリアはこのようになります。

では、ステージの旗マークをクリックしてみてください。

するとこのように、猫が得点を言います。

条件分岐(じょうけんぶんき)

山田

次は条件分岐(じょうけんぶんき)について教えるべよ

りこ

条件(じょうけん)によって分岐(ぶんき)するんだね


選択肢(せんたくし)によってゲームのなかでの会話が変わる、HPが0になったらゲームオーバー、そういった条件によってなにかが変わったり、起こったりすることを、条件分岐(じょうけんぶんき)といいます。
下の例(れい)は、ゲームをプレイしたときの得点が「50点以上」だったらゲームクリア、「それ以外」だったらゲームオーバーというものです。

フローチャート

では、Scratch(スクラッチ)でこの条件分岐を使ってみましょう。
さきほど作ったもののつづきからはじめます。

「制御」をクリックし、「もし〜なら でなければ」ブロックを「得点を100にする」と「得点と言う」の間にドラッグします。「得点と言う」ブロックが、「もし〜なら」と「でなければ」の間に入るようにしましょう。

「演算」をクリックし、「○<○」を「もし〜なら」の「〜」の部分にドラッグします。

「得点と言う」の部分の「得点」を「○<○」の後ろの□にドラッグします。

もう片方の○には「49」と入力します。
「50」にしてしまうと、50が含まれなくなってしまうからです。

「こんにちは!と言う」を右クリックし、「複製」をクリックします。

「でなければ」の下に複製したものを入れます。

「○と言う」の○には、それぞれ「ゲームクリア」「ゲームオーバー」と入力します。

では、得点の数値をいろいろ変更して試してみましょう。
もし100のままでステージの旗マークを押すとこのように「ゲームクリア」と表示されます。

では得点の数値を30に変更します。

この状態で、ステージの旗マークを押すとこのように「ゲームオーバー」と表示されます。

このように条件によって異なる動きをさせるのが条件分岐です。


りこ

私と錦戸くんとのラブラブ度の変数が、50未満ならノーマルエンド、50以上なら……きゃー!

山田

ほう……。まぁ、考え方はそういう感じだべよ

アル

なんか複雑(ふくざつ)な気分なんだよなぁ……ちぇ

繰り返し(ループ)

ゲームづくりに大切なのは、「繰(く)り返(かえ)し(ループ)」です。
基本的(きほんてき)に、ゲームはループを作ってその中で動かします。

……といってもよく分からないかもしれません。

たとえば、スペースキーが押されたとき、キャラを前進(ぜんしん)させるプログラムを作るとします。
コンピューターは、基本的にプログラムを上から順番(じゅんばん)に読んでいくんでしたよね。

Scratch
(スクラッチ)
には、キー入力があるとプログラムをはじめる、という機能(きのう)があります。
では、繰り返しを使わずにつくったプログラムを見てみましょう。

さて、旗マークを押してこれを実行(じっこう)すると、どうなるでしょうか?
……もちろん、スペースキーが押されるたびに、キャラクターが前進します。

では、スペースキーを押しっぱなしのままにしていたらどうでしょう。

上の動画(どうが)は、さきほどのプログラムでスペースキーを押しっぱなしにしてみたものです。

りこ

旗(はた)マークとブロックがピカピカと光ってるよ。一応(いちおう)動いてるけど、これでいいのかな……

アル

よーく見ると、動きはじめるとき、一瞬(いっしゅん)カタって止まっちゃうのも、気になるよね

なんだか、2人とも納得(なっとく)できていない様子ですね……。

じつは、上のプログラムは、こんな感じなのです。

「スペースキーが押される(プログラムのはじまり)」→「キャラが10歩動く」→「プログラム終了」→「さらに、スペースキーが押されっぱなし(プログラムのはじまり)」→「キャラが10歩動く」→「プログラム終了」……

そうです。このプログラムは、プログラムがはじまって、終了して、またはじまって……というのを、スペースキーが押されている間、ずっと繰り返しているのです。

でも、よく考えてみてください。ゲームをプレイしているとき、なにかボタンを押しても、ゲームは終了しないですよね。
ゲームを起動(きどう)して、キャラクターがちょこっと動いて、ゲームが終了して、またゲームが起動して……って、いうゲームはあまりやりたくないですよね。

そんなときに使えるのが、繰り返し(ループ)です。

プログラムがはじまると、そのまま繰り返し(ループ)に入ってしまうのです。

つまり、おおまかには次のような流れになります。

フローチャート

基本的に、ゲームではものすごいはやさで、画面を読み込んでいます。
画面を読み込んでいるというのは、画面を表示する、消す、表示する、消す……というのをすごいはやさで何度も繰り返しているのです。(Scratch(スクラッチ)は、そのことを、あまり考えなくてもいいようにできているのですが、実際に文字でプログラムを書く時はこのことを考える必要があります)

ここで大切なのは、画面を表示する、消す、を繰り返すように、ゲーム内では常にループされているということです。

では、Scratchで、キャラクターをスムーズに動かせるように、ループを使って作ってみましょう。

「イベント」をクリックし、「旗マークがクリックされたとき」をコードエリアにドラッグします。

ゲームがはじまったら、ゲームの設定(せってい)をしなければいけません。
ここでは、ゲームがはじまったときの、キャラクターの位置(いち)を設定します。
では、「x座標を○、y座標を○にする」をドラッグして、「旗マークが押されたとき」につなげます。

今回は、x座標(ざひょう)を-240、y座標を0にと入力しました。

では繰り返し(ループ)を作成しましょう。
「制御」をクリックし、「ずっと」をドラッグして「x座標を-240、y座標を0にする」につなげます。これが、さきほど説明(せつめい)した「繰り返し(ループ)」です。

「もし〜なら」ブロックをコードエリアの「ずっと」の中に入れます。

「調べる」をクリックして、「スペースキーが押された」ブロックを「もし〜なら」ブロックの「〜」の部分に入れます。

「動き」をクリックし「10歩動かす」を「もしスペースキーが押されたなら」の中に入れます。

これで、ステージの旗マークをクリックします。
すると、スペースキーが押されているあいだ、キャラクターが前に進むようになります。

エピローグ

山田

キャラクターの動きはうまくいったべか?

アル

うん! スムーズに動いてるよ!

りこ

私も! 「条件分岐(じょうけんぶんき)」と「繰(く)り返(かえ)し」を覚えれば、方向キーで自由に動かすこともできそうだよね!

アル

なるほど! じゃあ、これでポケモンも作れるかなぁ

りこ

なに言ってるの!? ポケモンみたいなゲームは一人ではむずかしいって、先生言ってたでしょ!?

アル

だからりこちゃんも一緒(いっしょ)にポケモン作ろう

りこ

私はもっとロマンチックなものつくるの

アル

ちぇ……なんだよー。ポケモンだってロマンチックなのに……

山田

まぁまぁ。目標(もくひょう)を高く持つことはいいことだべよ。とにかく、ゲームプログラミングの基本として、大切なのは「変数(へんすう)」「条件分岐」そして「繰り返し(ループ)」だべよ。この3つをマスターするべよ!

アル

うん、分かった!

りこ

私も!

このシリーズの一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
  7. Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
  8. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  9. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  10. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  11. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  14. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  17. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  20. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  21. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  22. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  23. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  25. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  26. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)
  27. WindowsにPythonをインストールしてみよう!小学生からのPython入門
  28. MacにPythonをインストールしてみよう!小学生からのPython入門
  29. Pythonでじゃんけんゲームを作ってみよう!小学生からのPython入門
  30. Pythonのtkinterを使って、ウィンドウを表示してみよう!
  31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう!
オリジナルゲーム.com