アットウィキロゴ
Playdate 非公式 開発まとめ wiki
アットウィキロゴ
Playdate 非公式 開発まとめ wiki
ページ一覧

playdate.graphics

importの定義

graphicsの機能を使用するには、基本的に以下のimport文が必要です。 
import "CoreLibs/graphics" -- graphicsの機能を使うために必要.
 

描画状態・画面全体

clear(color?)
画面全体をクリアします。
color を渡せばその色で全面塗りつぶし、渡さなければ setBackgroundColor() で設定されている背景色が使われます。
  • フレームの最初に毎回呼ぶ基本関数です
  • 単なる「初期化」ではなく、画面全体を指定色で描くイメージです

getBackgroundColor()
現在の背景色を返します。
clear() が引数なしで使われたときの基準色です。
setBackgroundColor(color)
背景色を設定します。
以後、clear() を引数なしで呼んだときにこの色が使われます。
  • kColorWhite
  • kColorBlack
  • kColorClear
  • kColorXOR
などの色定数を使います

getColor()
現在の描画色を返します。
線・図形・塗りつぶしなどで今使われる色です。

setColor(color)
現在の描画色を設定します。
以後の drawLine()、fillRect() などがこの色で描かれます。
  • 図形描画の基本状態を変える関数です
  • 画像描画のモードは setImageDrawMode() が別管理です

クリップ・描画範囲・描画先

clearClipRect()
現在のクリッピング矩形を解除します。
setClipRect() で制限していた描画範囲を元に戻します。

getClipRect()
現在のクリップ矩形を返します。
どの範囲に描画が制限されているか確認できます。

setClipRect(rect) / setClipRect(x, y, width, height)
描画可能範囲を矩形で制限します。
この矩形の外には基本的に描画されません。
  • UI の一部だけ更新したいとき
  • スクロール領域やウィンドウ風表示を作るとき
  • 一時的に描画範囲を制限したいとき
に使います。

getScreenClipRect()
画面基準のクリップ矩形を返します。
setScreenClipRect() で設定した内容を取得します。

setScreenClipRect(rect) / setScreenClipRect(x, y, width, height)
画面座標基準でクリッピング矩形を設定します。
setClipRect() と似ていますが、描画オフセットの影響を受けない画面基準の切り抜きとして使う場面があります。

getDrawOffset()
現在の描画オフセットを返します。
setDrawOffset() で設定したカメラ的なずらし量です。

setDrawOffset(x, y)
以後の描画を (x, y) だけずらして行うようにします。
ワールド全体をスクロールさせるような用途で便利です。
  • カメラ移動
  • マップスクロール
  • 全体シェイク演出
などでよく使います。

getDisplayImage()
現在の表示内容を表す image を返します。
画面に出ているイメージを取得したいときに使います。

getWorkingImage()
現在の描画先 image を返します。
通常は画面ですが、pushContext() 中はそのオフスクリーン image になります。

lockFocus(image)
指定 image を描画先にします。
古い系統の API で、実質は「この image に描け」という意味です。
現在は pushContext() / popContext() の方が扱いやすいです

pushContext(image)
描画先を指定 image に切り替えます。
以後の図形描画・文字描画は画面ではなく、引数に指定した "image" に対して行われます。
pushContext()は、スタック付き Render Target 切替関数と言い換えられます
スタックを戻すときには popContext() を使用します。
  • オフスクリーン描画
  • 動的に image を生成
  • キャッシュ済みパーツの作成
などで重要です。

popContext()
pushContext() で切り替えた描画先を元に戻します。

ステンシル・マスク系

clearStencil()
ステンシルバッファをクリアします。
ステンシルによる描画制限を解除したいときに使います。

clearStencilImage()
deprecated です。
古い互換用で、内容としてはステンシル解除系です。新規コードでは避けた方がよいです。

setStencilImage(image, tile)
指定 image をステンシルとして設定します。
ステンシルが黒白マスクのように働き、描画できる場所を制限します。
  • tile を true にするとタイル状に繰り返して使えます

setStencilPattern(level, ditherType) / setStencilPattern(pattern) / setStencilPattern(row1, row2, row3, row4, row5, row6, row7, row8)
パターンをステンシルとして設定します。
複数の呼び方があり、ディザパターン指定・8x8パターン指定のどちらもできます。
  • 透過率っぽい表現
  • ドットマスク表現
  • 一部だけ描画可能にする表現
