Hướng dẫn best html5 game engine - công cụ trò chơi html5 tốt nhất
|
Phaser là một framework game mã nguồn mở HTML5 được tạo ra bởi Photon Storm. Nó được thiết kế để tạo ra các trò chơi sẽ chạy trên các trình duyệt web trên máy tính để bàn và di động. Rất nhiều trọng tâm đã được đưa ra để thực hiện bên trong các trình duyệt web di động, một lĩnh vực phát triển web và phát triển quan trọng. Nếu thiết bị có khả năng thì thiết bị sẽ sử dụng WebGL để hiển thị, nhưng ngược lại, thiết bị sẽ hoàn nguyên trở lại Canvas. Trong bài viết này, tôi sẽ trình bày các tài nguyên cho việc học Phaser, cũng như hiển thị những gì nó có thể làm và một số suy nghĩ đã đi vào thiết kế của nó. Show
Nội dung chính ShowShow
 Tuy nhiên, một khung trò chơi HTML5 khác ?!Thật công bằng khi nói rằng nó cảm thấy như thể một khuôn khổ trò chơi HTML5 mới được phát hành mỗi tuần, chẳng hạn như sự gia tăng của chúng. Vì vậy, tại sao bạn nên xem xét Phaser trong số các lựa chọn rất lớn ra khỏi đó? Tôi thích nghĩ rằng lý do là một cái gì đó để làm với di sản của đội ngũ tham gia xây dựng nó. Chúng tôi ở Photon Storm dành riêng cho mình để phát triển không có gì ngoài các trò chơi HTML5 cách đây vài năm, trở lại khi thực sự không có nhiều lựa chọn khung và bạn có thể đếm số lượng nhà phát triển trò chơi HTML5 bằng các chữ số duy nhất. Bước vào không gian quá sớm và đến từ Flash, chúng tôi đã ngay lập tức cảm thấy cần phải xây dựng các công cụ mà chúng tôi đã sử dụng trong AS3. Chúng tôi đã là những người hâm mộ tuyệt vời của Flixel và đã rất thích thành công cả với các trò chơi của chúng tôi và với Công cụ Power Flixel của chúng tôi. Có một tiếng vo vo thực sự khi thấy các nhà phát triển khác sử dụng chúng để giúp trò chơi của họ được phát hành và đây là điều chúng tôi muốn lặp lại trong HTML5. Tuy nhiên, những gì chúng tôi chưa chuẩn bị là cảnh quan HTML5 thay đổi nhanh đến mức nào. Thậm chí ngày nay, tôi có một slide trong bài thuyết trình của tôi mà tôi trình bày tại các hội nghị nói "Hãy chuẩn bị để không hiểu những gì bạn biết mỗi sáu tháng", và tôi tin rằng điều này vẫn còn đúng. Các nhà cung cấp trình duyệt đang lặp lại và cải thiện với tốc độ hiện tượng ngay bây giờ. Chỉ mất vài tuần để các tính năng mới phát tán thông qua công chúng và nếu bạn bị mắc kẹt với khung trò chơi được duy trì trong thời gian rảnh rỗi của ai đó hoặc đang trong giai đoạn phát hành chậm thì không mất nhiều thời gian mọi thứ rất lỗi thời. Một dấu hiệu của sự thay đổi này là trong các loại công việc của khách hàng, chúng tôi đã được đưa vào hoạt động. Là một công ty, chúng tôi chỉ làm hai việc: xây dựng các trò chơi HTML5 và xây dựng Phaser. Chúng tôi đã xây dựng trò chơi HTML5 cho một số thương hiệu giải trí lớn nhất trên thế giới và điều đó đã mang lại cho chúng tôi cái nhìn sâu sắc về các loại yêu cầu mà họ yêu cầu. Khu vực lớn nhất mà chúng tôi được yêu cầu làm việc là các trò chơi chạy bên trong trình duyệt di động; rất nhiều khung công tác HTML5 tập trung vào máy tính để bàn, nơi hiệu suất phong phú và kết nối nhanh và ổn định đồng thời bỏ qua phía trình duyệt di động của cuộc sống. Tuy nhiên, đó là nơi chúng ta vẫn thấy nhu cầu của khách hàng là mạnh nhất. Vì vậy, điều quan trọng là Phaser có thể được sử dụng để xây dựng các trò chơi khách hàng của chúng tôi, bất kể nền tảng. Kể từ khi phát hành Phaser 1.0, bản cập nhật đã được thường xuyên và toàn diện, với nhiều tính năng mới và sửa chữa tại chỗ một cách nhanh chóng. Chúng tôi làm việc trên một vòng quay khoảng một tháng từ dev đến master - bạn có thể xem một thay đổi hoàn toàn trên GitHub. Thật thú vị, chúng ta đang thấy nhu cầu về các game chạy bên trong một WebView, vì vậy chúng tôi sẽ đảm bảo rằng Phaser hoạt động tốt trong môi trường này vào năm 2014. Cũng như việc giữ cho Phaser được cập nhật, điều quan trọng nhất đối với chúng tôi là chúng tôi đã tạo ra thứ gì đó thực sự dễ sử dụng. Và bạn sẽ thấy điều này được phản ánh trên toàn bộ khuôn khổ. Điều này xuất phát từ trải nghiệm của chúng tôi với Công cụ Power Flixel và hơn thế nữa khi tôi từng làm việc cho The Game Creators giúp xác định hình dạng của ngôn ngữ trò chơi của họ. Tôi đoán nó luôn luôn là một phần của tôi mà tôi muốn làm cho phát triển trò chơi dễ dàng nhất có thể cho các nhà phát triển, một xu hướng tôi sẽ tiếp tục khi Phaser tiến hóa. Tôi xin lỗi trước bất kỳ điều nào sau đây (hoặc cao hơn!) Có vẻ hơi "tiếp thị". Phaser là một sản phẩm miễn phí, chúng tôi không kiếm tiền từ bạn sử dụng nó, và nếu tôi say mê nó, nó chỉ là vì tôi đam mê những gì tôi đã tạo ra. Vì vậy, hãy chịu với tôi! Tôi có thể nhắm mục tiêu nền tảng nào với Phaser?Trình duyệt trên máy tính để bànPhaser là một thư viện JavaScript được thiết kế để chạy trên tất cả các trình duyệt máy tính để bàn lớn. Điều này bao gồm Internet Explorer 9 trở lên, Firefox, Chrome và Safari. Trước IE9 nó không hỗ trợ canvas, vì vậy nếu bạn hoàn toàn cần một framework có thể xử lý hiển thị DOM thì Phaser sẽ không phù hợp. Tuy nhiên, nhu cầu đối với các loại trò chơi này đang trở nên tiếp theo ở mức tối thiểu; nếu có, nó chuyển hướng khác (hướng tới WebGL). Trình duyệt di độngTrên thiết bị di động, Phaser chạy trên iOS5 trở lên bên trong Mobile Safari. Trên Android, nó chạy ở phiên bản 2.2 trở lên trong cả trình duyệt chứng khoán và trong Chrome. Chrome hiện là trình duyệt Android chuẩn, với các phiên bản gần đây thậm chí còn hỗ trợ WebGL, nhưng bạn vẫn không thể bỏ qua hàng triệu thiết bị Android cũ vẫn còn được sử dụng. Hệ điều hành Firefox, Tizen và KindleNhờ Mozilla, chúng tôi đã nhận được một loạt các thiết bị thử nghiệm FFOS và đã bắt đầu đảm bảo rằng Phaser chạy tốt trên chúng. Cho đến nay, mọi thứ đều tốt, và chúng tôi sẽ sản xuất hướng dẫn triển khai trong năm mới. Chúng tôi cũng đã thấy các trò chơi Phaser chạy tốt trên các thiết bị Tizen và hoàn hảo dưới lớp vỏ bọc HTML5 của HTML5, có nghĩa là bạn có thể triển khai các thiết bị đó ra khỏi hộp '. Khi nhiều điện thoại hỗ trợ web bắt đầu tham gia thị trường, chúng tôi chắc chắn sẽ cập nhật cho Phaser. Ứng dụng gốc và EXE trên máy tính để bànCó rất nhiều lựa chọn về các gói phát triển trò chơi tuyệt vời nhằm mục đích tạo ra các ứng dụng bản địa (Unity, Corona, Loom, vv), đó không phải là khu vực mà chúng tôi muốn dành nhiều công sức, đặc biệt khi so sánh với thị trường trình duyệt di động. Tuy nhiên, với sự phát triển của trình bao bọc như CocoonJS và Ejecta, chúng ta đang thấy các nhà phát triển sử dụng Phaser bọc các trò chơi của họ và phát hành chúng như các ứng dụng gốc. Vì vậy, đi vào năm 2014, chúng tôi sẽ bắt đầu thêm hỗ trợ cho CocoonJS trực tiếp vào lõi, cũng như hỗ trợ cho trình bao bọc máy tính để bàn như nút-webkit. Các tính năng chínhChúng tôi sẽ làm nổi bật một vài trong số những gì chúng tôi coi là những tính năng quan trọng nhất của Phaser từ quan điểm của nhà phát triển: Nó chỉ là JavaScript đơn giảnĐiều này nghe có vẻ giống như một 'tính năng' kỳ lạ, nhưng nó thực sự là một tính năng hấp dẫn. Phaser không sử dụng bất kỳ thực hành kiểu OO giả nào trong nội bộ. Không có chuỗi thừa kế thừa hoặc hệ thống thành phần, và bạn không phải ép buộc các đối tượng của bạn vào bất kỳ cấu trúc lớp cố định nào. Đó là một chuỗi nguyên mẫu đơn giản về phía trước, cách JavaScript được sử dụng. Điều này không có nghĩa là bạn không thể xây dựng trò chơi của mình theo cách có cấu trúc; cách xa nó. Tất cả điều đó có nghĩa là chúng ta không thực thi nó. Nó cũng có nghĩa là Phaser là nội bộ rất dễ dàng để hack xung quanh với.
