【完全版】Scratch3.0入門講座-①導入編-

Scratch

「ゲームを作りたくてScratchをやり始めたけど、プログラミングなんてやったことないからさっぱりわからない・・・」

この講座はそんなお悩みを持ったお子さん、保護者の方々を始めとする全てのScratch初心者に向けて作成しました。

この講座をやりきった頃にはきっとScratchの基本的な操作はマスターできているでしょう。

この講座ではScratch3.0を用いたゲーム作りを通してScratchの基本的な操作、使い方を分かりやすく解説していきます。

あまり身構えずに楽しみながら進めていってください。この講座を通して少しでもプログラミングの面白さに触れていただけたら幸いです。

そもそもScratchって何?どうやって始めるの?という方はこちらの記事を参考にしてください。

Scratchを始めよう!Scratchとは?からその始め方まで徹底解説
最近プログラミングへの注目度も上がってきたことでプログラミングを始めてみたいという小中学生、子供にプログラミングを学ばせたいという親御さんも増えてきていますね。しかしプログラミングといっても具体的に何をすればいいか分からないという方多い...

それではいってみましょう!

はじめてのScratch

まずは新規プロジェクトを作成しましょう。

Scratchのホームページ(こちら)へ行き、左上の“作る”を押してください。アカウントをお持ちの方はサインインしてから新規プロジェクトを作りましょう。

無事にこのような画面が開けましたか?チュートリアルは閉じてしまっても構いません。

この画面は「エディター」といってこれから私たちがプロジェクトを編集していく画面です。

まずはこのエディター画面の解説から入っていきたいと思います。

※左上の地球儀マークを押すと言語を選択できます。日本語は漢字ひらがなの二種類があるので年齢に合わせて選んでください。

エディター画面の解説

エディターはこれからゲーム、アニメーションなどScratchで何かを作るたびに顔をあわせることになります。

つまり、エディターに慣れることがScratch習得への第一歩です。ちょっと大げさかもしれませんがどんどんエディターと触れ合って早く慣れてしまいましょう。

エディター画面はざっくりと場所ごとに分類することができます。その場所ごとに名前も決まっています。

スプライトやらスクリプトやら聞いたことない単語が出てきました。

それらを含む「スクリプトスプライトステージ」の3つ、実はScratchを扱う上でとても重要な要素となります。

これからこの3つの要素を中心にエディターの操作方法を解説していきます。

スクリプト

スクリプトって何?

スクリプトの解説に入る前に一度ブロックパレットに注目してください。

ブロックパレットの中にある「10歩動かす」や「15度回す」等の1つ1つの命令は「ブロック」と呼ばれ、その命令の種類によって色分けされ見つけやすくなっています。

ブロックはまさにパレットに出された絵の具です。絵を描くには絵の具をキャンバスに塗っていく必要があります。

Scratchにおけるキャンバスはスクリプトエリアにあたります。好きなブロックをスクリプトエリアにドラッグ&ドロップしてみましょう。

さっきとは違ったブロックをもう1つドラッグ&ドロップしてみましょう。ここで2つ目のブロックは1つ目のブロックの下部分にくっつけるようにドロップしてください

うまく絵の具をキャンバスに塗ることができましたか?

 Scratchにおいてブロックはスクリプトエリアに置かれて初めて指令として定義されます。スクリプトエリアに作成された指令は「スクリプト」と呼ばれブロックを一つ以上繋げて構成されています。

ちなみにスクリプト内のブロックが多くなってしまった時やスクリプトが小さくて見えにくい時など拡大縮小ができるので活用してみましょう。

スクリプトの生成ができたら次はスクリプトの削除をしてみましょう。

今度は逆に消したいスクリプトをブロックパレットにドラッグ&ドロップすることによってスクリプトの削除が完了します。

しかしここで注意が必要です。スクリプトをマウスでドラッグする場合、少しコツが必要になります。基本的にスクリプトをドラッグする時、マウスでクリックしたブロックとその下のブロックたちも一緒にくっついてきます

例えば、スクリプト全体を移動させたい時は一番上のブロックをクリックしながらドラッグすればいいのです。

スクリプト内のブロックの移動なんかは面倒ですが、すぐに慣れるでしょう。

是非色々試してみてください。

便利な機能

「スクリプトを作ったけど、もう一つ同じようなスクリプトを作りたい!でも、また同じブロックを探して持ってくるの大変だな…」

