Mikal's Profile

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

13 Aug, 2019
Quote

Ashley Thanks for the great response, details of the engine and suggested method for implementation. I will take a look at implementing something similar to the text method and thanks for the additional documentation that you just provided. I appreciate the comment on the resize and creating a new texture based on that - very helpful in making this all more robust.

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

12 Aug, 2019
Quote

I think I found at least one improvement to use more of the C3 SDK, I can use the below to get the rcTex coordinates:

getLeft()
getTop()
getRight()
getBottom()

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

12 Aug, 2019
Quote

Ashley Thanks for the reply (and thanks for the comments in the bug report, I understand, that makes sense.)

I do agree that rendering directly to the C3 canvas would be better and that will be something to explore, however, the render is done through the Spine-TS runtime script and it looks like a lot to dive into to figure out (10K lines). It's already set up to render to a canvas, however, also integrating in the render with other sprite objects could be a challenge? Though I think it would be possible if created a Drawing plugin and did the work to integrate the Spine render into the Drawing Plugin Draw function? Something to explore in the future.

I was looking for a short cut to use the existing Spine-TS. I have found a way that works and _seems_ to perform pretty well. I definitely tried to use only C3 SDK, but I think I used a little more. In this method, I created a drawing plugin which replaces a sub texture of the drawing plugin Sprite Sheet with the canvas texture on each Draw() call. There are limitations: it only replaces the top MIP level, so if the Sprite is scaled down, the old image starts to blend in. So, for the game, I will force screen resolution and keep Sprite size relatively the same so the other MIP levels do not kick in (this will likely be a desktop nw.js / Electron game, so I will have some control over which chromium engine the game is shipped with and control over full screen vs windowed.) I know this is not bullet proof, but I think I can work around the issues. If you have suggestions on how to make the below use more C3 SDK functions, that would be very appreciated!

