Lộ trình › Key art & marketing cho game › Bài 200/218

Dự án 12: Matte painting nền toàn cảnh 3840 × 1080

Vẽ một bức nền toàn cảnh siêu rộng (32:9) lúc bình minh – trời, núi xa theo phối cảnh không khí, lâu đài và thác ở tầng giữa, rừng thông và sương ở tiền cảnh – để máy quay lia ngang ở menu chính hoặc trailer, rồi tách lớp parallax đưa vào Unity 6.

Nâng cao 120 phút ★★★ Khó Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Matte painting là kỹ thuật vẽ (thường kết hợp ảnh) một bức nền rộng, chân thực để dùng làm phông cho phim và game. Trong marketing game, matte painting xuất hiện ở menu chính (máy quay lia chậm qua cảnh), đoạn mở đầu trailer, hay ảnh bìa toàn cảnh cho trang web. Khác với một bức tranh 16:9, matte painting toàn cảnh phải đẹp ở mọi khung hình khi máy quay lướt qua – không có chỗ nào được phép "trống". Bạn sẽ tổ chức file thành các tầng xa – giữa – gần ngay từ đầu, vừa để kiểm soát phối cảnh không khí, vừa để xuất từng lớp cho hiệu ứng parallax.

Hình mẫu

Toàn cảnh 3840 × 1080 lúc bình minh: trời xanh chuyển hồng cam, mặt trời giữa phải, hai lớp núi xa tím nhạt dần, đồi giữa có lâu đài, đền, thác và dòng sông, sương và rừng thông tiền cảnh tối; ba khung 16:9 đứt nét cho thấy máy quay lia ngang; bên dưới là bảng Layers năm lớp kèm hệ số parallax
Toàn cảnh 3840 × 1080 lúc bình minh: trời xanh chuyển hồng cam, mặt trời giữa phải, hai lớp núi xa tím nhạt dần, đồi giữa có lâu đài, đền, thác và dòng sông, sương và rừng thông tiền cảnh tối; ba khung 16:9 đứt nét cho thấy máy quay lia ngang; bên dưới là bảng Layers năm lớp kèm hệ số parallax

Thời gian ước tính: khoảng 120 phút. Canvas 3840 × 1080 px (tỉ lệ 32:9) chứa vừa ba khung 1920 × 1080 xếp gối nhau – máy quay lia từ khung 1 sang khung 3.

Chuẩn bị

  • Canvas: 3840 × 1080 px, RGB Color, 16 bit khi vẽ (gradient trời mượt, không vỡ dải), chuyển 8 bit khi xuất.
  • Công cụ chính: Line Tool / Pen Tool (Bút tạo đường) cho đường chân trời và phối cảnh, Gradient (Dải màu chuyển) Tool, Lasso (Dây thòng lọng) + Fill cho mảng núi, Brush (Cọ vẽ) Tool, Clone Stamp (Con dấu nhân bản), ảnh tự chụp/CC0 cho chất liệu (như dự án 11), Adjustment Layer (Lớp điều chỉnh) Levels và Hue/Saturation (Sắc độ/Độ bão hòa) theo từng tầng, FileTệp›Export›Layers to Files.
  • Thiết bị: bầu trời và núi xa có thể dựng hoàn toàn bằng Gradient và Lasso – chuột làm tốt. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) cần cho tầng giữa và tiền cảnh: vẽ mây, tán cây, chi tiết lâu đài bằng cọ có lực nhấn. Dùng chuột: dựng lâu đài bằng Shape + Pen Tool, tán cây bằng cọ Scatter có sẵn (chấm một lần, không cần kéo nét).
  • File mẫu: "Khung toàn cảnh" – đặt trên cùng, khóa. Đường hồng ở 60% chiều cao là chân trời; ba khung 16:9 là các điểm dừng của máy quay; các vạch xám là chân của tầng xa, giữa, gần.
  • Ảnh nguồn (nếu dùng): như dự án 11 – chỉ ảnh tự chụp hoặc CC0 / giấy phép rõ ràng, ghi vào sources.txt.
