Chuyển đổi trò chơi flash sang HTML5

Flash đang dần bị Adobe bị bỏ rơi có lợi cho HTML5 và JavaScript; Kết thúc chính thức của nó được thiết lập cho năm 2020. Và đó là nơi bài viết này sẽ có ích.

• Xây dựng lại một trang web Flash năm 2004 cho năm 2018

Các mẹo được mô tả dưới đây nhằm mục đích giúp các nhà phát triển trò chơi HTML5 tránh những sai lầm phổ biến khi chuyển đổi các trò chơi flash sang JavaScript, cũng như làm cho toàn bộ quá trình phát triển diễn ra suôn sẻ nhất có thể. Tất cả những gì bạn cần là kiến ​​thức cơ bản về JavaScript, WebGL và khung Phaser.

Thay đổi thiết kế trò chơi của bạn từ SWF sang JavaScript có thể mang lại tốt hơn Kinh nghiệm người dùng , lần lượt mang lại vẻ ngoài hiện đại. Nhưng làm thế nào để làm điều đó? Bạn có cần một trình chuyển đổi trò chơi JavaScript chuyên dụng để thoát khỏi công nghệ lỗi thời này không? Chà, Flash để chuyển đổi HTML5 có thể là một miếng bánh - đây là những gì một nhà phát triển trò chơi JavaScript có kinh nghiệm phải nói về vấn đề này.

Thích giữ quá trình thiết kế của bạn đơn giản? A. người tạo ra trang web và bên phải web hosting Nhà cung cấp có thể giữ nó theo cách đó.

01. Cải thiện trải nghiệm trò chơi HTML5

Chuyển đổi một trò chơi sang một nền tảng khác là một cơ hội tuyệt vời để cải thiện nó, khắc phục các vấn đề của nó và tăng khán giả. Dưới đây là một vài điều có thể dễ dàng thực hiện và đáng để xem xét:

• Hỗ trợ thiết bị di động
  Chuyển đổi từ Flash sang JavaScript cho phép đạt được đối tượng rộng hơn - người dùng hỗ trợ thiết bị di động cho các điều khiển màn hình cảm ứng thường cần được triển khai vào trò chơi. May mắn thay, cả thiết bị Android và iOS cũng hỗ trợ WebGL, vì vậy kết xuất 30 hoặc 60 khung hình / giây thường có thể dễ dàng đạt được. Trong nhiều trường hợp, 60 khung hình / giây sẽ không gây ra bất kỳ vấn đề nào, điều này sẽ chỉ cải thiện theo thời gian, vì các thiết bị di động ngày càng có nhiều hoạt động.
• Cải thiện hiệu suất
  Khi nói đến việc so sánh ActionScript và JavaScript, thứ hai nhanh hơn. Ngoài ra, việc chuyển đổi một trò chơi là một dịp tốt để xem lại các thuật toán được sử dụng trong mã trò chơi. Với sự phát triển trò chơi JavaScript, bạn có thể tối ưu hóa chúng hoặc hoàn toàn dải mã không sử dụng được để lại bởi các nhà phát triển ban đầu.
• Sửa lỗi và cải thiện lối chơi
  Có các nhà phát triển mới xem xét mã nguồn của trò chơi có thể giúp khắc phục các lỗi đã biết hoặc khám phá những lỗi mới và rất hiếm. Điều này sẽ khiến việc chơi trò chơi ít gây khó chịu cho người chơi, điều này sẽ khiến họ dành nhiều thời gian hơn trên trang web của bạn và khuyến khích họ thử các trò chơi khác của bạn.
• Thêm phân tích trang web
  Ngoài việc theo dõi lưu lượng truy cập, Analytics Web cũng có thể được sử dụng để thu thập kiến ​​thức về cách người chơi cư xử trong một trò chơi và nơi họ bị mắc kẹt trong quá trình chơi trò chơi.
• Thêm nội địa hóa.
  Điều này sẽ làm tăng khán giả và rất quan trọng đối với trẻ em từ các quốc gia khác đang chơi trò chơi của bạn. Hoặc có thể trò chơi của bạn không bằng tiếng Anh và bạn muốn hỗ trợ ngôn ngữ đó?

