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入門。シューティングゲームを作ろう!
  4. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  5. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  6. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  7. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  8. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  9. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  10. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  11. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  12. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  13. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  14. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  15. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  16. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

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

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

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

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

zsh

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

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

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

コメントをどうぞ!

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




オリジナルゲーム.com