Spine tilemap support

Using <haxedef name="gl_stats"/>, I tried to use Openfl8.4.1, but the number of draws has not decreased

@singmajesty

I uploaded a project example as a reference, and I can get a version of Sprite beginBitmapFill + drawTriangles by running it directly.

@gonzos I updated the example on Github. If you are interested, you can check out the example connection in the previous message. :grinning:

1 Like

This is the Sprite renderer, the drawCall number is high and there is no acceleration.

__commands=[MOVE_TO,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,END_FILL]

I looked at the underlying implementation, and its command order is like this.

Update code:
__commands=[MOVE_TO,BEGIN_BITMAP_FILL,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,DRAW_TRIANGLES,END_FILL]

The current implementation of drawTriangles is accelerated, but it will still make multiple draw calls, though it will share the same buffer. There’s likely more work that can be done to cause it to recognize when/if multiple calls use the same fill type, and therefore can be combined into a single draw

:thinking: So, should it be too many triangles to cause the rendering speed to decrease?

I used the Tilemap and Sprite versions to compare the performance of the same set of bones, and they differed a lot. Tilemaps support grids, I believe performance is faster and better than drawTriangles.

Tilemap vs drawTriangles is going to be closer if there is only one drawTriangles call, and there may be ways to accelerate drawTriangles more. Another option compared to Tilemap would be drawQuads

I believe that only one drawTriangles will perform very well, but I have tried to integrate their data into an array, and the rendering is messy. Maybe I don’t understand the conversion relationship between their vertex data. In my Sprite renderer, I can now access all the vertices, but I don’t know how to render them correctly in one go.

%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_5c7226cf-4dbc-4641-8a7e-5ec44f155b4e

allVerticesArray = allVerticesArray.concat(ofArrayFloat(_tempVerticesArray));
allTriangles = allTriangles.concat(ofArrayInt(triangles));
allUvs = allUvs.concat(ofArrayFloat(uvs));
this.graphics.drawTriangles(allVerticesArray,allTriangles,allUvs,TriangleCulling.NONE);
this.graphics.endFill();

I did this with ordinary stitching, which seems to be not feasible.

Great, I have successfully rendered all the triangles with 1draw, which is great. Update a copy to githup later! :grinning:

The performance of the Sprite renderer has been improved!

1 Like

I have updated the new SpriteRender! :wink:

1 Like

@singmajesty erformance has improved, but if you use this, can you achieve the color of a single bone / BlendMode implementation?

haxelib install openfl-spine

Already uploaded to haxelib, it can be installed directly.

2 Likes

Currently, no, blendMode is supported once per draw, and requires multiple sprites.

There might be a way to simulate it (or do even more) using a custom shader, though, plus per-vertex attributes

@rainy is there any listener for animation complete on spine?

Yes:

var event:AnimationEvent = new AnimationEvent();
var spine:SkeletonAnimation;
spine.state.addListener(event);
event.addEventListener(SpineEvent.COMPLETE,(event:SpineEvent)->{
    
});

Great! Thanks.
Anyway, I noticed that Sprite renderer doesn’t support color transform (blending, etc.), and Tilemap renderer doesn’t support mesh animation. Any suggestion how to have color transform and mesh in one animation?

Under SpriteSpine, there will be a support for openflSprite.isNative = true;, but it should be noted that this will treat each bone as a drawcall, which will have a certain performance impact.

I have not yet mastered how to use the shader to achieve SpriteSpine’s transparency support, :thinking:

1 Like

OK, I’ll avoid mesh animation, that’s OK for now.

I happen to be learning GLSL recently, so it is very possible to enhance the transparency and BlendMode rendering of SpriteSpine :grinning:

1 Like