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