MàuMã hexDùng cho
#2a3f7aTrời trên cao
#c88a9aTrời giữa – hồng tím
#f0c08aChân trời bình minh
#9a8aaaNúi xa nhất – gần màu trời
#7a6a90Núi xa thứ hai
#4a3a5aĐồi tầng giữa
#120e1cTiền cảnh – gần đen

Các bước

Sáu giai đoạn: đường chân trời và đường phối cảnh, bầu trời bình minh, hai lớp núi xa, lâu đài và đồi tầng giữa, tiền cảnh và sương, tách lớp parallax với khung máy quay
Sáu giai đoạn: đường chân trời và đường phối cảnh, bầu trời bình minh, hai lớp núi xa, lâu đài và đồi tầng giữa, tiền cảnh và sương, tách lớp parallax với khung máy quay
  1. Kịch bản máy quay: viết ra: máy quay bắt đầu ở khung 1 (trái), lia sang phải trong khoảng 20 giây, dừng ở khung 3. Mỗi khung cần một "điểm nhìn": khung 1 – rừng và núi; khung 2 – lâu đài (tiêu điểm chính); khung 3 – mặt trời và thác. Không khung nào chỉ có trời trống.
  2. Chân trời và phối cảnh: layer Perspective (Phối cảnh): Line Tool vẽ đường chân trời ở y = 648 (60%). Một điểm tụ ở giữa canvas, kéo các đường xuyên tâm xuống đáy – chúng dẫn hướng dòng sông, con đường và giúp các vật ở tầng giữa có cùng phối cảnh.
  3. Tổ chức tầng: tạo Group từ dưới lên: Sky, Mountains_Far, Castle_Mid, Fog_Near, FG_Trees. Mọi thứ bạn vẽ phải thuộc đúng một Group – đây chính là các lớp parallax sau này.
  4. Bầu trời: Gradient Linear ba màu #2a3f7a → #c88a9a → #f0c08a từ trên xuống. Mặt trời ở khung 3: cọ Soft Round lớn #fff3b0 chế độ Screen. Mây: dải mây mảnh nằm ngang (cọ mây hoặc ảnh mây CC0 chế độ Screen), mây xa mỏng và nhỏ hơn mây gần.
  5. Núi xa – phối cảnh không khí: Lasso vẽ dãy núi xa nhất, tô #9a8aaa – màu rất gần màu trời. Dãy thứ hai thấp hơn, đậm hơn #7a6a90. Quy tắc: càng xa càng sáng, càng ngả màu trời, càng ít tương phản và ít chi tiết. Thêm vệt sáng mặt trời chiếu lên sườn núi hướng về khung 3.
  6. Đồi tầng giữa: mảng đồi #4a3a5a chạy suốt chiều ngang, có nhấp nhô để chân trời không thẳng tuột. Dòng sông theo đường phối cảnh, phản chiếu màu trời (dải sáng nhạt). Đặt chỗ cho lâu đài ở khung 2.
  7. Lâu đài và công trình: trong Castle_Mid, dựng lâu đài bằng Shape/Pen Tool: thân tháp, mái nhọn, tường thành. Ở khoảng cách này, lâu đài là bóng gần như phẳng với vài cửa sổ sáng – đừng vẽ từng viên gạch. Thêm đền nhỏ, thác chảy từ đồi, vài đèn lồng phát sáng gợi sự sống.
  8. Ánh sáng tầng giữa: layer Clipping Mask (Mặt nạ cắt) chế độ Overlay (Phủ chồng) trên đồi và lâu đài: tô cam nhạt ở cạnh hướng mặt trời, tô tím ở mặt khuất. Một nguồn sáng duy nhất cho cả bức tranh – sườn nào hướng về khung 3 thì sáng.
  9. Sương tầng gần: Group Fog_Near: gradient màu kem #f0d0b0 từ trong suốt (trên) tới Opacity (Độ mờ đục) 55% (dưới), đặt giữa tầng giữa và tiền cảnh. Sương "đẩy" tầng giữa ra xa, tách bạch với tiền cảnh.
  10. Tiền cảnh tối: Group FG_Trees: đồi gần và rừng thông gần như đen #120e1c, đặt chủ yếu ở hai mép (khung 1 và khung 3) như khung tranh tự nhiên. Tiền cảnh tối, sắc nét, bão hòa thấp – tương phản mạnh nhất bức tranh nằm ở đây so với trời sáng.
  11. Kiểm tra từng khung: tạo ba Layer Comps hoặc dùng Crop (Cắt khung) Tool không xóa (bỏ tích Delete Cropped Pixels) để xem lần lượt khung 1, 2, 3 ở 1920 × 1080. Mỗi khung có tiêu điểm, có tiền – trung – hậu cảnh và nhìn được như một bức tranh độc lập không?
  12. Kiểm tra đường nối lớp: khi parallax, các tầng trượt lệch nhau – mép dưới của mỗi tầng phải có vùng "đệm" vẽ tiếp phía sau tầng trước nó (ví dụ đồi giữa vẽ kéo xuống dưới tiền cảnh 100–200 px). Không để chi tiết quan trọng ngay ở đường giao giữa hai lớp.
  13. Xuất lớp cho Unity 6: ẩn file mẫu và Perspective. Chuyển về 8 bit. FileTệp›Export›Layers to Files sau khi gộp mỗi Group thành một layer (chuột phải Group › Merge Group trên bản sao file): 5 PNG trong suốt 3840 × 1080. Trong Unity 6, mỗi PNG là một Sprite trên một GameObject, Sorting Order từ 0 (Sky) tới 4 (FG); script parallax dời mỗi lớp theo camera với hệ số khoảng 0,05 – 0,2 – 0,5 – 0,8 – 1,0.