02. Đạt được 60 khung hình / giây

Khi nói đến sự phát triển của trò chơi JavaScript, có thể hấp dẫn để tận dụng các nút HTML và CSS để tìm các nút trong trò chơi, Widgets và các yếu tố GUI khác. Lời khuyên của chúng tôi là cẩn thận ở đây. Nó phản đối, nhưng thực sự tận dụng các yếu tố DOM ít có hiệu suất hơn trên các trò chơi phức tạp và điều này đạt được nhiều ý nghĩa hơn trên thiết bị di động. Nếu bạn muốn đạt được 60 khung hình / giây liên tục trên tất cả các nền tảng, thì có thể yêu cầu từ chức từ HTML và CSS.

Các yếu tố GUI không tương tác, chẳng hạn như các thanh sức khỏe, thanh đạn hoặc bộ đếm điểm số có thể dễ dàng thực hiện bằng phaser bằng cách sử dụng các hình ảnh thông thường (lớp 'phaser.image'), tận dụng thuộc tính '.crop' để cắt tỉa và 'phaser. Lớp văn bản 'cho nhãn văn bản đơn giản.

Các yếu tố tương tác như các nút và hộp kiểm có thể được thực hiện bằng cách sử dụng lớp 'phaser.button' tích hợp. Các yếu tố khác, phức tạp hơn có thể bao gồm các loại đơn giản khác nhau, như các nhóm, hình ảnh, nút và nhãn văn bản.

03. Đang tải phông chữ tùy chỉnh

Nếu bạn muốn kết xuất văn bản với phông chữ vector tùy chỉnh (ví dụ TTF hoặc OTF), thì bạn cần đảm bảo rằng phông chữ đã được trình duyệt tải trước khi hiển thị bất kỳ văn bản nào. Phaser v2.6 không cung cấp giải pháp cho mục đích này, nhưng một thư viện khác có thể được sử dụng - Trình tải phông chữ Web .

Giả sử rằng bạn có một tệp phông chữ và bao gồm trình tải phông chữ web trong trang của bạn, sau đó bên dưới là một ví dụ đơn giản về cách tải phông chữ. Tạo một tệp CSS đơn giản sẽ được tải bởi trình tải phông chữ Web (bạn không cần phải bao gồm nó trong HTML của mình):

 @ Font-Face {
  // Tên này bạn sẽ sử dụng trong js
  Font-Family: 'GunPlay';
  // url vào tệp phông chữ, có thể tương đối hoặc tuyệt đối
  src: url ('../ phông chữ / gunplay.tf') định dạng ('TrueType');
  Trọng lượng phông chữ: 400;
} 