こんな時に使える便利な機能があります。スクリプトを右クリックしてメニューを開いてみてください。一番上の”複製“をクリックしてスクリプトのコピーを作り出すことができます

ここでも右クリックしたブロックの下にあるブロックたちも一緒に複製されます。例のごとくスクリプト全体を複製したい時は一番上のブロックを右クリックして複製を押せば良いのです。

メニューの上から3番目には”ブロックを削除“という項目があります。これは先ほど紹介したスクリプトの削除と違い、右クリックしたブロック一つだけを削除できるという機能です。

コメントを追加“で右クリックしたブロックにコメントを書くことができます。自分が後で編集する時や他の人が編集する時のために気をつけておきたいことなどメモするのに使いましょう。

スプライト

スプライトって何?

スプライトとは、スクリプト、画像データや音声データを用いて様々な動きをするオブジェクトのことです。オブジェクトは物という意味がありますが、ITの世界では属性(データ)と操作(命令)を持った概念のことを指します。

少し堅苦しいので柔らかく言い直すと、

スプライトとは、これから作っていくゲームやアニメーションに登場するキャラクターのことです。

Scratchを扱う上でスプライトの認識はこれで十分でしょう。

さて、先ほどステージ上にいる猫みたいなやつをスプライトだと紹介しましたね。この猫は通称「スクラッチキャット」といって新規プロジェクト立ち上げ時に自動生成されるスプライトです。そのままスクラッチキャットを使ってもいいですし、一から作りたかったら消してしまってもいいですし、それは皆さんの自由です。

それではスプライトリストの解説に入っていきます。スプライトリスト内のステージ部分はこの後解説しますので左部分に注目してください

下半分の背景が青がかっているところにスプライトが一覧で表示されていきます。

今はスクラッチキャット一匹だけなのでここでスプライトを追加してみましょう。

右下にある動物マークの青い丸にカーソルを合わせてみましょう。

上にスプライト追加メニューが伸びて出てきました。下の虫眼鏡マークの”スプライトを選ぶ”をクリックするとスプライトライブラリに飛びます。Scratchではスプライトを一から作成しなくてもスプライトライブラリにある程度キャラクターが用意されています。ちなみに動物マークをそのままクリックしても同様にスプライトライブラリに飛ぶことが出来ます。

その上には筆マークの”描く“があります。クリックするとペイントエディターが表示されます。一からスプライトを作成したいときに選びましょう。

その上には星マークの”サプライズ“があります。これをクリックするとスプライトライブラリの中からランダムで一つスプライトを生成します。

その上の”スプライトをアップロード“はパソコン内の画像やイラストを使ってスプライトを作成できます。インターネットで拾ってきたキャラクターの画像などを使用することも可能ですが著作権の関係で共有をすることはできませんので注意が必要です。

今回は”スプライトを選ぶ”でスプライトライブラリから好きなスプライトを選んでみましょう。

選べましたか?

選び終えたらスプライトリストに選んだスプライトが追加され、ステージにもスプライトが追加されたことと思います。こうなればスプライト追加完了です。

次はスプライトリストの残り上半分の解説に入ります。

ざっとこんな感じになります。

スプライトの名前はライブラリから選択した場合決められた名前が元々入っていますが、新しく作ったりするとスプライト1、スプライト2のように自動的に名前が決められます。後々スプライトが増えた時など混乱を招かないためにスプライトの名前はわかりやすく変更しておきましょう。

それではスプライトリストのスプライト1をクリックしてみましょう。これで、今あなたはスプライト1というスプライトを編集しているという状態になります。

早速スプライトの名前を好きな名前に変更してみましょう。

できたら次は画面左上に注目してください。「コード、コスチューム、音」とありますね。この3つはスプライトの三大要素であり、私たちはこの3つを編集してスプライトを作り上げていきます。

また新しい用語が出てきた…と思うかもしれませんがゲームのキャラクターを編集していると捉えると理解の手助けになると思います。

コード

まずコードは私たちがさっきやっていたスクリプトの編集のことです。スプライトというキャラクターにスクリプトという命令を作成してあげて動きをつけているのです。もうすでに私たちはスクリプトのところでコード編集はマスターしているので問題ないでしょう。

コスチューム

