Hiển thị một sprite cụ thể từ spritesheet bằng Phaser

Tôi đang cố gắng tạo một trò chơi bài bằng Phaser, khung công tác HTML5. Bởi vì tôi là một nghệ sĩ tồi tệ và không thể tự thiết kế, tôi đang sử dụng một hình ảnh chơi bài miễn phí mà tôi tìm thấy trên mạng. Vấn đề là, dường như tôi không thể tìm ra cách hiển thị các thẻ riêng lẻ bằng Phaser.

Trong khung trước đây tôi đã sử dụng, tôi có thể tạo các sprite nhỏ hơn từ bảng sprite lớn hơn mà tôi đã sử dụng. Nhưng tôi không thể tìm ra cách để làm điều đó trong Phaser, nếu có thể.

Vì vậy, tôi đã xem xét việc tải hình ảnh dưới dạng một spritesheet, nhưng có vẻ như các spritesheets chỉ được sử dụng cho hoạt hình và bạn thực sự không thể hiển thị một 'khung' cụ thể của spritesheet (vui lòng sửa cho tôi nếu tôi sai).

Tôi nghĩ rằng những gì tôi cần làm là tải hình ảnh dưới dạng tilemap, tuy nhiên, hình ảnh cụ thể mà tôi đang sử dụng không đi kèm với tệp json chỉ định bố cục (tôi cũng không thể tìm thấy hình ảnh đã làm). Là người mới sử dụng javascript Tôi gặp khó khăn khi đọc mã nguồn Phaser để xem cách định dạng tệp json.

Vì vậy, tóm lại, cách tốt nhất để hiển thị một thẻ riêng lẻ của một thẻ bài chơi trong Phaser cho rằng tôi không có tệp json chỉ định dữ liệu bản đồ?

var sprite = game.add.sprite(x, y, 'spritesheet_name');
sprite.frame = 0;

Spritesheets không giới hạn trong hình ảnh động, đó chỉ là một cách để sử dụng chúng. Một hình ảnh động chỉ là một cách để hiển thị các khung hình khác nhau tại các thời điểm khác nhau. Bằng cách cài đặt thủ công khung hình của sprite, bạn có thể hiển thị một phần cụ thể của spritesheet.

Phaser đã hỗ trợ hai loại bảng sprite: loại "cổ điển", trong đó mọi khung hình đều có cùng kích thước và "họa tiết kết cấu" được tạo ra với sự trợ giúp của ứng dụng bên thứ ba như Texture Packer, Shoebox hoặc Flash CC và đến với một tập tin json liên quan.

Bạn tải những cái "cổ điển" với game.load.spritesheetnơi bạn phải chỉ định chiều rộng và chiều cao của khung và tùy ý số lượng, nghĩa là:

game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);

Để tải một tập bản đồ kết cấu, bạn có thể sử dụng game.load.atlas. Bạn sẽ tìm thấy rất nhiều ví dụ về điều này trong repo Phaser example.

Sau khi tải, tạo sprite của bạn:

var sprite = game.add.sprite(x, y, 'spriteSheetKey');

Điều này nói với Phaser sử dụng hình ảnh với phím spriteSheetKeylàm kết cấu của nó. Theo mặc định, nó sẽ nhảy đến khung 0 của bảng sprite, nhưng bạn có thể thay đổi nó sprite.framethành bất kỳ số hợp lệ nào khác.

Nếu sprite đang sử dụng tập bản đồ kết cấu, việc thay đổi khung dựa trên tên khung sẽ dễ dàng hơn: sprite.frameName = 'card4'trong đó tên khung chính xác như được chỉ định trong tệp tập tin kết cấu (mở nó lên và nhìn vào để xem!).