Các tính năng Camera mới trong Phaser

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

Được giới thiệu trong phiên bản 2.4.7 của Phaser, các tính năng Camera mới trông thực sự thú vị và chúng rất đáng để thử. Trong hướng dẫn này bạn sẽ thấy việc áp dụng các hiệu ứng Camera trong các game HTML5 của bạn được xây dựng với Phaser dễ dàng như thế nào.

Lưu ý: nếu bạn cần một giới thiệu về Phaser framework, bạn có thể kiểm tra Làm quen với Phaser: Xây dựng "Con quái vật muốn ăn kẹo", nơi tôi đã phân chia mã nguồn và giải thích chi tiết.

Có ba tính năng mới thú vị mà bạn có thể sử dụng: flash, fade và shake. Chúng hoạt động giống như những gì bạn hình dung về chúng. Hãy xem tại sao chúng rất hữu ích và nên được cân nhắc trong dự án phát triển game tiếp theo của bạn với Phaser.

Cho đến lúc này tôi đã sử dụng plugin Juicy để đạt được các chức năng như vậy, nhưng mã nguồn đã bị huỷ bỏ một thời gian dài trước đây và tôi đã phải tự mình xoay sở. Bây giờ với các tính năng được tích hợp và là một phần của mã nguồn của Phaser tôi không phải lo lắng về bất kỳ vấn đề tương thích hay cập nhật framework nào nữa. Chúng cũng rất nhiều dễ dàng để cài đặt.

Template Enclave Phaser

Tôi sẽ sử dụng Template Enclave Phaser như là một ví dụ điển hình—đó là một tập hợp các chức năng cơ bản, từ các khung hình, âm thanh và quản lý điểm số cho đến hiệu ứng tween và hiệu ứng động. Template là mã nguồn mở và có sẵn trên GitHub như là một phần của sáng kiến open.enclavegames.com, do đó, bạn có thể dễ dàng thấy tất cả đã được cài đặt như thế nào, bao gồm cả các hiệu ứng camera mới.

Được rồi, hãy chuyển đến phần cài đặt thực tế.

Camera Flash

Camera Flash có thể được sử dụng cho các hiệu ứng nổi bật hay bị tác động—ví dụ, khi nhân vật bị trúng đạn bởi viên đạn của kẻ thù, màn hình có thể chuyển sang màu đỏ một lúc. Dưới đây là các hiệu ứng camera flash với các tham số đã được giải thích:

1	flash(color, duration, force);

Nó phủ đầy màn hình với màu sắc và mờ dần đi cho đến alpha 0 trong khoảng thời gian nhất định. Bạn có thể sử dụng tham số force để thay thế bất kỳ hiệu ứng flash khác và xem như là cái duy nhất đang chạy tại thời điểm hiện tại. Màu mặc định là màu trắng, và flash kéo dài nửa giây (500 mili giây):

1	flash(0xffffff, 500, false);

Camera Flash có thể được sử dụng cho các hiệu ứng khác nhau. Trong Template Phaser Enclave, nó tạo ra một hiệu ứng chuyển tiếp liền mạch hấp dẫn khi đưa lên một khung hình mới, để hiển thị menu chính sau khi tất cả các nguồn đã tải xong. Thay vì hiển thị tất cả mọi thứ ngay lập tức, chúng ta có thể sử flash với màu đen như là một cái cơ bản:

1	this.camera.flash(0x000000, 500, false);

Nó được thực thi vào cuối của hàm tạo trong tập tin MainMenu.js đại diện cho khung hình menu. Bạn có thể thấy hiệu ứng thực tế trên một hình gif:

Như bạn thấy, điều này đạt được một hiệu ứng xuất hiện hấp dẫn, mượt mà. Bây giờ hãy chuyển sang camera fade.

Camera Fade

Để làm cho cảm giác di chuyển giữa các khung hình được trọn vẹn, chúng ta có thể sử dụng fade để đạt được một hiệu ứng flash đảo ngược và làm cho khung hình mờ dần một cách mượt mà. Nếu làm đúng, điều này có thể mang lại một hiệu ứng fade-out, fade-in, trông thật sự hấp dẫn. Dưới đây là minh hoạ:

1	fade(color, duration, force);

Các tham số đều tương tự như trong một flash của camera, ngoại trừ màu mặc định không phải là màu trắng, mà là màu đen:

1	fade(0x000000, 500, false);

Nó bắt đầu phủ màn hình từ alpha 0 với màu sắc nhất định và kết thúc với một màu đặc. Mã nguồn thực tế từ hành động clickStart trên button Start trong tập tin MainMenu.js trông như sau:

clickStart: function() {
    this.camera.fade(0x000000, 200, false);
    this.time.events.add(200, function() {
        this.game.state.start('Story');
    }, this);
}

