Làm quen với Crafty: Control, Event, và Text

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

Trong bài hướng dẫn trước, bạn đã được học về các thực thể trong Crafty và cách làm thế nào để bạn có thể thao tác chúng bằng cách sử dụng các phương thức khác nhau. Trong hướng dẫn này, bạn sẽ tìm hiểu về các thành phần khác nhau mà sẽ cho phép bạn di chuyển các thực thể khác nhau xung quanh bằng cách sử dụng bàn phím.

Crafty có ba thành phần khác nhau để di chuyển các phần tử xung quanh. Chúng là Twoway, Fourway và Multiway. Hướng dẫn này sẽ giới thiệu bạn tất cả các thành phần này. Cuối cùng, bạn sẽ tìm hiểu về thành phần Keyboard và các phương thức khác nhau được liên kết với nó.

Twoway và Fourway

Thành phần Twoway cho phép một thực thể di chuyển sang trái hoặc sang phải sử dụng phím mũi tên hoặc A và D. Nó cũng cho phép các thực thể nhảy bằng cách sử dụng phím mũi tên lên hoặc phím W. Bạn sẽ có thêm một thành phần Gravity cho các thực thể của bạn để làm cho chúng nhảy.

Phương thức .twoway() chấp nhận hai đối số. Đối số đầu tiên xác định tốc độ của thực thể theo hướng ngang, trong khi đối số thứ hai xác định tốc độ nhảy của thực thể. Để nguyên đối số thứ hai sẽ đặt giá trị tốc độ nhảy bằng hai lần tốc độ theo hướng nằm ngang.

Thành phần Fourway sẽ cho phép một thực thể di chuyển theo 4 hướng khác nhau bằng một trong hai cách là sử dụng các phím mũi tên hoặc W, A, S, D. Phương thức .fourway() chỉ chấp nhận một đối số, nó sẽ xác định tốc độ của thực thể cho trước theo mọi hướng.

Multiway

Một trong những nhược điểm chính của thành phần Fourway là nó không cho phép bạn thiết lập các tốc độ khác nhau cho các hướng ngang và dọc.

Mặt khác, thành phần Multiway cho phép bạn thiết lập tốc độ theo mỗi hướng riêng lẻ. Nó cũng cho phép bạn gán các phím khác nhau để di chuyển thực thể theo các hướng khác nhau. Đối số đầu tiên trong phương thức .multiway() là tốc độ của thực thể. Đối số thứ hai là một đối tượng xác định phím nào sẽ di chuyển thực thể theo hướng nào.

Các hướng được xác định bằng đơn vị độ. 180 là bên trái, 0 là bên phải, -90 là lên và 90 là xuống. Dưới đây là một vài ví dụ:

1	blackBox.multiway({x:150,y:75}, {W: -90, S: 90, D: 0, A: 180});
2
3	orangeBox.multiway(150, {I: -90, K: 90, L: 0, J: 180});
4
5	purpleBox.multiway(150, {Y: -45, G: -135, B: 135, H: 45});

Code ở trên đặt tốc độ của hộp đen bằng 150 theo hướng ngang và 75 theo hướng thẳng đứng. Hộp màu cam di chuyển với tốc độ 150 ở tất cả các hướng, nhưng đã được chỉ định các phím khác nhau để di chuyển. Cái hộp màu tím không di chuyển thẳng theo chiều ngang hoặc theo chiều dọc, mà ở một góc 45 độ. Tốc độ ở đây là tính theo điểm ảnh trên giây.

Về cơ bản, bạn có thể gán phím bất kỳ vào bất kỳ hướng nào bằng cách sử dụng thành phần Multiway. Điều này có thể rất hữu ích khi bạn muốn di chuyển nhiều thực thể một cách độc lập.

Thành phần này cũng có một phương thức .speed(), có thể được sử dụng để thay đổi tốc độ của một thực thể tại một thời điểm sau đó. Bạn cũng có thể vô hiệu hóa các phím điều khiển tại bất kỳ thời điểm nào bằng cách sử dụng phương thức .disableControl().

