API/playdate.easingFunctions - Playdate 非公式開発まとめ wiki

playdate.easingFunctions

playdate.easingFunctions は、値を時間に沿って補間するためのイージング関数群です。

playdate.easingFunctions
関連ページ

概要

基本形はすべてほぼ同じです。

value = playdate.easingFunctions.xxx(t, b, c, d)

t = 経過時間
b = 開始値
c = 変化量、つまり endValue - startValue
d = 全体時間

-- 0 から 100 へ、1.0秒かけて移動
local x = playdate.easingFunctions.outQuad(elapsed, 0, 100, 1.0)

c は「終了値」ではなく「変化量」です。100 → 40 に動かすなら b = 100, c = -60 です。
重要なのは、t が 0 のとき基本的に b に近い値を返し、t == d のとき (b + c) に近い値を返す、ということです。

実用上は、以下のように t を d で clamp した方が安全です。

local t = math.min(elapsed, duration)
local x = playdate.easingFunctions.outQuad(t, startX, targetX - startX, duration)

in/outの分類

関数名の in/out はおおよそ以下のように分類されます。

命名規則	概要	用途
inXXX	最初が遅く、後半に速くなる	ボタンを押した後に加速していく、落下開始、溜め動作などに向いています
outXXX	最初が速く、後半に遅くなる	UI移動、カーソル移動、メニュー表示などで最も使いやすいです
inOutXXX	前半は加速、後半は減速	自然な往復移動、カメラ移動、演出用のスムーズな補間に向いています
outInXXX	前半は減速、後半は加速	中央で一度落ち着いてから、また動き出すような補間です。 UI用途では inOut より使用頻度は低めです

基本系

linear(t, b, c, d)

等速補間です。
速度変化なしで、一定速度で値が変化します。

向いているもの

タイマー
ゲージ
一定速度の移動
機械的な動き

UIアニメーションでは少し硬く見えます。

Sine 系

inSine(t, b, c, d): ゆっくり始まり、後半で速くなります。; Quad/Cubic より柔らかい加速です。
outSine(t, b, c, d): 最初が速く、最後に柔らかく止まります。; UIの移動にかなり使いやすいです。
inOutSine(t, b, c, d): 前半加速、後半減速。非常に自然です。; カメラ移動、メニュー遷移、フェードなどに向きます。
outInSine(t, b, c, d): 前半 outSine、後半 inSine 的な動きです。

Quad / Cubic / Quart / Quint 系

指数が大きくなるほど、加速・減速のメリハリが強くなります。

Quad (二次関数)

二次関数的な補間です。最も標準的です。

playdate.easingFunctions.inQuad(t, b, c, d)
playdate.easingFunctions.outQuad(t, b, c, d)
playdate.easingFunctions.inOutQuad(t, b, c, d)
playdate.easingFunctions.outInQuad(t, b, c, d)

おすすめ用途

UIパネル移動
カーソル移動
軽い演出
汎用アニメーション

迷ったら outQuad か inOutQuad でよいです。

Cubic (三次関数)

三次関数的な補間です。Quad より強めです。

playdate.easingFunctions.inCubic(t, b, c, d)
playdate.easingFunctions.outCubic(t, b, c, d)
playdate.easingFunctions.inOutCubic(t, b, c, d)
playdate.easingFunctions.outInCubic(t, b, c, d)

おすすめ用途

少し気持ちよく止めたいUI
カメラ演出
キャラクターの演出移動

outCubic は UI でかなり使いやすいです。

Quart (四次間数)

四次関数的な補間です。Cubic よりさらに強いです。

playdate.easingFunctions.inQuart(t, b, c, d)
playdate.easingFunctions.outQuart(t, b, c, d)
playdate.easingFunctions.inOutQuart(t, b, c, d)
playdate.easingFunctions.outInQuart(t, b, c, d)

おすすめ用途

強めの加速感
スライドイン演出
画面外から勢いよく入るUI

Quint (五次間数)

五次関数的な補間です。かなり強い加速・減速になります。

playdate.easingFunctions.inQuint(t, b, c, d)
playdate.easingFunctions.outQuint(t, b, c, d)
playdate.easingFunctions.inOutQuint(t, b, c, d)
playdate.easingFunctions.outInQuint(t, b, c, d)

おすすめ用途

派手な演出
短時間でキレよく動かすUI
ゲーム的な強調アニメーション

通常のUIには少し強すぎることがあります。

Expo 系

指数関数的な補間です。動きの差が非常に大きいです。

playdate.easingFunctions.inExpo(t, b, c, d)
playdate.easingFunctions.outExpo(t, b, c, d)
playdate.easingFunctions.inOutExpo(t, b, c, d)
playdate.easingFunctions.outInExpo(t, b, c, d)

特徴

inExpo は最初ほぼ動かず、最後に急加速
outExpo は最初に一気に動いて、最後にゆっくり止まる
かなり演出的

用途

強調されたメニュー遷移
ワープ感
勢いのあるUI
スコア表示の派手な移動

普段使いなら outExpo が使いやすいです。

Circ 系

円弧的な補間です。

playdate.easingFunctions.inCirc(t, b, c, d)
playdate.easingFunctions.outCirc(t, b, c, d)
playdate.easingFunctions.inOutCirc(t, b, c, d)
playdate.easingFunctions.outInCirc(t, b, c, d)

特徴

Expo ほど極端ではない
Quad/Cubic より少し独特
加速・減速が丸い

用途

物理的な動き
カメラ補間
ふわっとしたUI移動

Back 系

一度逆方向にはみ出してから動く、または目標値を少し超えて戻る補間です。

playdate.easingFunctions.inBack(t, b, c, d, s)
playdate.easingFunctions.outBack(t, b, c, d, s)
playdate.easingFunctions.inOutBack(t, b, c, d, s)
playdate.easingFunctions.outInBack(t, b, c, d, s)

追加引数

s: number -- overshoot量、省略可能

s は「どれくらいはみ出すか」です。省略可能です。

inBack

最初に逆方向へ少し引いてから進みます。

outBack

目標値を少し超えてから戻ります。

UIではかなり便利です。

用途

ボタンのポップ表示
メニューの出現
アイコンの強調
スコア表示

s を大きくすると、はみ出しが強くなります。

local x = playdate.easingFunctions.outBack(t, 0, 100, 0.5, 2.5)

Bounce 系

跳ね返りのような補間です。

playdate.easingFunctions.inBounce(t, b, c, d)
playdate.easingFunctions.outBounce(t, b, c, d)
playdate.easingFunctions.inOutBounce(t, b, c, d)
playdate.easingFunctions.outInBounce(t, b, c, d)

outBounce

最後にバウンドして止まる動きです。

用途

アイテム取得演出
テキストの着地
アイコン表示
コミカルなUI

inBounce

最初にバウンド的な動きが入り、最後に加速します。使用頻度は outBounce より低めです。

inOutBounce

前半と後半の両方にバウンド感があります。

outInBounce

中央付近で跳ねるような印象になります。

Elastic 系

ゴムのように伸び縮みする補間です。

playdate.easingFunctions.inElastic(t, b, c, d, a, p)
playdate.easingFunctions.outElastic(t, b, c, d, a, p)
playdate.easingFunctions.inOutElastic(t, b, c, d, a, p)
playdate.easingFunctions.outInElastic(t, b, c, d, a, p)

追加引数

a: number -- amplitude、省略可能
p: number -- period、省略可能

a は振幅、p は周期です。

outElastic

目標値を超えて、ビヨンビヨンと揺れながら収束します。

用途

ポップアップ
報酬表示
コミカルなUI
強いリアクション演出

a と p を指定すると揺れ方を調整できます。

local x = playdate.easingFunctions.outElastic(t, 0, 100, 1.0, 1.0, 0.3)

注意点として、Elastic は値が目標値を超えます。座標やスケールには向きますが、ゲージ量やHPなど「範囲外に出てほしくない値」には注意が必要です。

資料

実用例：スプライトを滑らかに移動

local gfx <const> = playdate.graphics
local startX = 20
local endX = 300
local duration = 0.5
local elapsed = 0
function playdate.update()
    elapsed += 1 / 30
    local t = math.min(elapsed, duration)
    local x = playdate.easingFunctions.outQuad(
        t,
        startX,
        endX - startX,
        duration
    )
    gfx.clear()
    gfx.fillCircleAtPoint(x, 120, 8)
end

実用例：UIをポップ表示

local duration = 0.35
local elapsed = 0
function playdate.update()
    elapsed += 1 / 30
    local t = math.min(elapsed, duration)
    local scale = playdate.easingFunctions.outBack(
        t,
        0.0,
        1.0,
        duration
    )
    -- scale を画像サイズや描画倍率に使う
end

outBack は Playdate のような小画面UIと相性が良いです。少ないフレーム数でも「出てきた感」が出ます。

Playdateでの使い分け

実用上のおすすめは以下です。

用途	おすすめ
普通のUI移動	outQuad, outCubic, outSine
自然なカメラ移動	inOutSine, inOutQuad, inOutCubic
ポップアップ	outBack, outElastic
コミカルな着地	outBounce
強い加速	inExpo, inCubic, inQuart
強い減速	outExpo, outQuart, outQuint
等速移動	linear

Playdate 非公式開発まとめ wiki