Dự án 4: Bộ biển báo và cột đèn đường

Biển chỉ đường, bảng hiệu và cột đèn là "dấu câu" của một ngôi làng trong game: chúng chỉ hướng, báo chỗ có cửa hàng và tạo nhịp điệu dọc con đường. Khác với thùng hay chum, đây là đạo cụ cao và mảnh, nên chúng dùng ô hình chữ nhật đứng 128 × 256 px. Bài học chính: giữ chân cột mọi món trên cùng một đường để Unity sắp xếp trước – sau đúng, và vẽ đèn hai trạng thái tắt – bật từ cùng một file.

Hình mẫu

Thời gian ước tính: khoảng 70 phút. Ký hiệu trên bảng là hình (cái cốc) chứ không phải chữ: người chơi mọi nước đều hiểu, và hình to rõ hơn chữ khi bảng chỉ cao 46 px trên màn hình.

Chuẩn bị

• Canvas: 512 × 256 px (4 ô, mỗi ô 128 × 256), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Rectangle Tool (U) chế độ Shape, Pen Tool (Bút tạo đường) (P) cho mũi tên và cần treo, Polygon Tool cho chóp đèn, Brush (Cọ vẽ) mềm (B) cho quầng sáng, WindowCửa sổ›Layer Comps để lưu hai trạng thái đèn.
• Thiết bị: toàn bộ khối chính là Shape – chuột đủ dùng. Với bút Wacom, XP-Pen, Huion hay iPad, bạn có thể vẽ vân gỗ và chữ khắc bằng Brush 2 px có lực nhấn (Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)); dùng chuột thì vẽ các vạch khắc bằng Line Tool, Caps Round.
• File mẫu: "Lưới 4 ô 128 × 256" – đường hồng y = 248 là chân cột (Pivot (Điểm neo)), nét chấm là trục giữa mỗi ô.

Các bước

