Làm thế nào để Xây dựng một hình ảnh động đa quốc gia trong trò chơi HTML5 của bạn

Với tất cả các chuyển động này đang diễn ra trong trò chơi HTML5 của bạn, bạn chắc chắn muốn có nhiều hình động tinh vi. Bạn có thể sử dụng hàm changeImage () hoặc setImage () là hai tên khác nhau cho cùng một vấn đề) để thay đổi hình ảnh liên quan đến một sprite bất kỳ lúc nào. Đôi khi, mặc dù, bạn muốn có nhiều hình ảnh động phức tạp hơn. Hãy xem walkAnim. html.

Có rất nhiều hình ảnh trao đổi đang xảy ra ở đây. Các hình ảnh động đi bộ thực sự là một loạt của tám hình ảnh khác nhau nhanh chóng trao đổi để cho những ảo giác về đi bộ. Có 4 hình ảnh động khác nhau (một cho mỗi hướng của hồng y), do đó tổng số là 32 hình ảnh khác nhau. Tuy nhiên, nếu bạn nhìn qua mã, bạn sẽ thấy rằng nhân vật ma chỉ có chứa một hình ảnh.

Hình ảnh này là một hình ảnh hỗn hợp. Mỗi hàng đại diện cho một hướng, và mỗi hàng chứa một chu kỳ, hoặc một loạt các hình ảnh, có nghĩa là để được lặp lại.

rpg_sprite_walk. png hình ảnh đã được tạo ra bởi Franck Dupont. Ông hào phóng đăng hình ảnh này trên OpenGameArt. org, nơi ông được biết đến như là "Arikel. "Ông phát hành tác phẩm của mình dưới một giấy phép đặc biệt gọi là" Thuộc tính - Chia sẻ tương tự. "Điều này có nghĩa là mọi người có thể sử dụng hoặc remix tác phẩm của mình miễn phí, miễn là họ thuộc tính tác giả gốc.

Hình nền là tác giả tên là Hyptosis, người đã phát hành hình ảnh dưới tên miền công cộng trên cùng một trang web. Những người đóng góp tài năng và chu đáo như Franck và Hyptosis là chìa khoá cho cộng đồng sáng tạo đang phát triển. Hãy xem qua trang web trò chơi nghệ thuật mở để có thêm tác phẩm nghệ thuật tuyệt vời để sử dụng trong trò chơi của bạn, nhưng hãy chắc chắn cảm ơn và đánh giá tác giả khi họ xứng đáng.

The simpleGame. Thư viện js chứa một tính năng tạo hình ảnh đa hình ảnh khá dễ dàng. Xem qua mã cho walkAnim. html để xem nó hoạt động như thế nào:

