Lập trình game với Pixi.js

3837

Trong bài viết này, tôi sẽ giới thiệu cho bạn pixi.js, một công cụ rending siêu nhanh, cũng là một công cụ swiss-army-knifevới một API thân thiện.

Nó là gì?

Pixi.js là một công cụ hiển thị cho phép bạn sử dụng sức mạnh của WebGL và canvas để render nội dung bạn muốn trên màn hình một cách liên tục.

Trong thực tế, pixi.js bao gồm cả WebGL và một canvas renderer, có thể quay trở lại chế độ dành cho thiết bị cấp thấp hơn. Bạn có thể khai thác sức mạnh của WebGL và đồ họa hardware-accelerated trên các thiết bị đủ mạnh để sử dụng nó.

Nếu một trong những người dùng đang sử dụng thiết bị cũ hơn, engine sẽ tự động quay lại canvas renderer và không có sự khác biệt nào xảy ra, do đó bạn không phải lo lắng về vấn đề này.

WebGL cho 2D ?

Nếu bạn đã từng nghe hoặc trải nghiệm một sản phẩm web được giới thiệu sử dụng WebGL, bạn có thể có những ấn tượng về trò chơi 3D, hình ảnh 3D của trái đất, hoặc một thứ tương tự.

WebGL ban đầu được đánh dấu và đưa ra cộng đồng về khả năng render đồ họa 3D trên trình duyệt, bởi vì nó là cách duy nhất đủ nhanh để cho phép họ làm điều đó. Nhưng công nghệ chủ yếu không phải là 3D, cũng không phải là 2D, mà là bạn làm cho nó hoạt đông theo cách bạn muốn. Vì vậy ý ​​tưởng chính ẩn sau trong pixi.js là mang lại tốc độ và chất lượng cho rendering đồ họa 2D và các trò chơi, và dĩ nhiên cho cộng đồng chung.

Bạn có thể cho rằng mình không cần độ chính xác và kiểm soát fine-grain này cho 2D, và API WebGL có thể là một phần của ứng dụng 2D, nhưng với các trình duyệt đang trở nên mạnh mẽ hơn, sự mong đợi của người dùng đang ngày càng cao và công nghệ này với tốc độ của nó cho phép bạn cạnh tranh với các ứng dụng chỉ sử dụng flash.

Tổng quan

Pixi.js được tạo bởi một nhà phát triển flash cũ, do đó cú pháp của nó rất giống với ActionScript3.

Đây là một hướng dẫn nhỏ cho các thành phần quan trọng mà bạn cần phải tạo ra khi sử dụng pixi.

The renderer

Tôi đã cung cấp cho bạn những mô tả về tính năng và khả năng của nó. Vậy nên điều duy nhất cần ghi nhớ là có hai cách tạo renderer. Bạn có thể chỉ định renderer mà bạn muốn hoặc để cho engine quyết định theo thiết bị hiện tại.

The stage

Pixi học theo Flash API trong cách đối phó với vị trí của đối tượng. Về cơ bản, tọa độ của đối tượng luôn luôn tương đối so với vùng chứa của parent.

Flash và pixi cho phép bạn tạo các đối tượng đặc biệt được gọi là các vùng chứa. Nó không phải là hình ảnh hay đồ hoạ, chúng là những cách trừu tượng để nhóm các đối tượng lại với nhau.

Giả sử bạn có phong cảnh được làm từ nhiều thứ khác nhau như cây cối, đá, vân vân. Nếu bạn thêm chúng vào một thùng chứa và di chuyển thùng chứa này, bạn có thể di chuyển tất cả các vật này bằng cách di chuyển thùng chứa.

Đây là cách nó làm việc:

Đừng lo lắng nếu khó hiểu, đây cách the stage được nhắc đến. Stage là kho chứa gốc mà mọi thứ được thêm vào.

Stage không phải là để di chuyển, do đó, khi một sprite được thêm trực tiếp vào stage, có thể chắc chắn vị trí của nó sẽ giống như vị trí của nó trên màn hình (trong canvas bạn dùng).

Hãy thử làm một gì đó

Ok, đủ lý thuyết cho scene-graph, đây là lúc chúng ta sẽ thực hành làm một cái gì đó.

Như tôi đã viết trước đó, pixi là một công cụ dựng hình, vì vậy bạn sẽ cần phải cho the renderer render stage của nó, nếu không sẽ không có gì xảy ra. Vì vậy, đây là “khung xương chính” bạn dùng cho bất cứ thứ gì liên quan đến pixi:

Trước tiên, bạn tạo một renderer và một stage, giống như tôi đã đề cập ở trên.Sau đó bạn tạo đối tượng pixi chính, một Sprite chẳng hạn, về cơ bản là một hình ảnh được hiển thị trên màn hình.

Sprites, là cốt lõi của trò chơi, và là thứ bạn sử dụng nhiều nhất trong pixi và bất kỳ game framework nào.

Tuy nhiên, pixi không thực sự là game framework, nhưng ở cấp thấp hơn, bạn cần phải tự thêm sprite vào stage. Vì vậy, bất cứ khi nào một cái gì đó không nhìn thấy được, hãy chắc chắn kiểm tra lại rằng bạn đã thêm nó vào stage như sau:

Sau đó, bạn có thể viết một hàm có chức năng khởi tạo một số sprites.

Sau đó, tận dụng các vòng lặp để cập nhật di chuyển các sprites xung quanh ngẫu nhiên:

Vậy thôi rất đơn giản. Bạn có thể tự tạo riêng cho mình một game đơn giản theo ý thích

Techtalk via packtpub.com