Mẹo: Bức tranh càng rộng càng dễ bị "đều đều". Hãy tạo nhịp: một khung nhiều chi tiết, một khung nghỉ (trời, mặt nước), một khung cao trào (lâu đài, mặt trời). Máy quay lia qua như đọc một câu nhạc có lên xuống.
Lỗi hay gặp: Vẽ núi xa đậm và sắc nét như núi gần. Phối cảnh không khí bị mất, cả bức tranh phẳng như dán giấy nhiều lớp. Mỗi tầng xa hơn phải sáng hơn khoảng 10–15%, ngả về màu trời và mờ chi tiết hơn.

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

  • Phiên bản đêm: nhân đôi file, thay Sky bằng trời đêm, thêm cửa sổ sáng và đèn lồng ở lâu đài, giảm sáng các tầng bằng Curves – menu chính đổi theo giờ thật của người chơi.
  • Mây chuyển động: tách mây thành lớp riêng có thể lặp ngang (Offset (Dịch chuyển (bọc vòng)) để liền mạch như dự án 9), cho trôi chậm độc lập với camera.
  • Ảnh bìa web siêu rộng: dùng khung 2 làm ảnh hero 1920 × 1080 và cả toàn cảnh làm nền cuộn ngang cho trang giới thiệu thế giới game.

Mẹo & trick học nhanh

Tầng trước, chi tiết sau

Tạo Group Sky, Far, Mid, Near, FG ngay từ đầu. Mọi nét vẽ thuộc một tầng – vừa kiểm soát phối cảnh, vừa sẵn sàng cho parallax.

Xa = sáng, nhạt, mềm

Mỗi tầng xa hơn sáng hơn, ngả màu trời, ít tương phản và ít chi tiết. Đó là cách mắt cảm nhận khoảng cách.

Mỗi khung là một bức tranh

Kiểm tra từng khung 16:9 riêng lẻ. Khi máy quay dừng ở bất kỳ đâu, khung đó phải có tiêu điểm và bố cục trọn vẹn.

Kiểm tra nhanh

1 Phối cảnh không khí (atmospheric perspective) thể hiện thế nào trên núi xa?
2 Vì sao mép dưới mỗi tầng cần vẽ "đệm" kéo xuống phía sau tầng trước?
3 Hệ số parallax hợp lý cho lớp bầu trời so với lớp tiền cảnh là gì?

Bài tập: Matte painting toàn cảnh 32:9 tách lớp

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập