【Scratch入門】コスチュームを変えてスプライトのアニメーション効果を付ける

2020/08/17

【Scratch入門】繰り返しのテクニックを覚える〜最適なループブロックを選択しよう

【Scratch入門】リストから数値データを使いこなす

Scratchでスプライトにアニメーションで動かすようにしたい場合には、

コスチューム

を時間で切り替えるようにする必要があります。

今回は簡単なコスチューム画像を用意して、単純アニメーション効果をもったスプライトを作成します。

完成品はこちらです。

【Pスクール厳選】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

(伸びた状態)の３つのコスチュームでアニメーション付きのスプライトを操作してみたいとおもいます。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

コスチュームを変化させる

では画像が準備できたので、ブロックコーディングに移りましょう。

まずは、下のようなブロックを組んで、アニメーションが動くか確かめましょう。

コスチュームはアニメーションでみせるの順番に上から並べておくのが良いとおもいます。ここでは

taco --> taco2 --> taco3

の簡単なコマ割りですが、もっとより多くの枚数でアニメーションする場合に分かりやすくなるとおもいます。

簡単ですが、アニメーションになっているようです。

１回分のモーションが確認できたらアニメーション付きスプライトの完成です。

アニメーションをブロック登録

コスチュームを変化させる場合のブロックコードは、ブロックを重ねる量が多くなったりすると、非常に縦長になってしまう場合があります。

ブロックコーディングが無駄に長くなってしまうと、他の人がプログラムコード読む時に分かりづらいので、ここでは

ブロック定義

でアニメーションごと独自のブロックとしてまとめてみます。

オリジナルのブロックを作成するには、

[ブロック定義] --> [ブロックを作る] --> [ブロックを作る]ダイアログで名前を付ける --> [OK]

とします。

以下のような独自のブロック(の先頭部分)がキャンバス内に作成されるとおもいます。

これを先程のアニメーションを試したブロックコードに接続します。

これで、独自ブロック

タコ泳ぎ

が、キャンバス内のどこらでも、何回でも呼び出して使用できるようになりました。

これで下準備が終わったので、ようやくメインのブロックコーディングを作成できます。今回のメインコーディングは以下です。

スプライトを動かすプログラムに関しては、前回のブログ内容で取り扱っていますので、詳しく確認したい場合にはそちらをご参照ください。

【Scratch入門】はじめてのScratchアプリ作成〜スプライトを自由に歩かせてみよう

Scratchで画面内を自由に動き回るスプライトを作成します。

これでともかく、泳いでいるかのようなタコのアニメーションスプライトができました。

おまけ〜背景を変える

このままでは背景が真っ白で少し寂しいので、水中の背景を選択してみます。

Scratchのコード画面で一番右下の

ステージ

から

[背景を選ぶ]

をクリックします。

すると、利用可能な背景がダウンロードできるので、水中の背景を選択します。

これでタコが水中を泳いでいる感じのプログラムにしあがりました。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

今回はScratchで簡単なアニメーション付きのスプライトの作成方法を解説しました。

アニメーション付けは画像を描かないといけないので根気のいる作業です。

まとまったゲームプログラムとして完成すると非常に出来栄えのあるものになると思います。

お絵描きの延長として楽しみながらコツコツやると良いかも知れません。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選