Mikal's Forum Posts

  • Thanks Ashley - any estimate on when we could start testing this with C3 and WebGPU (I understand we can start dev now with webGL, since we'd be using the C3 SDK interface and it won't change.)

  • I can speak for our project which uses the plug-in. I hope that badlogic can give a general sense for the wider Spine community.

    In our project, every 'slot' of the Spine character can be customized in terms of color by the players. We have a MMO-style game in Alpha and customizing your character is a big part of the experience and potential monetization. We can have 30-50 characters on screen at a time right now when we are busy (we are hoping for more in the future, but we will also start 'sharding' on our server-side when it starts to get too big. We already support multiple rooms/areas.)

    Each character can customize each slot (e.g. leftArm, head, shield, foot, etc.) with two-color tint, which the players do, to differentiate between each other (we also have different images.) There are roughly 25 slots per character. Currently, we don't do mesh deform, so 25 slots = 25 quads. However, we are considering doing mesh deform and that would probably change it to something 50-75+ quads (dividing up certain quads to have more points so mesh deform will look more appropriate to the design.)

    So, we would hope that at least it could be batched per character.

    (As an aside, in the current implementation using webGL, we render to C3 texture all the instances of a particular Spine object together using the spine-ts WebGL renderer, they are each rendering to a different dynamic texture though.)

    In general, customization is a key part of the game and the two-color tint is a big part of that customization.

    Here's a sample screen, it's just one case, we also have mass battles and team battles, CTF, etc. too, but this shows some of the variety of characters and colors.

    In our case, we would only need 'new' features for the webGPU renderer as we already have something working for webGL.

    As you work on the new renderer, I hope you consider these possibilities for flexibility of future development, allowing vertex attributes, different shaders, and also the possibility of access to multiple textures in a shader (for example we are using that with the current spine WebGL renderer to do palette colors, with a grayscale main texture and a separate palette texture, other uses could be for bump, normal, specular maps.)

    Thanks for the discussion Ashley.

  • Ashley - any thoughts on the above?

  • NIce work, going to check it out!

  • github.com/Scirra/Construct-3-bugs/issues/5139

    Ah! Here it is. Thanks to the user for the good due diligence to post the issue and thanks to Ashley for fixing it.

  • Thanks for the reference, looks like a ~100 USD phone. Which I would consider the lower end for NA market, but it's all relative, worldwide as you say might be mid-market.

    Yes, changing the animation rate, can save a lot of CPU perf per frame for 3D Object. For performance testing, if you will also have other moving objects like Sprites, check what the performance is like when all objects are animating how you expect. The more C3 draws, the more we need to draw the 3D Object also.

    I have also added an optimization that reduces animation CPU perf when the object is off-screen (the object is also not drawn when off-screen already.)

  • The feature is widely used. In our game, it’s one of the draws for the game, highly customizable characters (our game is a MMO brawler, C3 client Colyseus server). It’s also a key part of our monetization (purchasing dyes to color different parts of the player skins). We also use the Spine skins feature for further customization.

    Each character is made of many quads to allow for lots of customization and players tend to color different part of the characters differently, so if an effect was used, we would need to change the FS uniforms and that would break the batching.

    Perhaps our solution will be to stay with the webgl version of C3 (our favorite game engine). Will that be an option for a while? Similar to how we can still choose to enable worker mode or not?

    I am definitely open to other ideas on this, so if there are alternatives for implementation I am willing to put in the hard work, porting shaders as needed or learning webGPU or using new feature of the new C3 renderer, etc.

  • Is there a plug-in option you can expose for the color ACEs and color property for plug-ins (which uses the built-in color uniform in the default FS?) For example what Sprite and 3D Shape have available?

  • Yes rotating is similar to animation, whenever you change a lot of points of a complex model, the CPU must do a lot of calculations. When you say changing speed, do mean mean animation rate or something else?

    What mobile are you testing on? Mobile model and year? I am trying to gauge the performance of the platform. On my iPhone 12 the perf is good, but obviously higher end mobile.

  • It applies the above fragment shader, it’s applied uniformly across the image. So it’s not depending on uv position. It only depends on the texture color and the color and color2 which are passed into VS and then to the FS. Each Spine object cab be made of 100 to 1000 quads (actually triangles) when enabling mesh deform. So batching is important. The color data is passed into vertex buffer, so FS uniforms don’t change.

  • Ok, understood. As WebGPU comes online with C3, I'll focus on seeing if we can change Spine plugin to work directly with the IWebGLRenderer, good to know it will be forward-compatible with WebGPU.

    Using the IWebGLRenderer, one of the issues I will need to resolve is that in Spine, each Quad can be two color-tinted differently (normal color and dark color). This allows the different attachments in Spine to be colored according to gameplay or user choice dynamically.

    To keep WebGL draw batching efficient, in the Spine WebGL renderer these tint colors are passed as vertex colors to the fragment shader ('varying'), instead of doing different fragment uniforms which would break batching.

    I am not sure how to approach that with IWebGLRenderer as it is currently defined. Any ideas?

    Here's the shader used in the Spine WebGL renderer: 

    			let vs = `
				attribute vec4 ${Shader.POSITION};
				attribute vec4 ${Shader.COLOR};
				attribute vec4 ${Shader.COLOR2};
				attribute vec2 ${Shader.TEXCOORDS};
				uniform mat4 ${Shader.MVP_MATRIX};
				varying vec4 v_light;
				varying vec4 v_dark;
				varying vec2 v_texCoords;
				void main () {
					v_light = ${Shader.COLOR};
					v_dark = ${Shader.COLOR2};
					v_texCoords = ${Shader.TEXCOORDS};
					gl_Position = ${Shader.MVP_MATRIX} * ${Shader.POSITION};
				}
			`;

			let fs = `
				#ifdef GL_ES
					#define LOWP lowp
					precision mediump float;
				#else
					#define LOWP
				#endif
				varying LOWP vec4 v_light;
				varying LOWP vec4 v_dark;
				varying vec2 v_texCoords;
				uniform sampler2D u_texture;
				void main () {
					vec4 texColor = texture2D(u_texture, v_texCoords);
					gl_FragColor.a = texColor.a * v_light.a;
					gl_FragColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;
				}
			`;

  • Ok, thanks, good to know, if I see the issue myself, I'll file a bug report.

  • Thanks Ashley for the response, yes I was not concerned about whether Draw() was called or not, I was thinking more about the processing I was doing for animation (I want some of it to continue, but not all the detailed processing, if it's not being rendered / on screen.)

    I will take a look at implementing a check if Draw() has been called in the last few ticks (probably a simple shift register like array pushed by Draw() and popped by Tick() )

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I think this requested SDK method is similar to the Common ACE Is on-screen - which looks to work for both 3D and 2D.