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.

new post on the site, "Steering 3 Pursue and Evade" - cheers

new post on the site, "Elemental Wars - part 1" - cheers

new post on the site. "Elemental Wars - part 2" - cheers

shri, in both parts "elemental wars" i see this:

i think it about webgl

and also,  can you make direct link to your blog posts here? it be very helpful i think

krumza,

Thanks for the feedback. I have an older machine, so I don't usually force webgl. When I did though, I saw what you are talking about.

For some reason, this bit of code in the wade.init() function was causing a bunch of webgl errors ?

if (wade.getContainerHeight() <= 768) {
			console.log('setting mobile layer resolutions');
			wade.setLayerResolutionFactor(wade.app.SCENE_LAYER,0.75);
			wade.setLayerResolutionFactor(wade.app.UI_LAYER,0.75);
			wade.setLayerResolutionFactor(wade.app.GAME_LAYER,0.75);
			wade.setLayerResolutionFactor(wade.app.BACKGROUND_LAYER,0.75);
		 }
		 else {
			wade.setLayerResolutionFactor(wade.app.SCENE_LAYER,0.75);
			wade.setLayerResolutionFactor(wade.app.BACKGROUND_LAYER,0.75);
		 }

Anyway, I removed that code and it seems to be running ok. I have pushed the updated code and the updated zip files to my website. I checked it and it works as advertised. Let me know if you have any other problems.

I sent Gio a couple of emails regarding placing some link or something from my blog to this site but received no reply.

cheers - Shri

Hey Shri

I have received no emails from you regarding that. It's ok to link to pages of your site directly, but also feel free to send me a private message here - not sure what happened to your emails, maybe they were caught in some spam filter? Anyway, PM will work.

If you add a link to each individual page when you post here, with the link text saying something significant (e.g. "How to handle a message queue" rather than "new post"), that helps Google know what your page is about and you get better search rankings.

Also, I have absolutely no idea why changing resolution factors on WebGl layers would cause that. I'll have a closer look, there must be a wade bug in there somewhere.

Elemental Wars Part 3 - new post - cheers

Elemental Wars part 4 - new post - cheers

Elemental Wars part 5 - new post - cheers

I liked the Elemental Wars series. Nice to see a complete game explained from start to finish. I've been using Wade for a long time now, but I still learned a couple of things from that.

Steering - Follow the Leader - new post - cheers

sorry, double post

Steering – Obstacles (collision avoidance) - new post - cheers

Thank Shri, it great job!

what i found:

- I found that members of team go out the map tile  if leader walking near borders 

- i think that blocking move when (click) fire not usual for this type of game - may be made it non-blocking-move-fire?

krumza,

I'm glad you liked it.

Yes, the team members are not boundary checked, only the leader is. The move fire is a choice. The tutorial I was basing it on stops motion when firing.

Keep in mind, the posts on my blog are examples of how to do things in wade, not polished/released code. Feel free to take the base code and modify it in whatever way you want. The changes you suggest would be pretty easy to do .If you can't figure something out, post a question here or on my blog and I will be happy to try and answer.

cheers - Shri

Steering + finite state machine (FSM) - new post - cheers

That last post of yours is great! I hope you don't mind if I use it as a starting point for my next game :)

Cleo,

That is the exact point of the blog, so I'm glad you can use it. The only caveat is that the graphics assets are not mine to give, they belong to these guys. If you get stuck on something, drop a line here or on my blog and I will try to help if I can.

cheers - Shri

WALA - Wade Audio Library Adapter - new post - cheers

Great job with the audio stuff in your last post, very useful. I'd like to feature that in the blog on our site if you don't mind me reposting it (with a link to your site)?

As a side note, I have a plan to rewrite the audio interface in Wade at some point in the near(ish) future, as it's really too basic now. WebAudio support is pretty widespread these days, so it's probably time for an overhaul. And in the meantime, yours is a very neat solution!

Gio,

No problem on linking the post,  I plan on upgrading/extending the last post in my next post to make it more complete.

Not sure if revamping the audio stuff in wade is worth it, both howler and buzz are kept fairly up to date and howler looks to have a lot of supporters. Along with those two, there are others like tone and SoundJS that also look interesting.

Maybe you should repeat the box2d idea on this one and punt. - just my two cents

cheers - Shri

updated the demo in the last post (WALA) - hopefully I didn't break anything - cheers

liquid fun with Wade - new post - cheers

last post - so expensive for cpu, i think it may be some optimize.

at first look may be - use for(){} istead while() construction for loops because for(){} most fast method in js

then - use wade.clone instead new SceneObject 

then caching sprites

i think it very important to look deep into  this example for better performance

krumza,

Good ideas, please feel free to make the changes and repost to the forum..

cheers - shri

Hey, I have a suggestion to make.

Well, maybe two suggestions, one for myselft first: implement pagination for the forum threads - this is a very good thread but having over 40 replies on the same page is getting close to unmanageable. I'll see if I can do this quickly.

And one for you Shri: you can now open projects in the wade editor from a remote url, I think this is something that would be nice for your future blog posts. Instead of linking to a zip that people would have to download, extract, then start a local static server, then connect to it... it'd be much easier to give them a link that they can click and the project opens in the wade editor, they can edit code there and click run to test it.

This works even if your project wasn't originally made using the editor - obviously there won't be any scene objects for people to drag and drop around, but they'd be able to edit scripts instantly, and this will increase the chances of people contributing changes to them.