Nó làm mờ màn hình trong một khoảng 200 mili-giây và sau đó đưa lên một khung hình mới sau khoảng thời gian tương tự để đồng bộ hóa cả hai hành động. Thực tế nó sẽ trông giống như thế này:

Kết hợp flash và fade tạo ra một hiệu ứng chuyển tiếp hấp dẫn giữa các khung hình. Bây giờ, hãy chuyển sang hiệu ứng shake.

Camera Shake

Một phương thức hữu ích của Phaser camera là shake—nó có thể được sử dụng cho các tình huống nơi một nhân vật va chạm các chướng ngại vật khi đang bay qua tiểu hành tinh, hoặc sử dụng một quả bom mạnh từ nhà kho. Nó có thể được thực thi khi va chạm với các đối tượng game trôi nổi trên màn hình.

1	shake(intensity, duration, force, direction, shakeBounds);

Tham số đầu tiên kiểm soát độ lắc của camera, và cái thứ hai là hiệu ứng diễn ra trong bao lâu. Thứ ba là để thay thế hiệu ứng đang chạy nếu tham số này được thiết lập True. Thứ tư kiểm soát hiệu ứng theo chiều ngang, chiều dọc hoặc cả hai, và tham số cuối cùng quyết định xem camera sẽ lắc bên ngoài phạm vi hiển thị hay không. Dưới đây là ví dụ với các giá trị mặc định:

1	shake(0.05, 500, true, Phaser.Camera.SHAKE_BOTH, true);

Nó sẽ lắc camera với cường độ 0,05, trong nửa giây (500 mili giây), tham số force được đặt thành true, camera sẽ lắc theo cả hai hướng, và đồng thời bên ngoài phạm vi hiển thị. Nếu bạn không cần tùy biến shake và để các thông số mặc định, thì bạn có thể chỉ cần bỏ qua chúng trong khi gọi hàm và nó sẽ hoạt động giống như ở trên:

shake();

Và đây là minh hoạ thực tế hiệu ứng shake trong mã nguồn của Template Enclave Phaser khi điểm được thêm vào trong tập tin Game.js:

1	this.camera.shake(0.01, 100, true, Phaser.Camera.SHAKE_BOTH, true);

Ba tham số cuối cùng là tương tự như những cái mặc định, vì vậy có thể được bỏ qua, tôi để lại đó để bạn tìm hiểu thêm. Hãy xem nó trong ví dụ sau:

Trong trường hợp này cường độ là thấp hơn giá trị mặc định, và khoảng thời gian ngắn hơn để tạo ra cảm giác yếu hơn một chút, để nó sẽ không làm phân tâm người chơi quá nhiều.

ResetFX

Ngoài ra còn có một phương thức khá tiện dụng cùng với ba phương thức đã giải thích ở trên. Bạn có thể thiết lập lại bất kỳ hiệu ứng nào đang hoạt động, và từ quan điểm lập trình, bạn thậm chí không cần phải biết có bất kỳ hiệu ứng nào đang hoạt động hay không tại thời điểm nhất định—đó là một phương thức đặc biệt resetFX mà bạn có thể sử dụng.

1	this.camera.resetFX();

Nó ngay lập tức xóa bất kỳ hiệu ứng camera nào đang diễn ra và loại bỏ chúng khỏi màn hình.

Các sự kiện

Nếu bạn muốn biết có hiệu ứng cụ thể nào đang hoạt động hay đã kết thúc hay không, bạn có thể sử dụng các sự kiện được cung cấp bởi framework: onFlashComplete, onFadeComplete, và onShakeComplete.

Bạn nhớ ví dụ về fade khi nhấp vào button trong menu chính chứ? Nó đã được thực hiện bằng cách chờ một khoảng thời gian cố định, và sau đó chuyển sang một khung hình mới. Chúng ta có thể làm cho nó tốt hơn bằng cách sử dụng sự kiện onFadeComplete:

clickContinue: function() {
    this.camera.fade(0x000000, 200, false);
    this.camera.onFadeComplete.add(function() {
        this.game.state.start('Game');
    }, this);
}

Cách này được cài đặt trong bước tiếp theo, trong tập tin Story.js khi chuyển từ khung hình Story đến khung hình Game. Bạn phải thừa nhận rằng nó có vẻ tốt hơn, và khung hình đưa ra một cách chính xác khi hiệu ứng đã hoàn tất, không vấn đề là nó kéo dài bao lâu.

Tóm tắt

Như bạn thấy, đó là các tính năng khá mạnh mẽ khi đề cập đến việc thêm các tính năng phụ hay đánh bóng game của bạn. Chúng đồng thời cũng rất dễ sử dụng—Thật tuyệt vời khi thấy chúng thật sự được cài đặt trong Phaser.

Đừng ngại lấy mã nguồn của Template Enclave Phaser, cài đặt các hiệu ứng và chia sẻ các liên kết đến các game mới được nâng cấp của bạn với chúng tôi trong phần bình luận nhé!