Góc chia sẻ

Dev log Battle City ngày 1: từ khung dự án đến bắn tăng online

Nhật ký ngày đầu làm Battle City 3D: thành phố phá hủy được, ngày đêm, bot săn người chơi, chế độ battle royale, chơi online, tài khoản, bảng xếp hạng và nhạc nền.

Cập nhật lúc

Dev log Battle City ngày 1: từ khung dự án đến bắn tăng online

Ngày đầu tiên của Battle City bắt đầu lúc 16 giờ chiều 15/10 với một khung dự án trống, và kết thúc gần trưa hôm sau với một game bắn tăng 3D chơi online được. Tổng cộng 106 commit. Bài này ghi lại những gì đã làm, theo đúng thứ tự.

Khởi đầu: một bản mẫu 3D

Dự án dựng lại từ khung có sẵn của hệ thống quản lý ứng dụng. Chưa tới 20 phút sau đã có bản mẫu Battle City 3D ngay trên trang chủ, rồi bản đồ được thay bằng một thành phố low poly có thể phá hủy. Căn cứ kiểu Battle City cổ điển bị bỏ đi, thay vào đó mỗi xe tăng có một thanh máu.

Một thành phố để phá

Bản đồ được vẽ lại thành thành phố 40x40 ô có khu trung tâm, công viên và các khối nhà có sân trong. Sau đó là phần tự sinh: đường vành đai, vạch kẻ đường, đèn giao thông với nhịp riêng cho từng ngã tư, biển báo, cửa hàng, biển quảng cáo. Đường nội khu được so le thành ngã ba, góc cua và ngõ cụt thay vì lưới ô vuông.

Phá hủy là phần mất nhiều công nhất:

  • Mỗi tòa nhà được ghép từ các khối lớn, chịu đạn cùng nhau và sập cùng lúc.
  • Khi sập, tòa nhà vỡ thành từng tầng rơi xuống, kèm bụi và rung camera.
  • Gạch vụn văng ra với kích thước ngẫu nhiên, lăn, nảy và trượt. Xe tăng và đạn đi xuyên qua được, nhưng xe bị chậm lại.
  • Cây bị xe tông thì đổ, cột đèn đổ thì tóe lửa và bóng đèn chập chờn rồi tắt.
Một góc tòa nhà vừa sập trong Battle City, bụi và gạch vụn văng ra đường

Ngày, đêm và ánh sáng

Mặt trời di chuyển theo chu kỳ ngày đêm, có bóng đổ, và đèn đường sáng lên khi trời tối. Ảnh được thêm bloom, tone mapping ACES và chỉnh màu. Bóng đổ dùng shadow map 4096 bám theo màn hình để nét hơn. Xe tăng nhận bóng, có bóng tiếp đất, phản chiếu bầu trời, và ban đêm được đèn đường bên dưới chiếu sáng. Cuối ngày có thêm vòm trời với mặt trời, mặt trăng, sao và mây low poly quanh thành phố.

Thành phố Battle City về đêm với đèn đường, cửa sổ sáng đèn và đèn giao thông

Điều khiển, tầm nhìn và camera

Tháp pháo ngắm theo chuột, bắn có thời gian nạp đạn và tầm bắn giới hạn. Thân xe chạy được 8 hướng, xoay dần và trượt dọc tường khi va chạm.

Sương mù chiến tranh là phần thử nhiều nhất: đầu tiên giới hạn tầm nhìn bằng tầm bắn, sau đó thành hình nón 120 độ theo nòng súng và bị nhà che, rồi làm mềm viền. Cuối cùng phần sương mù được bỏ hẳn vì chơi không thoải mái.

Camera xoay bằng cách giữ chuột phải kéo, lăn chuột để zoom xuống tận góc nhìn người thứ ba, có mũi tên chỉ kẻ địch ngoài màn hình. Khi camera thấp, nhà, cây và cột đèn chắn giữa camera và xe sẽ được ẩn đi thay vì kéo camera lại gần.

