Node kế tiếp luôn hé lộ reward
Chest, restoration, coach unlock hoặc gate được preview. Không dùng dấu hỏi giả để ép click.
Map Level: album hồi sinh & Coach Cove
Map vừa cho thấy bãi biển được cứu, vừa làm progression coach dễ hiểu: coach hiện tại, Tide Bond, lần gặp tiếp theo và reward kế cận luôn rõ.
Một hub nhỏ trên map
Hiện coach đang đồng hành, bond hiện tại, mốc mở sớm và milestone bảo đảm: “Rùa 6/8 · chắc chắn gặp sau Level 5”.
Bãi cát khô → vùng biển dịu lại
Map final build có đủ 10 node playable; mỗi 3 level có restoration và Level 10 là cinematic gate.
Coach gặp qua câu chuyện
Cá Heo ở đầu bãi; Rùa tại hố thủy triều; Cá Voi ở cổng ra biển.
Coach-of-the-day
Daily node là Future Vision/mock; final build tập trung đủ 10 node playable, chest, coach unlock và gate.
Các map JSON trong project
Chạy local map editor server để GDD tải danh sách map trong assets/maps/.
Nền bãi biển cuộn dọc không có đường nối
Đây là background cho trang cover GDD/web, không phải runtime map, collision source hoặc ảnh board. Cơ chế dùng một ảnh đầu trang có mép nước và một tile cát lặp theo trục dọc. Tile được ghép sand-flipped → sand-source; vì hàng đầu, hàng giữa và hàng cuối trùng pixel với nhau, CSS có thể repeat-y vô hạn mà không tạo dải tối.
| Bước | Thực hiện | Kết quả |
|---|---|---|
| 1. Cắt head | Giữ 720px đầu của ảnh bãi biển gốc 1920×1080, bỏ 360px đáy có vignette tối. | loop-head.png 1920×720 có biển xuất hiện đúng một lần. |
| 2. Lấy cát sạch | Cắt vùng y=500–719; vùng này không còn foam ở mép trái và chưa chạm vignette tối. | sand-source.png 1920×220. |
| 3. Ping-pong | Lật dọc bản cát rồi ghép sand-flipped ở trên sand-source. | sand-loop-tile.png 1920×440; đầu/cuối tile khớp nhau. |
| 4. Lặp CSS | Đặt tile ở ngay dưới head và dùng repeat-y. | Trang dài bao nhiêu cũng chỉ lặp nền cát sạch. |
Cách sử dụng trên trang cover
- Gắn class
cover-pagecho thẻ<body>. - Giữ hai lớp background trong
summer-seedline-gdd.css: head không lặp ởcenter top, tile cát lặp ởcenter 37.5vw. - Giữ kích thước hiển thị tương ứng với tỉ lệ asset: head là
100vw 37.5vw, tile là100vw 22.916667vw. Nếu cắt lại asset, phải cập nhật đồng thờibackground-positionvàbackground-size. - Không áp dụng class này cho các trang GDD con hoặc gameplay board; chúng dùng nền và layout riêng.
File liên quan
assets/backgrounds/shell-tide-bg-02-board-play-beach-no-props.png: bản nền gốc 1920×1080, không props.assets/backgrounds/shell-tide-bg-02-board-play-beach-no-props-loop-head.png: ảnh đầu trang đã cắt vignette.assets/backgrounds/shell-tide-bg-02-board-play-beach-no-props-sand-source.pngvà...-sand-flipped.png: hai nửa dùng để dựng tile.assets/backgrounds/shell-tide-bg-02-board-play-beach-no-props-sand-loop-tile.png: asset runtime cho vòng lặp dọc.assets/backgrounds/shell-tide-bg-02-board-play-beach-no-props-vertical-loop-preview.png: preview QA dài 2040px, chỉ dùng để kiểm tra visual.summer-seedline-gdd.css: khai báobody.cover-page;summer-seedline-gdd.html: nơi kích hoạt class.
🐬 Cá Heo · Active
1
2
🎁
5
🐢
9
🐋
Tide Bond 6/8 · Rùa mở sau Level 5
| Map Tech | Quyết định | Nghiệm thu |
|---|---|---|
| Foundation | Chapter 16:9, HTML overlay node, native scroll. | Không bake node/lock/reward vào ảnh. |
| Coach state | activeCoach, tideBond, nextCoach, guaranteedUnlockLevel. | Reload giữ đúng state; offline vẫn hiển thị. |
| Reward clarity | Node cho biết chest, coach, gate hoặc restoration trước khi click. | Player nhận ra reward kế tiếp trong một giây. |
| Accessibility | Coach không chỉ phân biệt bằng màu; dùng silhouette, icon và text. | Đọc được grayscale, keyboard và screen reader. |