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