に向いています。

線・ストローク設定

getLineWidth()
現在の線幅を返します。

setLineWidth(width)
線幅を設定します。
drawLine()、drawRect()、drawPolygon() などの輪郭の太さに影響します。

setLineCapStyle(style)
線の端の形を設定します。
引数：style
  • kLineCapStyleButt
  • kLineCapStyleSquare
  • kLineCapStyleRound
のような値を使います。

drawLine()、drawRect()、drawPolygon() などの線の端の形に影響します。
getStrokeLocation()
矩形などのストローク位置設定を返します。

setStrokeLocation(location)
矩形の線を中心に描くか、内側に描くか、外側に描くかを設定します。
  • kStrokeCentered
  • kStrokeInside
  • kStrokeOutside
を使います。
UI のピクセル精度を整えたいときに重要です。

パターン・画像描画モード

setPattern(pattern)
現在の塗りや描画に使うパターンを設定します。
単色ではなく、8x8 の繰り返しパターンで描画したいときに使います。
  • モノクロ環境で濃淡を擬似表現する基本技法です

setDitherPattern(alpha, ditherType)
ディザリングを使って、擬似的な半透明・中間濃度のような見た目を設定します。
  • alpha は 0.0 ～ 1.0 的な濃さ
  • ditherType でパターンの出方を変える
Playdate では本物のアルファブレンドがないので、かなり重要です。

getImageDrawMode()
現在の画像描画モードを返します。

setImageDrawMode(mode)
画像や文字をどのように描くか設定します。
たとえば:
  • 普通に描く
  • 白だけ透明扱い
  • 黒だけ透明扱い
  • 白で塗る
  • 黒で塗る
  • XOR
  • 反転
などです。
文字も内部的には画像として描かれるので、テキスト描画にも影響します。

図形描画

drawPixel(x, y)
1ピクセルだけ描きます。最も基本的な描画単位です。
drawLine(ls) / drawLine(x1, y1, x2, y2)
線分を描きます。
playdate.geometry.lineSegment を渡すか、座標4つを渡します。
の影響を受けます。

drawRect(r) / drawRect(x, y, w, h)
枠線だけの矩形を描きます。
  • 線幅は setLineWidth()
  • 線の位置は setStrokeLocation()
に影響されます。

fillRect(r) / fillRect(x, y, width, height)
塗りつぶし矩形を描きます。
もっとも頻出の図形関数のひとつです。

drawRoundRect(r, radius) / drawRoundRect(x, y, w, h, radius)
角丸の枠線矩形を描きます。
UI パネルやボタンに向いています。

fillRoundRect(r, radius) / fillRoundRect(x, y, w, h, radius)
角丸の塗りつぶし矩形を描きます。

drawCircleAtPoint(p, radius) / drawCircleAtPoint(x, y, radius)
指定中心・半径の円の輪郭を描きます。

fillCircleAtPoint(p, radius) / fillCircleAtPoint(x, y, radius)
指定中心・半径の塗りつぶし円を描きます。

drawCircleInRect(r) / drawCircleInRect(x, y, width, height)
矩形に内接するような円を描きます。
矩形が正方形でなくても、中央に円として描かれます。

fillCircleInRect(r) / fillCircleInRect(x, y, width, height)
矩形内に収まる塗りつぶし円を描きます。

drawEllipseInRect(rect, startAngle?, endAngle?) / drawEllipseInRect(x, y, width, height, startAngle?, endAngle?)
楕円の輪郭を描きます。
startAngle と endAngle を与えると、楕円の一部だけ描けます。
  • 角度はラジアンではなく度数法です

fillEllipseInRect(rect, startAngle?, endAngle?) / fillEllipseInRect(x, y, width, height, startAngle?, endAngle?)
楕円を塗りつぶして描きます。
角度指定で部分扇形っぽい使い方もできます。

drawArc(arc) / drawArc(x, y, radius, startAngle, endAngle)
円弧を描きます。
角度は度数法です。
  • ゲージ
  • メーター
  • 扇状 UI
  • 回転表現
