Làm quen với Crafty: Các thực thể

() translation by (you can also view the original English article)

Trong bài trước, bạn đã được học về các khái niệm cơ bản của các thực thể và chúng đóng vai trò là các khối xây dựng trong game của bạn như thế nào. Trong hướng dẫn này, bạn sẽ vượt ra khỏi những điều cơ bản và tìm hiểu chi tiết về các thực thể.

Các Thực thể và các Thành phần của chúng

Mỗi thực thể bao gồm các thành phần khác nhau. Mỗi thành phần này thêm chức năng riêng của nó vào thực thể. Crafty cung cấp rất nhiều thành phần được xây dựng sẵn, nhưng bạn cũng có thể tạo các thành phần tùy biến của riêng bạn bằng cách sử dụng Crafty.c().

Bạn đã được học về một vài thành phần cơ bản như 2D, Canvas, Color và Fourway trong hướng dẫn đầu tiên. Hãy bắt đầu bằng cách tạo ra một thực thể khác bằng cách sử dụng các thành phần này:

1	var playerBox = Crafty.e("2D, Canvas, Color, Fourway")
2	.attr({ x: 50, y: 50, w: 50, h: 50 })
3	.color("black")
4	.fourway(200);

Khi bạn có rất nhiều thực thể với các thành phần khác nhau, có thể cần phải biết một thực thể nhất định có một thành phần cụ thể gắn liền với nó hay không. Điều này có thể được thực hiện bằng cách sử dụng phương thức .has().

Tương tự, bạn có thể thêm các thành phần vào một thực thể bằng cách sử dụng .addComponent(). Để thêm nhiều thành phần cùng một lúc, bạn có thể truyền chúng như là một chuỗi với các thành phần khác nhau cách nhau bởi dấu phẩy hay truyền mỗi thành phần như là đối số khác nhau. Không có gì xảy ra nếu thực thể đã có thành phần mà bạn đang cố gắng thêm.

1	playerBox.addComponent("Jumper, Gravity, Collision");
2	playerBox.addComponent("Jumper", "Gravity" , "Collision");

Bạn cũng có thể loại bỏ các thành phần khỏi một thực thể bằng cách sử dụng .removeComponent(String Thành phần [, soft]). Phương thức này có hai đối số. Đầu tiên là thành phần mà bạn muốn loại bỏ, và đối số thứ hai xác định phần tử sẽ loại bỏ mềm hoặc cứng. Xoá mềm sẽ làm cho .has() trả về false khi truy vấn thành phần cụ thể đó. Loại bỏ cứng sẽ loại bỏ tất cả các thuộc tính và phương thức liên quan của thành phần đó.

Theo mặc định, tất cả các thành phần là xoá mềm. Bạn có thể đặt đối số thứ hai thành false để xoá cứng một thành phần.

Thiết lập các giá trị cho các thuộc tính khác nhau

Bạn sẽ cần thiết lập các giá trị khác nhau cho các thuộc tính cụ thể của tất cả các thực thể trong game của bạn. Chẳng hạn như, một thực thể đại diện cho thức ăn của nhân vật chính trong game sẽ khác so với thực thể đại diện cho bản thân nhân vật này. Tương tự, một sức mạnh tăng lên sẽ trông khác hơn so với các thực thể thức ăn. Crafty cho phép bạn thiết lập các giá trị của các thực thể khác nhau trong một game một cách riêng biệt hoặc tất cả cùng một lúc bằng cách sử dụng .attr().

Thực thể chính hiện đang được lưu trữ trong biến playerBox. Vì vậy bạn có thể thiết lập giá trị của các thuộc tính khác nhau một cách trực tiếp bằng cách sử dụng code sau đây:

playerBox.x = 50;
playerBox.y = 50;
playerBox.z = 2;

playerBox.attr({ x:50, y:50, z:2 })

Thuộc tính z thiết lập z-index của các thực thể khác nhau. Một thực thể với giá trị z cao hơn sẽ được vẽ ra bên trên một thực thể khác có một giá trị z thấp hơn. Hãy nhớ rằng chỉ số nguyên được phép như là giá trị hợp lệ cho z-index.

Hãy tạo một thực thể thức ăn với kích thước nhỏ hơn, vị trí khác, và hiệu ứng xoay được áp dụng vào nó. Hiệu ứng xoay được xác định bằng đơn vị độ, và sử dụng một giá trị âm xoay thực thể theo hướng ngược chiều kim đồng.

var foodBox = Crafty.e("2D, Canvas, Color, Food")
    .attr({ x: 150, y: 250, w: 10, h: 10 })
    .color("red");
  
foodBox.attr({ z:1, rotation: 45 });

Như bạn có thể thấy trong demo dưới đây, cả thức ăn và nhân vật chính đang được phân biệt một cách dễ dàng. Nếu bạn cố gắng di chuyển nhân vật chính lên trên thức ăn, bạn sẽ thấy rằng thức bây giờ được vẽ ở bên dưới nhân vật chính vì một chỉ số z thấp hơn.

