Làm quen với Crafty: Giới thiệu

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

Nếu bạn đã từng phát triển các game HTML5 trước đây, thì bạn có thể đã quen với một vài game engine mà có thể làm cho việc phát triển game trở nên dễ dàng hơn rất nhiều. Chúng có tất cả các code mà bạn cần để phát hiện va chạm, sinh ra các thực thể khác nhau, hoặc thêm các hiệu ứng âm thanh vào game của bạn. Trong hướng dẫn này, bạn sẽ tìm hiểu về một game engine như vậy được gọi là Crafty. Nó rất dễ sử dụng và hỗ trợ tất cả các trình duyệt chính, bao gồm cả IE9.

Một khi nén lại, thư viện chỉ còn 127kb, do đó, nó sẽ không gây ra bất kỳ độ trễ lớn nào trong lúc tải game của bạn. Nó hỗ trợ sprite map, vì vậy bạn có thể dễ dàng vẽ các thực thể game trên màn hình. Bạn cũng có thể tạo các sự kiện tùy biến mà có thể được kích hoạt bất cứ khi nào và trên bất cứ đối tượng nào mà bạn muốn.

Ngoài ra còn có các thành phần cho âm thanh, hiệu ứng động và các hiệu ứng khác. Nhìn chung, game engine này là một sự lựa chọn tuyệt vời nếu bạn muốn phát triển một số game HTML5 cơ bản.

Thiết lập ban đầu

Điều đầu tiên bạn cần làm là bao gồm Crafty trong dự án của bạn. Bạn có thể tải về tập tin và nạp nó trong dự án của bạn hoặc bạn có thể trực tiếp liên kết đến phiên bản nén được lưu trữ trên một CDN. Khi thư viện đã được nạp, bạn có thể sử dụng dòng code sau đây để khởi tạo Crafty:

1	Crafty.init([Number width, Number height, stage_elem]);

Hai đối số đầu tiên xác định chiều rộng và chiều cao của khung hình. Đối số thứ ba được sử dụng để xác định phần tử mà chúng ta sẽ sử dụng như là khung hình của chúng ta. Nếu đối số thứ ba không được cung cấp, Crafty sẽ sử dụng một div với id cr-stage như là khung hình của nó. Tương tự như vậy, nếu bỏ qua các đối số chiều rộng và chiều cao, Crafty sẽ thiết lập chiều rộng và chiều cao của khung hình của chúng ta tương đương với chiều rộng và chiều cao của cửa sổ window.

Tại thời điểm này, bạn sẽ có các code sau đây:

<html>
  <head></head>
  <body>
    <div id="crafty-game"></div>
    <script type="text/javascript" src="path/to/crafty.min.js"></script>
    <script>
      Crafty.init(600,400, document.getElementById('crafty-game'));
    </script>
  </body>
</html>

Tạo các thực thể

Các thực thể là các khối xây dựng của một game Crafty. Tất cả mọi thứ từ người chơi đến đối thủ và những chướng ngại vậy được đại diện bởi các thực thể. Bạn có thể truyền một danh sách các thành phần vào một thực thể. Mỗi thành phần này sẽ thêm chức năng phụ vào thực thể của chúng ta bằng cách gán các thuộc tính và phương thức từ thành phần đó vào thực thể. Bạn cũng có thể nối các phương thức khác vào một thực thể để thiết lập các thuộc tính khác nhau như chiều rộng, chiều cao, vị trí và màu sắc của nó. Dưới đây là một ví dụ rất cơ bản trong việc thêm các thành phần vào một thực thể:

1	Crafty.e('2D, Canvas, Color');

Mỗi thực thể mà bạn muốn hiển thị cho người dùng sẽ cần thành phần 2D và lớp kết xuất. Lớp kết xuất có thể là DOM, Canvas hoặc WebGL. Xin lưu ý rằng hỗ trợ WebGL đã được thêm vào phiên bản 0.7.1. Hiện tại, chỉ có những thành phần Sprite, Image, SpriteAnimation và Color hỗ trợ kết xuất WebGL. Lúc này, thực thể Text vẫn cần phải sử dụng DOM hoặc Canvas.