1. Tạo file và lưới: FileTệp›NewTạo mới, 512 × 256 px, Transparent. ViewHiển thị›New Guide Layout: Columns 4, Gutter 0; thêm một guide ngang ở y = 248 (ViewHiển thị›GuidesĐường gióng›New Guide, Horizontal, 248 px). Đặt file lưới mẫu và khóa lại.
2. Phác chiều cao: layer Sketch Opacity (Độ mờ đục) 30%. Bốn món cao khác nhau để tạo nhịp: biển chỉ đường ~190 px, cột bảng hiệu ~220 px, hai cột đèn ~215 px. Đỉnh cao nhất vẫn cách mép trên ít nhất 6 px.
3. Cột biển chỉ đường: Rectangle Tool vẽ cột 10 × 192 px #8f5a32, chân chạm y = 248. Pen Tool vẽ hai bảng mũi tên: một chỉ phải (đuôi vuông, đầu nhọn), một chỉ trái thấp hơn, hơi lệch góc để trông "thủ công". Fill #c58a52, Stroke Outside 3 px #1b1a24.
4. Cột bảng hiệu treo: cột sắt mảnh 8 px #5b6375, cần treo nằm ngang làm bằng Pen Tool có thanh chéo đỡ. Hai sợi xích là 2 đường Line Tool 2 px. Bảng gỗ bo góc 60 × 46 px treo dưới cần, cách cột một khoảng – đúng kiểu bảng hiệu quán trọ châu Âu.
5. Biểu tượng cái cốc: trên bảng, Rectangle Tool bo góc vẽ thân cốc #ffd23f, Ellipse Tool vẽ bọt trắng tràn trên miệng, quai cốc là Pen Tool với Stroke 4 px. Biểu tượng chiếm khoảng 60% bảng, căn giữa bằng nút Align trên thanh Options của Move Tool (Công cụ Di chuyển).
6. Cột đèn (bản tắt): cột sắt #3b3f52 10 px có đế rộng 28 px. Lồng đèn: Pen Tool vẽ hình thang (rộng trên, hẹp dưới) Fill #7d8aa3, chóp mái là tam giác Polygon Tool 3 cạnh, đáy là thanh bo góc. Hai nan sắt chữ thập chia kính thành 4 ô. Gom thành Group Lamp_off.
7. Đổ bóng: layer kẹp Multiply (Nhân (làm tối)) (⌘ Cmd+⌥ Option+G) cho từng nhóm: mặt dưới các bảng gỗ #9a6236, nửa phải cột gỗ #6e4224, nửa phải kính đèn tắt #5f6b84. Một dải sáng mỏng #e8b47a ở mép trên mỗi bảng gỗ – các bảng nhận ánh sáng từ trời.
8. Chi tiết khắc: Line Tool 3 px #5a3a1c, Caps Round, vẽ 2 vạch dài – ngắn trên mỗi bảng mũi tên như chữ khắc đã mờ. Đinh tròn 3 px ở chỗ bảng bắt vào cột, vài cọng cỏ ở chân cột. Đây là "chữ" duy nhất – đủ gợi ý bảng có ghi tên địa danh mà không cần chữ thật.
9. Đèn bật: nhân đôi Group Lamp_off (⌘ Cmd+J), dời sang ô 4 đúng 128 px, đổi tên Lamp_on. Đổi Fill kính sang #ffe9a0, xóa layer bóng của kính, thêm một elip trắng mờ ở giữa kính làm lõi ngọn lửa.
10. Quầng sáng: trong Lamp_on, layer Glow dưới lồng đèn, Brush mềm 110 px #ffd86b, Opacity 50%, chấm một lần vào giữa kính; Blend Mode (Chế độ hòa trộn) Screen. Thêm elip vàng mờ Opacity 30% trên mặt đất dưới chân cột – vũng sáng hắt xuống đất. Giữ quầng sáng trong ô 128 px; quầng sáng lớn hơn sẽ do Light 2D trong Unity đảm nhận.
11. Layer Comps: mở WindowCửa sổ›Layer Comps. Bật mọi thứ, bấm Create New Layer Comp tên Sheet. Bạn có thể tạo thêm comp Đêm có một layer tô #1f2340 Multiply 60% ở dưới cùng để xem đèn trên nền đêm – nhưng comp xuất luôn là Sheet.
12. Kiểm tra chân cột: zoom 200% vào đường y = 248: đáy của đế cột đèn, chân cột gỗ, chân cột bảng hiệu phải chạm đúng đường này, không hở 1 px. Bóng elip dưới chân nằm giữa đường, nửa trên nửa dưới.
13. Xuất và đưa vào Unity 6: ẩn Sketch và lưới, Export As (Xuất ra (tùy chỉnh)) PNG → street_props.png 512 × 256 px. Unity: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Slice Grid By Cell Size 128 × 256, Pivot Custom với Y = 0.03 (8 / 256) để pivot nằm đúng chân cột. Cho game nhìn nghiêng từ trên (top-down 3/4), mở asset Renderer 2D của URP, đặt Transparency (Độ trong suốt) Sort Mode: Custom Axis, Axis (0, 1, 0) – nhân vật đi phía sau cột sẽ bị cột che. Gắn GameObject›Light›Spot Light 2D màu #ffd86b vào cột đèn bật; script đổi sprite và bật/tắt light lúc chuyển ngày – đêm.

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

• Đèn nhấp nháy: trong Unity, script thay đổi intensity của Light 2D ngẫu nhiên trong khoảng 0.9–1.1 mỗi vài khung hình – đèn dầu trông như đang cháy.
• Bảng hiệu khác: giữ nguyên cột và cần treo, chỉ vẽ biểu tượng mới: cái búa (lò rèn), bình thuốc (tiệm thuốc), cái ổ bánh mì (lò bánh) – mỗi cửa hàng một bảng.
• Bảng đung đưa: tách bảng gỗ và xích thành sprite riêng, Pivot ở điểm treo, cho xoay qua lại ±5° bằng Animation.