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入門。ピアノ鍵盤を作って音を鳴らそう!

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

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

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

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

コメントをどうぞ!

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