Phaser 3 support and npm package publishing about dragonbonesjs HOT 30 OPEN

@the-simian new db for phaser3 is ready, it will soon be merged to master.

from dragonbonesjs.

Hi, I add phaser 3.x in dev branch, But there are still some problems that cannot be solved.

https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L49
https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L97
https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L114
https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserSlot.ts#L195
https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserSlot.ts#L252

from dragonbonesjs.

Thanks for everyone's work on this. Phaser 3 support would be a great help. I wanted to point out that Phaser's 3.15 release just dropped a couple days ago, and it includes Spine support. It may be of help to some here to take a look at the source to see if there's any common problems that have been solved there.

For the time being, simply exporting from Dragonbones to Spine format may be an easy workaround for anyone wanting to use DB with Phaser.

from dragonbonesjs.

Ok I looked over some of your issues. firstly these items:

1. // const eventManager = new PhaserArmatureDisplay(this._game.scene.getScene("default")); // TODO How to create an global game object.
   https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L49

2. const armatureDisplay = new PhaserArmatureDisplay(PhaserFactory._game.scene.getScene("default")); // TODO how to get current scene.
   https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L97

3. const rawDisplay = new Phaser.GameObjects.Image(PhaserFactory._game.scene.getScene("default"), 0.0, 0.0, null as any); // TODO how to get current scene, how to set empty texture.
   https://github.com/DragonBones/DragonBonesJS/blob/dev/Phaser/3.x/src/dragonBones/phaser/PhaserFactory.ts#L114

I can see in these three situations you need a reference to the current scene. I want to show you the basic plugin boilerplate I started with : https://github.com/simiancraft/create-phaser-app/blob/dragonbones-and-plugin-approach/src/plugins/dragonbones.js

So here is the important part. Ideally you would write this as a plugin, which means to include this plugin in Phaser, you do this in your game config object

plugins: {
    scene: [
      {
        key: 'DragonBonesPlugin',
        plugin: DragonBonesPlugin,
        mapping: 'dragonBones'
      }
    ]
  },

this means that the DragonBonesPlugin will get loaded into every scene, and will be called dragonBones. inside of the scene. Inside of the plugin you need to do this:

export default class DragonBonesPlugin extends Phaser.Plugins.BasePlugin {
  constructor(scene) {
    super('DragonBonesPlugin', scene);
    this.scene = scene;
  }
  
  //reserved method will fire on init
   init(name) {
    console.log(this.scene); //here is your scene.
  }
 
  //arbitrary method
  test() {
    console.log(this.scene); //here is your scene.
  }
}

I've written that in es6, but I imagine is should map naturally to TypeScript

That is how to get the scene reference. Here is a demo of a simple scene plugin:
http://labs.phaser.io/edit.html?src=src\plugins\add%20scene%20plugin%20in%20config.js

More examples here: http://labs.phaser.io/index.html?dir=plugins/&q=

As for the remaining items you posted, how would you get triangles or skew things? This I am less sure about, but I am certain you can create a custom pipeline to access webgl functionality. I will show you what I know and I hope the information is useful.

So here is how you can do that from Phaser's custom pipeline system:

//this is the part that will give us access to WebGl functionality
import CustomPipeline from './rendering-pipelines/CustomPipeline';

const config = {
  plugins: {
   //this is the plugin I mentioned earlier
    scene: [
      {
        key: 'DragonBonesPlugin',
        plugin: DragonBonesPlugin,
        mapping: 'dragonBones'
      }
    ]
  },
  scene: [StartScene], //some scene goes here.

  // you can register custom pipelines here.
  // then you set the pipeline as the rendering target on game entities
  // in this game our pipeline is called 'Custom'
  callbacks: {
    postBoot: game => {
      game.renderer.addPipeline('Custom', new CustomPipeline(game));
    }
  }
};

const game = new Phaser.Game(config);

Inside the custom pipeline: (see [here] (https://github.com/simiancraft/create-phaser-app/tree/dragonbones-and-plugin-approach/src/rendering-pipelines))

in the main file:

import Phaser from 'phaser';
import TextureTintFrag from './TextureTint.frag';
import TextureTintVert from './TextureTint.vert';

const CustomPipeline = new Phaser.Class({
  Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
  initialize: function CustomPipeline(game) {
    //console.log(game.renderer);
    Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
      game: game,
      renderer: game.renderer,
      fragShader: TextureTintFrag,
      vertshader: TextureTintVert,
      topology: game.renderer.gl.TRIANGLES
    });
  }
});

export default CustomPipeline;

and the vert and frag data:
TextureTint.vert:

#define SHADER_NAME PHASER_TEXTURE_TINT_VS

precision mediump float;

uniform mat4 uProjectionMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uModelMatrix;

attribute vec2 inPosition;
attribute vec2 inTexCoord;
attribute vec4 inTint;

varying vec2 outTexCoord;
varying vec4 outTint;

void main () 
{
    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(inPosition, 1.0, 1.0);
    outTexCoord = inTexCoord;
    outTint = inTint;
}

TextureTint.frag:

#define SHADER_NAME PHASER_TEXTURE_TINT_FS

precision mediump float;

uniform sampler2D uMainSampler;

varying vec2 outTexCoord;
varying vec4 outTint;

void main()
{

    vec4 tint = vec4(0.5, 0.0, 0.25, 0.25);
    vec4 texel = texture2D(uMainSampler, outTexCoord);
    texel *= vec4(tint.rgb * tint.a, tint.a);
    gl_FragColor = texel;

}

To use this 'new' pipeline on something, you target it in your scene.. which you should have access to in the plugin:

scene.player = scene.physics.add.sprite(100, 100, 'some-asset');
scene.player.setPipeline('Custom'); //and this uses the pipeline we defined.

I know that second answer isn't exactly how you'd use it for your plugin, but perhaps there is a way to register a custom pipeline that you can access in your plugin,and you can do anything you'd need to do in there.

If you want a demo of custom pipeline rendering, here is a demo
http://labs.phaser.io/edit.html?src=src\renderer\Custom%20Pipeline.js

from dragonbonesjs.

@wsrast just one small thing - you still need license for spine to use their runtime (phaser 3 uses spine-ts)

@jcyuan whatever - i needed it, i did it, it works, if you want it, no problem, if you don't, that's fine as well :)

from dragonbonesjs.

references:
#57, #47

also references #67

from dragonbonesjs.

Thank you! I am interested to take a look and see how this is progressing!

from dragonbonesjs.

Just to cover my bases on how to achieve a skew in Phaser 3, I did come across this demo here:
http://labs.phaser.io/edit.html?src=src\game%20objects\quad\basic%20quad.js

Maybe a similar effect to skew can be achieved with quads?

from dragonbonesjs.

I still don't know much about the phaser 3. I will try to improve it later :)

from dragonbonesjs.

@akdcl I appreciate your effort! I also wanted to tell you that a new version of phaser 3 was released today as well : https://phaser.io/download/release/3.10.0

from dragonbonesjs.

@the-simian new db for phaser3 is ready, it will soon be merged to master.

Excellent! We are eager to see it!

from dragonbonesjs.

@akdcl please review on the PR soon, thanks. #76

there are some new changes needs to be pulled again as phaser 3.13 renamed some APIs in the matrix class.

from dragonbonesjs.

About the phaser mesh.index problem, can you kindly add a workaround for it? When updating the slot frame and mesh, you can simply iterate through the indices array of DB slot mesh data, fetch vertex and uv from vertices and uvs array according to current index value, then append them to the phaser mesh - That means, 'do indexing manually'. Although its performance can not reach the hardware indicing way, but we can then use DB mesh skin animation in phaser now and it will be very fine. Even if in the future phaser may add indices to their mesh object, you only need to modify a little iteration codes to fit it.
This is only a little advice. @jcyuan

from dragonbonesjs.

@Arthur3DLHC thank you.

actually it was queued:
1, bounding box
2, debug drawing
3, mesh

but it depends, as currently busy on other project, I'm sorry.

from dragonbonesjs.

Thanks for your reply. I can understand and I' keep waiting : )

from dragonbonesjs.

Hi
Tested dev branch with Phaser 3.14
One thing batchVertices is renamed to batchQuad besides that, it looks OK, will need to do more testing
Do you want PR for this small change?

from dragonbonesjs.

@pavels thank you, these changes are applied here in my local proj already, they'll be pulled with other changes together but have to wait till a version is merged into the master branch so that users can choose to use Phaser 3.12 or 3.13+.
but welcome to PR for bug fixing, and changes for later version.

from dragonbonesjs.

@jcyuan the renamed method is already in phaser 3.12 - https://github.com/photonstorm/phaser/blob/v3.12.0/src/renderer/webgl/pipelines/TextureTintPipeline.js

the rename happened between 3.11 (batchVertices) and 3.12 (batchQuad)

from dragonbonesjs.

@pavels LOL, yep... sorry, messed up.

from dragonbonesjs.

@jcyuan one more thing - now if youload assets in different scene than you want to use them (you have preloader scene where you load assets and main game scene where you use them) it doesn't work. Do you have fix for that? If not i can look into this issue.

from dragonbonesjs.

please do it, PR for dev branch please

from dragonbonesjs.

@jcyuan here it is #78 there is some comments in the pull request, lets discuss details there

from dragonbonesjs.

Hi - i have also done the mesh implementation (indicies are computed in code as Phaser has no support for them at the moment) - i have it done just locally now

from dragonbonesjs.

@wsrast yes noticed that. thanks for the suggestion. I'll look into it to see if something helps.
actually I think wrap DB format into Spine is not that good, you need to build your own one to take the right of control for future DB featuring.

@pavels thank you for your effort, I guess there will be a big change later as what @wsrast said.

really busy these days though...

from dragonbonesjs.

@wsrast just one small thing - you still need license for spine to use their runtime (phaser 3 uses spine-ts)

Very true. I'd much rather see DragonBones supported directly in Phaser!

from dragonbonesjs.

https://github.com/pavels/DragonBonesJS/tree/phaser3

from dragonbonesjs.

@pavels please provide minimal example how load and show exported DB objects in Phaser 3! Thanks!

from dragonbonesjs.

@gritsenko demos are already updated for phaser 3 (https://github.com/DragonBones/DragonBonesJS/tree/dev/Phaser/Demos) - @jcyuan did that already

from dragonbonesjs.

Ok i have rebased all my mesh and bounds work on current dev and made PR

#93

@jcyuan can you check that when you have some time?

from dragonbonesjs.

it's merged, thanks for you efforts, will do more tests later.
but I think the soundManager is a little bit weird? why don't we just use our db objects to listen sound event?

this._heroDisp.on(dragonBones.EventObject.SOUND_EVENT, onSound, this);
private onSound(e: dragonBones.EventObject): void {
    if (e.name === "hitGround") {  ....   }
}

Another thing:
the base class DisplayContainer needs to have its own renderer which can handle skew (or other features if we need), because Phaser official changes the TransformMatirx class very often, this will make us to always patch the exisiting code, and every customized displays have their own customized renderer is the right way Phaser actually wants.

from dragonbonesjs.