8

Tuần tới tôi sẽ đại diện cho Adobe tại GDC 2013 và trình bày cách Adobe Creative CloudPhoneGapPhoneGap Build  có thể là công cụ tuyệt vời để xây dựng trải nghiệm chơi trò chơi thông thường. Để chuẩn bị, tôi đã làm việc trên một ứng dụng mẫu trò chơi thể hiện tiềm năng của các trò chơi HTML được đóng gói với PhoneGap.

Bây giờ tôi muốn giới thiệu với bạn về PhoneGap Legends . PhoneGap Legends là bản demo theo chủ đề giả tưởng / RPG tận dụng các kỹ thuật hoạt hình HTML DOM và nhắm mục tiêu các trình duyệt webkit. Tôi đã có thể có được một số hiệu suất thực sự nổi bật từ ví dụ này, vì vậy hãy chắc chắn xem video và đọc các chi tiết dưới đây. Cái tên Phone PhoneGap Legends, không có nghĩa gì cả; Tôi chỉ nghĩ rằng nó nghe có vẻ như videogame-ish và phù hợp.

<br>


Cập nhật 24/24:  Nếu bạn muốn thử nghiệm điều này trên các thiết bị của riêng mình, giờ đây bạn có thể truy cập trực tuyến tại  http://tricedesigns.com/port portfolio / phonegap_legends /    Tuy nhiên, nó vẫn chỉ hoạt động trên trình duyệt webkit (Chrome , Safari, Android, iOS, v.v.) và được tối ưu hóa cho màn hình thiết bị nhỏ. Nếu bạn cố gắng sử dụng điều này trên một màn hình rất lớn, có thể bạn sẽ thấy một số đoạn trích.

Tuyên bố từ chối trách nhiệm: Ứng dụng mẫu này hoàn toàn không phải là một trò chơi hoàn chỉnh hoặc công cụ trò chơi hoàn chỉnh. Tôi đã triển khai một số kỹ thuật để đạt được hiệu suất tuyệt vời trong ứng dụng PhoneGap với nội dung theo chủ đề trò chơi, nhưng nó vẫn cần thêm cơ chế trò chơi. Tôi cũng đã viết mã này trong khoảng 2 ngày - nó cần một số dọn dẹp / tối ưu hóa bổ sung trước khi sử dụng trong một trò chơi trong thế giới thực.

Nguồn

Mã nguồn đầy đủ cho ứng dụng demo này có sẵn trên github. Mã này được cung cấp nguyên trạng:  https://github.com/triceam/PhoneGap-Legends . Tôi sẽ thực hiện cập nhật trong vài ngày tới để chuẩn bị cho GDC vào tuần tới, nhưng phần lớn, nó ổn định.

Phương pháp phát triển

Ứng dụng PhoneGap Legends được xây dựng theo các mẹo hiệu suất mà tôi đã đăng vào đầu tháng này . Trò chơi được xây dựng để nó sử dụng vòng lặp trò chơi dựa trên requestAnimationFrame để thực hiện tất cả các cập nhật giao diện người dùng. Điều này mang lại cho nó một khoảng thời gian theo lịch trình theo trình tự vẽ lại của trình duyệt.

Nói chung, DOM càng nông càng tốt để đạt được trải nghiệm mong muốn. Tất cả các thành phần của hệ thống truyền hình trực tuyến, hoặc các thành phần UI là các nút DOM cơ bản với vị trí và kích thước cố định. Tất cả các phần tử DOM có vị trí tuyệt đối ở 0,0 và tận dụng transl3d cho vị trí x / y của chúng. Điều này có lợi vì 2 lý do: 1) Nó được tăng tốc phần cứng và 2) có rất, rất ít hoạt động chỉnh lại dòng. Vì tất cả các yếu tố được định vị tĩnh và có kích thước cố định, các hoạt động chỉnh lại dòng trình duyệt là một mức tối thiểu.

Nền được tạo thành một loạt các gạch được lặp lại trong chuỗi đi bộ / chuyển động:

