※ 当ページには【広告/PR】を含む場合があります。
2020/08/17
【Scratch入門】繰り返しのテクニックを覚える〜最適なループブロックを選択しよう
【Scratch入門】リストから数値データを使いこなす
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選
アニメーション用のコスチュームの準備
まずはアニメーションにしたいスプライトのために、最低限のコスチューム(画像)を描きます。Scratch用に画像を描くためには、色々な方法が用意されています。もっとも簡単には、以下のように、[コスチューム]タブ --> 左下の猫アイコン --> [描く]をクリックすることで、お絵描きモードから画像を作成できます。また、Scratchであつかう画像の種類には2つあり、png/jpg/gifなどのビットマップと、svgのベクターがあります。この２種類の違いはここでは詳しく解説しませんが、アニメーションを行いたい場合にはそれなりに画像の枚数が必要になってくるので、最初から変形が簡単なベクターで作成しておくと便利に使えます。ということで、このブログの内容ではsvg画像の使うことにします。Inkscapeで画像を作る
Scratchのお絵描きモードでもベクター画像が描けるのですが、ベクター画像を作成するソフトウェアは他にもたくさん存在しています。お絵描きに集中したい人は、手元のパソコンの内で編集するほうが好ましいので、専用のソフトウェアを使っている方も多くいるかとおもいます。さて、svg画像がお手軽に描ける無償のソフトウェアの代表的なものに、Inkscapeがあります。対応しているOSもWindows/Mac OSX/Linuxと幅広くサポートしているので、基本的な使い方さえ覚えてしまえば、パソコンの環境が変わったとしても、ベクター画像が同じように編集できて便利です。ここではInkscapeのインストール方法に関しては解説しませんが、基本的にはインストーラーをダウンロードしてクリックするだけで完了するはずです。それでは早速ですが、Inkscapeで何か画像を一枚描いてみましょう。...とりあえずタコの画像を簡単な図形で仕上げてみました。Inkscapeの使い方に関しては、このブログの趣旨とは若干異なるので割愛します。もしInkscapeの操作に興味を持たれたら、「Inkscape 使い方」でネット検索してみてください。Scratchへのインポート
Inkscapeなどで作成したsvg画像は一旦パソコンのどこかのフォルダに保存します。Inkscapeでの手順では、[ファイル] --> [名前を付けて保存] --> [ファイルの保存先の選択]ダイアログ --> 名前を入力 --> [プレーン svg(*.svg)]を選択 --> [保存]とします。その後、Scratchのお絵描きモード画面の方に移り、左下の猫のアイコンで[コスチュームをアップロード]から先程保存したsvg画像を選択することで、Scratchへ画像が取り込めます。ベクター画像の変形
上でも述べたように、ベクター画像のほうが、ビットマップ画像よりも変形しやすいという利点があります。つまりは元となるベクター画像を変形することで、手間を書けずにアニメーションのための画像を増やしやすい、といえます。とりあえず今回はタコが水中で泳いでいる状態を作りたいとおもいます。先程の作ったタコの画像を元に、上下に伸縮したような以下のような画像を２枚増やします。これを先ほどと同様に個別にsvg画像として保存し、Scratchのお絵描きモードからコスチュームとして追加します。ということで、上からtaco(元の画像)、taco2(潰れた状態)、taco3(伸びた状態)の３つのコスチュームでアニメーション付きのスプライトを操作してみたいとおもいます。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ
コスチュームを変化させる
では画像が準備できたので、ブロックコーディングに移りましょう。まずは、下のようなブロックを組んで、アニメーションが動くか確かめましょう。コスチュームはアニメーションでみせるの順番に上から並べておくのが良いとおもいます。ここではtaco --> taco2 --> taco3の簡単なコマ割りですが、もっとより多くの枚数でアニメーションする場合に分かりやすくなるとおもいます。簡単ですが、アニメーションになっているようです。１回分のモーションが確認できたらアニメーション付きスプライトの完成です。アニメーションをブロック登録
コスチュームを変化させる場合のブロックコードは、ブロックを重ねる量が多くなったりすると、非常に縦長になってしまう場合があります。ブロックコーディングが無駄に長くなってしまうと、他の人がプログラムコード読む時に分かりづらいので、ここではブロック定義でアニメーションごと独自のブロックとしてまとめてみます。オリジナルのブロックを作成するには、[ブロック定義] --> [ブロックを作る] --> [ブロックを作る]ダイアログで名前を付ける --> [OK]とします。以下のような独自のブロック(の先頭部分)がキャンバス内に作成されるとおもいます。これを先程のアニメーションを試したブロックコードに接続します。これで、独自ブロックタコ泳ぎが、キャンバス内のどこらでも、何回でも呼び出して使用できるようになりました。これで下準備が終わったので、ようやくメインのブロックコーディングを作成できます。今回のメインコーディングは以下です。スプライトを動かすプログラムに関しては、前回のブログ内容で取り扱っていますので、詳しく確認したい場合にはそちらをご参照ください。
【Scratch入門】はじめてのScratchアプリ作成〜スプライトを自由に歩かせてみようScratchで画面内を自由に動き回るスプライトを作成します。
おまけ〜背景を変える
このままでは背景が真っ白で少し寂しいので、水中の背景を選択してみます。Scratchのコード画面で一番右下のステージから[背景を選ぶ]をクリックします。すると、利用可能な背景がダウンロードできるので、水中の背景を選択します。これでタコが水中を泳いでいる感じのプログラムにしあがりました。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選
まとめ
今回はScratchで簡単なアニメーション付きのスプライトの作成方法を解説しました。アニメーション付けは画像を描かないといけないので根気のいる作業です。まとまったゲームプログラムとして完成すると非常に出来栄えのあるものになると思います。お絵描きの延長として楽しみながらコツコツやると良いかも知れません。
