タイルマップ
1. 基本コンセプト
Playdateのタイルマップは、主に2つの要素で構成されます。
- 1. イメージテーブル (playdate.graphics.imagetable)
- タイルとして使用する画像を格子状に並べたファイル（.gif または複数の .png）
- 2. Tilemap Object (playdate.graphics.tilemap)
- どの位置にイメージテーブルの何番目のタイルを表示するかを管理するデータ（格子状の配列）
2. 実装の主な流れ
- ① Image Table の読み込み
- まず、タイルセットとなる画像を読み込みます。
local tileImageTable = playdate.graphics.imagetable.new("path/to/tileset")- ② Tilemap オブジェクトの作成と設定
- タイルマップを作成し、Image Table を紐付けます。
local myTilemap = playdate.graphics.tilemap.new()
myTilemap:setImageTable(tileImageTable)
-- タイルの配置（手動設定の場合）
-- setTiles(data, width) : dataはタイルIDの配列
myTilemap:setTiles({1, 1, 2, 1, 3, 2, 1, 1}, 4) - ③ 描画
- update 関数内で描画します。
function playdate.update()
playdate.graphics.clear()
myTilemap:draw(x, y)
end
- setTileCollisionMethods()
- どのタイルIDが「壁」として機能するかを指定できます。
- スプライトとの連携
- playdate.graphics.sprite.addEmptyCollisionSprite() を使い、タイルマップ全体を一つの巨大な衝突体として扱う手法が一般的です。
- これにより、プレイヤー（スプライト）が壁を通り抜けられないように制御できます。
4. 外部エディタの利用
コードで1つずつタイルを配置するのは現実的ではないため、通常は外部ツールを使用します。
- Tiled (Map Editor)
- 業界標準のツールです。
- Playdate SDKには Tiled で書き出した .tmx や .json ファイルを読み込むためのヘルパー関数や、コミュニティ製のプラグイン（例：LDtk 用など）が存在します。
- Playdate 独自の .tilemap 形式
- SDKに含まれる「Capsule」などのサンプルコードでも使われている形式です。
5. パフォーマンスとTips
- 描画の最適化
- タイルマップは非常に高速ですが、マップが巨大な場合は draw(x, y, width, height) を使い、画面内に見えている範囲（ビューポート）だけを描画するように指定するとさらに効率的です。
- レイヤー構造
- 複数の tilemap オブジェクトを作成することで、背景レイヤー、前景レイヤーといった重ね合わせが可能です。
- アニメーションタイル
- Playdate のタイルマップ自体には自動アニメーション機能はありませんが、playdate.graphics.imagetable:getImage(index) を使って、特定のタイルIDの中身を動的に書き換えることでアニメーションを実現できます。
関連ページ
最終更新：2026年05月03日 08:49
