さぁ、スクラッチでナニ作る！？
このチュートリアルでは、スペースキーでジャンプするスライムキャラクターを作るよ。ただサイズを変えるだけじゃなく、透明コスチュームを経由することでScratchのサイズ制限を回避しながら、魚眼レンズ果と組み合わせてぷにっとした有機的な変形を実現するのがポイント。ピクサー映画でも使われる「スクワッシュ＆ストレッチ」という本格的なアニメーションテクニックが学べる、コンパクトだけど奥が深い小技だよ！
動画で見てみよう
チュートリアルの元になった作品
スクラッチ小技：スライム
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ジャンプの初速
準備
スプライト「スライム」を開く
スライム| スプライトについて |
|---|
| スペースキーでジャンプし、着地時に変形アニメーションを行うスライムキャラクター |
| どんな役割か |
| ジャンプして着地するスライムを作るよ！スペースキーで飛び上がって、地面に着いたときにぷにっと変形するアニメーションを入れていこう。 |
変数「Y速度」を追加
スライムの縦方向の移動速度。ジャンプや重力によって変化する
実装
( ) キーが押されたときでスペースキーの入力を検知して、「Y速度」変数を16にセットするんだ。この16が初速で、数値が大きいほど高くジャンプする。あとのステップで重力をかけていくから、今はまだ飛びっぱなしでも大丈夫。
#2ぷにっと変形
準備
カスタム定義「変形する」を追加
speed_yをもとにサイズとフィッシュアイエフェクトを変化させ、ジャンプ中の変形アニメーションを表現するプロシージャ
実装
魚眼レンズを使うだけだとおかしくなるから、コスチュームに工夫する。横幅をキャンバスと合わせた透明な正方形を描いて、キャラの足（スライムには足はないんだけど）にぴったり合わせておこう。あと、全く何も描いてない「透明」というコスチュームも用意しておくとキレイに伸び縮みする。
「変形する」カスタム定義の中では、まず「透明」コスチュームに切り替えてからサイズと魚眼レンズ効果を「Y速度」に応じて変えて、最後に「スライム」コスチュームに戻す。大きさを ( ) ずつ変えると( ) の効果を ( ) ずつ変えるの値はどちらも「0 − Y速度」だから、上昇中は縦に伸びて、落下中は横に潰れるって変形が自然に生まれるんだ。
#3メインループ
ずっとの中で「Y速度」の絶対値が0より大きいかどうかをチェックして、動いているときだけ「変形する」を呼び出す仕組みだね。止まっているときに変形処理を走らせても意味がないから、この条件分岐で無駄を省いてるってわけ。
#4重力と着地
やることはけっこうシンプルだよ。「Y速度」を毎フレーム-3ずつ減らして、y座標を ( ) ずつ変えるでそのぶんY座標を動かすだけ。初速16から-3ずつ引かれていくから、上昇→減速→落下っていう放物線を描くんだ。
地面の判定はY座標が-120より下になったかどうか。下回ったらy座標を ( ) にするで-120にピタッと固定して、地面にめり込むのを防いでるよ。
#5形をもとに戻す
準備
カスタム定義「形をリセットする」を追加
スライムのサイズとフィッシュアイエフェクトを初期値に戻し、着地時の変形を解除するプロシージャ
実装
「形をリセットする」の中身も透明コスチューム経由パターン。大きさを ( ) %にするでサイズを500に、( ) の効果を ( ) にするで魚眼レンズを0に戻してから「スライム」コスチュームに切り替えるんだ。サイズが500なのは、コスチュームに大きな透明バウンディングボックスが付いてるから――これが通常の見た目100%相当になる。
#6着地でリセット
ステップ#3で作った着地判定の中に「形をリセットする」の呼び出しと、「Y速度」を0にするブロックを追加する。これで着地した瞬間にぷにっと形が戻ってスライムが止まるんだ。もう一度スペースキーを押せばまたジャンプできるから、何度でもぷにぷに遊べるっしょ。
まとめ
スライムのぷにぷにジャンプ、完成！透明コスチューム経由のサイズ制限回避と魚眼レンズ効果の組み合わせって、最初は「そんなのアリなの？」って感じだけど、仕組みを理解すると他の場面でもめちゃくちゃ応用が利くテクニックだよ。重力の-3っていう値を変えたり、魚眼レンズ効果の強さを調整したりしながら、自分だけのスライムを育ててみてね！