Dự án 5: Cây trồng nông trại 4 giai đoạn lớn

Game nông trại cho người chơi cảm giác "chăm cây mỗi ngày". Cảm giác đó đến từ những giai đoạn lớn rõ ràng: hạt → mầm → ra hoa → có quả. Khi game đổi sprite từ giai đoạn này sang giai đoạn kia, cây phải lớn lên tại chỗ – gốc cây đứng yên trên mặt đất. Bí quyết là mọi giai đoạn chung một đường đất (baseline) và Unity dùng đường đó làm Pivot (Điểm neo) (điểm neo).

Hình mẫu

Thời gian ước tính: khoảng 90 phút. Chiều cao tăng dần theo nhịp rõ: khoảng 15% – 40% – 75% – 95% chiều cao ô. Người chơi phải nhận ra "cây đã lớn hơn" chỉ bằng một cái liếc.

Chuẩn bị

• Canvas: 512 × 256 px (4 cột × 2 hàng, ô 128 px), Background Contents: Transparent.
• Đường đất: hàng trên y = 112, hàng dưới y = 240 – tức là 16 px trên đáy mỗi ô. Kéo guide ngang ở hai vị trí này (ViewHiển thị›GuidesĐường gióng›New Guide).
• Công cụ chính: Brush (Cọ vẽ) Tool cứng (Hardness (Độ cứng cọ) 100%), Ellipse Tool cho ụ đất và quả, Pen Tool (Bút tạo đường) cho thân cong, Clipping Mask (Mặt nạ cắt).
• Thiết bị: lá cây đẹp nhất khi nét thon hai đầu. Với bút Wacom, XP-Pen, Huion hoặc iPad: bật Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control Pen Pressure (Lực nhấn bút) và vẽ mỗi lá bằng một nét nhấn mạnh ở giữa. Với chuột: dựng lá bằng Pen Tool (2 điểm neo, kéo tay cầm cong) rồi tô Fill – đẹp không kém.

Các bước

1. Tạo file Ctrl+N 512 × 256 px, Transparent. Đặt file "Lưới 4 × 2 ô" lên trên cùng, khóa lại. Kéo hai guide ngang y = 112 và y = 240.
2. Phác chiều cao: layer Sketch Opacity (Độ mờ đục) 30%. Ở mỗi ô vẽ một vạch đứng đánh dấu chiều cao cây: 16 – 44 – 84 – 108 px tính từ đường đất. Rồi phác hình dáng: cà chua mọc thẳng lên có cọc; bí ngô bò ngang, giai đoạn cuối là quả to nằm trên đất.
3. Ụ đất chung: Ellipse Tool vẽ elip 84 × 24 px, Fill #8a5a3c, Stroke Inside 3 px viền tối, đặt sao cho mép dưới elip chạm đường đất. Layer kẹp: nửa dưới tô #5e3a26, một vệt sáng #b07a52 ở trên – trái. Nhân đôi cho đủ 8 ô.
4. Giai đoạn 1 – hạt: cà chua: 2 lá mầm nhỏ xíu nhú lên giữa ụ. Bí ngô: 3 hạt hình giọt nước màu kem #f6e7b8 nằm trên mặt đất. Giai đoạn này phải trông "mới gieo", gần như chỉ có đất.
5. Giai đoạn 2 – nảy mầm: thân thẳng 4 px màu #3a8a35, hai lá xòe sang hai bên. Lá cà chua thon dài; lá bí tròn bầu. Hai cây khác hình lá ngay từ đây để người chơi phân biệt.
6. Giai đoạn 3 – ra hoa: cà chua cao gấp đôi, thêm 3 cặp lá và cọc gỗ #c58a52 phía sau, 2 bông hoa sao vàng nhỏ. Bí ngô bò dây cong (Pen Tool + Stroke Path 4 px), 3 lá to và một bông hoa vàng lớn.
7. Giai đoạn 4 – thu hoạch: cà chua sum suê 4 tầng lá với 3 quả đỏ tròn đường kính 16–20 px, mỗi quả có đài lá hình sao. Bí ngô: quả cam to 80 × 56 px chiếm gần hết ô, cuống ngắn, một lá và một đoạn dây xoăn. Đây là giai đoạn "phần thưởng" – nhiều màu và tương phản nhất.
8. Nét viền: nếu vẽ bằng Brush, layer Line viền 2,5 px màu #1b1a24 cho mọi khối. Nếu dựng bằng Shape, dùng Stroke Inside 2,5 px cho lá và 3 px cho quả – quả quan trọng hơn nên viền dày hơn chút.
9. Đổ bóng: layer kẹp vào lá: tô #3a8a35 nửa phải của mỗi cụm lá. Layer kẹp vào quả: mảng lưỡi liềm dưới – phải (#a8243b cho cà chua, #c9611f cho bí ngô).
10. Ánh sáng: vệt sáng #9fe07a mép trên – trái của lá, điểm lóe nhỏ #ffb3a8 trên mỗi quả cà chua, vệt sáng dài #ffc078 trên quả bí. Thêm các đường múi bí bằng Brush 3 px màu bóng.
11. Soát đường đất: bật guide, phóng to từng ô: đáy ụ đất ở 8 ô phải chạm đúng y = 112 hoặc y = 240. Bật/tắt nhanh các giai đoạn bằng cách Alt + bấm biểu tượng con mắt – gốc cây không được "nhảy" khi đổi.
12. Xuất PNG: ẩn Sketch và lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → crops_128.png 512 × 256 px.
13. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Apply. Sprite Editor › Slice › Grid By Cell Size 128 × 128, ô Pivot chọn Custom, Pivot Unit Mode chọn Pixels, nhập X 64, Y 16 (16 px tính từ đáy ô = đường đất) › Slice › Apply. Script chỉ cần đổi spriteRenderer.sprite theo số ngày; trên SpriteRenderer đặt Sprite Sort Point là Pivot để cây phía dưới màn hình luôn che cây phía trên.

Nâng cao (tùy chọn)

• Giai đoạn héo: thêm cột thứ 5 trên canvas 640 × 256: lá ngả nâu vàng #b59a4a, cúi xuống – khi người chơi quên tưới nước.
• Icon thu hoạch: vẽ quả cà chua và quả bí riêng ở 64 × 64 px để hiện trong túi đồ khi hái.
• Đất đã tưới: nhân đôi ụ đất, tô tối hơn #6b4630 và thêm vệt bóng nước – Unity đổi sprite đất khi người chơi tưới.