Tốt — vì chúng tôi cũng có tệp định nghĩa TypeScript! Có một hướng dẫn cụ thể về cách sử dụng Phaser với TypeScript có sẵn. Tải nội dung dễ dàngPhaser có Trình tải nội dung có sẵn có thể xử lý:
Chúng tôi thường xuyên xuất các tập tin bản đồ kết cấu từ Flash trực tiếp vào các trò chơi Phaser của chúng tôi, và nó hỗ trợ atlases cắt hoàn toàn. Nội dung có thể được tải một phần, được lưu vào bộ nhớ cache và lấy từ các URL khác nhau (để hỗ trợ CDN) và thậm chí bạn có thể biến bất kỳ sprite nào thành thanh tiến trình với một dòng mã. Hiển thị: WebGL và CanvasBên trong, Phaser sử dụng Pixi.js để hiển thị. Pixi là một thư viện dựng hình nhanh, tuyệt vời tập trung vào Canvas và WebGL. Đó là một thư viện mà chúng tôi tiếp tục đóng góp để giúp thúc đẩy mọi thứ tiến lên. Đối với trò chơi của bạn, điều này có nghĩa là nếu trình duyệt hỗ trợ WebGL thì trình phát sẽ thường xuyên hơn là không có trải nghiệm mượt mà hơn. WebGL phổ biến trên máy tính để bàn nhưng vẫn đang nổi lên trên thiết bị di động; mặc dù vậy, đó là nơi mà các trò chơi HTML5 được hướng đến trong tương lai, vì vậy hỗ trợ nó là rất quan trọng. Bản phát hành mới nhất của Phaser đã giới thiệu trình hỗ trợ bộ lọc WebGL và bộ lọc, và những bản sắp tới sẽ triển khai bản đồ bình thường để bạn có thể hưởng lợi từ các công cụ mới như Đèn Sprite. Âm thanh: Âm thanh web và âm thanh cũÂm thanh là một trong những điểm yếu nhất của trò chơi HTML trong một thời gian dài. Chỉ vài năm trước, chúng tôi đã phải đối mặt với sự lựa chọn có một kênh âm thanh có độ trễ cao sẽ làm tê liệt thiết bị trong khi phát lại hoặc không có âm thanh nào cả. Nhưng thời gian đã thay đổi và API âm thanh trên web đến với sự cứu rỗi của chúng tôi. Nó cho phép hỗ trợ âm thanh dựa trên nút thích hợp, với nhiều kênh, định tuyến nút và tất cả các loại hiệu ứng. Vì vậy, Phaser hỗ trợ đầy đủ Web Audio. Tuy nhiên, trên Android đặc biệt, rất nhiều thiết bị vẫn không hỗ trợ thi - vì vậy chúng tôi cũng hỗ trợ Audio cũ và sử dụng Audio Sprites: phương pháp đóng gói một loạt mẫu lại với nhau thành một tệp và sử dụng các điểm đánh dấu phát lại để chuyển sang hiệu ứng. Phaser sẽ trao đổi giữa hai tùy thuộc vào khả năng của thiết bị và cũng bao gồm mở khóa hệ thống phụ âm thanh tự động cho bạn, điều gì đó thu hút nhiều nhà phát triển di động lần đầu tiên! Đầu vào: Multi-Touch, Bàn phím, Con trỏ, ChuộtKhi hỗ trợ máy tính để bàn và thiết bị di động, ngày càng có nhiều tùy chọn đầu vào tiềm năng. Phaser hỗ trợ bàn phím, chuột, cảm ứng, MSPointer (bây giờ Pointer dưới IE11), và kết hợp chúng. Ví dụ: trên các thiết bị Windows Surface, bạn có thể trao đổi giữa việc sử dụng chuột và chạm hoặc thực sự sử dụng cả hai. Đối với đầu vào cảm ứng, Phaser đối phó với cả hai môi trường cảm ứng đơn và cảm ứng đa điểm. Bạn có thể xác định tối đa 10 điểm tiếp xúc và theo dõi tất cả chúng một cách độc lập, sử dụng các sự kiện của chúng để xử lý các tương tác Sprite như kéo, chạm và va chạm. Vật lý, Tweens và ParticlesĐi vào thư viện chính là các hệ thống ArcadePhysics và ArcadeParticles. Đây là những thư viện trọng lượng nhẹ AABB đơn giản cho phép bạn áp dụng lực hấp dẫn và chuyển động cho bất kỳ Sprite nào, sau đó kiểm tra va chạm và tách. Sử dụng một quadtree trên thế giới để giúp giảm thiểu các thử nghiệm va chạm, bạn có thể đạt được kết quả khá nhanh chóng với thời gian xử lý ít cần thiết. Tuy nhiên, chúng tôi hiểu rằng điều này sẽ không phù hợp với tất cả các loại trò chơi, vì vậy hệ thống vật lý dễ thay thế và không có thuộc tính vật lý nào bị ràng buộc với các vân thực tế (nhưng thay vì thành phần cơ thể), vì vậy có thể được đổi chỗ cho thích của Box2D hoặc p2.js. Một hệ thống tweening cũng được xây dựng trong, cho phép bạn tween đối tượng hoặc tài sản dễ dàng. Và nên tạm dừng trò chơi, sau đó tất cả các tweens của bạn sẽ tạm dừng tự động và tiếp tục khi cần thiết. bổ sungMục đích của chúng tôi là cốt lõi của Phaser cuối cùng sẽ ổn định và đạt được trạng thái cân bằng ổn định tốt đẹp, nơi chúng tôi không thể chạm vào nó nhiều hơn các bản sửa lỗi và cập nhật trình duyệt. Tuy nhiên, chúng tôi muốn Phaser tiếp tục phát triển, cung cấp các tính năng cho tất cả các loại trò chơi nhưng không gây ra thư viện lõi phát nổ. Để kết thúc này, chúng tôi đã xây dựng trong một hệ thống plugin. Plugin Phaser có thể tự đăng ký với khung cốt lõi, được cập nhật phù hợp với vòng lặp trò chơi cốt lõi và thực hiện tất cả các nhiệm vụ bổ sung hữu ích. Một ví dụ tuyệt vời về điều này là plugin tìm đường dẫn EasyStar được phát hành gần đây. Chúng tôi sẽ tự phát hành các plugin và hy vọng sẽ thấy được nhiều hơn từ cộng đồng trong tương lai. Bắt đầuỞ đây chúng tôi sẽ bao gồm nơi để tải Phaser, làm thế nào để có được thiết lập cho phát triển, và bắt đầu từ đâu. Tải xuống PhaserDự án Phaser được lưu trữ trên GitHub tại https://github.com/photonstorm/phaser. Có hai nhánh chính: master là nơi phát hành ổn định mới nhất, và dev là nơi phiên bản work-in-progress được xây dựng. Ngay sau khi phiên bản mới được hoàn thành, chúng tôi đẩy từ dev sang master và sau đó dev được cập nhật để chuẩn bị cho bản phát hành tiếp theo. Trừ khi bạn biết bạn yêu cầu nhánh dev, bạn nên luôn luôn bắt đầu với master. Lý tưởng nhất, bạn nên sử dụng git và checkout hoặc Fork kho, vì vậy bạn có thể dễ dàng cập nhật nó. Nhưng nếu bạn mới sử dụng git hoặc không thoải mái sử dụng nó, có tùy chọn để tải xuống một tệp zip của toàn bộ kho lưu trữ. Hướng dẫn bắt đầuSau khi tải xuống, chúng tôi thực sự khuyên bạn nên làm theo Hướng dẫn bắt đầu chính thức. Điều này sẽ hướng dẫn bạn thiết lập một máy chủ web cục bộ, chọn môi trường phát triển và thậm chí xây dựng trên đám mây nếu bạn muốn. Hướng dẫn chia nhỏ thành các phần sau:
Sau khi tải xuống, chúng tôi thực sự khuyên bạn nên làm theo Hướng dẫn bắt đầu chính thức. Điều này sẽ hướng dẫn bạn thiết lập một máy chủ web cục bộ, chọn môi trường phát triển và thậm chí xây dựng trên đám mây nếu bạn muốn. Hướng dẫn chia nhỏ thành các phần sau:Với môi trường phát triển của bạn được thiết lập, đã đến lúc xây dựng một trò chơi. Chúng tôi khuyên bạn nên bắt đầu với hướng dẫn Tạo trò chơi Phaser đầu tiên. Nó sẽ hướng dẫn bạn qua quá trình tạo một trò chơi nền tảng đơn giản, giới thiệu cho bạn các khái niệm cốt lõi về cách Phaser hoạt động và thiết lập bạn sẵn sàng mở rộng trên đó và tìm hiểu thêm. Ví dụ về PhaserKhi bạn kiểm tra hoặc tải Phaser, nó sẽ đi kèm với bộ ví dụ của chúng tôi. Đây là một trang web khép kín bao gồm hơn 170 ví dụ mã khác nhau, được chia ra thành các lĩnh vực chính: Vật lý, Va chạm, Sprites, Văn bản và hơn thế nữa. Mỗi ví dụ là một đoạn mã khép kín hoàn toàn làm việc mà bạn có thể mở, dễ dàng chỉnh sửa và học hỏi. Được sử dụng cùng với các tài liệu API, đây là một cách nhanh chóng để nhanh chóng tìm hiểu về các phần cụ thể của Phaser. Tài liệu APITài liệu API có sẵn trong kho lưu trữ Phaser trong thư mục tài liệu. Chúng tôi đã làm việc chăm chỉ trên các tài liệu cho một vài tháng nay và, trong khi vẫn còn một chút thô xung quanh các cạnh, chúng bây giờ toàn diện, bao gồm toàn bộ khuôn khổ. Bản phát hành gần đây nhất (1.1.3) đã thấy một bản cập nhật lớn khác cho họ, với rất nhiều lĩnh vực được điền đầy đủ thông tin chi tiết và đó là nhiệm vụ liên tục của chúng tôi để cải thiện tài liệu với mọi bản phát hành Phaser mới. JSHintKể từ phiên bản 1.1.3 của Phaser, khung công tác đầy đủ hiện được chạy qua JSHint trước khi phát hành. Chúng tôi cũng cung cấp tệp cấu hình trong kho lưu trữ. JSHint là một cách để chúng tôi đảm bảo rằng mã khung công tác tuân theo một bộ nguyên tắc cố định cấu trúc mã, từ cách chúng tôi xử lý các tab và thụt đầu dòng đến các tên biến và kiểu báo giá. Những người muốn đóng góp cho Phaser nên kiểm tra cập nhật của họ dựa trên cấu hình JSHint của chúng tôi. Bước tiếp theoNếu bạn đã theo dõi bài viết này, bạn sẽ hiểu lý do tại sao Phaser là tuyệt vời, những gì chúng tôi đã hướng tới để đạt được từ việc tạo ra nó và cách bạn có thể học cách tạo ra các trò chơi với nó. Nhưng khía cạnh quan trọng nhất của bất kỳ khung trò chơi nào không phải là quá nhiều tính năng thể thao hoặc trình diễn công nghệ, đó là cộng đồng đằng sau nó. Làm một trò chơi là công việc khó khăn, thời gian. Và nó thậm chí còn khó khăn hơn để làm trong sự cô lập, với một khuôn khổ hoàn toàn mới mà gần như chắc chắn hoạt động khác với bất cứ thứ gì bạn đã sử dụng trong quá khứ. Rất may, Phaser có một cộng đồng thịnh vượng dựa trên nó. HTML5 Game Devs Diễn đànChúng tôi thiết lập diễn đàn Nhà phát triển trò chơi HTML5 một thời gian ngắn trước đây, không dành riêng cho Phaser, nhưng đơn giản chỉ vì tạo trò chơi HTML5 là một lĩnh vực mới mà chúng tôi muốn có thể nói chuyện với những người khác về nó. Kể từ đó, nó đã đi từ sức mạnh đến sức mạnh, với các ban hoạt động, 250.000 lượt xem một tháng và một cơ sở người dùng thân thiện và chuyên nghiệp. Nó có ý nghĩa rằng chúng tôi sẽ sử dụng điều này như là nhà chính thức cho Phaser, và bạn sẽ tìm thấy rất nhiều nhà phát triển đồng nghiệp thân thiện ở đó để trả lại ý tưởng và câu hỏi. Diễn đàn cũng là nơi có các thư viện tuyệt vời khác bao gồm Pixi.js và khung công tác 3D Babylon.js, và có khu vực trò chơi Showcase tuyệt vời thể hiện bất cứ điều gì bạn thực hiện — ghé qua đó mỗi ngày là nguồn cảm hứng liên tục cho tôi và thật tuyệt vời khi xem những nhà phát triển nào đang quản lý để có HTML5 để làm những ngày này. Bản tinBản tin Phaser được phát hành mỗi tháng một lần và chứa các chi tiết về các bản phát hành mới, các bài viết ngắn về các chủ đề và bổ sung và hướng dẫn mới của Phaser. Đăng ký là, tất nhiên, miễn phí và được quản lý thông qua Campaign Monitor, vì vậy bạn có thể yên tâm về không có spam và một cách dễ dàng để hủy đăng ký nếu bạn muốn. Đóng gópBạn có thể giúp định hình cách Phaser phát triển. Nếu bạn tìm thấy một lỗi, xin vui lòng báo cáo nó. Nó sẽ không mất nhiều thời gian, và cho đến nay chúng tôi đã cố định trên 91% tất cả các vấn đề được báo cáo (và chúng tôi vẫn đang làm việc với 9% còn lại). Bạn cũng có thể đưa ra các yêu cầu kéo đối với nhánh phát triển hoặc phát hành các plugin hoặc bộ lọc của riêng bạn. Hiển thị trò chơi của bạn!Chúng tôi dành nhiều giờ không mệt mỏi làm việc trên Phaser vì chúng tôi muốn nó trở thành khung phát triển trò chơi HTML5 tốt nhất có thể. Chúng tôi hiểu nó sẽ không hoàn hảo cho tất cả mọi người, và chúng tôi rất tuyệt với điều đó. Nhưng nếu bạn sử dụng nó và làm một cái gì đó, không có vấn đề nhỏ như thế nào bạn nghĩ rằng đó là, xin vui lòng cho chúng tôi biết. Bạn sẽ không tin với một động lực thúc đẩy thực sự đó là khi người dev cho chúng ta thấy những trò chơi mà họ đang làm việc! Hãy liên hệ với chúng tôi trên diễn đàn, qua Twitter (@photonstorm) hoặc qua email. Hầu hết tất cả, mặc dù, chúng tôi thực sự hy vọng bạn có niềm vui làm cho trò chơi của bạn. |
