Phaser and Spine-Ts

TheTrope

Hi,

I'm currently hesitating between Phaser and Libgdx to build my game.

At this moment, there is no official support for Spine in Phaser, as the new webgl module from spine-ts is now out (awesome), i would like to know if there is an easy way to use Spine in Phaser.

I already asked on HTML5 game dev, but not so much people use this for now.

One sure thing to get is work is to draw the spine models in another context (one for each model), saving them as texture, and using them as Sprite.
But, it need to be done on each frame, so i'm pretty sure performances will be bad.

Do you see another way to get it work?

Thanks !

Nate

libgdx has the advantage of supporting many platforms. Is the target a webgl only game? spine-ts (without needing any game toolkit) or libgdx have the advantage of official Spine runtime support. What other functionality from the game toolkit do you need?

TheTrope

The game i want to make is an Isometric or 2.5D game, like "Don't Starve". For 2.5D i know that Phaser won't fit, but three.js does not have " tinting, premultiplied alpha, advanced blending functions, and multi-page texture atlases.".
(Will it come soon?)

The target is Webgl and desktop (So both libgdx and Phaser+Electron works).
I want to make a server (multiplayer mode), so a same 2D physic engine for server and client is required. Certainly with nodejs (Box2D).

There is a lot of things in libgdx that let me perplex : performance in browser and the html5 export (java features like introspection/reflexion).

Phaser offers interesting builtin features like groups, sound manager, input manager, full screen mode, i'm pretty sure it can be done too with libgdx (home made or plugin) but it will take longer.

Unity could fit too, but i got no idea of the Webgl exporter quality and limits

Thanks for your help ! 🙂

Mario

libGDX does fullscreen mode in WebGL builds as well. Not sure what Phaser's sound and inout managers do, but libGDX should have equivalents.

As for spine-ts and Phaser, it should be quite easy to implement a renderer. IIRC, Phaser is built on pixi.js, and they have Spine support already. I beoieve they are in the process of updating their Spine support to spine-ts.

TheTrope

Phaser will no longer be built on pixi.js soon (Phaser v3) and the pixi-spine support does not handle meshes (as is it done from scratch).
But you are right, it should be quite easy to get it work with phaser, but it will be hard to fully implement it (with features like multi layers etc).

But the libgdx exporter makes me fear, since i saw C to assembler converter, i always fear about that kind of things haha :rofl:

Nate

I personally greatly prefer libgdx over any other game toolkit, but then Mario and I are libgdx's founders so we are a bit biased. If by groups you mean a 2D scene graph, libgdx has hands-down the best one ever (which is my baby and the foundation for Spine). 🙂 Give libgdx a try and see for yourself about performance. GWT (Java -> JS) is crazy magic for sure, but it's pretty amazing it works so well. Reflection is done by listing the classes you need to access so their metadata is available. Java IDEs do hotswapping: edit your code, save, and your running program is patched with the changes. The productivity boost from this is massive. You'd develop the desktop app where development is fast, then deploy to GWT.

TheTrope

I heard tons of nice comments on libgdx for mobile, but webgl examples are rares.

Hmmm choice will be hard, i know i'm far from the initial subject but do you know if Box2D in java will compute exactly the same than a Box2d in NodeJs? Since html5 need websocket, is there a builtin way to make networking work on both html5 and desktop platforms?

Thanks 😃

Mario

Hm, there's no C to assembler converter in libGDX or any of its backends and dependent tools.

libGDX uses the C++ version of Box2D under the hood for performance reasons. It's very unlikely that a reimplementation in JavaScript on NodeJS will produce the same deterministic results. Note that this may also not be true if you use JS both on the server and the client, as different JavaScript VMs can implement floating point differently, resulting in out of sync simulations. The same is true for C++ on different clients as well. Networked physics is hard 🙂

TheTrope

Thank you
Oh, my bad, when i said C to assembler, it was as a generality for code generation that is an unoptimised thing for me, and the only one i studied this year.
I looked some things about GWT it does not look that bad i thought. And google is now working on J2CL (Java to ES6) that will replace it !
I already made a networked game with three.js/nodejs server, it wasn't that hard since server is correcting client body's position every x ms

I'm currently testing both libgdx and html5 to make my choice.

So i'm trying to understand how spine-ts work with webgl module, and instead of drawing the spine object, i want to get a framebuffer or texture of it.
drawSkeleton will call SkeletonRenderer.draw that will fill the batcher with batcher.draw, but i don't understand where the batcher is draw into the scene.
Maybe i'm missing something but the batcher.draw methods seems to only gather textures, and do not draw them.
Only gl.draw calls i find are within the mesh.flush method, but it is a not an global object drawing call, it looks like the object is not drawn in one time.
I'm wondering if i can pass a framebuffer instead of the current webgl context to the SceneRenderer, but i'm certainly dreaming :rofl:

Am I wrong?

Thanks

Ps: Demos are working for me (exception for ikcontraints.html) but example get stuck with the first soldier image
(I'm using node http-server)

Mario

The SkeletonRenderer uses a PolygonBatcher to draw region and mesh attachments. All the PolygonBatcher does is to fill a mesh until it's full (or the texture was switched), then render that mesh. That happens here spine-runtimes/PolygonBatcher.ts at master · EsotericSoftware/spine-runtimes · GitHub The reason to do it that way is performance.

The actual rendering of the mesh is done by the Mesh itself, which knows how to wire up the provided shader etc. spine-runtimes/PolygonBatcher.ts at master · EsotericSoftware/spine-runtimes · GitHub

If you want to render to a framebuffer or texture, just setup a framebuffer, enable it as a render target, draw the skeleton as usual, then disable the framebuffer as the render target and use it as a texture. The