HTML5 Runner Tutorial missing frog

Hello, all! Very new to the engine, Lua, and Defold community. I just finished the runner tutorial and got it all working up to the last section( it’s a great starter! ). I was happy with the result for windows, but I’m afraid to say that for some reason my “runner(frog)” isn’t showing on the HTML5 build. I can’t say exactly why, but maybe it’s because of spine2d? But if that were the case I’m confused as to why the html5 demo for the runner has the frog and mine does not.

1 Like

I noticed that same issue too when testing on mobile. At first I thought it was something to do with the images atlas not being powers of 8 but Defold saves atlases in powers of 8 by default and I tested another larger spine animation with its atlas created at 1024 by 512 which worked perfectly on mobile and HTML5.

1 Like

My guess is that the frog is behind the background image. The render order is not guaranteed if two components have the same z-value, and the render order could differ between platforms. Please double check the z-value of the background and frog game object and their sprite and spine components and check that their cumulative z-values aren’t the same.

1 Like

Right now there is no background image - just black. But I checked what changing the spine models Z position (-,+) and also what changing the z position of the hero.gameobject would do. Turns out as soon as I change it to anything besides 0 the frog becomes invisible. Not sure what’s going on!

Forgot to mention this is about the windows export. But the same also seems to go for the HTML5 version too.

The default render script has a range of -1 to 1. Anything outside of that range will not be rendered. Z-value can be fractional values. Remember that the game object z-value and any component z-value adds to a total z-value of the component. Example:

game object (x: 100, y: 100, z: 0.5) 
  |
  +--sprite (x: 10, y: 10, z: 1.0)

In the above example with a game object at 100, 100, 0.5 containing a sprite component at 10, 10, 1.0 the sprite will have a world transform of 110, 110, 1.5. With the default render script this sprite would not be rendered since it’s z-value is 1.5 and thus outside the default range of -1.0 to 1.0.

1 Like

Also keep in mind that the editor doesn’t take into account the near and far-z values in the render script so even though something is visible in the editor it doesn’t mean that it will be automatically visible in the running game with the render script dictating what to show and what to hide.

So I’ve put your advice to the test and it seems that setting it to 1 doesn’t affect how it displays on windows, and it’s still not rendering the frog on HTML5. I’m at a loss, but still your input about z-ordering was something I wasn’t aware of yet - so thank you!

Ok, hmm, a couple of more things to test:

  • Is it working when you do Project->Build but not when you do Project->Bundle?
  • Open game.project and check Physics->Debug. This will draw all physics shapes. Do you see the shape assigned to the frog?
  • Create a new collection named foo.collection. Add the frog/hero as a game object to that collection. Set the foo.collection as bootstrap collection. Now we have eliminated everything besides the frog. Do you see it now?
  • Feel free to join our Slack channel for quicker turn-around on the support.
  • Share the project with me (bjorn.ritzl@king.com)

Ok, after digging around and discussing on Slack I found that the hero.go had its skin set to default in the drop down. This was not a problem on OSX, but when building for HTML5 it caused the frog to not render. Removing the skin selection so that the dropdown was empty made the frog visible. This is obviously a bug and needs to be sorted out by the editor and/or engine team.

1 Like
2 Likes