wade blog
Shri

All,

I have reworked my website into a blog showing some programming demos in Wade. I plan on posting a new one every week or two.

Go to my website and check it out.

I am willing to consider requests, so if you have something you would like to see demo'd, make a request and I'll see what I can do.

cheers- shri

All 37 Comments
Gio

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!

Shri

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

krumza

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

Gio

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 :)

Shri

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

krumza

Shri, i mean all text 

Shri

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

Shri

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

Shri

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

krumza

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

Shri

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

Shri

new post on the site "Time Rewind" - cheers

cleo

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++?

Gio

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.

Shri

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

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

Shri

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

Shri

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

Shri

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

krumza

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

Shri

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

 

Gio

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.

Shri

Elemental Wars Part 3 - new post - cheers

Shri

Elemental Wars part 4 - new post - cheers

Shri

Elemental Wars part 5 - new post - cheers

cartyman

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.

Shri

Steering - Follow the Leader - new post - cheers

Shri

sorry, double post

Shri

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

krumza

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?

Shri

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

Shri

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

cleo

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 :)

Shri

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

Shri

WALA - Wade Audio Library Adapter - new post - cheers

Gio

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!

Shri

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

Shri

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

Post a reply
Add Attachment
Submit Reply
Login to Reply