Kết nối các sự kiện với các thực thể

Có rất nhiều sự kiện mà bạn có thể cần phải đáp ứng khi phát triển một game. Ví dụ, bạn sẽ phải liên kết thực thể nhân vật với một sự kiện KeyDown nếu bạn muốn nó lớn lên khi nhấn một phím cụ thể. Crafty cho phép bạn liên kết các thực thể khác nhau với các sự kiện cụ thể bằng cách sử dụng phương thức .bind(). Dưới đây là một ví dụ:

playerBox.bind('KeyDown', function(e) {
  if (e.key == Crafty.keys.T) {
    this.alpha = 0.5;
  }
  if (e.key == Crafty.keys.O) {
    this.alpha = 1;
  }
});

Trong bản demo sau đây, hãy thử di chuyển nhân vật lên thức ăn và sau đó nhấn phím 'T' và 'O'. Nhấn 'T' sẽ đặt opacity của nhân vật thành 0.5 và nhấn 'O' sẽ khôi phục lại opacity trở lại 1.

Bây giờ, hãy liên kết một sự kiện va chạm với nhân vật của chúng ta để cho nó lớn lên khi nào nó chạm vào thức ăn. Chúng ta sẽ phải thêm một thành phần va chạm vào nhân vật và sử dụng phương thức .checkHits(). Phương thức này sẽ thực hiện kiểm tra va chạm đối với tất cả các thực thể có ít nhất một trong các thành phần đã được chỉ định khi .checkHits() được gọi.

Khi xảy ra một va chạm, một sự kiện HitOn sẽ được kích hoạt. Nó cũng sẽ có một số thông tin có liên quan về các sự kiện nhấn. Một sự kiện HitOff cũng sẽ được kích hoạt khi kết thúc va chạm.

playerBox.checkHits("Food")
  .bind("HitOn", function(hitData) {
    this.color("green");
    this.w = this.w + 3;
    this.h = this.h + 3;
  });

Chiều rộng và chiều cao của nhân vật tăng lên mỗi khi xảy ra một va chạm. Chúng ta có thể sử dụng sự kiện này cho rất nhiều thứ bao gồm thay đổi vị trí của thức ăn hoặc tăng điểm số trong game. Bạn cũng có thể huỷ bỏ thực thể thức ăn bằng cách sử dụng các phương thức destroy() khi bị va chạm.

Chọn các thực thể

Trong phần trước, chúng ta vừa mới thay đổi các thuộc tính của một thực thể. Điều này có thể được thực hiện dễ dàng bằng cách sử dụng các biến được gán cho mỗi thực thể. Điều này là không thực tế khi chúng ta đang xử lý khoảng 20 thực thể khác nhau.

Nếu bạn đã từng sử dụng jQuery trước đây, bạn có thể quen với cách nó chọn các phần tử. Ví dụ, bạn có thể sử dụng $("p") để chọn tất cả các đoạn văn. Tương tự, bạn có thể chọn tất cả các thực thể có cùng một thành phần thông thường bằng cách sử dụng Crafty("component").

Dưới đây là một vài ví dụ:

// Select all entities that have the Gravity component
Crafty("Gravity");

// Select all entities that have either DOM or Canvas component
Crafty("Gravity, Jumper");

// Select all entities that have both Gravity and Jumper component
Crafty("Gravity Jumper");

Một khi bạn đã lựa chọn, bạn có thể lấy số lượng các phần tử đã chọn bằng cách sử dụng thuộc tính length. Bạn cũng có thể lặp qua mỗi thực thể hoặc liên kết các sự kiện vào tất cả chúng cùng một lúc. Code sau đây sẽ thay đổi tất cả các thực thể thức ăn mà có giá trị x là lớn hơn 300 thành màu tím.

Crafty("Food").each(function() {
    if(this.x > 300) {
        this.color("purple");
    }
});

Một khi bạn có một sự lựa chọn, bạn có thể dùng get() để có được một mảng của tất cả các thực thể. Bạn cũng có thể truy cập vào thực thể tại một chỉ số cụ thể bằng cách sử dụng get(index).

Kết luận

Trong hướng dẫn này, bạn đã học được cách làm thế nào để thêm hoặc loại bỏ các thành phần khỏi một thực thể. Bạn cũng học được cách để chọn các thực thể với một thành phần hoặc các thành phần nhất định và thao tác trên từng thuộc tính. Tất cả những điều này sẽ rất hữu ích khi chúng ta muốn thao tác trên các thực thể khác nhau trên màn hình của chúng ta dựa trên một loạt các sự kiện.

Nếu bạn có bất kỳ câu hỏi nào về bài hướng dẫn, hãy cho tôi biết trong phần bình luận nhé.