スクラッチでネコが走るアニメーションの作り方｜コスチューム切り替えの使い方

はじめてのスクラッチ

さぁ、スクラッチでナニ作る！？

2枚のコスチュームを交互に切り替えるだけで、滑るように移動していたネコが走り出す。この設計が効いているのは、人間の目が連続する静止画を「動き」として補完する性質を、最小限の仕組みで利用しているからだ。変数もカスタムブロックも不要で、1つのブロックを加えるだけで見た目が劇的に変わる。この錯覚をScratchでどう作り出しているのか、仕組みを見ていこう。

動画で見てみよう

ok-scratch

チャンネル登録して応援よろしく！

チュートリアルの元になった作品

complete

by ok-scratch

プレイしておこう

今回のスクラッチを作る参考作品です。

今回の目標

ネコが画面を左右に走り続けるアニメーションを作ろう。コスチュームを切り替えて、足が動いているように見せるのがポイントだ。

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1ネコの初期設定

準備

スプライト「ネコ」を開く

ネコ

スプライトについて
左右に歩いてステージを往復するネコ。コスチューム切り替えで歩行アニメーションを表現している
どんな役割か
ネコが画面を左右に歩いて、端で跳ね返るアニメーションを作るよ！コスチュームを交互に切り替えることで足が動いてるように見えるんだ。ずっとループし続けるから、フラグを押せばいつまでも歩き続けるぞ。

実装

前回は制御ずっとでネコを左右に動かし続けたよね。あのネコ、よく見ると足が止まったまま滑ってるだけだよ。今回は「コスチューム」を使って、ちゃんと走ってるように見せるんだ。

まず旗クリックでネコの初期設定をしよう。動きx座標を ( ) 、y座標を ( ) にするで座標(0, -100)に配置して、見た目コスチュームを ( ) にするで「コスチューム1」にセット。回転方法を「左右のみ」にしないと、端で反転したときネコが逆さまになるんだ。

ok-scratch

Scratchの座標は画面の中央が(0, 0)で、右に行くとxが増えて、上に行くとyが増えるよ。だからy=-100は真ん中よりちょっと下の位置ってこと。数学のグラフと同じ考え方だから、座標に慣れておくとラクだよ。

#2走るアニメーション

いよいよネコを走らせよう。制御ずっとは前回も使ったよね。この中に移動・コスチューム切り替え・跳ね返りの3つをセットするよ。

10歩ずつ進みながら見た目次のコスチュームにするでコスチュームを切り替えるのがポイント。ネコには右足が前のポーズと左足が前のポーズの2つがあって、これを交互に表示するとパラパラ漫画みたいに走って見えるけど、もしこのブロックを入れなかったら足が止まったまま滑る前回のネコに戻るんだ。

ok-scratch

コスチュームの切り替えでアニメーションを作るこの仕組み、実はテレビやアニメと全く同じ原理だよ。少しずつ違う絵を高速で切り替えると、人間の目には「動いてる」ように見える。テレビは1秒間に約30枚、映画は24枚の絵を見せていて、パラパラ漫画もScratchもこの錯覚を利用してるんだ。

動きもし端に着いたら、跳ね返るで端に着いたら自動で折り返す。前回と違ってコスチューム切り替えが加わっただけなのに、滑ってたネコがちゃんと走り出すのが面白いっしょ。次回は「乱数」を使って、動きにランダムな要素を加えていくよ！

確認プレビューしておこう

旗を押すとネコが画面を左右に走って、端で跳ね返るようになったね。

まとめ

コスチュームを切り替えるだけで、滑ってたネコが走り出したね。このパラパラ漫画の仕組み、テレビもアニメも全部同じ原理で動いてるって知ったら、なんかすごくない？次回は「乱数」で動きにランダムな要素を加えていくよ。また一緒に作ろう！