Thành phần Keyboard

Ba thành phần ở phần trước cho phép bạn di chuyển một thực thể xung quanh bằng cách sử dụng các phím khác nhau. Tuy nhiên, bạn có thể kiểm soát nhiều hơn những gì sẽ xảy ra khi nhấn một phím. Ví dụ, bạn có thể muốn làm cho nhân vật lớn hơn khi nhấn một phím cụ thể hoặc làm cho nhân vật mạnh hơn sau khi một phím được nhấn. Điều này có thể đạt được bằng cách sử dụng thành phần Keyboard.

Thành phần này cũng cung cấp cho bạn khả năng truy cập đến phương thức .isDown(String keyName/KeyCode) sẽ trả về true hoặc false dựa trên phím được nhấn đã có KeyName hoặc KeyCode hay không.

Crafty cũng có hai sự kiện keyboard khác nhau, KeyDown và KeyUp. Bạn có thể ràng buộc những sự kiện này cho bất kỳ thực thể nào trong game của bạn mà không cần sử dụng phần Keyboard. Sự kiện KeyDown được kích hoạt bất cứ khi nào sự kiện keydown của DOM xảy ra. Tương tự, sự kiện KeyUp được kích hoạt bất cứ khi nào sự kiện keyup của DOM xảy ra.

blackBox.bind('KeyDown', function() {
  if (this.isDown('L')) {
    this.w += 5;
  }
});

orangeBox.bind('KeyDown', function(e) {
  if (e.key == Crafty.keys.K) {
    this.h += 5;
  }
});

Trong đoạn code ở trên, blackBox đã có thành phần Keyboard. Điều này cho phép chúng ta sử dụng phương thức .isDown() để xác định phím được nhấn.

Hãy thử nhấn L và K trong demo sau đây để tăng chiều rộng và chiều cao của hai ô tương ứng.

Thành phần Text

Rất dễ dàng để thêm văn bản vào game của bạn sử dụng Crafty. Trước tiên, bạn cần phải tạo ra một thực thể với thành phần Text. Sau đó, bạn có thể thêm văn bản cho thực thể của bạn bằng cách sử dụng phương thức .text(), nó chấp nhận một chuỗi như là tham số của nó.

Vị trí của văn bản có thể được kiểm soát bằng cách sử dụng phương thức .attr() để thiết lập giá trị toạ độ x và y. Tương tự, màu sắc của văn bản có thể được xác định bằng phương thức .textColor(). Một số thuộc tính khác như size, weight và family của phông chữ có thể được thiết lập bằng cách sử dụng phương thức .textFont(). Dưới đây là một ví dụ:

var playerName = Crafty.e('2D, DOM, Text')
  .attr({
    x: 10,
    y: 10
  });
  
playerName.text('ZombieHunter');
playerName.textColor('red');

Như tôi đã đề cập trước đó, phương thức .text() yêu cầu bạn cung cấp một chuỗi như là tham số. Điều này có nghĩa là nếu game score là một con số, thì bạn sẽ phải chuyển nó thành một chuỗi để phương thức .text() hiển thị nó.

Hầu hết các thuộc tính và phương thức 2D sẽ làm việc mà không có bất kỳ vấn đề gì với thành phần Text. Ví dụ, bạn có thể xoay và di chuyển nó xung quanh một cách dễ dàng. Tuy nhiên, có hai điều mà bạn cần phải lưu ý. Định dạng văn bản hoạt động tốt nhất khi kết xuất bằng cách sử dụng DOM. Khi kết xuất trên Canvas, chiều rộng và chiều cao của thực thể văn bản sẽ được thiết lập một cách tự động.

Tóm tắt

Sử dụng các kiến thức từ bài này và bài trước, bây giờ bạn có thể di chuyển các thực thể khác nhau xung quanh bằng cách sử dụng bàn phím. Bạn cũng có thể thay đổi sự xuất hiện của nhân vật chính và các thực thể khác dựa trên các phím khác nhau.

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