アウトライン (外周線)
概要
Playdateは1bit（白か黒か）の非常に特殊なスクリーンを持っているため、オブジェクトを背景から際立たせる「アウトライン（外周線）」の処理は、視認性を確保する上で極めて重要です。
1. 描画ずらし法（複数回描画）
最も一般的で、かつ実装が簡単な方法です。オブジェクトを上下左右（あるいは斜めを含む8方向）に1ピクセルずつずらして描画し、最後に中央に本体を描画します。
- 実装のイメージ（Lua例）
local gfx = playdate.graphics
function drawWithOutline(image, x, y)
gfx.setImageDrawMode(gfx.kDrawModeFillWhite) -- 白地をアウトラインにする場合
for dx = -1, 1 do
for dy = -1, 1 do
if dx ~= 0 or dy ~= 0 then
image:draw(x + dx, y + dy)
end
end
end
gfx.setImageDrawMode(gfx.kDrawModeCopy)
image:draw(x, y)
end- メリット どんな形状の画像やテキストにも動的に適用できる
- デメリット: 1つの描画に対して5〜9倍の負荷がかかる。大量のオブジェクトに使うとFPSが劇的に落ちます
2. プリレンダリング法（事前作成）
画像アセットそのものに、あらかじめアウトラインを書き込んでおく手法です。
- メリット
- 実行時の負荷がゼロ。Playdateにおいて最も推奨される方法です。
- デメリット
- アセットのサイズが少し大きくなる（1px分）。また、実行中にアウトラインの色や太さを変えるといった柔軟性はありません。
3. ステンシル（Stencil）を利用する方法
playdate.graphics.setStencilImage を使用して、特定の領域だけを塗りつぶす手法です。
- 元の画像を少し膨張させた（あるいはずらした）形状をステンシルとして設定
- その範囲を黒や白で塗りつぶす
- その上に元の画像を描画する
- メリット
- 複雑な図形や、動的に形状が変わるものに対して正確なアウトラインが引ける。
- デメリット
- ステンシルの切り替えはコストがかかるため、使い所を選ぶ。
4. テキストのアウトライン
Playdateの標準
フォント描画にはアウトライン機能がありません。そのため、以下のいずれかをとります。
- フォント作成時に工夫する
- Capsuleフォントのように、最初から縁取りがあるフォントを自作・利用する。
- DrawTextを重ねる
- 前述の「描画ずらし法」をテキストに対して行う。
- Dither（ディザリング）を活用
- 背景が複雑な場合、アウトラインではなく「背後に薄い網掛け（ディザ）」を置くことで視認性を高めるのもPlaydateらしい手法です。
パフォーマンス比較と推奨
| 手法 |
CPU負荷 |
実装難易度 |
柔軟性 |
| プリレンダリング |
極低 |
低（画像作成時） |
低 |
| 描画ずらし |
高 |
低 |
高 |
| ステンシル |
中 |
中 |
中 |
PlaydateはCPUリソースが限られているため「動かないものはプリレンダリング」「動くもの（キャラなど）は、ここぞという時だけ描画ずらし」という使い分けが賢明です。
特に1bitの画面では、「黒いキャラに白いアウトライン」を付けるだけで、背景がどんなに密集していても一気にゲームらしく、見やすくなります。
関連ページ
最終更新：2026年05月02日 10:19