walkAnim. trò chơi html var; nền var; var nhân vật; chức năng init () {game = new Scene (); nền = mới Sprite (trò chơi, "rpgMap. png", 800, 600); lý lịch. setSpeed (0, 0); lý lịch. setPosition (400, 300); ký tự = new Sprite (trò chơi, "rpg_sprite_walk. Png", 192, 128); ký tự. loadAnimation (192, 128, 24, 32); ký tự. generateAnimationCycles (); ký tự. đổi tênCycles (new Array ("xuống", "lên", "trái", "phải")); ký tự. setAnimationSpeed (500); // bắt đầu bị tạm dừng ký tự. setPosition (440, 380); tính cách. setSpeed (0); ký tự. pauseAnimation (); ký tự. setCurrentCycle ("xuống"); trò chơi.bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); checkKeys (); lý lịch. cập nhật (); tính cách. update ();} / / end update function checkKeys () {if (keysDown [K_LEFT]) { ký tự. setSpeed (1); ký tự. playAnimation (). setMoveAngle (270); ký tự. setCurrentCycle ("trái"); } if (keysDown [K_RIGHT]) {character. setSpeed (1); tính cách. playAnimation (). setMoveAngle (90); tính cách. setCurrentCycle ("right");} if (keysDown [K_UP]) {ký tự. setSpeed (1); tính cách. playAnimation (). setMoveAngle (0); tính cách. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {ký tự. setSpeed (1); tính cách. playAnimation (). setMoveAngle (180); tính cách. setCurrentCycle ("down");} if (keysDown [K_SPACE]) { ký tự. setSpeed (0); ký tự. pauseAnimation (); ký tự. setCurrentCycle ("xuống"); }}

Bạn cần phải thực hiện một vài bước mới để xây dựng một hình ảnh động, nhưng kết quả hoàn toàn xứng đáng với nỗ lực.

Có được một hình ảnh động.

Bạn có thể tạo ra một hình ảnh cho mình, hoặc nhìn vào các nguồn lực tuyệt vời như OpenGameArt. org để tìm công việc mà những người khác đã làm. Tất nhiên, bạn có trách nhiệm tôn trọng công việc của người khác, nhưng có một số công việc tuyệt vời có sẵn trong các giấy phép rất permissive ngày hôm nay. Đảm bảo rằng hình ảnh được tổ chức theo hàng và cột và mỗi hình ảnh phụ có cùng kích thước chính xác.

Bạn có thể phải lộn xộn với trình chỉnh sửa hình ảnh để đảm bảo rằng hình ảnh có đúng định dạng và bạn biết kích thước của mỗi hình ảnh phụ.
Đính kèm hình ảnh hoạt hình vào sprite của bạn.

Bạn sẽ gắn toàn bộ hình ảnh vào hình ảnh của bạn, nhưng chỉ hiển thị một phần nhỏ của nó cùng một lúc. Điều này dễ hơn làm việc với một bó ảnh, và nó cũng hiệu quả hơn.
Tạo một đối tượng hoạt ảnh với phương thức loadAnimation ().

Khi bạn gọi phương thức loadAnimation () của một đối tượng, bạn đang tạo một công cụ hoạt hình giúp quản lý hoạt ảnh. Hai tham số đầu tiên là kích thước của toàn bộ hình ảnh (chiều rộng và chiều rộng), và hai tham số thứ hai là chiều rộng và chiều cao của mỗi ảnh phụ. Nếu bạn nhận được các giá trị này sai, hình ảnh động sẽ xuất hiện để di chuyển. Tiếp tục chơi cho đến khi bạn nhận được các giá trị này:
```
nhân vật. loadAnimation (192, 128, 24, 32);
```
Tạo chu kỳ hoạt ảnh.

Mỗi hàng sẽ được chuyển thành chu kỳ hoạt hình. Phiên bản mặc định (không có bất kỳ thông số) hoạt động tốt trong hầu hết các tình huống. Tìm tài liệu hướng dẫn sử dụng công cụ này:
```
ký tự. generateAnimationCycles ();
```
Đổi tên các chu kỳ.

Các hình động được tạo bằng lệnh buildAnimationCycles () có tên mặc định, nhưng hầu như luôn luôn tốt hơn để gắn tên của chính bạn, có ý nghĩa hơn. Thêm một mảng với một tên cho biết mỗi hàng đại diện cho:
```
ký tự. đổi tênCycles (new Array ("xuống", "lên", "trái", "phải"));
```
Đặt tốc độ hoạt ảnh.

Tốc độ hoạt ảnh chỉ ra tốc độ hoạt ảnh sẽ chạy như thế nào. Giá trị 500 có vẻ phù hợp với hầu hết các ứng dụng, nhưng bạn có thể điều chỉnh giá trị này để chu kỳ đi bộ của nhân vật trông giống như nó thực sự đẩy nhân vật:
```
nhân vật.setAnimationSpeed (500);
```
Đặt chu kì mà bạn định hiển thị.

Phương thức setCurrentCycle () cho phép bạn chọn chu kỳ với một trong những tên mà bạn đã chỉ ra trong bước renameAnimationCycles ():
```
. setCurrentCycle ("xuống");
```
Sử dụng lệnh pauseAnimation () để tạm dừng hoạt ảnh.

Lệnh pauseAnimation () tạm dừng.
Sử dụng playAnimation () để bắt đầu hoạt hình.

Phương pháp này sẽ liên tục lặp lại chu kỳ hoạt hình hiện tại.