Bot biết đi săn

Bot tìm đường tới người chơi bằng flow field và xoay tháp pháo ngắm trước khi bắn. Va chạm giữa các xe dùng hình hộp xoay theo thân xe.

Chạy mượt trên cả điện thoại

Cảnh vật tĩnh được gộp thành mesh theo từng vùng, số draw call giảm từ 2800 xuống 650. Máy yếu tự hạ chất lượng hình ảnh. Điện thoại có cần điều khiển cảm ứng, chạm để bắt đầu và nút tạm dừng. Một menu debug (phím backquote, hoặc nút DEBUG trên màn hình cảm ứng) cho phép đóng băng bot và chỉnh giờ trong ngày.

Từ bắn tăng thành battle royale

Game chuyển sang battle royale: vòng lửa thu hẹp dần, bot, xác xe, kill cam và bảng tên. Xe tăng có nhiều lớp với chỉ số riêng, bắn vào hông và đuôi xe gây thêm sát thương, có đèn pha và tầm nhìn ban đêm.

Phép thuật rơi ra khi bắn sập tòa nhà hoặc từ thùng thả dù: mưa thiên thạch, lộ vị trí, đóng băng, khiên và đổi ngày đêm.

Hai xe tăng đấu súng cạnh công viên, góc trên bên phải là vòng lửa đang thu hẹp

Chơi online

Một máy chủ game Node chạy trận đấu, trình duyệt chỉ theo dõi snapshot từ máy chủ. Xe của người chơi được dự đoán phía client cho đỡ trễ, và mỗi người chỉ nhận dữ liệu những gì mình nhìn thấy. Trận chỉ bắt đầu khi mọi người đã tải xong. Chế độ chơi offline bị bỏ.

Cuối ngày máy chủ chạy được nhiều phòng cùng lúc, mỗi phòng xếp hàng 60 giây với tối đa 25 người chơi, và có trận luyện tập với bot.

Tài khoản và quản trị

Màn hình bắt đầu có Chơi ngay, Đăng ký và Đăng nhập. Máy chủ game xác thực tài khoản bằng vé đã ký, khách được đặt tên dạng guest_xxxx. Phân quyền chuyển sang vai trò và quyền hạn, có một chủ sở hữu luôn có toàn quyền. Quyền game.debug mở menu debug trong trận, kèm chế độ bất tử và ẩn khỏi bot. Quản trị viên có thể xem và kết thúc sớm trận đang chạy.

Màn hình bắt đầu Battle City với nút Chơi ngay, Đăng nhập, Đăng ký và bảng TOP KDA

Kết trận và bảng xếp hạng

Màn hình kết quả hiện hạng, KDA và bảng xếp hạng trận, ba vị trí đầu được tô màu vàng, bạc, đồng. Kết quả được lưu vào tài khoản, và màn hình bắt đầu có bảng TOP KDA với các cột Hạ gục, Hỗ trợ và Bị hạ. Trong trận có hiển thị ping và FPS.

Màn hình kết quả sau trận với hạng, KDA và bảng xếp hạng, ba vị trí đầu tô vàng, bạc, đồng

Âm thanh

Nhạc menu và nhạc chiến đấu được tạo bằng ACE-Step, sau đó thêm nhạc thắng, nhạc thua và hiệu ứng âm thanh tổng hợp. Cả bốn bản nhạc cuối cùng được làm lại theo phong cách phonk và trap. Nút NHẠC hoặc phím M để tắt tiếng.

Kết thúc ngày 1

Commit cuối cùng của ngày là đơn giản hóa quy trình deploy: workflow chỉ cần gọi webhook. Từ một khung trống đến một game battle royale online có tài khoản, bảng xếp hạng và nhạc nền, ngày đầu tiên như vậy là khá trọn vẹn. Ngày 2 sẽ tập trung vào điều khiển cảm ứng và camera.