In general for Spine animations, I will just use 1-3 characters animated this way, so 'only' 1-3 texture updates per frame. The rest will be simpler and use traditional sprite frame animation.

 Draw(renderer)
 {
 var gl = renderer._gl
 const imageInfo = this._objectClass.GetImageInfo();
 const texture = imageInfo.GetTexture();
 if (!texture) return; // dynamic texture load which hasn't completed yet; can't draw anything

 const wi = this.GetWorldInfo();
 const quad = wi.GetBoundingQuad();
 const rcTex = imageInfo.GetTexRect();
 var myCanvas = document.getElementById(this._elementId)

 gl.bindTexture(gl.TEXTURE_2D, texture._texture);
 // webgl2: gl.texSubImage2D(gl.TEXTURE_2D, 0, (rcTex._left * texture.GetWidth() - 0.5).toFixed(0), (rcTex._top * texture.GetHeight() - 0.5).toFixed(0), myCanvas.width, myCanvas.height, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);
 gl.texSubImage2D(gl.TEXTURE_2D, 0, (rcTex._left * texture.GetWidth()).toFixed(0), (rcTex._top * texture.GetHeight()).toFixed(0), gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

 renderer.SetTexture(texture)

 if (this._runtime.IsPixelRoundingEnabled())
 {
 const ox = Math.round(wi.GetX()) - wi.GetX();
 const oy = Math.round(wi.GetY()) - wi.GetY();
 tempQuad.copy(quad);
 tempQuad.offset(ox, oy);
 renderer.Quad3(tempQuad, rcTex);
 }
 else
 {
 renderer.Quad3(quad, rcTex);
 }
 }

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

12 Aug, 2019
Quote

I've posted a project template with the plugin bundled.

The new drawing plugin ElementQuad, takes an element as ID as an argument and each frame (Draw is called), it sets the image texture to the element (I am using the SpineCanvas which is the canvas I am using to render a Spine animation to.) It is just replacing the top MIP level, so you cannot scale the ElementQuad too much (or other MIP levels which do not contain the Sprite render will start blending in.) The ElementQuad image size works best if it's the same size as the Element (canvas.)

So, the original issue in the thread is no longer blocking, this alternative approach also seems much more performant (with the caveat for the sizing limitations.)

Here's a link to the template and plugin, please feel free to suggest improvements. It is still only a template and only one Spine object is currently supported.

construct.net/en/forum/construct-3/general-discussion-7/spine-animation-js-template-145940

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
3

12 Aug, 2019
Quote

Update 08/11/2019:

Created a plugin helper ElementQuad, which can use a canvas directly as a texture, which lowers memory usage and improves performance. There is now no stutter, one caveat is that it works best if the ElementQuad image size is the same as the Spine render canvas.

An updated project with the new ElementQuad plugin bundled is in the original post.

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

11 Aug, 2019
Quote

I am taking a new approach.

I've created an ElementQuad helper plugin which is a Drawing plugin that replaces its initial texture with an Element from the document which can be set via an action. Right now I'm using the Spine render canvas as the Element to be used as a replacement texture. With this method, it looks there is not a large amount of new data/objects created to be GC'd later and the animations now run smoothly without a stutter. I will post the new template and plugin.

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
2

10 Aug, 2019
Quote

Try tuning the water effect a little and you may end up with something ok (but it will have a hard edge at the borders.)

This looks good, but it's a GPU killer due to the effect applied to the many fire sprites to create a nice ragged dynamic edge on top of the lava, perhaps something to inspire you to try something which has less perf impact than this example.

Fire.c3p

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
1

10 Aug, 2019
Quote

Looking forward to this, also it’s great to have you working on C3 projects!

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
4

10 Aug, 2019
Quote

Thank you both. I added a pointer to the 'official' outline effect, thanks for pointing that out Eren.

I don't plan on making a plugin. When I use this in a game, I'm going to use the C3 JS scripting features and C3 JS files and C3 functions to access the Spine-TS API directly.

Eren if you want to make a C3 plugin for it, please use whatever you want/can from the project. I have seen comments in other threads that make me think if you make a Spine plugin, there will definitely be a few more folks joining your Patreon, just let them know before you start so they can gather people to join and support you!

Mikal
- Joined 22 Apr, 2016
- 117 topics • 1,248 posts
6

10 Aug, 2019
Quote

Since I did not see the possibility of a Spine Animation plugin on the near horizon, I am experimenting with using the Spine-TS webgl runtime and integrating it with C3 through JS integration. I updated the Spine TS demo to load the Spine atlas and skeleton files from the local C3 project files. The runtime renders to a separate non-visible canvas each frame and the result is loaded into a C3 sprite animation frame to be displayed. The api provides control over the animation, mixing, animations, changing skeletons, skins, etc.

I currently have some simple controls to change the skeleton, change render resolution (the render canvas resolution), play/pause the animation.

It works fairly well, except for an occasional stutter (which seems to be the C3 execution stuttering due to movement of data into the spirte animation frame, in other threads and bug reports, I'm exploring that.)

Please feel free to test/extend/use/improve the project, please repost if you find some good improvements or extend it (or fix the stutter issue!)

Update 08/14/2019:

Updated the ElementQuad helper with the help of Ashley to use newly documented SDKs and released.

The Spine example is doing one Spine animation rendered to one separate canvas and the canvas is used for multiple ElementQuad instances (a light port of the Spine meshes demo.) For more Spine animations, this example may need another canvas per Spine animation and either a clone of ElementQuad or a new instance. Control of the animation will need to be done through JS calls to the Spine-TS API, movement, angle, size, effects, etc. on the resulting ElementQuad can be through C3 events.

ElementQuad Addon and Spine Example

Update 08/11/2019:

Created a plugin helper ElementQuad, which can use a canvas directly as a texture, which lowers memory usage and improves performance. There is now no stutter, one caveat is that it works best if the ElementQuad image size is the same as the Spine render canvas.

Older project with new ElementQuad plugin bundled in.

SpineJSEQTemplate.c3p