Đội ngũ bên mình gặp câu hỏi này rất nhiều, nhất là từ những bạn mới bắt đầu làm game web. Chúng tôi từng nhận không ít phản hồi na ná nhau: trên máy tính chạy rất mượt, nhưng mở bằng điện thoại thì mọi thứ lộn xộn. Nút bấm chồng lên nhau, chữ tràn dòng, có lúc banner còn che mất khung chơi. Vì vậy, bài này chúng tôi kể lại cách làm để web game chạy ổn định trên mọi thiết bị, dựa trên những lần vấp ngã thật của chính đội mình.
Vì sao web game chỉ tối ưu cho một thiết bị lại dễ làm mất người chơi
Nhiều web game hiện nay được dựng trước hết cho máy tính. Đội thiết kế ngồi trước màn hình lớn, chỉnh từng chi tiết nhỏ, thấy ổn là duyệt. Vấn đề chỉ lộ ra khi người chơi mở game bằng điện thoại. Lúc đó người làm mới nhận ra mình đã bỏ quên một phần lớn lượng người dùng tiềm năng.
Hiện tượng này khá phổ biến. Nhiều đội nghĩ rằng chỉ cần khung chơi đẹp là đủ. Nhưng người chơi không quan tâm bạn làm bằng công nghệ gì. Họ chỉ muốn chạm vào là chơi được ngay.
Giao diện vỡ ngay lần mở đầu tiên
Bên mình từng thử đưa một game bắn súng khá nổi trên máy tính sang điện thoại. Thanh điều khiển bị đẩy ra ngoài mép màn hình. Người chơi phải xoay ngang, phóng to, thu nhỏ đủ kiểu mới bấm trúng nút bắn. Cảm giác đó rất khó chịu, và chúng tôi hiểu vì sao người chơi bỏ đi nhanh đến vậy.
Chuyện này không hiếm. Nhiều web game vẫn thiết kế theo khung cố định, ví dụ 1280×720 pixel. Màn hình điện thoại có tỷ lệ khác hẳn, nhất là khi cầm dọc, nên giao diện bị co kéo sai lệch là chuyện dễ hiểu. Nếu từ đầu không tính đến điều này, khung chơi lúc nào cũng có nguy cơ bị cắt xén.
Người chơi thoát đi chỉ sau vài giây khó chịu
Trải nghiệm đầu tiên quyết định khá nhiều chuyện. Game tải xong mà bấm mãi không trúng nút thì phần lớn người chơi thoát ngay. Họ hiếm khi quay lại thử thêm lần hai. Với một trang web, mỗi lần người dùng thoát sớm là một cơ hội mất đi thật.
Đây cũng là lý do nhiều người xuất thân từ game thủ lại chuyển sang học thiết kế web. Họ hiểu rõ cảm giác khó chịu đó từ phía người chơi, nên khi tự làm sản phẩm thường chú ý hơn tới trải nghiệm. Nếu muốn tìm hiểu kỹ hơn hành trình này, bạn có thể đọc thêm bài vì sao nhiều game thủ chuyển sang học thiết kế web.
Nguyên tắc thiết kế web game tương thích đa thiết bị
Sau nhiều lần sửa lỗi kiểu vá víu, chúng tôi rút ra vài nguyên tắc cố định. Áp dụng đúng ngay từ đầu sẽ đỡ phải làm lại về sau. Hai nguyên tắc quan trọng nhất nằm ở giao diện và cách điều khiển, cũng là phần chúng tôi dành nhiều thời gian nhất.
Responsive layout: giao diện tự co giãn theo màn hình
Nói đơn giản, responsive là giao diện tự thay đổi theo kích thước màn hình. Thay vì đặt kích thước cố định bằng pixel, chúng tôi dùng đơn vị phần trăm hoặc vw, vh. Nhờ vậy khung chơi co giãn theo chiều rộng thiết bị và không còn bị cắt góc.
Một khái niệm hay gặp là breakpoint, tức mốc để đổi bố cục. Ví dụ dưới 768 pixel coi là điện thoại, từ 768 đến 1024 pixel là máy tính bảng, lớn hơn nữa là máy tính. Mỗi mốc sẽ chỉnh lại cỡ chữ, vị trí nút và kích thước khung chơi. Bạn không cần thuộc lòng các con số này, quan trọng là thử trên thiết bị thật để xem nó có hợp lý không.
Ngoài kích thước, thứ tự hiển thị cũng cần tính lại. Trên máy tính, bảng điểm và khung chat có thể đặt hai bên khung chơi. Trên điện thoại, chúng tôi thường gom các phần này thành một cột dọc và ẩn bớt phần phụ để khung chơi rộng nhất có thể. Người chơi trên điện thoại cần thấy trò chơi trước, mọi thứ khác đến sau.
Muốn làm tốt phần này, đội ngũ cần nắm chắc kiến thức nền về công nghệ web lẫn game. Ai mới bắt đầu nên dành thời gian tìm hiểu trước khi code, và có thể xem thêm bài học thêm kiến thức công nghệ ngành game để làm web tốt hơn.
Điều khiển cho ngón tay khác với chuột
Trên máy tính, người chơi dùng chuột nên độ chính xác khá cao. Trên điện thoại, ngón tay to hơn con trỏ chuột rất nhiều. Nút bấm nhỏ hơn khoảng 44 pixel thường bị bấm trượt hoặc nhầm, nhất là khi game có nhịp độ nhanh. Khi thấy người chơi liên tục bấm sai, thường là dấu hiệu nút đang quá nhỏ.
Chúng tôi hay đặt nút điều khiển to hơn hẳn trên bản mobile và để khoảng cách giữa các nút rộng ra một chút. Đặt nút ở vùng ngón cái, dễ với tới khi cầm bằng hai tay, cũng là chi tiết đáng bỏ công. Với máy tính, có thể bổ sung phím tắt bàn phím để chơi nhanh hơn. Hai phiên bản không cần giống nhau từng chi tiết, miễn giữ được cùng một cảm giác chơi.
Nếu đội của bạn chưa quen chỉnh điều khiển bằng code thì cũng đừng quá lo. Bạn có thể tham khảo gợi ý tài nguyên số cho người mới học code để nắm cú pháp cơ bản trước khi bắt tay vào làm.
Tốc độ tải trên mạng di động cũng là một phần của tương thích
Máy tính thường nối mạng dây hoặc wifi ổn định. Điện thoại thì nhiều lúc chạy 4G ở nơi sóng yếu. Web game tải ảnh nặng hoặc nhạc nền dung lượng lớn sẽ khiến người chơi trên điện thoại phải chờ rất lâu. Đó cũng là một dạng không tương thích, dù giao diện có đẹp đến đâu.
Cách chúng tôi hay làm là nén ảnh trước khi đưa lên web. Nhạc nền chỉ nên tải sau khi game đã chạy được, không chặn màn hình chờ đầu tiên. File càng nhẹ thì máy cấu hình yếu vẫn mở được mượt hơn.
Có lần một game xếp hình của bên mình nặng hơn 8 megabyte chỉ vì ảnh nền có độ phân giải quá cao. Trên wifi thì không sao. Trên 4G yếu, người chơi phải đợi gần nửa phút mới thấy hình, và nhiều người đã thoát trước khi kịp chơi. Đó là một bài học đau nhưng rất rõ ràng.
Sau đó, chúng tôi nén ảnh xuống còn khoảng 2 megabyte và thời gian tải rút xuống còn vài giây. Từ chuyện này, chúng tôi nhận ra dung lượng file quan trọng không kém bố cục giao diện. Nên kiểm tra nó ngay từ đầu, đừng đợi đến lúc phát hành.
Cách kiểm tra tính tương thích trước khi ra mắt
Thiết kế xong chưa có nghĩa là hoàn thành. Bước kiểm tra trước khi ra mắt quan trọng không kém phần thiết kế. Bỏ qua bước này, một lỗi nhỏ trên một dòng máy lạ cũng đủ làm mất người chơi.
Thử trên nhiều thiết bị và trình duyệt thật
Chúng tôi không chỉ test trên một chiếc điện thoại quen tay. Màn hình, hệ điều hành và trình duyệt khác nhau đều có thể cho kết quả khác nhau. Danh sách tối thiểu của bên mình thường gồm điện thoại Android có màn hình nhỏ và lớn, iPhone đời cũ lẫn đời mới, máy tính bảng và các trình duyệt Chrome, Safari, Cốc Cốc trên máy tính.
Không có đủ máy thật cũng không sao. Hiện có nhiều công cụ giả lập thiết bị ngay trên trình duyệt máy tính, giúp phát hiện lỗi hiển thị nhanh hơn. Độ chính xác vẫn kém máy thật, nên cuối cùng vẫn nên thử trên ít nhất vài thiết bị thực.
Mời người chơi thử và góp ý trước khi phát hành
Đội ngũ tự test mãi cũng có lúc bỏ sót lỗi. Người ngoài dùng lần đầu thường phát hiện những chỗ khó hiểu mà mình không để ý, vì đã quá quen với giao diện. Chúng tôi hay mời một nhóm nhỏ chơi thử vài ngày trước khi ra mắt để thu thập phản hồi.
Phản hồi của họ thường rất thật, đôi khi thẳng đến mức khó nghe. Nhưng chính những góp ý đó giúp sửa kịp trước khi ra mắt rộng. Nếu cần thêm công cụ hỗ trợ khâu kiểm thử và chuẩn bị, bạn có thể tham khảo gợi ý tài ứng dụng và tài nguyên số để học web, nơi chúng tôi đã tổng hợp khá đầy đủ.
Tham khảo thêm dịch vụ thiết kế và xây dựng website tại aimynhan.vn nếu bạn cần đội ngũ hỗ trợ triển khai.
Web game mượt trên mọi thiết bị giữ chân người chơi lâu hơn
Thiết kế web game tương thích không phải việc làm một lần rồi thôi. Thiết bị mới ra liên tục và kích cỡ màn hình ngày càng đa dạng. Bên mình vẫn thường mở lại game cũ trên điện thoại đời mới để kiểm tra, và không ít lần phát hiện chỗ cần chỉnh lại.
Nếu chỉ chọn một việc để làm trước, hãy bắt đầu từ responsive layout và nút điều khiển phù hợp với ngón tay. Hai phần này ảnh hưởng trực tiếp đến trải nghiệm ngay từ giây đầu tiên. Làm tốt phần này, web game của bạn sẽ giữ chân người chơi lâu hơn, dù họ mở bằng điện thoại hay máy tính.