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