Tổng quan
METK là trình biên tập desktop để xây dựng bản đồ game dạng ô. Nền tảng hiện tại gồm chỉnh sửa theo layer, xử lý tileset, công cụ dựa trên rule, quy trình xuất TMX và workspace nhiều panel.
Kiến trúc giữ giao diện, điều phối ứng dụng, mô hình editor, kết xuất và API nền tảng tách biệt. React đảm nhiệm cấu trúc giao diện, PixiJS xử lý canvas tần suất cao và Tauri cung cấp khả năng desktop.
Bài toán
Editor tương tác kết hợp UI dày đặc, trạng thái tài liệu thay đổi liên tục, kết xuất tần suất cao, xử lý tệp và hành vi desktop native. Gắn trực tiếp tất cả vào React sẽ làm giảm hiệu năng, khả năng kiểm thử và mở rộng lâu dài.
Phạm vi kỹ thuật
Repository gồm UI workspace React, model và session của editor, application manager và command, canvas PixiJS, trạng thái Zustand, xử lý XML/JSON, xuất TMX, tích hợp file/dialog Tauri, đa ngôn ngữ cùng kiểm thử unit và integration.
Kiến trúc editor
Giao diện ủy quyền workflow cho tầng Application, nơi điều phối đối tượng và session của domain editor. Rendering đọc domain qua ranh giới PixiJS; import/export và thao tác desktop nằm sau các service hướng infrastructure và API Tauri.
Năng lực chính của editor
Workspace theo lớp
Các vùng editor linh hoạt cho thuộc tính, tilemap, tileset, layer, ruleset và entity collection.
Kết xuất tilemap
PixiJS và pixi-viewport xử lý canvas và điều hướng bên ngoài vòng render tần suất cao của React.
Thao tác editor
Application manager, session và command object phối hợp các thay đổi trạng thái editor.
Quy trình tệp
API file/dialog của Tauri cùng các tầng xử lý riêng hỗ trợ tài nguyên dự án và xuất TMX.
Quyết định kỹ thuật
Tách kết xuất canvas khỏi React
- Vấn đề
- Tương tác tilemap tạo cập nhật với tần suất và quy mô không phù hợp cho render component thông thường.
- Quyết định
- Dùng PixiJS và pixi-viewport làm tầng đồ họa riêng, trong khi React cấu trúc panel và control.
- Đánh đổi
- Ranh giới hiệu năng rõ hơn, nhưng đồng bộ trạng thái UI và renderer phải được thiết kế cẩn thận.
Command và application manager
- Vấn đề
- Một thao tác editor có thể tác động đồng thời đến document model, selection, session, view và persistence.
- Quyết định
- Định tuyến workflow qua application manager và command object thay vì đặt trong UI component.
- Đánh đổi
- Có nhiều tầng và kiểu dữ liệu rõ ràng hơn, đổi lại thao tác dễ kiểm thử và ít phụ thuộc UI.
Desktop shell Tauri
- Vấn đề
- Editor cần file và dialog native nhưng vẫn giữ giao diện TypeScript cùng stack đồ họa web.
- Quyết định
- Đóng gói bằng Tauri và chỉ cung cấp command/plugin native có phạm vi rõ ràng cho frontend.
- Đánh đổi
- Dự án cần Rust và công cụ build theo nền tảng, nhưng tránh bị giới hạn bởi quy trình tệp thuần trình duyệt.
Thách thức & đánh đổi
- Đồng bộ panel React, trạng thái Zustand, editor session và PixiJS mà không để một tầng sở hữu tất cả.
- Chuẩn hóa tilemap, tileset, layer, entity và selection xuyên suốt import, chỉnh sửa và export.
- Giữ workspace nhiều panel dễ dùng trong khi editor vẫn đang phát triển.
- Thiết kế điểm mở rộng cho rule và plugin tương lai mà không chốt sớm một API chưa ổn định.
Công nghệ
- 01Tauri
- 02React
- 03TypeScript
- 04PixiJS
- 05Zustand
- 06Tailwind CSS
- 07Vitest
Kết quả hiện tại
- Nền tảng editor desktop hoạt động với workspace nhiều panel và canvas tilemap thực tế.
- Cấu trúc mã mô-đun bao phủ workflow ứng dụng, model editor, đồ họa, tích hợp nền tảng và kiểm thử.
- Dự án vẫn đang phát triển; repository nêu rõ phiên bản hiện tại chưa phải bản phát hành hoàn thiện cho người dùng cuối.
Liên kết
Repository mã nguồn theo giấy phép AGPL được công khai. Hiện chưa có bản phát hành đóng gói hoặc live demo công khai.
Xem mã nguồn