Mặc dù các trò chơi Flash đã rời bỏ thế giới này nhưng vẫn có nhu cầu đáng kể đối với các trò chơi dựa trên trình duyệt và đa nền tảng. Cho dù bản thân bạn có chủ động chơi chúng hay không, ngày càng có nhiều trò chơi từ các nhà phát triển chuyên nghiệp và độc lập ra mắt mỗi ngày
Hiện tượng này phần lớn là nhờ các trò chơi HTML5 đã lấp đầy khoảng trống để theo kịp những game thủ háo hức này. Ngoài ra, nhờ sự tiến bộ của công nghệ và các khuôn khổ mới, quá trình phát triển trò chơi HTML5 đã đạt đến tầm cao mới, cho phép trải nghiệm nhiều người chơi, đồ họa 3D, v.v. Không phải là không khôn ngoan khi nói rằng chơi game giờ đây cũng khả thi thông qua trình duyệt cũng như trên nhiều thiết bị khác
Giả sử điều này nghe có vẻ là một triển vọng thú vị đối với bạn với tư cách là nhà phát triển trò chơi, trong hướng dẫn này, chúng tôi sẽ đi sâu vào chủ đề phát triển trò chơi HTML5 và cung cấp cho bạn thông tin chi tiết về cách bạn có thể tạo trò chơi của riêng mình. Ngồi xuống, thư giãn và chuẩn bị để nâng cao kỹ năng phát triển trò chơi của bạn theo những cách hoàn toàn mới
Mục lục
Chính xác thì trò chơi HTML5 là gì?
Hãy bắt đầu từ tổng số không. HTML5 là gì? . Có một định nghĩa chính thức về HTML5, đơn giản là viết tắt của phiên bản mới nhất của HTML [ngôn ngữ đánh dấu được sử dụng trên toàn thế giới để xây dựng trang web] và định nghĩa cường điệu hơn [điều mà hầu hết mọi người hiểu khi nhắc đến HTML5] là tất cả
Với mục đích của chúng tôi, chúng tôi sẽ sử dụng các bit của hai. HTML5 là HTML trong phiên bản mới nhất của nó, bao gồm một loạt các tính năng thú vị làm cho công nghệ web trở thành một tiêu chuẩn mở với khả năng vô tận kết hợp HTML, CSS và JavaScript
Có HTML cùng với tất cả những siêu năng lực vượt xa việc tạo một trang web đơn giản này cho phép chúng tôi tạo trò chơi, trong số những thứ khác. Đây là những trò chơi HTML5
XÂY DỰNG TRÒ CHƠI CỦA RIÊNG BẠN
Nhận hơn 250 khóa học mã hóa cho
$1
TÌM HIỂU THÊM
CHỈ CÓ SẴN TRONG THỜI GIAN GIỚI HẠN
Khu nhà
Các khối xây dựng rất cơ bản của trò chơi HTML5 là các khối của web
- HTML
- CSS
- JavaScript
Tương tự như những gì xảy ra với HTML5, khi mọi người nói về CSS3, họ thường đề cập đến những thứ mới đi kèm với thông số kỹ thuật mới nhất của CSS, nhưng theo cách tương tự, CSS3 chỉ đơn giản là CSS mới nhất. Bỏ qua một giây ngữ nghĩa của các định nghĩa này và nghĩ về các phiên bản cường điệu của các thuật ngữ này, chúng tôi cũng có thể cần, để tạo trò chơi HTML5
- HTML5 [API JavaScript]
- CSS3
Với những điều trên, bạn có thể tạo những trò chơi tuyệt vời sẽ chạy trên các trình duyệt web hiện đại trên thiết bị di động và máy tính để bàn, nhưng một số trò chơi có thể yêu cầu nhiều tính năng hơn, do đó, bạn có thể thêm nhiều khối xây dựng hơn
Chẳng hạn, bạn có thể muốn tạo trò chơi 3D. Nếu đúng như vậy thì cũng có WebGL, là API JavaScript để hiển thị đồ họa 2D và 3D trên trình duyệt, sử dụng GPU để có hiệu suất cao hơn
Phía máy chủ
Nếu bạn muốn trò chơi của mình được lưu dữ liệu từ xa, bạn sẽ cần phía máy chủ cho trò chơi của mình. Bạn có thể phát triển chương trình phụ trợ của riêng mình bằng bất kỳ ngôn ngữ phía máy chủ nào, bạn sẽ cần một máy chủ tốt trong trường hợp này
- JavaScript [NodeJS]
- PHP
- Java
- con trăn
- hồng ngọc
Hoặc bạn có thể sử dụng nhà cung cấp Dịch vụ phụ trợ bên thứ ba, chẳng hạn như Firebase. Một số có phiên bản miễn phí mà bạn có thể sử dụng và họ sẽ bắt đầu tính phí bạn sau khi bạn vượt qua các giới hạn nhất định. Một số nhà cung cấp này đặc biệt tập trung vào trò chơi, một số chủ yếu được hình thành cho ứng dụng dành cho thiết bị di động nhưng cũng có thể được sử dụng cho trò chơi
Cách phân phối trò chơi HTML5
Cách dễ nhất để phân phối HTML5 là đơn giản đưa nó ra khỏi đó. Bằng cách được xây dựng như một trang web, bạn chỉ cần nhúng nó vào một trang và xuất bản nó. cứ thế
Nếu bạn muốn phân phối nó thông qua các nền tảng độc quyền, bạn phải trải qua một quá trình gọi là gói. Về cơ bản, bạn tạo một ứng dụng gốc cho nền tảng mà bạn muốn phân phối ứng dụng đó [iOS, Android, v.v.] và đưa trò chơi của bạn vào bên trong để ứng dụng này hoạt động như một trình duyệt web và “chạy” trò chơi của bạn
Đối với các nền tảng máy tính để bàn như Windows, Mac hoặc Linux, có một công cụ gọi là NWjs cho phép bạn đóng gói các trò chơi HTML5 của mình cho các nền tảng này
Chúng tôi chỉ có thể đề cập đến những điều cơ bản ở đây, nhưng chúng tôi khuyến khích bạn đọc thêm về cách xuất bản trò chơi của chúng tôi
Khung trò chơi HTML5
Hầu hết các trò chơi chia sẻ một số khái niệm, đó là sprites [yếu tố đồ họa đại diện cho kẻ thù, người chơi, yếu tố trong trò chơi của bạn], cảnh hoặc giai đoạn, hoạt ảnh, âm thanh, tải nội dung đồ họa, v.v. Vì hầu hết các nhà phát triển trò chơi muốn tập trung vào trò chơi thực tế của họ chứ không phải tạo toàn bộ lớp trừu tượng này, nên bạn nên sử dụng khung trò chơi HTML5
Thư viện và khung trò chơi HTML5 chứa các thành phần xây dựng mà bạn có thể sử dụng để tạo trò chơi của riêng mình. Các thư viện này là các dự án Nguồn mở được tạo và duy trì bởi những người muốn đóng góp cho môi trường gamedev HTML5. Trong nhiều trường hợp, họ đã tạo ra các khung cho trò chơi của riêng mình và sau khi nhận ra rằng những người khác không chỉ muốn sử dụng nó mà còn muốn đóng góp vào đó, họ đã phát hành chúng dưới dạng mã nguồn mở, vì vậy mọi người đều thắng
Chọn công cụ trò chơi nào để sử dụng là một quyết định quan trọng, vì vậy hãy đảm bảo rằng bạn đã nghiên cứu kỹ lưỡng trước khi đưa ra lựa chọn của mình. Cho dù bạn chọn công cụ nào, bạn sẽ phải làm quen với mã và hoạt động bên trong của nó nếu muốn sử dụng đúng cách, vì vậy chúng không nên được coi là hộp đen
Điều gì có thể giúp bạn lựa chọn
- Trò chơi của bạn dành cho máy tính để bàn, thiết bị di động hay cả hai?
- Họ có một cộng đồng năng động không?
- Hiện nay có nhiều người sử dụng framework không?
- Nó đang được bảo trì hay trang Github trông giống như một thị trấn bị bỏ hoang?
Đôi khi nhìn vào các trò chơi thực sự mang lại cho bạn cái nhìn sâu sắc hơn là chỉ từ ngữ. Dự án này so sánh các công cụ khác nhau bằng cách tạo ra cùng một trò chơi Breakout trong tất cả chúng
Một số framework miễn phí phổ biến là
- Phaser –> Phổ biến nhất hiện nay
- TạoJS
- VôiJS
- ngũ sắc
- CraftyJS
- MelonJS
- PixieJS
- BabylonsJS -> Khung WebGL để hiển thị 3D
- ChơiCanvas
- BaJS
- KontraJS
- đại bác. js
- Sân khấu. js
- Vấn đề. js
Khóa học phát triển trò chơi HTML5
Các khóa học video là một cách tuyệt vời để học các công nghệ mới. Sự khác biệt chính giữa khóa học qua video và chỉ xem video trên YouTube là có nhiều cấu trúc hơn. Các khóa học tốt có mục tiêu rõ ràng và từng bước xây dựng mục tiêu đó. Dưới đây là danh sách các khóa học và hướng dẫn của Zenva có thể cung cấp cho bạn các công cụ cần thiết để tạo trò chơi HTML5
Phát triển trò chơi chung
- 10 cách tốt nhất để học viết mã
- Cách tạo trò chơi – Tạo trò chơi điện tử từ đầu
- Cách viết mã trò chơi
- Cách thiết kế một trò chơi. Tài liệu thiết kế trò chơi
- Cách tiếp cận tường thuật trò chơi
phaser
- Cấp độ nhỏ về Phát triển trò chơi HTML5 [Chương trình giảng dạy cao cấp bao gồm việc tạo nhiều trò chơi nhỏ với Phaser]
- Hướng dẫn về Phaser 4 – Hướng dẫn đầy đủ
WebGL, 3D và XR
- 3D & XR JavaScript Academy [Chương trình giảng dạy cao cấp bao gồm nhiều khung JavaScript cho trải nghiệm 3D và XR trên web]
- WebVR cho người mới bắt đầu – Xây dựng trang web VR với A-Frame [Khóa học cao cấp về A-Frame]
- Tìm hiểu những điều cơ bản của Babylon. js [Khóa học miễn phí trên Babylon. js]
Kỹ năng HTML5
- Tìm hiểu HTML và CSS [Khóa học miễn phí]
- Lập trình JavaScript cho người mới bắt đầu
- JavaScript Mini-Projects – Trò chơi học ngôn ngữ
- Nút. js và Express cho người mới bắt đầu
Tại Học viện GameDev, như bạn đã biết, chúng tôi có rất nhiều hướng dẫn phát triển trò chơi HTML5, chủ yếu về Phaser, LimeJs, Quintus và BabylonJS. Có những nơi tuyệt vời khác để tìm các hướng dẫn về gamedev HTML5 chất lượng tốt
- Xây dựng trò chơi mới
- Gamedevtuts+
- Phát triển trò chơi HTML5 [tin tức và liên kết đến hướng dẫn]
- hướng dẫn phaser
- Hướng dẫn trò chơi Mozilla
- Hướng dẫn trò chơi HTML5
- Trò chơi HTML5 với JavaScript & Phaser
- Hướng dẫn phát triển trò chơi JavaScript HTML5
- Hướng dẫn phát triển trò chơi HTML5
HTML5 cho trường học
Bạn có phải là giáo viên đang tìm cách giúp sinh viên làm quen với các khuôn khổ như Phaser hoặc dạy họ các kỹ năng phát triển web cốt lõi và có liên quan không? . Nền tảng này đi kèm với các bài học video, tóm tắt văn bản, câu đố, tính năng quản lý lớp học, báo cáo, v.v. để hỗ trợ việc học HTML5
Cộng đồng gamedev HTML5
Bạn có thể tìm thấy nhiều cộng đồng tích cực trên Internet, một số tập trung vào gamedev nói chung và một số khác chỉ tập trung vào gamedev HTML5
mạng
- Nhà phát triển HTML5Game
- Nhà phát triển trò chơi độc lập
- Nhóm nhà phát triển trò chơi và ứng dụng độc lập
- Sự phát triển trò chơi
- Nhà phát triển trò chơi điện tử
cộng đồng khác
- Diễn đàn Phaser
- GAMEDEV. JS
- Diễn đàn Babylon Js
- diễn ngôn baj
Thử thách gamedev HTML5
- Global Game Jam® là sự kiện thường niên, thường diễn ra vào tháng 1 hàng năm. Những người tham gia làm việc đồng thời trên toàn cầu và xung quanh một chủ đề trung tâm, sau đó làm việc cùng nhau để tạo ra một trò chơi
- cuộc thi j13k. cuộc thi đã kết thúc nhưng bạn vẫn có thể đọc Blog, đăng ký Bản tin và kiểm tra Tài nguyên để biết các công cụ
Podcast trò chơi HTML5
Tôi chỉ biết Lostcast, một podcast được tạo bởi những người từ Lost Decade Games [những người mà chúng tôi đã phỏng vấn trước đây]. Trong các tập podcast, họ nói về các trò chơi HTML5 và phát triển trò chơi nói chung