Excellent stuff Shri, thanks for doing this. It's really good to see some useful stuff explained clearly and in just a few lines. I like how you just showed the really interesting part of the code in the blog, and chose to explain the boilerplate stuff with comments in code instead.

The fact that you do everything with scripts (using wade just as a js framework rather than using the editor), gives your articles a completely different perspective from the ones in our blog, and that's great.

However I wanted to say I had an issue in your Water Wave Effect post - it wouldn't render the water because of this error:

wade.drawFunctions.gradientFill_ is not available in webgl mode

I think it would be very easy to fix by explicitly setting the layer to '2d' mode. You must have some combination of graphics card + drivers + OS that makes you default to '2d', but for most people the default is 'webgl'.

Having said that though, a better fix could be to call Sprite.cache() after setting the draw function for the sprite. Sprite.cache() essentially uses whatever draw function you have, in '2d 'mode, to draw the Sprite to an off-screen image. From that point on, the Sprite is drawn using that off-screen image rather than using its previous draw function, and should work regardless of whether the renderer is set to 2d or webgl. It should also be faster this way, gradientFill takes a bit of time to draw.

Other than that it all seems to be working very well.

Also I think your website looks way better now with the new design. Keep it up!

Gio,

Thanks for the feedback. I added cSprite.cache() in createWaterColumns() and pushed all the files up to the website. If you get a chance to give it a quick go, I would appreciate it. It works on my machine, but it did before too, so that isn't a good check.

cheers - shri

Shri, please make "font-weight:400" for text elements in blog - it be more readable text

Hey Shri

That didn't quite work - it is entirely my fault for not explaining the Sprite.cache thing clearly in my post above. When you call Sprite.cache() for a Sprite that is on a webgl layer, the sprite will be drawn to an off-screen image using the webgl renderer (because it may have shaders, etc). To be sure that it's drawn using the 2d renderer, it must be (even just temporarily) on a 2d layer.

I have attached a version of your js file with my fix. Basically here's what I did:

1. Set the background layer to '2d'. With this being just a static picture that doesn't change, '2d' is going to be better anyway as it uses fewer resources than webgl.

2. Initially create the water columns on the background layer, and call Sprite.cache()

3. Move the sprites to the game layer

Looks good and is faster than one would expect with all those column sprites :)

Gio,

Thanks for the detailed correction. I have pushed the revision to the site, it should work as advertised I hope.If you can tear yourself away from coding wade 4.0 and check, I would appreciate it.

Krumza - do you mean the inline code segments, or all the text on the site ?

cheers - shri

Shri, i mean all text 

new post on the site, "Lava Bezier Curve" - cheers

new post on the site, "Dynamic Pathing" - cheers

new post on the site, "Steering 2 Wander" - cheers

Shri, may be you try http://caza.la/synaptic/#/ - or another library for neural networks - result will be funny

new post on the site, "Battle Circle" - cheers

@ krumza - the link you suggested looks interesting. I have to do some homework about neural networks first, so this will probably be something in the future - thanks

new post on the site "Time Rewind" - cheers

I just wanted to say that these posts have helped me understand wade.js better, so thank you.

Now a newbie question: if I want to use the editor in the browser, can I still do these same things? Or do I have to download wade and use it with something like notepad++?

Hi cleo

You can download wade to use it with an external IDE, so you can use it just as a traditional javascript framework. But you can do the same things using the wysiwyg online editor if you like. Start a new project then edit the files and add new files like Shri says in his blog posts, just follow what he says. No need for Notepad++ or any other external tools really.

Shri's blog is more about doing everything in code, for example writing new SceneObject(new Sprite(...)) rather than dragging and dropping things in the editor to create a scene. You can do either, whichever works better for you.

You can also mix-and-match, so you can follow Shri's instructions for creating scripts, but replace the object creation and positioning code with a scene built with the editor.

By the way Shri, great job with your blog! I think Batlte Circle is my favourite so far, but they're all good.

new post on the site, "Message Queue" - cheers

@cleo - I'm glad the posts could help you out.