中学高校で習った数式使ってソシャゲの大当たりっぽいフェードインを作る ~イージング入門~

「やったー!レアが当たったー!」と興奮させたい!

ゲームを面白くする手段として、演出ってすごく大事!

・・・という話をよく聞きます。

ならば演出の勉強をしようではないかと思い立ち、演出界の大御所「ソシャゲのガチャ演出」っぽいフェードインを作ってみることにしました。

目標は、数式を使って簡単でそれっぽいフェードインが作れるようになることです。

こんな数式で、それっぽいフェードインができる!数式すげえ!となったらいいなと思います。

とりあえず演出の型を作る

とりあえず、実験用のプログラムを書きました。

方針としては、とりあえずカードの透明度を徐々に上げつつ大きくすると、それっぽくなりそうです。

ということで、プログラムを実装してみました。動作結果がこちらになります。

(画像は星宝転生ジュエルセイバー様の素材を使っています。ソシャゲ素材なのでピッタリ。)

See the Pen fadeinCard by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.0

右下の「Rerun」ボタンを押すともう一度再生します。

プログラミングに興味がある方はプログラムの解説のテキストをクリックすると

プログラムの内容を知ることができます。興味ない方は飛ばしてもらっても構いません。

・使用言語:javascript (描画ライブラリ:pixi.js)

コードを細かく見たい時は、右上の「EDIT ON CODEPEN」と書かれてる部分をクリックしてください。

CODEPENのページに飛ぶので、大きな画面でコードを見ることができます。

コメントアウトに説明を書きましたが、何が何だかわからんと思う方も多いと思いますので、実際にコードをいじってみましょう。

試しに、下図の赤枠内にあるcard.time+=0.01;の 「0.01」から「0.001」に変更して、Returnボタンを押してみてください。

(下図は画像です。)

こんな感じにスローな表示に置き換わっていると思います。

赤枠は60fpsの毎フレームで実行される関数です。

ここでcard.timeの値を0から0.01ずつ、1になるまで加算する処理を行っています

(※pixi.js学びたい方向:正確に60fpsがでない時もありますが、その時はdeltaを使うと良いです。実際のフレーム数が格納されています。)

そして、このcard.timeの値をそのまま、不透明度(alpha)、スケール(scale.x,scale.y)に代入することで、徐々に不透明になりつつ、大きくなる処理が実現できます。

以上、プログラムの説明終わり!

・・・なんか物足りないですね。

とりあえず、回転させてみました。

・・・うーん、なんか違うような。

さて、このプログラムを改良していくことで、理想のガチャ演出を実現していきたいと思います。

これではまだ演出が足りないです。

もっと、バンっと表示した方が、いい感じになりそうですね。

ここで、イージングという概念を加えてみたいと思います。

イージングを加えてみる

イージングとは、数値の変化度合いを変更する機能のことです。

パワーポイント等のプレゼンテーションソフトで、アニメーションを設定するときに使いますよね。

徐々に表示させるフェードインや、徐々に消していくフェードアウトを使ったことがある方も多いのではないでしょうか。

今回であれば、0~1で変化するcard.timeの値の変化を下図のどれかに変更することを指します。

変化のさせ方はたくさんあるということですね。

(Easing Function 早見表)https://easings.net/ja

先ほど紹介したの変更方法は線形的に変化しているだけなので、以下のグラフになります。

(Ke!san 生活や実務に役立つ計算サイト)https://keisan.casio.jp/exec/system/1180917567

$$easingFunc(time)=time$$

ただの一次関数だとやっぱり単調に見えてしまいますね。

これから、このイージングを用いて表示方法を変化させてみます。

Ease In (だんだん早くなる!)の数式を作る

0~1の1付近でものすごく加速する関数をまず作ります。

(Ke!san 生活や実務に役立つ計算サイト)https://keisan.casio.jp/exec/system/1180917567

この関数は中学で習った二次関数を使うことで実現できます。

$$easingFunc(time)=time^2$$

実際の動作結果がこちらです。

See the Pen fadeinCard by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.dark

だんだん加速し、最後は急に止まるようなエフェクトになります。

急に加速度が0になるような、物理法則から反するエフェクトは、違和感を感じます。

どうやら、イージングは物理法則に合うような動きが好まれるようです。

Ease Out (だんだん遅くなる) の数式を作る

今度は逆にだんだん遅くなる処理です。

(Ke!san 生活や実務に役立つ計算サイト)https://keisan.casio.jp/exec/system/1180917567

数式は以下を使います。

$$easingFunc(time)=time*2-time^2$$

timeの二倍からtimeの二乗を引くと、0~1の範囲では、EaseOutの数式になりました。

See the Pen fadeinCard (Ease Out) by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.dark

最初が速くて、だんだん加速度が落ちていくエフェクトです。

こっちは自然に強調できるエフェクトなので、比較的好んで使われるイージングみたいです。

Bounce Out (オーバーシュートする) の数式を作成する

強調表現をするならば、オーバーに表示させたいものです。

加速し過ぎて、オーバーシュートした後、戻るような動きを再現できれば、かなりの強調効果が期待できそうです。

(Ke!san 生活や実務に役立つ計算サイト)https://keisan.casio.jp/exec/system/1180917567

数式は以下。

$$easingFunc(time)=time^3+time*amp*sin(time*π) $$

ampの値を上げると、オーバーシュート度合いを増やすことができます。

time=0.5の時に、time*π=90°になるので、sin(time*π)=1となり、

最もオーバーシュートします。

time=1になると、sin(time*π)=0となるので、easingFunc(time)=1に戻ることになります。

さて、実際に実装してみましょう。

See the Pen fadeinCard (Bounce Out) by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.dark

いい感じですね!

フェードインを工夫するだけで大当たりの快感が増してきたのではないでしょうか。

まとめ イージング関数ってすごい・・・!

今回は、ソシャゲの大当たりっぽいフェードインができるイージング関数を考えてみました。

その中で、イージング関数ってどんな数式で実現できるのか、理解できたかと思います。

ここで紹介した数式はあくまで一例です。

実際には三角関数やlogを使ってより曲線が強調された波形を使うパターンもあるので、ここで紹介しましたコードを実際にいじってみると、面白いと思います。

自分の欲しい曲線を手に入れるために、数学ソフト系サイトの参考事例を見てみたり・・・。

・グラフ作成ソフトOrigin

https://www.lightstone.co.jp/origin/flist2.html

実際に数式を打ち込んで、関数グラフを見てみるのも一興かもしれません。

・Keisan

https://keisan.casio.jp/exec/system/1180917567

では、最後に色々試行錯誤した結果をお見せしたいと思います。

それでは!

・ライバルズっぽいパターン

See the Pen fadeinCard (Reverse) by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.dark

・やけに回転しているパターン

See the Pen fadeinCard (other) by ほっとフクロウ(作っちゃうおじさん) (@hothukurou) on CodePen.dark

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク