イージング - Playdate 非公式 開発まとめ wiki

イージング (Easing)

PlaydateのSDK（特にLua SDK）におけるイージング（Easing）は、アニメーションを滑らかに、あるいは生き生きとさせるための不可欠な要素です。
Playdateには標準で強力なイージングライブラリが組み込まれており、自分自身で計算式を書かなくても、一般的なアニメーション効果を簡単に実装できます。

---

---

概要

1. 基本的な仕組み

Playdateのイージング関数は、基本的に Robert Pennerのエポックメイキングな数式 に基づいています。

ほとんどのイージング関数は、以下の4つの引数を取ります。

t (time)

アニメーション開始からの経過時間（またはフレーム数）。

b (beginning)

開始時の値。

c (change)

変化量（終了時の値 - 開始時の値）。

d (duration)

アニメーションの総時間（または総フレーム数）。

2. 利用可能なイージングの種類

playdate.easingFunctions モジュールには、以下のタイプが用意されています。それぞれに In（加速）、Out（減速）、InOut（加速して減速）のバリエーションがあります。

タイプ	特徴
linear	一定の速度。最も基本的
quad / cubic / quart / quint	べき乗による加速。数字が大きくなるほど急激
sine	正弦波に基づいた、非常に緩やかな変化
expo	指数関数的。非常に鋭い動き
circ	円の弧に沿ったような動き
back	少し行き過ぎてから戻る（オーバーシュート）
bounce	ボールが跳ねるような動き
elastic	ゴムのように伸び縮みする動き

3. 実践的な使い方

Playdateでイージングを利用する方法は主に2つあります。

A. playdate.graphics.animator を使う（推奨）

これが最も簡単で一般的な方法です。スプライトの移動やメニューの開閉によく使われます。

local gfx = playdate.graphics
 
-- 2000ミリ秒かけて、0から400まで、outBack（少し行き過ぎる）で変化するアニメーター
local myAnimator = gfx.animator.new(2000, 0, 400, playdate.easingFunctions.outBack)
 
function playdate.update()
    gfx.clear()
    -- 現在の値を取得して円を描画
    local val = myAnimator:currentValue()
    gfx.fillCircleAtPoint(val, 120, 20)
end

B. 直接関数を呼び出す

特定の計算の中でイージングの値を直接得たい場合に使用します。

local easing = playdate.easingFunctions
local val = easing.inQuad(currentTime, startVal, changeVal, duration)

タイマーやアニメーションと比較して制御の自由度は高いですが、フレームレートに依存しないように注意が必要です。

4. カスタムイージング

標準の関数以外に、独自のイージング（例えばベジェ曲線など）を使いたい場合は、関数を自作して animator に渡すことも可能です。その関数は前述の t, b, c, d を引数として受け取り、計算結果を返す必要があります。

開発時のヒント

1. アニメーションはフレームレート非依存

animator はデフォルトでミリ秒単位で動作するため、フレームレートが変動してもアニメーションの速度が一定に保たれます。

2. BackとElasticの調整

inBack などの関数には、追加の引数（s：オーバーシュート量など）を渡して挙動を微調整できるものがあります。

3. デバッグ

動きが不自然に感じるときは、まずは outCubic や outQuad を試してみてください。これらはUIの移動において最も「自然」に見えやすい設定です。

Playdateの画面は白黒でリフレッシュレートにも特徴があるため、イージングを適切に使うことで「カクつき」を抑え、高級感のある手触りを実現できます。

関連ページ

• API
• API/playdate.easingFunctions
• API/playdate.timer
• アニメーション
• タイマー
• 用語集