Bây giờ xác định một biến toàn cầu có tên WebFontconfig. Một cái gì đó đơn giản như điều này thường sẽ đủ:

 var webfontconfig = {
  'Lớp học': Sai,
  'Hết giờ': 0,
  'Hoạt động': hàm () {
  // Phông chữ đã tải thành công ...
  },
  'tập quán': {
  'Gia đình': ['GunPlay'],
  // URL đến CSS đã đề cập trước đó
  'url': ['styles / fonts.css']
  Không thể
}; 

Hãy nhớ đặt mã của bạn trong cuộc gọi lại 'hoạt động' được hiển thị ở trên. Và đó là nó!

04. Lưu trò chơi

Bây giờ chúng ta đang ở điểm giữa của Flash để chuyển đổi JavaScript của chúng tôi - đã đến lúc chăm sóc các shader. Để liên tục lưu trữ dữ liệu cục bộ trong ActionScript, bạn sẽ sử dụng lớp 'SharedObject'. Trong JavaScript, sự thay thế đơn giản là api localstorage. , cho phép lưu các chuỗi để truy xuất sau này, tải lại trang còn sót lại.

Lưu dữ liệu rất đơn giản:

 var tiến độ = 15;
localstorage.setitem ('mygame.progress', tiến độ); 

Lưu ý rằng trong ví dụ trên biến 'Tiến trình', đó là một số, sẽ được chuyển đổi thành một chuỗi.

Đang tải là đơn giản, nhưng hãy nhớ rằng các giá trị được truy xuất sẽ là chuỗi hoặc null nếu chúng không tồn tại.

 var Progress = parseInt (localstorage.getitem ('mygame.progress')) || 0; 

Ở đây chúng tôi đang đảm bảo rằng giá trị trả về là một số. Nếu nó không tồn tại, thì 0 sẽ được gán cho biến 'Tiến trình'.

Bạn cũng có thể lưu trữ và truy xuất các cấu trúc phức tạp hơn, ví dụ: JSON:

 var stats = {'Mục tiêu': 13, 'thắng': 7, 'thua lỗ': 3, 'rút': 1
};
localstorage.setitem ('mygame.stats', json.stringify (số liệu thống kê));
...
var stats = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

Có một số trường hợp khi đối tượng 'localStorage' sẽ không khả dụng. Ví dụ: khi sử dụng tệp: // giao thức hoặc khi một trang được tải trong cửa sổ riêng tư. Bạn có thể sử dụng câu lệnh 'thử và bắt' để đảm bảo mã của bạn vừa tiếp tục hoạt động và sử dụng các giá trị mặc định, được hiển thị trong ví dụ dưới đây:

 thử {
    var Progress = localstorage.getitem ('mygame.progress');
} bắt (ngoại lệ) {
  // không khả dụng localStorage, sử dụng các giá trị mặc định
} 

Một điều cần nhớ khác là dữ liệu được lưu trữ được lưu trên mỗi tên miền, không phải mỗi URL. Vì vậy, nếu có rủi ro mà nhiều trò chơi được lưu trữ trên một tên miền duy nhất, thì tốt hơn là sử dụng tiền tố (không gian tên) khi lưu. Trong ví dụ trên, 'mygame.' là một tiền tố và bạn thường muốn thay thế nó bằng tên của trò chơi.

Nếu trò chơi của bạn được nhúng trong iframe, thì localStorage sẽ không tồn tại trên iOS. Trong trường hợp này, bạn sẽ cần lưu trữ dữ liệu trong phần IFRAME thay thế.

05. Shader mảnh vỡ mặc định

Khi phaser và pixij kết xuất các họa tiết của bạn, họ sử dụng một shader mảnh bên trong đơn giản. Nó không có nhiều tính năng vì nó được thiết kế cho tốc độ. Tuy nhiên, bạn có thể thay thế shader đó cho mục đích của mình. Ví dụ: bạn có thể tận dụng nó để kiểm tra việc rút tiền hoặc hỗ trợ nhiều tính năng hơn để kết xuất. Dưới đây là một ví dụ về cách cung cấp shader đổ vỡ mặc định của riêng bạn với phaser v2.

 Chức năng tải trước () {
  this.load.shader ('filename.frag', 'shader / filename.frag');
Không thể
Chức năng Tạo () {
  var renderer = this.renderer;
  var batch = renderer.spritebatch;
  batch.defaultshader =.
  pixi.abstractfilter mới (this.cache.getshader ('filename.frag')));
  Batch.setContext (renderer.gl);
} 

06. Thay đổi phương pháp nhuốm màu

Một trình đổ bóng mặc định tùy chỉnh có thể được sử dụng để thay thế các phương thức nhuốm màu mặc định ở Phaser và Pixijs. Tinting in phaser và pixijs hoạt động bằng cách nhân pixel kết cấu bằng một màu nhất định. Phép nhân luôn làm tối màu sắc, rõ ràng là không phải là một vấn đề; Nó đơn giản là khác với đèn flash. Đối với một trong những trò chơi của chúng tôi, chúng tôi cần thực hiện nhuốm màu tương tự như flash và quyết định rằng trình đổ bóng mặc định tùy chỉnh có thể được sử dụng. Dưới đây là một ví dụ về một shader mảnh như vậy:

// biến thể tint cụ thể, tương tự như độ sáng flash thêm
// đến màu sắc và không nhân lên. Một tiêu cực của một màu sắc
// phải được cung cấp cho shader này hoạt động đúng, tức là đặt
// sprite.tint đến 0 để biến toàn bộ sprite sang màu trắng.
float lowp chính xác;
vec2 vtexturecoord khác nhau;
thay đổi vec4 vcolor;
Sampler2d thống nhất usampler;
void chính (void) {
  VEC4 F = Texture2d (usampler, vtextureCoord);
  float a = kẹp (vcolor.a, 0,00001, 1.0);
  gl_fragcolor.rgb = f.rgb * vcolor.a + kẹp (1.0 - vcolor.rgb / a, 0,0, 1.0) * vcolor.a * f.a;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Trình đổ bóng này làm sáng các pixel bằng cách thêm một màu cơ bản vào tint một. Để làm việc này, bạn cần cung cấp các tiêu cực về màu sắc bạn muốn. Do đó, để có được màu trắng, bạn cần thiết lập:

 sprite.tint = 0x000000; // Màu này, sprite trắng
Sprite.tint = 0x00ffff; // Điều này cho màu đỏ 

07. Kiểm tra rút tiền hơn.

Thay thế một shader mặc định cũng có thể được tận dụng để giúp gỡ lỗi. Dưới đây chúng tôi đã giải thích việc sử dụng quá số tiền thừa có thể được phát hiện với một trình đổ bóng như vậy.

Exsdrawing xảy ra khi nhiều hoặc tất cả các pixel trên màn hình được hiển thị nhiều lần. Ví dụ, nhiều đối tượng ở cùng một nơi và được kết xuất với nhau. Có bao nhiêu pixel, GPU có thể hiển thị mỗi giây được mô tả là tốc độ điền. GPU để bàn hiện đại có tốc độ lấp đầy quá mức cho mục đích 2D thông thường, nhưng các thiết bị di động chậm hơn rất nhiều.

Có một phương pháp đơn giản để tìm hiểu bao nhiêu lần mỗi pixel trên màn hình được viết bằng cách thay thế shader Fragment toàn cầu mặc định ở Pixij và Phaser với phiên bản này:

 Void Main (Void) {
  gl_fragcolor.rgb + = 1.0 / 7.0;
} 

Shader này làm sáng các pixel đang được xử lý. Số 7.0 cho biết có bao nhiêu lần ghi cần thiết để bật pixel trắng; Bạn có thể điều chỉnh số này theo ý thích của bạn. Nói cách khác, các pixel nhẹ hơn trên màn hình được viết nhiều lần và các pixel trắng được viết ít nhất bảy lần.

Shader này cũng giúp tìm thấy cả hai đối tượng 'vô hình' mà vì một số lý do vẫn được hiển thị và các họa tiết có các khu vực trong suốt quá mức xung quanh cần phải bị tước (GPU vẫn cần xử lý các pixel trong suốt trong kết cấu của bạn).

08. Tại sao động cơ vật lý là bạn của bạn

Một động cơ vật lý là một phần mềm trung gian chịu trách nhiệm mô phỏng các cơ quan vật lý (thường là động lực cơ thể cứng nhắc) và va chạm của chúng. Các công cụ vật lý mô phỏng không gian 2D hoặc 3D, nhưng không phải cả hai. Một động cơ vật lý điển hình sẽ cung cấp:

• Chuyển động đối tượng bằng cách thiết lập vận tốc, gia tốc, khớp và động cơ;
• Phát hiện va chạm giữa các loại hình dạng khác nhau;
• Tính toán phản hồi va chạm, tức là hai đối tượng sẽ phản ứng khi chúng va chạm.

Có một plugin phaser hoạt động tốt cho mục đích này. Box2D cũng được sử dụng trong công cụ trò chơi Unity và Gamemaker Studio 2.

Mặc dù một công cụ vật lý sẽ tăng tốc độ phát triển của bạn, nhưng có một mức giá bạn sẽ phải trả: Giảm hiệu suất thời gian chạy. Phát hiện va chạm và tính toán đáp ứng là một nhiệm vụ chuyên sâu về CPU. Bạn có thể bị giới hạn ở vài chục đối tượng động trong một cảnh trên điện thoại di động hoặc hiệu suất xuống cấp đối mặt, cũng như giảm tốc độ khung hình sâu dưới 60 khung hình / giây.

09. Âm thanh xuất khẩu

Nếu bạn có một trò chơi flash hiệu ứng âm thanh bên trong tệp .fla, thì không thể xuất chúng từ GUI (ít nhất là không có trong Adobe Animate CC 2017) do thiếu các tùy chọn menu phục vụ mục đích này. Nhưng có một giải pháp khác - một kịch bản chuyên dụng chỉ có điều đó:

 Chức năng Normalize FileNename (tên) {
  // Chuyển đổi tên cam với tên Snake_case
  Trả về tên.Replace (/ ([A-Z]) / g, '_ $ 1'). Thay thế (/ ^ _ /, '') .tolowercase ();
Không thể
Chức năng DisplayPath (PATH) {
  // Làm cho đường dẫn tệp dễ đọc hơn
  trả về unescape (đường dẫn) .replace ('file: ///', '') .replace ('|', ':');
Không thể
fl.outputpanel.clear ();
if (fl.getdocumentdom (). Thư viện.getselecteditems (). Chiều dài & gt; 0)
  // chỉ nhận các mục được chọn
  thư viện var = fl.getdocumentom (). Thư viện.getSelectedItems ();
khác
  // Nhận tất cả các mục
  Thư viện var = fl.getdocumentom (). Thư viện.items;
// hỏi người dùng cho thư mục điểm đến xuất
var root = fl.browseforfolderurl ('Chọn một thư mục.');
lỗi var = 0;
cho (var i = 0; i & lt; library.length; i ++) {
  var mục = thư viện [i];
  if (item.itemtype! == 'Sound')
  tiếp tục;
  path var = root + '/';
  if (item.originalcompresstype === 'RAW')
  Đường dẫn + = NormalizeFilename (item.name.split ('.') 
) + '.wav';
  khác
  Đường dẫn + = NormalizeFilename (item.name);
  var thành công = item.exporttofile (PATH);
  NẾU (! THÀNH CÔNG)
  lỗi + = 1;
  Fl.trace (DisplayPath (PATH) + ':' + (Thành công? 'OK': 'Lỗi'));
Không thể
fl.trace (lỗi + 'lỗi' '); 

Cách sử dụng tập lệnh để xuất các tệp âm thanh:

1. Lưu mã trên dưới dạng tệp .jsfl trên máy tính của bạn.
2. Mở tệp .FLA với Adobe Animate.
3. Chọn lệnh & gt; Chạy lệnh từ menu trên cùng và chọn tập lệnh trong đoạn hội thoại mở ra.
4. Bây giờ một tập tin đối thoại khác bật lên để chọn thư mục đích xuất.

Xong rôi! Bây giờ bạn sẽ có các tệp WAV trong thư mục được chỉ định. Những gì còn lại để làm là chuyển đổi chúng, ví dụ, MP3, OGG hoặc AAC. (Nếu bạn có tập tin trò chơi để giữ an toàn, nâng cấp lên đàng hoàng lưu trữ đám mây .)

10. Cách sử dụng MP3

Định dạng MP3 cũ tốt đã trở lại, vì một số bằng sáng chế đã hết hạn và bây giờ mọi trình duyệt đều có thể giải mã và phát MP3. Điều này làm cho sự phát triển dễ dàng hơn một chút, vì cuối cùng cũng không cần phải chuẩn bị hai định dạng âm thanh riêng biệt. Trước đây bạn cần, ví dụ, các tệp OGG và AAC, trong khi bây giờ MP3 sẽ đủ.

Tuy nhiên, có hai điều quan trọng bạn cần nhớ về MP3:

• MP3 cần giải mã sau khi tải, có thể tốn thời gian, đặc biệt là trên các thiết bị di động. Nếu bạn thấy tạm dừng sau khi tất cả tài sản của bạn đã được tải, thì có lẽ nó có nghĩa là MP3 đang được giải mã
• Chơi mp3 băm nhỏ là một chút vấn đề. Giải pháp là sử dụng mp3loop, Đọc thêm Trong bài viết này đăng bởi pha compu.

Bài viết này ban đầu được xuất bản trong số 277 của Trình thiết kế web thiết kế web sáng tạo. MUA VẤN ĐỀ 277 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• 5 trò chơi thông thường cho các nhà thiết kế
• Xây dựng trò chơi vật lý WebGL của riêng bạn
• Hiểu đường ống nhập khẩu tài sản thống nhất