Triptych

(Starting Note: I received a review copy so that I would be able to check out the book)

When I was young and just starting out with learning to program, there were a series of books on programming in Basic that really inspired me. I didn’t really know what I was doing but I learned by painstakingly typing in all the the code and watching it work (or more likely, not due to some typo).

And I’ve often wondered if there would be books like that for the new generation of young game developers – given that the world has changed so much since I was young, and you can build Team Fortress now in your browser with WebGL or create the next Angry Birds and have it show up on your mobile device just a few days after creating it.

This book by Mario Andres Pagella however gives me hope that we can bring a new generation of developers into game development, using web technologies such as Canvas and utilizing existing social networks like Facebook. The book assumes you have some level of knowledge of the web, and of technologies such as javascript, CSS, and HTML, but even if you’ve just had a passing knowledge you can follow along pretty well and skip over the examples as you go.

What really excited me is the code listings. I know other reviewers have dinged the book for having such extensive listings, but in all honesty I am glad they are there. I learn not so much by having a bunch of api calls and a few suggestions of how they work, but instead I want to see concrete examples, and this book does a great job of spelling out HTML, CSS, and JS code that you can use to build  your own isometric games.

The author takes us first through the basics of CANVAS and sprite animation – even covering more recent things like requestAnimationFrame which is essential for smooth animation on the web. We then learn about the unique challenges around making your graphics “isometric” and I think this is at the core of why you’d get this book. So many web game books will give you basic 2d tile based games, or platformers, but building a game like Farmville is beyond their descriptions or examples.

We then get tips on building a user interface for our game, and learn about all the issues around audio for the web (come on W3C let’s get this working!) And beyond this you’ll be exposed to browser technologies like localStorage and how they can be useful for your game development.  We even get a brief intro to putting your work up on social networking sites like Facebook – although I’d have wished for more extensive coverage of that – especially about using the Graph API, but that may have been a bit beyond the scope of this book – which is about helping you make web-based isometric games. And in that goal I think the book succeeds handily.

Would I recommend you getting this book? Well, if you are a web game developer dabbling in the world of Isometric games, I’d say a definite yes. I’d even recommend this book for non-web game developers who want to see how they might learn to port their existing ISO games over to the web.  It’s not a long book, and ou could probably finish it in one casual sitting if you skip through the code listings. However I believe you’d be missing some of the charm of this in my opinion – especially as this harkens back to the days of learning to code by looking at other’s sourcecode. I encourage you to go to the github repository and fork it for yourself and kick the tires on the code. It’s not every day you can get a great basic framework for making that next Farmville – style game that could earn you a bit of extra money via Facebook.

So, go check it out and see for yourself. It has my two thumbs up.

Imagine if you are including some content from some third party site, or creating an overlay on an existing page and you did not want the page’s CSS and JS to effect your injected content. You can use Caridy’s Injection Engine to dynamically create an iframe, inject CSS, linked CSS, linked JS, as well as custom JS into that frame. You can even set up the HTML contents of the iframe before it is created.

Here’s an example:

With a little imagination you could envision all kinds of interesting uses for this – including bookmarklets, widgets, and other interesting things!
Caridy is working on a second component of this called the Bootstrap Engine which allows you to freely communicate between the inner iframe and the outer one, but it doesn’t seem ready for the Gallery yet.

I’m still around, and kicking. I’m learning a lot about Y.Base and how it’ll change YOUR life as well.

I have a few links for you to check out.

First off – a demo and links to the new YUI MVC page framework:

Demo: http://jsfiddle.net/triptych/w26dA/

Docs: http://dl.dropbox.com/u/131998/yui/docs/app/index.html

Specs: http://dl.dropbox.com/u/131998/yui/api/modules/app.html

—–

A new iframe injection engine for YUI via the gallery http://yuilibrary.com/gallery/show/injection-engine

As you begin to build interactive web applications, you will undoubtedly want to experiment with Drag and Drop. No js library worth its salt would overlook this, but YUI really makes this easy to do and easy to extend to your needs. You can take some time to go dig around in YUI’s documentation which will serve you very well, but if you just want to see how this might work, here’s a simple example for you:

Basically we have two divs – #dragme and #dropme. We include “dd-drag” and “dd-drop” in the use statement to pick up the drag-and-drop functionality. This goes without saying that you need to include YUI:

Note we also can listen in on what’s going on with these drag and drop elements – they emit all kinds of interesting information (see the docs) as you move your drag element around and move it over the drop element. For this demo I simply added two event listeners – one for when the drag element is over the drop element (making the div turn yellow) and when you actually drop your element in the right place (making the drop div turn orange).

As I said, there’s a lot of things going on behind the scenes, and you can do all kinds of great tricks with drag and drop from YUI – including things like constraining the element’s field of movement, and having a drag “shim” – meaning a semi-transparent element that “stands in” for the real one so that the browser does not slow to a crawl when you try to drag some complex component around.

The way drag and drop is implemented in YUI really show’s off the power of the library. You can even dynamically make something “draggable” by just using a “plugin” – which is a snippet of reusable YUI code that enhances whatever node it is attached to.

I’m finally getting around to updating my YUI page (look up there on the toolbar next to Unity and Contact). I hope to get all my related articles in there and also add great YUI links from around the web as well. If you know of a great article on YUI please let me know in the comments and I’ll add it (with credits).