Lộ trình › Bộ asset theo thể loại game › Bài 120/203
Dự án 7: Bộ asset bắn phi thuyền (shoot ’em up)
Thiết kế phi thuyền người chơi, đạn, lửa động cơ và 3 loại quái nhìn từ trên xuống cho game bắn phi thuyền dọc màn hình – sheet 512 × 256 px, màu đạn mã hóa theo phe, cắt Automatic trong Unity 6.
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: (⌘ Cmd+O).
Game bắn phi thuyền (shoot ’em up, gọi tắt là "shmup") có thể có hàng trăm viên đạn trên màn hình cùng lúc. Asset phải trả lời được câu hỏi sống còn của người chơi: "Cái gì giết được mình?" Quy tắc vàng là mã hóa màu theo phe: đạn của người chơi màu lạnh (xanh lơ), đạn của quái màu nóng (cam đỏ) và có viền sáng – không bao giờ trộn lẫn.
Hình mẫu
Thời gian ước tính: khoảng 3 giờ. Mọi vật thể nhìn thẳng từ trên xuống; phi thuyền người chơi hướng mũi lên, quái hướng mũi xuống.
Chuẩn bị
- Canvas: 512 × 256 px, Transparent. Làm việc ở 200% kích thước (1024 × 512) nếu muốn nét mượt hơn, cuối bài thu về.
- Bố cục (theo file mẫu): hàng trên 4 ô 128 × 128: phi thuyền, quái 1, quái 2, quái 3. Hàng dưới: 8 ô 64 × 64 cho 2 kiểu đạn người chơi, 2 kiểu đạn quái, 2 frame lửa động cơ, 2 frame nổ nhỏ; nửa phải là 2 ô 128 cho vật phẩm tăng sức mạnh.
- Công cụ chính: Pen Tool (Bút tạo đường), Polygon Tool, Ellipse Tool; để làm thân đối xứng; Layer Style Outer Glow cho đạn.
- Thiết bị: phi thuyền là hình kỹ thuật đối xứng – Pen Tool và Shape cho kết quả sạch, chuột hay bút như nhau. Lực nhấn của bút chỉ hữu ích khi vẽ lửa động cơ và vệt sáng bằng Brush (Cọ vẽ) mềm; dùng chuột thì giảm Opacity (Độ mờ đục) Brush còn 40% và tô chồng.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#e6edf5 | Thân phi thuyền (bóng #aab6c8) | |
#ff5a5f | Cánh phi thuyền, quái đĩa bay | |
#31d0ff | Buồng lái | |
#7cf7ff | Đạn người chơi (màu lạnh) | |
#ff9f43 | Đạn quái, lửa động cơ (màu nóng) | |
#5fd35f | Quái tiêm kích | |
#a66cff | Quái tàu nặng | |
#0b1030 | Nền vũ trụ (chỉ để thử, không xuất) | |
#1b1a24 | Viền |
Các bước
- Tạo file ⌘ Cmd+N 512 × 256 px, Transparent. Đặt file mẫu bố cục lên trên, khóa lại. Thêm layer Space dưới cùng tô
#0b1030để luôn nhìn asset trên nền tối như trong game – nhớ ẩn trước khi xuất. - Phi thuyền – nửa thân: Pen Tool vẽ nửa trái thân hình mũi tên trong ô 128: mũi nhọn ở trên, thân thon, đuôi rộng. Fill
#e6edf5, Stroke Inside 3 px. Nhân đôi, , dời sát lại, chọn cả hai và ⌘ Cmd+E gộp thành một hình đối xứng tuyệt đối. - Cánh và buồng lái: cánh tam giác xuôi về sau màu
#ff5a5f, đặt dưới thân. Buồng lái là elip đứng#31d0ffở 1/3 trên thân. Phi thuyền chiếm khoảng 70% ô, để chừa chỗ cho lửa động cơ. - Hitbox nhỏ: đánh dấu bằng một chấm 6 px ở giữa buồng lái trên layer Hitbox (ẩn khi xuất). Game shmup tốt có vùng va chạm nhỏ hơn hình nhiều – vẽ buồng lái nổi bật để người chơi biết "tim" của phi thuyền ở đâu.
- Quái 1 – đĩa bay: elip ngang
#ff5a5f+ vòm kính#a8f0ff+ 3 đèn vàng. Hình tròn, nhỏ: quái yếu, xuất hiện nhiều. - Quái 2 – tiêm kích: hình mũi tên chĩa xuống màu
#5fd35f, cánh nhọn. Làm đối xứng như phi thuyền người chơi. - Quái 3 – tàu nặng: khối chữ nhật bo góc to
#a66cff, 2 bầu động cơ hai bên, nòng pháo chĩa xuống, "mắt" lõi vàng ở giữa. To và vuông vức nghĩa là nhiều máu – người chơi tự hiểu. - Đổ bóng và ánh sáng: ánh sáng từ trên – trái cho mọi vật thể. Layer kẹp tô nửa phải mỗi thân bằng tông tối (
#aab6c8,#b8323f,#2f9a3a,#6c3bc4); vệt sáng hẹp bên trái thân và một điểm lóe trên kính. - Đạn người chơi: ô 64: thanh bo tròn 6 × 26 px
#7cf7ff, lõi trắng 2 px. : Blend Mode (Chế độ hòa trộn) Screen, màu#7cf7ff, Size 8 px. Kiểu 2: hai tia song song cho lúc đã nâng cấp. - Đạn quái: hình tròn 10 px
#ff9f43có lõi vàng nhạt và viền tối 2 px – đạn quái cần viền để nổi trên cả nền sáng lẫn nền tối. Kiểu 2: viên dài hình hạt gạo màu hồng đỏ. - Lửa động cơ 2 frame: tam giác ngọn lửa cam ngoài, vàng trong. Frame 2 dài hơn frame 1 khoảng 20% – khi phát xen kẽ, lửa "phập phồng".
- Nổ nhỏ 2 frame: frame 1 vòng tròn trắng – vàng; frame 2 vòng cam to hơn với 5–6 mảnh vỡ. Không cần nhiều frame – nổ nhanh mới có cảm giác mạnh.
- Xuất PNG: ẩn Space, Hitbox và lưới mẫu, , PNG, Transparency (Độ trong suốt) bật →
shmup.png512 × 256 px. - Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Apply. Sprite Editor › Slice › Type Automatic (các vật thể khác kích thước, cách nhau bởi vùng trong suốt) › Slice, kiểm tra từng khung rồi Apply. Gắn CircleCollider2D nhỏ cỡ buồng lái cho phi thuyền. Nếu dự án dùng URP, thêm Global Volume có Bloom – đạn và lửa đã có quầng sáng vẽ sẵn sẽ phát sáng đẹp hơn.
Mẹo: Kiểm tra độ đọc bằng "bài test rối mắt": nhân đôi đạn quái 40 lần (⌘ Cmd+J rồi dời ngẫu nhiên) trên nền Space. Nếu bạn phải nheo mắt mới thấy phi thuyền, hãy làm đạn quái tương phản hơn hoặc thân phi thuyền sáng hơn.
Lỗi hay gặp: Dùng cùng màu cho đạn người chơi và đạn quái (ví dụ cả hai màu vàng). Người chơi không biết nên né cái nào và chết "oan". Chọn hai họ màu đối lập trên vòng màu và giữ nguyên trong cả game.
Nâng cao (tùy chọn)
- Phi thuyền nghiêng: 2 frame phi thuyền nghiêng trái – phải (bóp hẹp thân 15% bằng ⌘ Cmd+T, một cánh ngắn lại) phát khi người chơi lách sang ngang.
- Vật phẩm tăng sức mạnh: 2 ô 128 bên phải: viên nang chữ "P" và khiên năng lượng – màu xanh lá, khác cả hai họ màu đạn.
- Nền cuộn lặp: nền sao 1080 × 1920 px liền mạch theo chiều dọc ( để kiểm tra mép trên – dưới).
Mẹo & trick học nhanh
Đối xứng tuyệt đối
Vẽ một nửa, nhân đôi, Flip Horizontal và gộp. Phi thuyền lệch 1–2 px sẽ trông như đang bay chéo khi game di chuyển nó thẳng.
Quầng sáng vẽ sẵn
Outer Glow trong Photoshop được xuất cùng PNG. Đặt Size vừa phải (6–10 px) và chừa đủ chỗ trống trong ô để quầng sáng không bị cắt cụt ở mép.
Kích thước nói lên sức mạnh
Quái yếu nhỏ và tròn, quái mạnh to và vuông. Người chơi đọc "lượng máu" từ kích thước trước cả khi thấy thanh máu.