Tấm Sprite cho Gạch nền

Trong các kiểu CSS, mỗi ô có kích thước 256 × 256 hình vuông, với một kiểu nền được xác định cho mỗi kiểu xếp hình khối của:

.tile{
    width: 256px;
    height:256px;
    overflow: hidden;
    position: absolute;
    top:0px;
    left:0px;
    background-repeat: repeat;
    background-clip:border-box;
}
.tile_0 {      background: url('../images/background_tiles.png');     background-position: 0px 0px;}
.tile_1 {      background: url('../images/background_tiles.png');     background-position: 256px 0px;}
.tile_2 {      background: url('../images/background_tiles.png');     background-position: 512px 0px;}
.tile_3 {      background: url('../images/background_tiles.png');     background-position: 0px 256px;}
.tile_4 {      background: url('../images/background_tiles.png');     background-position: 256px 256px;}

Nội dung được hiển thị trong mỗi phần tử DOM DOM sprite được áp dụng bằng cách sử dụng các trang sprite và các kiểu nền CSS thông thường. Mỗi tấm sprite chứa nhiều hình ảnh, nền cho một nút được đặt trong CSS và vị trí cho mỗi hình ảnh được đặt bằng cách sử dụng kiểu css của vị trí nền nền trước. Ví dụ, hoạt hình đi bộ cho nhân vật anh hùng được áp dụng chỉ bằng cách thay đổi kiểu CSS được áp dụng cho phần tử anh hùng <div>.

Sprite Sheet cho Hero

Có một chuỗi các kiểu CSS được sử dụng để xác định từng trạng thái trong chuỗi đi bộ:

.hero_0_0{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 0px;}
.hero_0_1{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 96px;}
.hero_0_2{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 192px;}
.hero_0_3{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 288px;}
...

Bản demo trò chơi này sử dụng rộng rãi transl3d cho thành phần tăng tốc phần cứng. Tuy nhiên, lưu ý rằng các biến đổi 3d đều được áp dụng cho các phần tử tương đối nhỏ và không được lồng nhau. Tất cả các kết cấu của các ứng dụng trên mạng có kích thước tối đa trên tất cả các nền tảng (1024 × 1024) và vì nó sử dụng các tấm sprite và các kiểu CSS có thể sử dụng lại, nên có khá ít hình ảnh để tải vào bộ nhớ hoặc tải lên GPU.

Ghi công

Các tài sản Creative Commons sau đây đã được sử dụng để tạo ứng dụng mẫu này và video đi kèm:

Hình ảnh - Kết cấu cỏ: http://opengameart.org/content/grass-with-moss
Hình ảnh -  Cây / Cây bụi: http://opengameart.org/content/2d-rpg-character-walk-spritesheet
Hình ảnh -  Nhân vật chính: http://opengameart.org/content/lots-of-hyptosis-tiles- Organized
Image - Kẻ thù: http://opengameart.org/content/rpg-en Kẻ -11-  dagons
Hình ảnh -  La bàn hoa hồng: http: // en .wikipedia.org / wiki / Tập tin: Compass_rose_en_04p.svg

Phông chữ - Avalon Quest:  http://www.ffonts.net/Avalon-Quest.font
Lưu ý : Tôi đã sử dụng phông chữ được cấp phép miễn phí / mở có thể được nhúng trong ứng dụng để sử dụng ngoại tuyến. Phông chữ này đã được chuyển đổi thành gói phông chữ web có thể được nhúng trong ứng dụng PhoneGap bằng cách sử dụng http://www.fontsquirrel.com/

Âm thanh - Quái vật: http://www.freesound.org/people/Erdie/sound/167890/
Âm thanh - Âm nhạc: http://www.freesound.org/people/rap2h/sound/115261/

Nguồn

Một lần nữa, trong trường hợp bạn bỏ lỡ nó ở trên, Mã nguồn đầy đủ cho ứng dụng demo này có sẵn trên github. Mã này được cung cấp nguyên trạng:  https://github.com/triceam/PhoneGap-Legends .



|