Bạn muốn tự tay xây dựng một bản đồ Trung Địa isometric theo phong cách riêng? isomiddleearth là công cụ mã nguồn mở trên GitHub cho phép bạn paint từng ô gạch (tile) để tạo nên những vùng đất của Tolkien như Shire, Mordor, Gondor, và nhiều nơi khác. Công cụ xây dựng bản đồ Trung Địa isometric này phù hợp cho fan hâm mộ Lord of the Rings, game designer, và lập trình viên muốn khám phá phát triển web với Next.js và React.
Thank you for reading this post, don't forget to subscribe!Những điểm chính
- Xây dựng bản đồ isometric với 7 chủng tộc (Shire, Gondor, Mordor, Lothlorien, Rohan, Moria, Rivendell) và chế độ Mixed cho phép kết hợp tất cả.
- Paint bằng click/drag, undo (Cmd/Ctrl+Z), xoá bằng chuột phải, hỗ trợ character overlays (8 sprite Hobbit).
- Xuất bản đồ dưới dạng PNG hoặc JSON, import/export JSON từ toolbar, chia sẻ qua community collections với deep-link.
- Mã nguồn mở viết bằng Next.js 16, React 19, TypeScript, Zustand, Tailwind CSS, Radix/shadcn.
- Dễ dàng cài đặt với Node.js 18+ và pnpm 9+, chạy dev server local, hoặc dùng thử demo trực tuyến tại isomiddleearth.com.
isomiddleearth là gì và giải quyết vấn đề gì?
isomiddleearth là một trình xây dựng thế giới (world-builder) dạng isometric lấy bối cảnh Trung Địa của Tolkien. Nó giải quyết nhu cầu tạo bản đồ phong cách game chiến thuật cổ điển mà không cần phần mềm đồ hoạ phức tạp. Bạn có thể phác thảo nhanh một vùng đất, thử nghiệm bố cục, hoặc tạo bản đồ cho campaign D&D, board game, hay chỉ đơn giản là thoả mãn đam mê Middle-earth. Công cụ này đặc biệt hữu ích cho những ai muốn trực quan hoá ý tưởng mà không cần vẽ tay hay dùng Photoshop. Ngoài ra, tính năng export JSON và community collections cho phép cộng đồng chia sẻ và tái sử dụng bản đồ.
Những tính năng nổi bật
isomiddleearth cung cấp một bộ tính năng đầy đủ cho một map builder isometric:
- Canvas isometric with hover preview: Khi di chuột qua ô gạch, bạn thấy trước hình ảnh trước khi đặt.
- 7 realms (vùng đất): Shire, Gondor, Mordor, Lothlorien, Rohan, Moria, Rivendell. Mỗi realm có bộ tile riêng (terrain, water, trees, dwellings, buildings, decorations).
- Mixed mode: Cho phép kết hợp tile từ nhiều realm trong cùng một bản đồ – rất linh hoạt.
- Điều chỉnh grid size: Từ 3×3 đến 20×20 ô.
- Asset picker: Tab Buildings (đặt tile) và Characters (đặt sprite nhân vật – hiện có 8 sprite Hobbit).
- Paint & erase: Click/drag để vẽ, chuột phải để xoá (xoá character trước nếu có).
- Undo: Hỗ trợ phím tắt Cmd/Ctrl+Z.
- Export PNG: Chụp canvas xuống file ảnh.
- Export/Import JSON: Lưu trữ và phục hồi bản đồ dưới dạng JSON với schema version, map tiles.
- Community collections: Trang /collections duyệt bản đồ do cộng đồng đóng góp, có phân trang. Load trực tiếp bằng tham số ?collection=id.
- Persist local state: Dùng Zustand lưu state vào localStorage, không mất dữ liệu khi refresh.
Hướng dẫn cài đặt & sử dụng
Cài đặt môi trường
Yêu cầu Node.js 18+ và pnpm 9+. Nếu chưa có pnpm, cài bằng npm install -g pnpm.
- Clone repository:
git clone https://github.com/hasanharman/isomiddleearth.git - Vào thư mục:
cd isomiddleearth - Cài dependencies:
pnpm install - Chạy dev server:
pnpm dev - Mở trình duyệt tại
http://localhost:3000
Sử dụng editor
Trên thanh công cụ phía trên, chọn một realm (hoặc Mixed). Ở thanh dưới, chọn tab Buildings để vẽ tile nền, tab Characters để đặt sprite. Click hoặc kéo chuột để paint, chuột phải để xoá. Sử dụng toolbar để undo, thay đổi grid size, export PNG, export/import JSON.
Định dạng JSON
Khi export/import, JSON phải theo schema: { 'schemaVersion': 1, 'id': 'my-map', 'name': 'My Map', 'author': { 'name': 'Anonymous', 'github': '...' }, 'createdAt': '...', 'location': 'mixed', 'gridSize': 7, 'map': [[[0, 0, 'shire'], [2, 4, 'gondor']], ...] }. Lưu ý: character overlays chưa được hỗ trợ trong format này, chỉ có tile map.
Ai nên dùng — ai không nên?
Nên dùng: Fan hâm mộ Trung Địa muốn tạo bản đồ nhanh, game designer cần prototype map isometric, lập trình viên học React/Next.js muốn xem project thực tế, những ai thích sưu tầm bản đồ cộng đồng. Không nên dùng: Nếu bạn cần 3D, terrain procedural generation, hoặc muốn một phần mềm chuyên nghiệp như Wonderdraft. Cũng lưu ý rằng repository chưa công bố giấy phép cụ thể, nên nếu có ý định thương mại hãy kiểm tra kỹ với tác giả.
Bạn có thể xem chi tiết tại repository gốc trên GitHub.
Câu hỏi thường gặp
Có cần tài khoản GitHub để sử dụng isomiddleearth không?
Không. Bạn có thể dùng thử trực tuyến tại isomiddleearth.com mà không cần đăng nhập. Chỉ cần clone repository nếu muốn chạy local hoặc đóng góp mã nguồn.
Làm sao để chia sẻ bản đồ với người khác?
Dùng tính năng Export JSON để tải file về, sau đó gửi file đó cho người khác. Họ có thể Import JSON trong editor. Bạn cũng có thể đóng góp bản đồ vào community collections theo hướng dẫn trong thư mục collections/README.md.
Có hỗ trợ thêm vùng đất mới (realm) không?
Hiện tại chỉ có 7 realm cố định. Nhưng vì mã nguồn mở, bạn có thể tự thêm realm mới bằng cách thêm thư mục tile và cập nhật logic, nhưng đòi hỏi kiến thức về Next.js và canvas.
Làm sao để thêm asset tile hoặc character của riêng tôi?
Đặt file ảnh vào thư mục public/tiles/<realm>/r<row>-c<col>.png cho tile, và public/characters/<character-realm>/<character-id>.png cho character. Runtime sẽ fallback về r0-c0 nếu thiếu tile.
Có thể dùng bản đồ cho mục đích thương mại không?
Repository hiện chưa có giấy phép (license). Bạn nên liên hệ tác giả qua GitHub Issues để xin phép trước khi sử dụng cho thương mại.
Kết luận
isomiddleearth là một công cụ mã nguồn mở đáng chú ý cho bất kỳ ai yêu thích Trung Địa và muốn tạo bản đồ isometric nhanh chóng. Với giao diện trực quan, tính năng paint mượt, hỗ trợ export linh hoạt và cộng đồng sôi động, nó xứng đáng được thử nghiệm. Hãy ghé qua isomiddleearth trên GitHub để clone, fork, hoặc đóng góp ý tưởng của bạn!