次にコスチュームです。コスチュームではスプライトの見た目を編集しています。コスチュームをクリックするとペイントエディターが開かれます。ペイントエディターに関しては後の講座で詳しく解説します。注目すべきは左側です。

ここにコスチュームの一覧が表示されます。スクラッチキャットはすでに2つのコスチューム(見た目)を所持しているようですね。

その下の方に見覚えのある動物マークがあります。カーソルを合わせてメニューを開いてみましょう。スプライト生成の時とほぼ一緒ですが、2つだけ違う点があります。

1つは”コスチュームを選ぶ”をクリックするとスプライトライブラリではなくコスチュームライブラリに飛ぶということです。スプライトライブラリはコスチュームデータ、音声データがセットになったスプライトが用意されていましたがコスチュームライブラリはその名の通り一枚のイラスト(コスチューム)だけ用意されています。

もう1つは”カメラ”です。これをクリックするとカメラを使ってコスチュームを撮影することができます。

その他は言っていることは基本的に同じです。”描く”ならコスチュームを一から作成。”サプライズ”はランダムでコスチュームを生成。”コスチュームをアップロード”ならパソコン内の画像やイラストを使ってコスチュームを生成します。

コスチュームはスプライトの見た目だということを覚えておきましょう。

最後は音です。音はキャラクターから発せられる様々な音を編集します。音に関しても後の講座で詳しく解説します。

スクラッチキャットはすでにニャーという音(鳴き声)を持っていますね。下の音声マークにカーソルを合わせておなじみのメニューを開いてみたらわかりますが、音にもライブラリが存在します。さらに録音することもできますし、パソコン内の音声データをアップロードすることもできます。

便利な機能

スプライトの時に紹介した”複製“は実はスプライトにも使えるんです。

スプライトリスト内のスプライトを右クリックしてみてください。メニューの中の一番上複製をクリックすることでスプライトのコピーが完了します。

その下の書き出しというのはスプライトをパソコンに保存することができる機能です。

その下の削除は見ての通りスプライトを削除することができます。ちなみに右上にあるバツボタンでも削除することができます。

複製、書き出し、削除はコスチュームや音でも同様に右クリックで実行できます。ぜひ試してみてください。

「あっ!間違えてスプライトを削除してしまった…」

そんな時に使える便利な機能があります。エディター画面左上”編集”の中の”削除の取り消し”で一回だけ元に戻すことができます。これはスプライトだけでなく、コスチュームや音も元に戻せるので誤って消してしまった際に活用してください。

ただし、戻せるのは一回だけなので複数個消してしまったものを全て元に戻すことはできません。そこだけ注意してください。

 

ステージ

ステージって何?

スプライトがキャラクターなのに対してステージはこれから作っていくゲームやアニメーションの舞台のことを指します。ステージ上で作成したスプライトを動かしていくイメージです。

意味的には別物ですが、作成するという観点で見るとステージとスプライトはほぼ一緒なので安心してください。

”ほぼ”なので違う点はいくつかあります。その中でも決定的な違いがあります。ステージはスプライトと違って複数作ることができません

「それじゃあずっと同じ画面でつまらない!」と思うかもしれないですが心配いりません。スプライトでいう三大要素の1つ”コスチューム”を複数作成することによって実現できます。しかし、ステージにおいてそれは”コスチューム”ではなく、”背景”と呼ばれます。

スプライトリスト右端に注目してください。

一番上の四角い部分には現在表示されている背景が映し出されます。今は新規プロジェクト立ち上げ時に自動生成される白紙の背景が表示されています。その下にある「1」という数字は現在ステージが持つ背景の個数を表しています。

白い背景では味気ないので背景を追加してみましょう。スプライト同様一番下の背景マークの青い丸にカーソルを合わせてみてください。

背景にもライブラリがあり、ある程度イラストが用意されています。スプライトを追加する時とほぼ同じなのでざっと説明します。

”背景を選ぶ”で背景ライブラリから好きな背景を選んでみましょう。

背景が選んだ背景に変わって数字が2に増えていれば背景追加完了です。

ステージを追加したことで編集対象がスプライトからステージに移り、ある変化が起きました。

画面左上に注目してください。スプライトでは「コード、コスチューム、音」だったのに対して、ステージでは「コード、背景、音」になっているのに気づいたでしょうか?この3つがステージの三大要素であり、私たちはこの3つを編集してステージを作り上げていきます。

コード

