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

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

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

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

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

プロローグ

りこ

アル、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入門。シューティングゲームを作ろう!

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

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

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

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

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

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

zsh

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

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

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

コメントをどうぞ!

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