It's not rocket science
In my previous post, I showed an example of a tile map in a viewport, but didn’t go into the details of explaining how the map was generated or loaded. In this post, we’re going to have a look at that.
The map file itself was created using an open source application called Tiled. It’s a neat application, and definitely beats writing out tile maps by hand. If you’re planning to do much work with tile maps, it’s worth checking out.
While I was tweaking the pathfinder from last time, the view started to look a bit cramped – the canvas had to show all the available information, regardless of scale or size. This got me thinking about viewports.
I’ve recently been playing with CoffeeScript, a neat little language that compiles to JavaScript. It’s a lot more concise than plain old javascript and can be organised much more tightly, so I’m really having a blast with it. That said, its conventions are a bit different to what I’m used to working with, so more bit of practice is in order.
One of the practice scripts I wrote is a very basic 2d pathfinder, hooked up to an html5 canvas element. The original idea was to get a good feel for the CoffeeScript syntax and then write a bit about it, but a screenshot of the finder on Facebook generated a bit of curiosity among some friends, so this post will be about the pathfinding algorithm instead; the CoffeeScript post will just have to wait a bit longer.
Every so often I like to revisit old projects of mine and refactor them a little, either using some new ideas I learnt in the meantime, or trying out some new technique or framework on familiar ground. This time, I’m going over a wordpress theme I made a couple of years ago and using Compass to organize the style sheets. Converting the existing style sheet (circa 8k uncompressed) to SCSS didn’t take long – only a few minutes by hand – and there are tools which you can use to automate the conversion, so it left me plenty of time to explore more Sass features which make style sheet management much easier. Today we’re going to look at command directives and a few basic spriting helpers. Continue reading “Easy CSS Management and Spriting With Sass and Compass”