#008 月面でジャンプ！1回転ジャンプの作り方

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

コスチュームを2枚交互に切り替えるだけで、キャラクターが「歩いている」ように見える仕掛けが効いている。パラパラ漫画と同じ原理で、静止画を素早く入れ替えることで動きとして知覚させる——アニメーションの根本を、スクラッチの繰り返しブロックだけで再現しているのが面白い。この仕掛けがどんなブロックで組まれているか、作り方を見ていこう。

動画で見てみよう

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

今回の目標

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

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

#1スタート位置の設定

準備

スプライト「ギガ」を開く

ギガ

スプライトについて
ギガが画面左から歩き、上にグライドして1回転し、元の高さに戻るアニメーションを担うスプライト
どんな役割か
ギガを画面の左から歩かせて、上にジャンプしてくるっと1回転させるアニメーションを作るよ！コスチュームを交互に切り替えながら歩く動きを表現しよう。

実装

イベント が押されたときでスタート。動きx座標を ( ) 、y座標を ( ) にするでx座標を-170、y座標を-100にセットして、ギガを画面の左下あたりに配置するんだ。ここがアニメーションの出発点になる。

#2歩行アニメーション

制御( ) 回繰り返すで15回繰り返して、その中で10歩ずつ動かすよ。同時に見た目次のコスチュームにするでコスチュームを切り替えると、足踏みしながら進む歩行アニメーションになるんだ。10歩×15回で合計150歩、x座標でいうと-170から-20あたりまで移動する計算だね。

[talk]アニメーションの基本は「パラパラ漫画」と同じ仕組みだよ。ギガのコスチュームはたった2枚しかないけど、交互にパッパッと切り替えるだけで歩いてるように見える。テレビアニメやゲームも全部この原理で、たくさんの静止画を高速で切り替えて動きを作ってるんだ。[/talk]

#3ジャンプと1回転

動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけてy座標80の位置まで滑らかに移動するよ。このブロックを使うと、瞬間移動じゃなくてスーッと動く自然な動きが作れるんだ。

空中に着いたら動き( ) ( ) 度回すを90度ずつ4回繰り返して1回転（90×4＝360度）させるよ。回転のたびに0.1秒の間を入れることで、くるくる回ってる動きがちゃんと目に見えるようになる。待ち時間を入れないと一瞬すぎて何が起きたかわからなくなっちゃうよね。

#4着地してポーズ

回転が終わったら着地させよう。動き( ) 秒でx座標を ( ) に、y座標を ( ) に変えるで1秒かけてy座標0の位置までグライドして降りるんだ。

最後に見た目コスチュームを ( ) にするで「コスチューム1」に切り替えて、ギガを立ち姿に戻すよ。もしコスチュームをリセットしないと、次に旗を押したとき中途半端な姿勢からスタートしてしまう。きちんと元の姿に戻しておくのが仕上げのポイントだね。

[talk]アニメーションの世界では「ポーズ・トゥ・ポーズ」っていう考え方があるんだ。動きの最初と最後のポーズをしっかり決めてから、その間を埋めていくやり方のこと。この作品でも「左下で立つポーズ」と「着地してまっすぐ立つポーズ」がはっきりしてるから、動き全体がきれいにまとまるんだよ。[/talk]

まとめ

これでアニメーションが完成したね！コスチュームを交互に切り替えると歩いてるように見える——この仕組みを使えば、どんなキャラクターでも歩かせたり動かしたりできるよ。グライドブロックを使って滑らかな動きも自在に作れるから、ぜひいろいろアレンジしてみてね。