Bây giờ, bạn có thể sử dụng phương thức attr() để thiết lập giá trị của các thuộc tính khác nhau, bao gồm chiều rộng, chiều cao và vị trí của thực thể. Hầu hết các phương thức trong Crafty sẽ trả về thực thể mà chúng được gọi trên đó và attr() cũng không ngoại lệ. Điều này có nghĩa rằng bạn sẽ có thể nối nhiều phương thức để thiết lập các thuộc tính khác của các phần tử. Dưới đây là một ví dụ:

1	Crafty.e("2D, Canvas, Color")
2	.attr({x:200, y:100, w:200, h:50})
3	.color("orange");

Điều này sẽ tạo ra một thực thể hình chữ nhật màu da cam trên khung hình.

Di chuyển các thực thể

Bây giờ thì bạn đã tạo ra thực thể, hãy viết một số code để di chuyển nó xung quanh sử dụng bàn phím. Bạn có thể di chuyển một thực thể theo bốn hướng khác nhau, tức là lên, xuống, trái và phải, bằng cách thêm thành phần Fourway vào nó.

Thực thể sau đó có thể được di chuyển bằng cách sử dụng các phím mũi tên hoặc W, A, S, và D. Bạn có thể truyền một số như là đối số cho hàm xây dựng fourway để thiết lập tốc độ của thực thể. Code của thực thể sẽ trông giống như thế này:

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

Bạn có thể hạn chế sự di chuyển của một thực thể để chỉ hai hướng bằng cách sử dụng thành phần Twoway. Thay thế thành phần Fourway trong code ở trên bằng Twoway sẽ hạn chế việc di chuyển của cái hộp chỉ hướng nằm ngang. Bạn có thể thấy rõ từ bản demo sau đây:

Bạn cũng có thể thêm các thành phần của riêng bạn vào các thực thể khác nhau để xác định hoặc nhóm các thực thể tương tự lại với nhau. Trong trường hợp này, tôi thêm thành phần Floor vào hộp màu da cam của chúng ta. Bạn có thể sử dụng một số tên mô tả khác để giúp bạn xác định các thực thể khác nhau.

1	Crafty.e("2D, Canvas, Color, Twoway, Floor")
2	.attr({ x: 200, y: 340, w: 200, h: 50 })
3	.color("orange")
4	.twoway(300);

Có một thành phần rất hữu ích mà bạn có thể sử dụng để di chuyển các phần tử xung quanh, và nó được gọi là thành phần Gravity. Khi thêm vào một thực thể, nó sẽ làm cho thực thể đó rơi xuống. Bạn có thể ngăn chặn thực thể khỏi bị rơi xuống nữa, khi nó đụng phải một số thực thể khác. Điều này có thể đạt được bằng cách truyền một thành phần định danh như là một đối số vào hàm của Gravity. Đây là đoạn code làm cho hình vuông nhỏ màu đen rơi xuống trên sàn hoặc nền:

1	Crafty.e("2D, Canvas, Color, Gravity")
2	.attr({ x: 200, y: 50, w: 50, h: 50 })
3	.color("black")
4	.gravity("Floor");

Kết luận

Như bạn thấy trong hướng dẫn, chúng ta đã có thể tạo ra cấu trúc cơ bản của một game đơn giản bằng cách sử dụng rất ít code. Tất cả những gì chúng ta phải làm là thêm các thành phần vào các thực thể của chúng ta và chỉ định các giá trị của các thuộc tính khác nhau như chiều rộng, chiều cao hoặc tốc độ chuyển động.

Hướng dẫn này nhằm cung cấp cho bạn một ý tưởng cơ bản về các thực thể và các khái niệm liên quan đến Crafty. Trong phần tiếp theo, bạn sẽ được tìm hiểu chi tiết hơn về các thực thể. 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.