「ただのゲームの舞台にスクリプトを作成して命令をするの?」という疑問を持たれると思いますが、ステージでスクリプトを作成する場面は結構あります

特に背景を変更したりする時なんかにステージでスクリプトを作成します。

とは言いつつスプライトに比べたらコード量はずっと少ないです。スプライトリストの右端をクリックして編集対象をステージにしてから画面左上のコードをクリックしてみましょう。スプライトに比べてブロックの種類が少ないのが分かります。ステージは動く必要がないので、動きブロックに関しては1つもありません。

ブロックの種類が少ないだけで、スクリプトの作り方等はスプライトと一緒ですので心配いりません。

背景

画面左上の背景をクリックしてください。ここではコスチューム同様ペイントエディターで背景の編集ができ、左には背景が一覧表示されています。

下の方に背景マークの青丸があります。ここでも背景の追加ができます。が、カメラを使って背景を撮影するのはここでしかできないので注意してください。

今度も「ただのゲームの舞台が音なんて発さないでしょ」と言われちゃうかもしれませんが、これまたステージで音を作成する場面は結構あるんです。

例えばゲームのBGMなんかはステージで作成する場合が多いです。

音に関してはスプライトの音と全く一緒なので割愛します。

便利な機能

スプライトの便利な機能で紹介した複製・書き出し・削除はいずれも背景でも実行することが可能です。背景の一覧から背景を右クリックして実行してみてください。

さらに背景を誤って消してしまった時もスプライト同様に削除の取り消しをクリックして元に戻すことが可能です

試してみたら次は画面右上ステージに注目してください。

ステージのさらに右上の3つのボタンでステージの大きさを変更することができます。是非色々試してみてください。

最後に

ここまでお疲れ様でした。

今回の講座は導入編と題して、「スクリプト・スプライト・ステージ」の三本柱をもとにエディターの基本操作について解説してきました。ここを理解し扱えるようになることでScratch習得の大きな一歩となることでしょう。今回は用語が色々出てきたので後で忘れてしまうかもしれませんが、そんな時はまた読み返してみてください。

次回はScratchの醍醐味、スプライトを実際に動かしてみます。お楽しみに。

これで終わってもいいですが、最後に1つ説明しておきたいことがあります。

私たちがプロジェクトを作成し終えてScratchを閉じる前にしなければならないことがあります。それは「保存」です。これからScratchの保存方法について少し解説します。

プロジェクトの保存方法

保存しろと言いつつもオンラインでサインインした状態でやっている場合は自動保存されるので通常意識して保存をする必要はありません。しかし、作業中にインターネット接続が切断された時など自動保存がされない場合があります。そんな万が一に備えてプロジェクトを閉じる前に手動で保存する癖をつけておきましょう。

まず、プロジェクト名を変更します。自分で名前をつけていないと自動的に「Untitled」というプロジェクト名になってしまいます。2つ目からは「Untitled-2」のように後ろに数字がつきます。このままでは後々Untitledプロジェクトだらけになってしまうのでプロジェクト名はプロジェクトごとに毎回変更するようにしましょう

プロジェクト名が変更できたら画面左上の「ファイル」をクリックして「直ちに保存」をクリックすることで保存が完了します

オンラインでアカウントを持っていないとそもそも保存ができないのでアカウント作成をお勧めします。

オフラインエディターを使っている方は自動保存されません。保存したい場合はファイルメニューから「保存」か「名前をつけて保存」を選択してください。

プロジェクトの開き方

保存したプロジェクトの開き方を解説します。

まずScratchのホームページ(こちら)へ行きサインインします。そして右上の“私の作品”をクリックしてください。

保存したプロジェクトが一覧で表示されているので開きたいプロジェクトの「中を見る」をクリックしてください。

プロジェクトを無事開くことはできましたか?プロジェクトの保存方法と開き方はこの先何度も使うので覚えてしまってください。

次回から編集したプロジェクトは忘れずに保存するようにしましょう。

それではScratch3.0入門講座-①導入編-は終わりになります。

お疲れ様でした。

Scratch
執筆者

98年埼玉生まれの情報系大学生。
プログラミング教室でアルバイト。
Web開発と櫻坂46(欅坂46)・日向坂46が好き。
「ヲタピック」「Fullfii」を開発。

Twitterでは小さいTipsを発信しています
Twitterでは小さいTipsを発信しています
プロエイティブ

コメント