Phaser: Creature Support for Phaser 3

Created on 2 May 2018  路  2Comments  路  Source: photonstorm/phaser

Hello all,

Creature dev will like to integrate Phaser 3 as one of the target runtimes for the Creature Animation Tool ( https://creature.kestrelmoon.com/ )

There are 2 types of runtimes Creature supports:

  • Standard runtime ( either JSON or Binary Flatbuffers ), contains all features, including the latest SkinSwapping, Gap Step Compression, Item Switching etc.
  • CreaturePack ( fully binary ), super compact and very performant, designed for mobile and web delivery platforms. Ideally we can integrate the latest WebAssembly version: https://medium.com/@kestrelm/creaturepack-high-performance-2d-webgl-character-animation-with-webassembly-72c436bec86c
    If not, the dev is happy to backport some of the features like Gap Step compression back into the CreaturePack JS version. Here are 200 dinosaurs running in realtime with the latest WebAssembly accelerated CreaturePack runtimes:
    https://creature.kestrelmoon.com/WebDemo/wasm/PixiJS-WASM-Pack-MultiDemo.html

The latest WebAssembly CreaturePack supports something called Delta Compression which allows for even greater levels of size compression with almost no quality or performance loss:
https://www.youtube.com/watch?v=vgHpt38q3oI
Integration into Phaser 3 does not require any compilation, the wasm binary along with the js loader just needs to be distributed with it.

So very complex animation with full on mesh deformations can be delivered for < 0.5 mb as seen in the video.

Both formats require the standard OpenGL/WebGL way of rendering meshes. That will mean a mesh has:

  • Points
  • Uvs + Colours ( Per Vertex )
  • Indices ( an array of ints defining the triangles of the mesh )

All of these attributes are time-varying in nature. That's really all that's required to get the Creature runtimes working with Phaser 3.

CreaturePack for example is very easy to use, here is a piece of sample code for running a single character in CreaturePack in PixiJS:
https://github.com/kestrelm/Creature_WebGL/blob/master/PixiJSRef-Pack-Demo.html


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

馃挅 Feature Request Complex

Most helpful comment

Hello all,

I managed to implement preliminary Phaser 3 support for the latest CreaturePack runtimes:
https://github.com/kestrelm/Creature_WebGL/tree/master/Phaser3

Preview video:
https://twitter.com/KestrelmMoon/status/1112949221047459840

@photonstorm Feel free to touch it up and put it into your Phaser 3 repo as a plugin. This is based off your Phaser 3 Mesh object so I think it should be compatible with your new Phaser 3 rendering pipeline. :)

Cheers

All 2 comments

Hello all,

I managed to implement preliminary Phaser 3 support for the latest CreaturePack runtimes:
https://github.com/kestrelm/Creature_WebGL/tree/master/Phaser3

Preview video:
https://twitter.com/KestrelmMoon/status/1112949221047459840

@photonstorm Feel free to touch it up and put it into your Phaser 3 repo as a plugin. This is based off your Phaser 3 Mesh object so I think it should be compatible with your new Phaser 3 rendering pipeline. :)

Cheers

@kestrelm going to close this issue off, as you've already released a great Phaser 3 plugin which Creature users can download and use for themselves :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

HDouss picture HDouss  路  3Comments

cncolder picture cncolder  路  4Comments

Secretmapper picture Secretmapper  路  3Comments

rexrainbow picture rexrainbow  路  4Comments

samme picture samme  路  4Comments