に使いやすいです。

drawTriangle(x1, y1, x2, y2, x3, y3)
三角形の輪郭を描きます。

fillTriangle(x1, y1, x2, y2, x3, y3)
三角形を塗りつぶして描きます。

drawPolygon(p) / drawPolygon(x1, y1, x2, y2, ...)
多角形の輪郭を描きます。
  • polygon オブジェクトを渡す方法
  • x, y の並びを可変長引数で渡す方法
があります。
座標列版は最後の頂点と最初の頂点が結ばれます。

fillPolygon(p) / fillPolygon(x1, y1, x2, y2, ...)
多角形を塗りつぶします。
  • polygon オブジェクト版では、閉じた polygon でないとエラーになります
  • 色またはパターンで塗られます

setPolygonFillRule(rule)
ポリゴン塗りつぶし時のルールを設定します。
  • kPolygonFillNonZero
  • kPolygonFillEvenOdd
自己交差ポリゴンや穴のある形で挙動が変わります。

drawSineWave(startX, startY, endX, endY, startAmplitude, endAmplitude, period, phaseShift?)
2点間にサイン波近似の線を描きます。
  • 開始振幅と終了振幅を別々に指定可能
  • period は山と山の間隔
  • phaseShift は波のずらし量
装飾線、電流表現、水面、エネルギー線などに向きます。

テキスト描画

テキスト描画定数
テキストに関する定数は以下の通り。
定数カテゴリ 定数名 説明
kTextAlignment
kAlign
(テキストアラインメント)
 kTextAlignment.left 左揃え (★デフォルト)
kAlignLeft
kTextAlignment.center 中央揃え。画面中央に表示するロゴやメニューなど
kAlignCenter
kTextAlignment.right 右揃え。スコアや右側に寄せたいUIで使います
kAlignRight
kWrap
(テキスト折り返し)		 kWrapClip 範囲外をクリップ (範囲外は描画しない)
kWrapCharacter 文字単位で折り返します。
日本語のように単語区切りが明確でない文字列では、こちらの方が自然な場合があります
kWrapWord 単語単位で折り返します。 (★デフォルト)
英語の文章向きです
  • (※1) テキストアラインメントには「kTextAlignment」と「kAlign*」の2つの定義がある (どちらも同じ)
drawText(text, rect, fontFamily?, leadingAdjustment?, wrapMode?, alignment?) / drawText(text, x, y, width, height, fontFamily?, leadingAdjustment?, wrapMode?, alignment?)
現在のフォント設定を使ってテキストを描きます。
Playdate の文字描画の中心となる関数です。
特徴
  • 複数行対応
  • 折り返し対応
  • 左・中央・右寄せ対応
  • bold や italic のインライン装飾対応
  • fontFamily を渡すと通常/太字/斜体の組を使えます
補足
  • 幅・高さを渡すと、その矩形内にレイアウトされます
  • leadingAdjustment は行間の補正
  • wrapMode は clip / character / word
  • alignment は left / center / right を指定します

drawTextAligned(text, x, y, alignment, leadingAdjustment?)
指定 x 座標に対して、左寄せ・中央寄せ・右寄せでテキストを描きます。
  • 横中央に見出しを置く
  • 右端揃えの数値を描く
といった用途で便利です。
引数 説明 省略
alignment アラインメント (→kTextAlignment) ×
leadingAdjustment 行間の高さ ◯
drawTextInRect(text, rect, leadingAdjustment?, truncationString?, alignment?, font?) / drawTextInRect(text, x, y, width, height, leadingAdjustment?, truncationString?, alignment?, font?)
指定矩形 (rect or (x, y, width, height)) の中にテキストを描きます。
収まりきらないときの扱いを細かく制御したい場合に向いています。
特徴
  • はみ出す場合に truncationString を末尾に付けられる
  • font を渡すと、装飾なしの単一フォント描画になる
  • 戻り値として、描画後の幅・高さ・切り詰め有無を返す仕様
用途
  • ログ一覧
  • ラベル欄
  • セル内文字
  • UI の固定領域

ローカライズ文字列

getLocalizedText(key, language?)
.strings ファイルからローカライズ済み文字列を取得します。
描画せず、まず文字列として欲しいときに使います。

