9スライス

Playdate SDKにおける9スライス（9-slice scaling）は、UIのボタンやウィンドウなどの矩形画像を、角の歪みを抑えながら任意のサイズに引き伸ばして描画するための非常に便利な機能です。

画像を「4つの角」「4つの辺」「中央」の計9つの領域に分割し、リサイズ時に以下の処理を行う手法です。

これにより、一つの小さな画像資産から、小さなボタンから画面いっぱいのウィンドウまで、デザインを崩さずに生成できます。

Playdate SDKの nineSlice クラスを使用します。

インスタンスの作成

9スライス用画像を読み込む際、「引き伸ばしを許可する内部の矩形領域」を指定します。

local gfx = playdate.graphics
local myNineSlice = gfx.nineSlice.new("images/ui_frame", 5, 5, 10, 10)

描画

指定した座標とサイズで描画します。

function playdate.update()
    -- (x, y, width, height) を指定
    myNineSlice:draw(20, 20, 200, 100)
end

1-bit ディスプレイとディザリング: Playdateは白黒の2階調であるため、9スライスで画像を拡大する際、中間色の表現（ディザリング）が含まれていると、拡大によってパターンが崩れたり、意図しない縞模様（モアレ）が発生したりすることがあります。; 対策としては、9スライス用の画像は、極力ソリッドな白・黒、あるいは1ピクセル単位の単純なパターンで構成するのが最適です。
パフォーマンス: PlaydateのCPUにとって、毎フレーム複雑な9スライス描画を行うのは負荷がかかる場合があります。; そこで最適化として、サイズが固定されているUIであれば、nineSlice:draw を直接呼び出すのではなく、一度別の image に描画してキャッシュするか、playdate.graphics.sprite に割り当てて管理することをお勧めします。
C APIでの扱い: C言語SDKには Luaのような nineSlice クラスが標準で用意されていません。Cで実装する場合は、drawBitmap を使用して、画像を9つのパーツに分けて描画する独自の関数を作成する必要があります。

Playdate 非公式開発まとめ wiki