All you have to do to make this work, is add a file called myProject.wade to your project (replace with the actual project name of course). This is a small json file that just lists all the files in the project. Then you can create a link such as this:

http://clockworkchilli.com/wade?rp=urlOfMyProject.wade

For example, this link opens the physics platformer project in the editor

The easiest way to generate the .wade file would be by dragging all your project files into the editor. Then if you click the button at the top to download the srouce code, you'll get a zip that includes all your files + that .wade file.

Oh and another thing - I think the editor expects the main file to be called app.js (for the purpose of running your code in the preview window). The preview window basically uses its own index.html, so if you change your own index.html and called the main app file something else, it won't find it.

Anyway, just a suggestion. I'll try to do the pagination now.

By the way Shri, did you see your private messages? I sent you one some time ago, didn't get a reply.

Gio,

I'm going to be out of town for a couple of weeks, so this will have to wait

I have a couple of questions/ comments though.

1) Would this mean people reading the blog would have r/w access to the files on my website ? Or does the editor copy the files form the remote server locally and not editing the original ?

2) My blog is not a collaborative development environment and I don't really want it to be. If people want to make changes, I would rather they they do it on their own. That is why all the sources are available  If someone has something concrete and suggests improvments that is fine and I'll consider making changes or if I have moved onto a different topic won't.

3) Perhaps a better solution would be to do what you outlined above for the posts you asked to repost on the Wade site ?

The last private message I recveived from you was dated July 3, I responded on July 4 (I think I have the dates correct) I haven't seen anything new since then? Try pm'ing something to me today and I'll make sure to check, or send me an email.

cheers - Shri

Hey Shri

When you open a project in the editor through a link such as that one above, all files are downloaded to the user's local file system. So yeah it's just a copy of your files, no r/w access to the original ones.

I was suggesting that to make it easier for people to open files, look at the code and play with it without having to go through the struggle of downloading, extracting, hosting etc. But it's up to you of course.

Oh and yes, you did reply to my PM - somehow I had missed it, my bad.

Steering - Queue - new post - cheers

Voronoi Diagram 1 - new post - cheers

Voronoi Diagram 2 - new post - cheers

Voronoi Diagram 3 - new post - chers

This Voronoi thing is cool, I think I could use it for procedural terrain generation. However looking at your latest demo, my main problem is that the results are alway a bit same-y. Is there an easy way to get it to generate more diverse results?

Cleo,

The current terrain generator is pretty simple. It only generates one "island", by picking 1 high spot (moutain peak) based on the screen width and height.  If you want to get more variation, you can look at this line, "voronoiBehavior.addIsland(x,y,1,0.996);" The parameters are where to put the peak, what the max height is (always 1, so ignore changing this parameter) and how fast to drop off the height on the next iteration (lower number faster drop off). If you want to play around with those parameters, you should see different results. You could also try calling the function multiple times - like this.

voronoiBehavior.addIsland(0,0,1,0.990);
voronoiBehavior.addIsland(200,200,1,0.995);
voronoiBehavior.fillPolygonByHeight();

This should give you two different peaks, but I can't guarentee the results as I didn't test it this way much The current plan is to continue improving the terrain generator, so you could just wait until it is in better shape.

If you need to do some generation for a project now, follow the links in the blog, they should take you to a couple of completed terrain generators. One even allows you to export the terrain image as tiles (I think).

cheers - Shri

WTG (Wade Terrain Generator) v 0.1 - new post - cheers

WTG (Wade Terrain Generator) v 0.2 - new post - cheers

WTG (Wade Terrain Generator) v 0.3  -  new post  -  cheers

Hello Shri

This doesn't work for me anymore. In the console I see this message repeated many times:

Uncaught TypeError: context.beginPath is not a function

Is it possible you need to set your layers to 2d mode?

Cleo,

I am setting the layer mode to 2d for the geometry and map layers. However, I forgot to set it for the background layer (doh !!!), so that is why you are getting the error. The same error was in all three wtg posts. The app  now simply adds a grey box sprite as the background, so no drawing anymore.

It should be fixed, I pushed all the changes for WTG [1,2,3] to my site and the zip files have also been updated. My apologies.

I just looked at the updated stuff and there seems to be some wierd layer overdrawing going on. I will look into it to see if I can fix it? Maybe a problem with not forcing wade to redraw layers...stay tuned.

So, for some reason you have to set the UI layer to 2d also or else this funny overdraw occurs ? Anyway, I did some limited testing and it seems to be working as advertised. Let me know if there are any other problems. An updated version (WTG 3.5) should be posted soon.

cheers - Shri

WTG (Wade Terrain Generator) v 0.35 -  new post - cheers

WTG (Wade Terrain Generator) v 0.4 - new post

Let me know if anyone finds any problems - cheers

WTG (Wade Terrain Generator) v 0.45 - new post - cheers

HI shri - look at https://en.wikipedia.org/wiki/Four_color_theorem - you can use this for politic map

Let talk about performance - i create map with 23k sprites and get 

[Violation] 'mousedown' handler took 1517ms

i think you must use not 2d but webgl for this

may be use Sprite.drawToTexture(gpuTextureName, cpuTextureName) for this sprites?

Shri if you're all right. please resume the site, there was a lot of unique material

*if that I can offer free space on hosting or vds