間取り図の CAD エディタとユニットが徘徊するゲームマップ。ジャンルがまったく違うこの2つを、同じエンジンの上に載せました。
フレームワーク非依存の 2D 配置エンジン「Kimetron Isle（キメトロン・アイル）」v1.0.0 を OSS 公開しました。MIT ライセンスです。
ブラウザだけで動きます:
https://cuculhart.github.io/kimetron/
発想 — 「座標はレイアウトの結果」から「座標は設計データ」へ
ほとんどのキャンバス・図形ライブラリは、スクリーン座標・ピクセル単位・Y下向きで設計されています。位置は「見た目の結果物」です。
一方で CAD やゲームの世界では、座標それ自体がデータです。壁は「左から 200mm、厚さ 120mm」として存在し、ユニットは「建物の中のどこか」に存在する。見た目はそのデータの描画にすぎません。
Kimetron Isle はこの発想をライブラリの芯に据えた 2D 配置エンジンです。
エンジンの顔: plan ドライバ（CAD）
10mm グリッドの建造物見取り図です。
- 壁は厚さ×長さの矩形。同じ占有域を持つオブジェクト同士は重なれないので、突き合わせの「|-」接合が自然に組めます
- ドアだけが例外的に壁に乗れる（ペア例外ポリシー）
- ルーラー・寸法線・壁芯の表示、そして壁から導出される建築面積——壁を動かすと敷地/建築/壁芯/内法の面積がその場で変わります
エンジンの顔: game ドライバ（ゲーム）
同じエンジンで、30cm 角のユニットが建物内を徘徊します。
- ユニットは壁も岩（ロック済みの凹多角形）も通れない。出られるのは開口部（ゲート）だけ
- ユニット同士は重なれない。隣接すると効果リンク（会話・攻撃の想定）が出る
- 移動はエンジンの
tryMoveを通るので、自律移動もドラッグと同じ衝突ポリシーが適用されます - 池は SVG パターン描画——見た目もドライバ側の領分です
どちらもエンジンは同一で、違うのはドライバが宣言するポリシーだけです。
何ができるか
| 機能 | 内容 |
|---|---|
| ワールド座標 | 実寸単位（mm/m/inch/px）・原点選択（左下/左上）・グリッド＋頂点/辺中点/中心スナップ・縮尺ズーム |
| 衝突・占有 |
solid 同士は重なれない（辺接触は合法）・canOverlap ペア例外・collisionMode（none/flag/reject） |
| 形状 | 矩形に加えて line/curve/ellipse/arc/多角形 kind。凹多角形も正しく hit・衝突 |
| 回転 | オブジェクト回転は OBB/SAT の衝突判定まで貫通 |
| 移動 API |
objectsIn（範囲クエリ）・canPlace・tryMove — ジェスチャを介さない移動もポリシー経由 |
| 編集基盤 | immutable モデル・undo/redo・JSON シリアライズ・ロック/グループ/層 |
アーキテクチャ
@kimetron/core（DOM 非依存の vanilla TS）＋ @kimetron/dom（SVG/CSS レンダラ）＋ @kimetron/react（薄いアダプタ）の三層です。Kimetron が意味づけるのは幾何とインタラクションまで——「ドアは壁に乗れる」「岩は動かせない」「ユニット同士は重なれない」は、すべてドライバのポリシーとして書きます。
きっかけ
Plesfeda・Sethera Piece を React Flow 上に作って分かったのは、キャンバスライブラリとの結合部が薄いこと。そして全ライブラリがスクリーン座標前提で、「座標に意味を持たせる」土台がなかったこと。Sethera は A4 用紙枠を mm→px で手動変換しており、実寸モデルの需要は自前コードが証明済みでした。
名前の由来
Kimetron = シュメール語 ki（場・地）＋ギリシャ語 metron（尺度・測定）。「測る場」。Isle は浮島——硬い幾何語と柔らかい自然語の対比です。
現状
v1.0.0 は API 安定宣言（v0.6.0 以降は追加のみ）。ただし寸法追従・名前付きレイヤ・ブロック参照などは 1.x の拡張領域です。TypeScript + React 19 + Vite、MIT、完全ローカル動作。
間取り・機器配置・席配置・ゲームマップ——「配置に意味がある」アプリを作る方の基盤になれば幸いです。