さぁ、スクラッチでナニ作る!?
コスチュームを2枚交互に切り替えるだけで、キャラクターが「歩いている」ように見える仕掛けが効いている。パラパラ漫画と同じ原理で、静止画を素早く入れ替えることで動きとして知覚させる——アニメーションの根本を、スクラッチの繰り返しブロックだけで再現しているのが面白い。この仕掛けがどんなブロックで組まれているか、作り方を見ていこう。
動画で見てみよう
チュートリアルの元になった作品
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1スタート位置の設定
準備
スプライト「ギガ」を開く
| スプライトについて |
|---|
| ギガが画面左から歩き、上にグライドして1回転し、元の高さに戻るアニメーションを担うスプライト |
| どんな役割か |
| ギガを画面の左から歩かせて、上にジャンプしてくるっと1回転させるアニメーションを作るよ!コスチュームを交互に切り替えながら歩く動きを表現しよう。 |
実装
が押されたときでスタート。x座標を ( ) 、y座標を ( ) にするでx座標を-170、y座標を-100にセットして、ギガを画面の左下あたりに配置するんだ。ここがアニメーションの出発点になる。
#2歩行アニメーション
( ) 回繰り返すで15回繰り返して、その中で10歩ずつ動かすよ。同時に次のコスチュームにするでコスチュームを切り替えると、足踏みしながら進む歩行アニメーションになるんだ。10歩×15回で合計150歩、x座標でいうと-170から-20あたりまで移動する計算だね。
#3ジャンプと1回転
( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけてy座標80の位置まで滑らかに移動するよ。このブロックを使うと、瞬間移動じゃなくてスーッと動く自然な動きが作れるんだ。
空中に着いたら( ) ( ) 度回すを90度ずつ4回繰り返して1回転(90×4=360度)させるよ。回転のたびに0.1秒の間を入れることで、くるくる回ってる動きがちゃんと目に見えるようになる。待ち時間を入れないと一瞬すぎて何が起きたかわからなくなっちゃうよね。
#4着地してポーズ
回転が終わったら着地させよう。( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけてy座標0の位置までグライドして降りるんだ。
最後にコスチュームを ( ) にするで「コスチューム1」に切り替えて、ギガを立ち姿に戻すよ。もしコスチュームをリセットしないと、次に旗を押したとき中途半端な姿勢からスタートしてしまう。きちんと元の姿に戻しておくのが仕上げのポイントだね。
まとめ
これでアニメーションが完成したね!コスチュームを交互に切り替えると歩いてるように見える——この仕組みを使えば、どんなキャラクターでも歩かせたり動かしたりできるよ。グライドブロックを使って滑らかな動きも自在に作れるから、ぜひいろいろアレンジしてみてね。