Example code not working for "Creating a Basic Kiwi.js Game"

[danalexilewis]

Hey so I was walking through the tutorial and was struggling to get the character and jungle assets to be viewable. So I decided to run the example code and see how that worked - and it didn't work and throws an undefined error in kiwi.js.

I am running the kiwi.js file downloaded from the main site today and am serving it locally using npm http-server

here is a pic of my console

[BenjaminDRichards]

@DonLewi Thanks for the inquiry! I've taken a quick stab at reproducing the issue. I'm loading kiwi-examples-master/tutorials/website_examples/creating_basic_kiwi_game/index.htm, and I've replaced kiwi-examples-master/lib/kiwi.js (which is 1.3.0 in the current repo) with the 1.4.0 version from the website.

So in Firefox, it works. But in Chrome, it doesn't, with what appears to be the same error.

Now, the repo adds a couple of things to the instructions in the tutorial. I don't have to run a deep analysis to guess at what's happening. There's a very clever "preload" function going on, which is intended to display logos and loading screens while the other game assets are loaded in. Unfortunately, this is a very light scene and doesn't require any such thing. More unfortunately, the clever bits are quite fragile.

Basically, KiwiJS in the default WebGL render mode will load images onto the graphics card at the beginning of a State. The repo version of the scene wants to add things to the scene before that "library refresh". Unfortunately, the entities lose track of their former textures during the refresh, and things fall down.

There are several ways to fix this. The quickest is to use Canvas rendering instead of WebGL. To do this, change the very first line in gettingStarted.js from:

var myGame = new Kiwi.Game();

to:

var myGame = new Kiwi.Game( null, null, null, { renderer: Kiwi.RENDERER_CANVAS } );

The hardest fix is to figure out why the library is crashing at all, and only on some browsers. I've made an issue to follow up on this at some point in the future.

The middle fix is to strip out all the loading stuff. Take gettingStarted.js, and change it so it opens like this:

var myGame = new Kiwi.Game( null, null, null, { renderer: Kiwi.RENDERER_CANVAS } );

var myState = new Kiwi.State( "myState" );


myState.preload = function() {

    Kiwi.State.prototype.preload.call(this);

    // Assets to load
    this.addSpriteSheet( "characterSprite", "character.png", 150, 117 );
    this.addImage( "background", "jungle.png" );

};

(We remove mention of extra states, and load files in the single preload.)

Then remove everything after // Loading assets down to the end of the file, and replace it with this:

myGame.states.addState( myState );

myGame.states.switchState( "myState" );

(We remove all the references to the extra states.)

I should take the time to update the repo, but I'm away from my work machines, so it may have to wait a little while. Leaving the issue open for that followup.

Hope this helps!

[danalexilewis]

Great explanation - very interesting. I will work with the workaround and see what's what. ++ for great support.