Dự án 12: Cảnh nền pixel 320 × 180 nhiều lớp parallax

320 × 180 px là độ phân giải "gốc" của rất nhiều game pixel indie: đúng tỉ lệ 16:9 và phóng to nguyên lần lên 1280 × 720 (×4), 1920 × 1080 (×6) hay 2560 × 1440 (×8) không méo một pixel nào. Cảnh nền trong game pixel thường được chia thành nhiều lớp parallax: lớp xa trôi chậm, lớp gần trôi nhanh khi camera di chuyển, tạo chiều sâu như nhìn qua cửa sổ tàu hỏa. Bài khó ở chỗ mỗi lớp phải đứng được một mình (lặp ngang, có nền trong suốt) mà ghép lại vẫn thành một bức tranh có phối cảnh không khí: càng xa càng nhạt, càng ít tương phản và ít chi tiết.

Hình mẫu

Thời gian ước tính: khoảng 180 phút – chia làm hai buổi. Nhìn từ trên xuống dưới: độ tương phản tăng dần, lớp gần nhất có màu tối nhất và chi tiết nhiều nhất.

Chuẩn bị

• Canvas: 320 × 180 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Bốn layer (hoặc group): 1 Sky, 2 Mountains, 3 Hills, 4 Ground.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Polygonal Lasso (Thòng lọng đa giác) (L) bỏ Anti-alias (Khử răng cưa) để dựng mảng núi, Paint Bucket (Thùng sơn) Tolerance 0, FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) để kiểm tra lặp ngang, Pattern dither (EditChỉnh sửa›Define Pattern).
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh. Mở thêm WindowCửa sổ›Arrange›New Window for… để có một cửa sổ luôn ở 200% xem toàn cảnh.
• Thiết bị: cảnh lớn có nhiều đường đỉnh núi, đồi – bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil giúp phác đường đỉnh tự nhiên nhanh hơn (vẽ trên layer phác). Tuy vậy chuột hoàn toàn làm được: Polygonal Lasso dựng núi bằng các điểm bấm, Pencil + ⇧ Shift cho đường thẳng, và mọi chi tiết đều là pixel đơn. Tắt lực nhấn với bút.
• File mẫu: khung 320 × 180 có 4 đường ngang: y = 118 (chân trời), y = 132 (chân núi xa), y = 146 (đỉnh đồi giữa trung bình), y = 158 (mặt đất gần). Đường giữa dọc – ngang giúp đặt mặt trời theo bố cục 1/3.

Các bước