drawLocalizedText(key, rect, language?, leadingAdjustment?) / drawLocalizedText(key, x, y, width, height, language?, leadingAdjustment?, wrapMode?, alignment?)
ローカライズキーを .strings から引いて、その結果を描画します。
drawText() のローカライズ版です。

drawLocalizedTextAligned(text, x, y, alignment, language?, leadingAdjustment?)
ローカライズ文字列を、左寄せ・中央寄せ・右寄せで描きます。
drawTextAligned() のローカライズ版です。

drawLocalizedTextInRect(text, rect, leadingAdjustment?, truncationString?, alignment?, font?, language?) / drawLocalizedTextInRect(text, x, y, width, height, leadingAdjustment?, truncationString?, alignment?, font?, language?)
ローカライズ文字列を指定矩形の中に描きます。
drawTextInRect() のローカライズ版です。

フォント・テキスト計測

getFont(variant)
現在設定されているフォントを返します。
variant 指定で通常・太字・斜体などの変種を取る用途があります。
getSystemFont(variant)
システムフォントを返します。
自前フォントではなく、Playdate 標準のフォントを明示的に使いたいとき向けです。

setFont(font, variant)
現在のフォントを設定します。
必要に応じて variant ごとに登録できます。
  • 通常体
  • 太字
  • 斜体
を drawText() のインライン装飾に対応させたいときに使います。

setFontFamily(fontFamily)
フォントファミリーを設定します。
通常・太字・斜体のセットをまとめて登録するイメージです。
フォントファミリーは font::newFamily() で作成します。
getFontTracking()
現在の文字間隔設定を返します。

setFontTracking(pixels)
文字間隔をピクセル単位で設定します。
詰める・広げる調整に使います。

getTextSize(str, fontFamily?, leadingAdjustment?)
文字列を描画したときに必要な幅・高さを返します。
事前レイアウト計算の基本です。
  • 見出しの中央寄せ位置計算
  • ボックス幅の自動決定
  • 吹き出しサイズ計算
などで使います。
フォントファミリーは font::newFamily() で作成します。

getTextSizeForMaxWidth(text, maxWidth, leadingAdjustment, font)
最大幅を与えた場合に、折り返し込みで必要になるサイズを返します。
複数行レイアウトを前提にサイズを見積もる関数です。

画像系ユーティリティ

imageSizeAtPath(path)
ファイルを実際に読み込まず、画像サイズだけ取得します。
  • レイアウト先に収まるか確認
  • 画像ごとのサイズ差分を見たい
  • 読み込み前に寸法だけ知りたい
ときに便利です。

imageWithText(text, maxWidth, maxHeight, backgroundColor, leadingAdjustment, truncationString, alignment, font)
文字列を描いた image を生成します。
「画面に直接文字を描く」のではなく、文字入り画像を作る関数です。
用途
  • 何度も使うラベルをキャッシュ
  • スプライトの画像として文字を持たせる
  • 毎フレーム文字組みをしたくない場合の前処理

checkAlphaCollision(image1, x1, y1, flip1, image2, x2, y2, flip2)
2つの image の不透明ピクセル同士が実際に重なっているかを判定します。
  • 単なる矩形衝突ではなくピクセル精度寄り
  • flip 指定も考慮
当たり判定を厳密にしたいときに使います。

ノイズ・生成系

perlin(x, y, z, repeat, octaves, persistence)
Perlin ノイズ値を1点分返します。
  • 地形生成
  • 揺れ
  • 雲
  • 有機的な変化
  • ディザパターンの元データ
などに使えます。

perlinArray(count, x, dx, y, dy, z, dz, repeat, octaves, persistence)
Perlin ノイズ値を配列でまとめて返します。
連続サンプルをまとめて取りたい場合に便利です。
  • 波形生成
  • ライン変形
  • ノイズベースアニメーション
で有利です。

generateQRCode(stringToEncode, desiredEdgeDimension, callback)
文字列から QR コードを生成します。
非同期コールバックで受け取る形です。
  • desiredEdgeDimension はサイズ指定
  • 生成結果を image として扱う用途が基本です

関連ページ

「playdate.graphics」をウィキ内検索
最終更新：2026年05月01日 09:00