Dự án 14: Cảnh nền parallax 3 lớp
Vẽ cảnh nền 1920 × 1080 px cho game cuộn ngang gồm 3 lớp xa – giữa – gần, dùng phối cảnh không khí, nối liền mép trái – phải và xuất từng lớp PNG.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+O).
- Khung bố cục parallax 1920 × 1080 px (nền trong suốt) PNG · 57 KB
- Bảng màu tất cả dự án PNG · 136 KB
Trong game cuộn ngang, khi nhân vật chạy, nền không di chuyển như một tấm ảnh phẳng: núi xa trôi chậm, đồi giữa trôi vừa, bụi cỏ gần lướt nhanh. Hiệu ứng này gọi là parallax (thị sai) và tạo chiều sâu rất mạnh. Nhiệm vụ của họa sĩ: vẽ cảnh thành các lớp tách rời, mỗi lớp lặp liền mạch theo chiều ngang.
Hình mẫu
Thời gian ước tính: khoảng 4 giờ.
Chuẩn bị
- Canvas: 1920 × 1080 px (Full HD, tỉ lệ 16:9), RGB.
- Brush (Cọ vẽ): Hard Round cỡ lớn cho mảng; Soft Round cho trời và sương.
- File mẫu: "Khung bố cục parallax" ở cuối bài – mở và kéo vào file làm layer trên cùng để biết vị trí đường chân trời của từng lớp.
- Nguyên tắc phối cảnh không khí (atmospheric perspective): càng xa càng nhạt, càng ngả màu trời, càng ít tương phản và ít chi tiết.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#4b5bd4 | Trời cao | |
#a78bfa | Trời giữa | |
#ffb38a | Chân trời (hoàng hôn) | |
#8b7fd6 | Núi xa (lớp Far) | |
#4f9d8a | Đồi giữa (lớp Mid) | |
#2c5a4a | Đất gần (lớp Near) | |
#1f3f38 | Bụi gần, đậm nhất | |
#ffe8a3 | Mặt trời, đom đóm |
Các bước
- Tạo file ⌘ Cmd+N 1920 × 1080 px. Mở file khung mẫu, kéo vào bằng Move V (giữ ⇧ Shift để căn giữa) và đặt tên layer Guide, khóa lại (biểu tượng ổ khóa).
- Bố cục value (sắc độ): layer Value: chỉ dùng 4 màu xám – trời sáng nhất, núi xa xám nhạt, đồi giữa xám vừa, lớp gần gần đen. Vẽ nhanh bằng Lasso (Dây thòng lọng) + ⌥ Option+⌫ Delete trong 10 phút. Nếu bức xám đã có chiều sâu, bức màu chắc chắn sẽ có.
- Tạo cấu trúc Group: tạo 4 Group (⌘ Cmd+G) từ dưới lên: Sky, Far, Mid, Near. Mọi thứ của lớp nào vẽ trong Group đó – bước xuất sẽ rất nhẹ nhàng.
- Trời: trong Sky, chọn Gradient (Dải màu chuyển) Tool (G), kiểu Linear, bấm vào thanh gradient trên Options để mở Gradient Editor, đặt 3 điểm màu
#4b5bd4→#a78bfa→#ffb38a. Giữ ⇧ Shift kéo từ trên xuống. Mặt trời: Elliptical Marquee (Khung chọn) tròn tô#ffe8a3, thêm quầng Soft Round cùng màu, blend mode Screen. Mây: vài hình bầu dục trắng Opacity (Độ mờ đục) 40%. - Lớp xa – núi: trong Far, Polygonal Lasso (Thòng lọng đa giác) vẽ dãy núi răng cưa kéo dài hết bề ngang, tô
#8b7fd6. Mặt phải mỗi đỉnh tô tối hơn (#5f53b8Opacity 70%), đỉnh cao có tuyết#e4dbff. Chỉ vậy – lớp xa càng ít chi tiết càng tốt. - Lớp giữa – đồi và cây: trong Mid, Lasso vẽ các đường đồi cong mềm, tô
#4f9d8a. Cây thông: Polygonal Lasso vẽ 2 tam giác chồng nhau, tô#3c7f73; vẽ một cây rồi nhân đôi (⌘ Cmd+J), co giãn ⌘ Cmd+T 70–130% và rải trên đỉnh đồi. Chân đồi phủ một dải tối hơn để tách với lớp gần. - Lớp gần – đất và bụi: trong Near, mặt đất (nơi nhân vật chạy) là dải
#2c5a4aở đáy màn hình. Bụi cây to#1f3f38ở mép trái, một tảng đá#3b4a55bên phải. Lớp gần có tương phản mạnh nhất và chi tiết rõ nhất. - Nối liền mép trái – phải: với mỗi lớp Far, Mid, Near: nhân đôi Group (⌘ Cmd+J), ẩn Group gốc, chuột phải bản sao › Merge Group (⌘ Cmd+E) để gộp thành một layer, rồi chạy Horizontal 960, Vertical 0, Wrap Around. Vẽ nối lại đường núi/đồi ở giữa cho liền. Đường chân núi ở mép trái và mép phải phải có cùng độ cao.
- Không khí: layer Haze trên Far (Clipping Mask (Mặt nạ cắt) vào layer núi), màu
#ffb38a, Opacity 20% – núi xa ám màu trời hoàng hôn. Tia nắng: layer Rays trên Mid, Polygonal Lasso vẽ 3 tam giác dài tỏa từ mặt trời, tô#fff1c1, blend mode Screen, Opacity 8–10%. - Chi tiết lớp gần: cỏ nhọn trên mép đất, 2 bông hoa nhỏ, đom đóm là chấm
#ffe8a3kèm quầng Linear Dodge (Add) (Cộng sáng). Chim xa trên trời chỉ là dấu "v" mảnh màu tối. - Kiểm tra độ sâu: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) (Saturation −100) trên cùng: 4 dải sáng – tối phải xếp đúng thứ tự như bản Value. Nhân vật (lấy sprite ở dự án 13 đặt thử) phải nổi rõ trên lớp giữa.
- Xuất từng lớp: ẩn Guide và layer kiểm tra. Với mỗi Group (Sky, Far, Mid, Near), chuột phải › Export As (Xuất ra (tùy chỉnh)), PNG, nhớ tắt Trim (không cắt sát) để mọi lớp giữ nguyên 1920 × 1080 px và thẳng hàng với nhau. Lưu PSD giữ Group.
- Dùng trong Unity 6: mỗi PNG là một Sprite (2D and UI) đặt trên một Sorting Layer riêng (Background, Far, Mid, Near). Một script nhỏ dời mỗi lớp theo camera với hệ số 0,2 / 0,5 / 1 (như trong hình mẫu); đặt 2 bản sao nối đuôi nhau để lặp vô tận.
Nâng cao (tùy chọn)
- Lớp tiền cảnh thứ 4: một lớp lá cây/đá đen mờ ở sát mép màn hình, cuộn nhanh hơn nhân vật (hệ số 1,3) – tăng chiều sâu cực mạnh.
- Phiên bản ban đêm: đổi trời sang xanh đen, mặt trời thành mặt trăng, bật đom đóm và cửa sổ nhà nấm (dự án 8) ở lớp giữa.
- Animation mây: tách mây thành lớp riêng cuộn tự động chậm dù camera đứng yên.
Mẹo & trick học nhanh
Lớp parallax chỉ cần lặp ngang: với Horizontal bằng nửa bề rộng (960 px) và Vertical 0.
Khi chuột phải Group › Export As, bỏ chọn Trim để PNG giữ nguyên khung 1920 × 1080 – các lớp chồng lên nhau khớp tuyệt đối trong engine.
Bản xám 4 sắc độ là bản đồ chiều sâu. Nếu bản xám đọc rõ xa – gần, việc chọn màu chỉ còn là trang trí.