TL;DR

Một developer vừa tung ra Mykonos Island Voxels - trình xây đảo isometric trên trình duyệt lấy cảm hứng từ vẻ đẹp Địa Trung Hải: mái vòm xanh cobalt, tường trắng, cối xay gió, cây olive. Điểm đặc biệt: toàn bộ chạy bằng vanilla ES modules không có bundler, không transpiler, không node_modules - mở index.html là chạy ngay. Dự án đạt 389 stars và 80 forks chỉ trong 3 ngày, viral mạnh đến mức demo Netlify bị paused vì hết bandwidth.

Mykonos Island Voxels - giao diện trình xây dựng đảo isometric với city scene đầy đủ

Vấn đề nó giải quyết

Hầu hết browser-based builder hiện nay đều mang theo một đống toolchain: React/Vue, webpack/Vite, node_modules vài trăm MB, build step tốn vài phút. Với một creative toy nhỏ - nơi bạn chỉ muốn đặt khối lên lưới cho vui - tất cả những thứ đó là overhead không cần thiết.

Mykonos Island Voxels chứng minh điều ngược lại: một ứng dụng canvas2D hiệu năng cao, mobile-first, với 75+ asset và sound design hoàn chỉnh - tất cả gói gọn trong HTML thuần, CSS, và ES modules. Không có gì ngăn bạn fork về, mở terminal gõ python3 -m http.server 8000, và bắt đầu build đảo của mình.

Tính năng nổi bật

  • 75+ painterly assets phân loại thành 5 nhóm: terrain, nature, props, water, buildings - bao gồm chapels, windmills, two-story villas, cypress, olive trees, agave, wells, lanterns, fences, bridges
  • Click-to-build isometric grid với elastic placement animation khi đặt asset
  • One-click "Fill with grass" - trải cỏ toàn bộ lưới 14×14 chỉ một nút
  • Touch-first mobile UI: tap để đặt, long-press ~420ms để xóa, drag để brush, two-finger pinch/pan. Layout thích nghi từ desktop xuống điện thoại nhỏ, có safe-area insets cho iPhone notch
  • Auto-save qua localStorage - đảo của bạn tự lưu và reload mỗi lần mở lại
  • Sound design tinh tế: 6 loại âm thanh placement riêng biệt (water, stone, wood, small vegetation, large vegetation, UI clicks) với debounce để brush-paint không flood audio bus
Asset palette reference - 75+ painterly assets phân loại thành terrain, vegetation, props, buildings

Kiến trúc đáng học

Đây là phần thú vị nhất nếu bạn là developer. Renderer được thiết kế để idle frames essentially free - không phải kiểu nói cho hay, mà là kiến trúc có chủ đích:

  • 4 lớp cache canvas: backdrop/vignette (rebuild khi resize), platform (rebuild khi grid thay đổi), terrain layer (rebuild khi terrain version counter đổi), static-objects layer (rebuild khi add/remove). Mỗi frame chỉ composite các cache này và overlay tile đang animation - phần tĩnh không tốn compute.
  • High-DPI pipeline: source PNG pre-render ở 6× display resolution lúc load time, bake vào cache canvas. Cache canvas sized tại world × CACHE_SCALE (2× standard, 3× retina) - ảnh luôn crisp ở mọi zoom/density mà không bị softening.
  • O(1) spatial index trong TileMap - object lookup và free-cell check là O(1) thay vì O(N) qua object list.
  • Dirty-flag rendering: markDirty() được gọi từ camera/input/tool transition; vòng lặp exit sớm khi scene tĩnh và không có animation pending.

Codebase viết bằng 85.8% JavaScript, 10.1% CSS, 1.9% HTML - không có dependency runtime nào từ bên ngoài. Deploy lên Netlify với netlify-build.mjs tạo dist/ sạch với cache headers đúng chuẩn (immutable cho assets, must-revalidate cho HTML/CSS/JS).

So với các tool khác

Câu hỏi tự nhiên: tại sao không dùng MagicaVoxel hay Minecraft?

MagicaVoxel là 3D voxel editor - bạn xây từng cube trong không gian 3D. Mykonos Island Voxels là scene-composer 2D isometric với 75+ pre-drawn painterly assets. Mục đích hoàn toàn khác: một cái để tạo 3D model, cái kia để sắp xếp cảnh đẹp không cần học 3D.

Minecraft có survival mechanics, resource grind, 3D world không giới hạn - overhead quá lớn khi bạn chỉ muốn một trải nghiệm nhẹ nhàng, thư giãn. Lưới 14×14 của Mykonos là ràng buộc có chủ đích - giống kiểu puzzle-piece, không phải limitation.

Browser builders khác thường kéo theo React/Vue + bundler. Đây là điểm phân biệt quan trọng nhất: dự án này là blueprint cho thấy Canvas2D + vanilla JS có thể đi xa đến đâu mà không cần framework.

Hạn chế cần biết

  • Lưới cố định 14×14 - không thể mở rộng
  • Không có game mechanics (không có save slot, không có export, không có multiplayer)
  • Cần HTTP server để chạy local - browsers từ chối ES modules từ file://
  • Live demo hiện tại bị paused do hết Netlify bandwidth (viral surge sau khi release)
  • Contribution yêu cầu giữ framework-free - không thể thêm bundler/transpiler

Kết

Mykonos Island Voxels viral không phải vì tính năng nhiều hay gameplay phức tạp - mà vì nó làm một thứ thật tốt: trải nghiệm xây đảo thư giãn, đẹp, mượt, chạy ngay trên browser không cần cài gì. Và đặc biệt với developer, nó là tài liệu sống về cách tối ưu Canvas2D - dirty-flag rendering, layered caching, O(1) spatial index, high-DPI pipeline - mà không cần một dòng framework nào.

Dự án được phát hành chỉ 3 ngày trước, đạt 389 stars, PRs vẫn đang mở. Nếu bạn muốn contribute hoặc fork về tạo theme riêng (ai đó sẽ làm Japanese Edo, Santorini, hay Hội An thôi), đây là lúc lý tưởng.

via GitHub - boona13/mykonos-island-voxels