1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Scratch
  6. »
  7. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。
前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか?

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

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

目次
  1. プロローグ
  2. 登場人物(とうじょうじんぶつ)
  3. Scratch(スクラッチ)ってどういうものなの?
  4. Scratch(スクラッチ)の画面を知ろう!
  5. ゲームプログラミングに必要な基礎知識
  6. 変数(へんすう)
  7. 条件分岐(じょうけんぶんき)
  8. 繰り返し(ループ)
  9. エピローグ

プロローグ

りこ

りこ

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


アル

アル

うーん。この前山田先生に教えてもらったキャラ移動、一瞬止まっちゃうのがどう頑張っても直らないんだ……


りこ

りこ

そうだよね。でもそれって山田先生が教えてくれるって言ってなかった?


アル

アル

あ、そういえばそうだ!


りこ

りこ

じゃあ、山田先生にききにいきましょ!


アル

アル

うん!

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

山田先生

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

りこちゃん

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

アル君

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

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

山田

山田

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


りこ

りこ

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


アル

アル

あっ、自分だって教えて欲しくて来たくせに!


山田

山田

まぁまぁ。じゃあ、Scratch(スクラッチ)をもっと詳しく説明してあげるべよ。


前回Scratch(スクラッチ)を少し扱いましたが、Scratch(スクラッチ)って一体どういうものなのでしょうか?
ここで少し詳しく説明したいと思います。

Scratch(スクラッチ)はマサチューセッツ工科大学のMIT(エムアイティ)メディアラボによって作られた、プログラミングを学習できる環境のことです。
Scratch(スクラッチ)におけるブロックという概念は、プログラミングにおける命令(コンピューターにして欲しい言葉)と同じものです。通常のプログラミング言語では言葉で書かなくてはいけなかった部分が、ブロックをドラッグするだけで簡単に、コンピューターにして欲しいことをお願いできてしまうんです。


山田

山田

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


アル

アル

えぇーっ、すごーい!


りこ

りこ

きゃー、すごい!


山田

山田

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


りこ

りこ

……。


アル

アル

えっ?

Scratch(スクラッチ)の画面を知ろう!

りこ

りこ

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


山田

山田

そういえば前回しっかりと教えていなかったべな。でもちょっと動かしてみたから何となく分かると思うべけど、ここでしっかりと説明しておくべよ。


スクラッチの画面の、それぞれの名称を覚えましょう。
scratch

①ステージ : あなたが作ったプログラムが実際に動く部分です。
②スプライトリスト : プログラムに使うそれぞれの画像が表示される場所です。
③ブロックパレット : ここからブロックを選択します。
④スクリプトエリア : ブロックパレットからブロックをドラッグして、このスクリプトエリアに配置します。

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

スプライトってなぁに?

例えばゲームの背景画像とキャラクターとが一枚の画像になっていたら、キャラクターを動かすのは大変ですよね。しかし、背景画像とキャラクターが別々の画像だったら、動かすのは簡単です。
そういった仕組みのことをスプライトといいます。
難しく考えると分からなくなってしまいますので、単純に「動かしたい画像」と思っておけば問題ないでしょう。

スクリプトってなぁに?

スクリプトは、簡単なプログラムのことで、ああしたい、こうしたい、といった動作を書いていくものです。
例えば、キャラクターを移動させたい、画像を変えたい、音楽を流したい、といったことを書いていき、それを実行することでキャラクターが動いたりするわけです。

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

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

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

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

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

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

山田

山田

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


アル

アル

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


りこ

りこ

こら、アル。ちゃんと先生の言うことききなさい!


アル

アル

ちぇ……なんだよー。


山田

山田

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


アル

アル

わーい。


山田

山田

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


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

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

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

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

変数(へんすう)

山田

山田

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


りこ

りこ

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


山田

山田

よく知ってるべな。


アル

アル

分かった、変な数だ。


山田

山田

てやんでぇ、べらぼうめ! 数に変もなにもあるべか! ちょっと変数(へんすう)について説明するべ。


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

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

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

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

「データ」を選択し、「変数を作る」をクリックします。
scratch

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

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

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

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

「見た目」をクリックし、「Hello!と言う」をスクリプトエリアにドラッグし、「得点を100にする」に繋(つな)げます。
scratch

「データ」をクリックし、「得点」をスクリプトエリアの「Hello!」と書かれた部分にドラッグします。
scratch

スクリプトエリアはこのようになります。
scratch

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

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

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

山田

山田

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


りこ

りこ

条件によって分岐(ぶんき)するんだね。