1. Tạo file và layer: ⌘ Cmd+N 320 × 180 px, Transparent, đặt file mẫu lên trên cùng, khóa lại. Tạo 4 layer theo thứ tự từ dưới lên: 1 Sky, 2 Mountains, 3 Hills, 4 Ground.
2. Chia lớp bằng mảng phẳng: mỗi lớp tô một màu tạm từ nhạt (xa) tới đậm (gần). Dùng Polygonal Lasso vẽ đường đỉnh núi nhọn xen thấp, đường đồi tròn thoải, mặt đất gần hơi gợn. Xem ở 200%: bố cục phải có một điểm nhấn – ở đây là mặt trời lặn sau khe núi bên phải, theo đường 1/3.
3. Trời 6 dải: layer 1 Sky tô kín 6 dải ngang từ #2a2350 trên đỉnh tới #ffc078 ở chân trời y = 118. Dải gần chân trời mỏng hơn, dải trên cao dày hơn – trời đổi màu nhanh ở gần đường chân trời.
4. Dither giữa các dải: ở mỗi ranh giới, thêm 1–2 hàng chuyển: hàng sát ranh giới dùng hoa văn 2 pixel bật – 2 pixel tắt lệch nhau mỗi hàng, hàng trên đó chỉ 2 pixel trong mỗi 8. Tạo hoa văn một lần bằng EditChỉnh sửa›Define Pattern rồi Fill vào vùng chọn 1 hàng – nhanh và đều tuyệt đối.
5. Mặt trời và mây: mặt trời tròn bán kính 17 px #ffe68a với lõi #fff8e0, đặt ở y ≈ 112 để núi che một nửa. Mây là các hình elip dẹt dài 40–80 px #7a4a8a với 1 hàng đáy #f0907a – mặt dưới mây bắt nắng hoàng hôn từ dưới chiếu lên.
6. Núi xa: layer 2 Mountains tô #4a3070, đáy chạm y = 150 (lớp đồi sẽ che). Sườn núi quay về phía mặt trời (sườn đi xuống bên phải) tô dải #6a3f80 rộng 6–14 px dưới đỉnh; các đỉnh cao nhất có 3 hàng tuyết – viền sáng #c87a9a. Núi xa ít tương phản: không viền đen, chỉ 3 màu.
7. Đồi giữa và rặng thông: layer 3 Hills tô #2a2656, đỉnh đồi uốn quanh y = 146. Thông là các tam giác xếp tầng #1e1a40 cao 18–34 px, nhóm 2–3 cây, đặt lệch nhau – không trồng đều như hàng rào. Mép đỉnh đồi 2 hàng #3a3470 bắt ánh trời.
8. Mặt đất gần: layer 4 Ground tô từ y ≈ 152: 4 hàng cỏ #24384a, 5 hàng đất #1a1c34, phần dưới #100e20, đáy cùng #221a30. Lớp gần nhất tối nhất và tương phản mạnh nhất so với trời – nó là "khung" của cảnh và là nơi nhân vật đứng.
9. Chi tiết lớp gần: viền cỏ sáng #3e6a5a 1 hàng trên cùng, cọng cỏ cao 3–7 px mỗi 10 px, vài bông hoa 3 pixel #f0806a, cột đèn lồng gỗ #8a5a48 với hai đèn #ffd860 và 4 pixel quầng sáng. Chi tiết tập trung ở lớp gần; lớp xa giữ đơn giản.
10. Chim và điểm sống: 3–5 con chim là hình chữ V 3 pixel #2a2350 trên nền trời sáng. Đặt gần mặt trời để dẫn mắt người xem về điểm nhấn.
11. Làm mỗi lớp lặp ngang: chọn từng layer, FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) Horizontal 160, Vertical 0, Wrap Around: đường núi, đồi, mặt đất ở giữa ảnh phải nối liền. Sửa chỗ gãy bằng Pencil rồi Offset (Dịch chuyển (bọc vòng)) 160 lần nữa để trả về. Trời chỉ có dải ngang nên tự lặp.
12. Kiểm tra phối cảnh không khí: thêm Adjustment Layer (Lớp điều chỉnh) Black & White (Trắng đen) tạm thời. Lớp xa phải có giá trị gần với trời (xám vừa), lớp gần tối hẳn. Nếu núi xa đậm như đồi gần, nhạt núi xa đi một tông. Đếm màu toàn cảnh bằng bản sao Indexed Color: tối đa 32 màu.
13. Xuất: ẩn file mẫu. Bản ghép: FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → sunset_full.png đúng 320 × 180 px (đây là bản nộp). Từng lớp: FileTệp›Export›Layers to Files hoặc chuột phải layer › Export As (Xuất ra (tùy chỉnh)) → bg_1_sky.png … bg_4_ground.png, mỗi file 320 × 180 với nền trong suốt.
14. Unity 6: 4 texture: Sprite (2D and UI), Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, Wrap Mode Repeat. Đặt 4 sprite cùng vị trí với Sorting Order 0 → 3. Script parallax đơn giản: mỗi frame layer.position = startPos + cameraDelta * factor với factor 1 (trời đứng yên theo camera), 0,9, 0,6, 0 (đất trôi cùng thế giới) – tức tốc độ trôi so với thế giới là ×0, ×0,1, ×0,4, ×1. Main Camera thêm Pixel Perfect Camera: Assets Pixels Per Unit 16, Reference Resolution 320 × 180, bật Crop (Cắt khung) Frame X và Y để luôn phóng to nguyên lần.

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

• Lớp thứ 5 phía trước: thêm vài cành lá đen #100e20 ở mép dưới khung hình, trôi nhanh hơn cả mặt đất (×1,3) – tiền cảnh làm chiều sâu tăng vọt.
• Phiên bản đêm: nhân bản file, đổi dải trời sang xanh đêm, mặt trời thành trăng, thêm sao 1 pixel và đổi đèn lồng sáng hơn – cùng bố cục, hai không khí.
• Mây trôi: tách mây ra layer riêng xuất thành sprite, trong Unity cho mây tự trôi chậm sang trái kể cả khi camera đứng yên.