概要
Iso Middle-earthは、等角世界構築ツール。ブラウザベースのWebアプリケーションで、プログラミング知識を必要とせず、グリッドをベースにした等角図法で自由にランドスケープを設計・編集できる。
主な機能
- 等角グリッド配置: 複数の軸で構成された等角グリッド上に、地形や建造物オブジェクトを直感的に配置
- 複数のレルムと地形タイル: 7つのレルム(shire、gondor、mordor、lothlorien、rohan、moria、rivendell)、混合モード、6つのグループ化されたタイルカテゴリ(地形、水と橋、木と植生、住居、建造物、装飾)を用意
- キャラクターオーバーレイ: 8個のホビットスプライトを配置可能
- リアルタイムプレビュー: ホバープレビューで配置変更と同時に画面上に反映
- エクスポート機能: PNG形式およびJSON形式での出力に対応
- グリッドカスタマイズ: 3x3から20x20までのグリッドサイズを調整可能
- undo機能: Cmd/Ctrl+Zでの操作取り消しに対応
- 共有機能: コミュニティコレクションブラウザ(/collectionsで閲覧可能、ページネーション対応)とディープリンク読み込み(/?collection=
)に対応 - Asset picker tabs: BuildingsおよびCharactersタブでアセット選択を実施
技術スタック
- フロントエンド: Next.js 16、React 19
- 言語: TypeScript 5
- パッケージマネージャー: pnpm 10
- 状態管理: Zustand(localStorage経由の永続化)
導入方法
- リポジトリのクローン
git clone https://github.com/hasanharman/isomiddleearth.git cd isomiddleearth - 依存パッケージのインストール
pnpm install - 開発サーバーの起動
pnpm dev -
ブラウザでアクセス デフォルトでは
http://localhost:3000にアクセス可能。UIが表示され、グリッド上にタイルを配置して編集開始。 - 本番環境へのデプロイ
pnpm run build pnpm start
使用方法
Buildingsタブで terrain/building tiles を配置し、Charactersタブでキャラクターオーバーレイを配置する。クリック・ドラッグでタイル配置、右クリックで削除が可能。作成したデータはローカルストレージに自動保存される。
ライブデモ
https://isomiddleearth.com/