選択肢によって会話が変化する、進む場所によって物語が変化する、そういった条件によって分岐(ぶんき)することを、条件分岐(じょうけんぶんき)といいます。
下の例は、ゲームをプレイした時の得点が50点以上だったらゲームクリア、それ以外だったらゲームオーバーという例です。
フローチャート

ではScratch(スクラッチ)でこの条件分岐(じょうけんぶんき)を使ってみましょう。
先ほど作ったものの続きから始めます。

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

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

得点を「□<□」の後ろの□にドラッグします。
scratch

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

「□と言う」を右クリックし、「複製」をクリックします。
scratch

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

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

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

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

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

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


りこ

りこ

私と錦戸(にしきど)君とのラブラブ度の変数(へんすう)が、50未満ならノーマルエンド、50以上なら……きゃー!


山田

山田

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


アル

アル

なんか釈然(しゃくぜん)としないんだよなぁ……ちぇ。

繰り返し(ループ)

山田

山田

前回、Scratch(スクラッチ)で猫のキャラクターがスムーズに動かなかったのを覚えているべか?


アル

アル

うん! それ困ってたんだ。


りこ

りこ

キーを押した瞬間だけ止まっちゃってたよね。


山田

山田

それを直すのに必要なのが、今から教える「繰り返し(ループ)」なんだべよ。


ゲームに大切なのは(繰り返し)ループです。
基本的にゲームはループを作ってその中で動かします

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

例えばキャラを移動させる時、方向キーの入力を待ちます。
「ゲームが始まる」→「キー入力を待つ」→「キーが押される」→「ゲーム終了」

そうです。このままではキー入力されただけでゲームが終了になります。
キー入力された後、もう一度キー入力を待つようにしなくてはなりません。

そこで使えるのがループです。
ループして、キーが押された後もつづけてキー入力を待つようにするのです。

つまり、大まかには次のような流れになります。
フローチャート

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

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

覚えていますか? 前回、猫を動かしましたが、動き始めに一瞬止まり、スムーズな動きができませんでした。
前回はループをまだ学んでいなかったので省略しましたが、これはループしていないのが原因なんです。

ではScratch(スクラッチ)を使って、方向キーで猫をスムーズに動かせるようにループを使って作っていきましょう。

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

では繰り返し(ループ)を作成しましょう。
「制御」をクリックし、「ずっと」ブロックをドラッグして「旗マークがクリックされたとき」ブロックに繋(つな)げます。これが先ほど説明した「繰り返し(ループ)」です。
scratch

「もし〜なら」ブロックをスクリプトエリアの「ずっと」の中に入れます。
scratch

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

「スペース」の隣の▼をクリックして、「上向き矢印」に変更します。
scratch

「動き」をクリックし「y座標を10ずつ変える」を「もし上向き矢印キーが押されたなら」の中に入れます。
ちなみに、y座標は縦方向、x座標は横方向を表します。
scratch

するとこのようになります。
scratch

「もし上向き矢印キーが押されたなら」を右クリックし、「複製」をクリックします。
scratch

下の画像のように、「もし上向き矢印キーが押されたなら」の下に入れます。
scratch

同じように複製し、「もし上向き矢印キーが押されたなら」を4つ作ります。
scratch

下2つの「y座標を10ずつ変える」を削除します。
消したい「y座標を10ずつ変える」を右クリックして、「削除」をクリックすると消すことができます。
scratch

下2つの「y座標を10ずつ変える」を削除するとこのようになります。
scratch

「動き」をクリックして、「x座標を10ずつ変える」を「もし上向き矢印キーが押されたなら」の下2つの中にそれぞれ入れます。scratch

下の画像の赤丸の部分を画像のように変更します。
scratch

これで、ステージの旗マークをクリックすれば、猫のキャラクターを方向キーで自由に動かすことができます。
scratch

エピローグ

山田

山田

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


アル

アル

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


りこ

りこ

私も!


アル

アル

これでポケモンも作れるなぁ。


りこ

りこ

何言ってるの!? ポケモンみたいなゲームは一人では無理だって、先生言ってたでしょ!?


アル

アル

だからりこちゃんも一緒にポケモン作ろうって。


りこ

りこ

私は錦戸(にしきど)君とラブラブな生活をおくるゲームを作るからだめ!


アル

アル

ちぇ……なんだよー。


山田

山田

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


アル

アル

うん、分かった!


りこ

りこ

私も!

この企画の一覧はこちら

  1. 小学生から始めるプログラミング入門。プログラミングってなぁに?
  2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
  3. 小学生から始めるScratch入門。シューティングゲームを作ろう!
  4. 小学生から始めるScratch入門。じゃんけんゲームを作ろう!
  5. 小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

スポンサードリンク

関連コンテンツ

オススメ記事

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

コメントをどうぞ!

メールアドレスが公開されることはありません。