Tag: javascript

Posted on

Dates & Formatting in Javascript


Dates and Javascript haven't traditionally been very nice. The
Date object
is the only real API for managing dates and code to deal with it can be extremely verbose.

Parsing dates with Javascript

Parsing dates has traditionally been difficult with the Date object only supporting non-standardised inputs dependent on the browser:

RFC 2822
Sat Apr 12 2014 12:22:00 GMT+1000
Unix timestamp
1397269320000

But with ECMAScript 5 we can also parse ISO 8601 dates, which gives us a little more leeway. From the MDN date docs:

simplified extended ISO format (ISO 8601) is always 24 or 27 characters long
(YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always zero UTC offset, as denoted by the suffix "Z".

To parse a date in plain Javascript, you can now pass a well formed ISO8601 string to the constructor:

var dIso = new Date('2014-04-12T12:22:00.000+10:00');
var dRfc = new Date('Sat Apr 12 2014 12:22:00 GMT+1000');
var dUnix = new Date(1397269320000);

All the above will all return a valid date. Note that the Unix timestamp is in milliseconds. If you're trying to read a Unix timestamp in seconds you may need to multiply it by 1000.

Update: Turns out Safari is a laggard with ISO 8601 dates and like IE8, can't parse them at all. If you need ISO8601 dates on the client, you'll have to resort to either a custom solution or something like moment.js which supports parsing them.

Formatting dates in Javascript

The problem of formatting dates in a particular way in Javascript is difficult. If you wanted to print a basic YYYY-MM-DD timestamp you could do something like the following, but you'd also have to implement logic around padding zeroes and incrementing the zero-based month and the syntax for the most basic notation is horrible. It's no fun.

var d = new Date();
return d.getYear() + '-' + (d.getMonth+1) + '-' + d.getDay();
// 2014-4-12

One of the better libraries for managing dates in Javascript is Moment.js, which brings slick chainable date handling to the browser (or node). The main downfall is that it’s quite heavy, but when you need to be able to manipulate a lot of dates it’s totally worth it.

Our previous example can be condensed into the following:

return moment().format('YYYY-MM-DD');

Moment has some other sweet features, particularly around date parsing and manipulation so you should definitely check it out.

Specific date formats in JS and Moment

While we're at it, here's a cheat sheet of specific date formats you may need to use in JS.

Date Raw JS Moment
RFC 2822 myDate.toUTCString() moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ')
ISO 8601 myDate.toISOString()* moment().toISOString()
Unix Timestamp Number(myDate) moment().valueOf()

Note that the native Date.toISOString method was introduced in ECMAScript 5, so only works in IE 9 and above.

Posted on

Isometric Tile Transforms

It might require a bit of initial thinking, but I'm sure it would be worth it.

I’m debating with myself whether to make my game engine pseudo-3D, using transforms and masks and whatnot to generate and texture isometric tiles.

On one hand there’s something to be said for tile-based systems to have every graphic meticulously crafted by a master designer, but on the other hand, I’m not that designer. It’d be so much easier to slap a grass texture down and transform it to match a programmatic grid. Maybe adjust the brightness to simulate lighting, then cache that sucker to achieve decent performance and move on to the next tile.

I think it’s feasible. It would allow for much easier creation of game elements such as hills and height, walls, roads, and so many more cool things. It’s also a total departure from my original idea of a traditional isometric game engine, but once it’s implemented it would make things way easier for both myself and anyone who wanted to create a map in the future because one high resolution texture could be used for countless tile combinations.

I think I’m going to give it a try, because if nothing else it’s a damn cool idea.

SVG and Canvas Transformation Matricies

Both SVG and HTML5 Canvas have basic transformations such as rotation and scaling, but they also have a more advanced “transformation matrix” mode which lets you do more complex transformations. I’m not pretending to understand it properly.

A transformation matrix has six parameters, named A—F. A lot of the documentation I found on them wasn’t particularly useful, so here’s my take on how each value works:

NameDescriptionDefault ValueExplanation
awidth11 equals 100%. A value of -1 would mirror image the object on the left hand side. .5 would halve the width, and 2 would double it, etc.
bY axis shear0A positive value shears the object downward on the righthand edge.
cX axis shear0A positive value shears the object rightward on the bottom edge.
dheight1Similar in operation to a, above.
ex offset0Offset the object on the x axis.
fy offset0Offset the object on the y axis.

So for instance, if you wanted to create an isometric tile from an image, you could use the following transform:

matrix(1,-.5,1,.5,0,0)

This would keep the same width, shear both axis by 50% effectively rotating the image 45°, and halve the height giving us our iconic half-height isometric tile.

Some other transformations relevant to isometric game tiles might might include:

OperationOutput
matrix(1,0,0,1,0,0)No change.
matrix(1,-.5,1,.5,0,0)Square sheared into half-height isometric tile.
matrix(1,-1,1,.5,0,0)Sheared into a leftwards isometric incline.
matrix(1,1,-1,.5,0,0)Sheared into a rightwards isometric incline.
matrix(1,0,1,.5,0,0)Sheared into a leftwards isometric decline.
matrix(1,0,-1,.5,0,0)Sheared into a rightwards isometric decline.

You’ll notice that the output tiles are significantly larger than would be generated with a straight out rotate and scale. You may need to add an additional scale operation to adjust the size of these tiles to fit your game board.

Putting it Together

Once you put these tiles together, you start to get an idea of how we can use canvas (or SVG) matricies to create isometric tiles for your game.

Using transforms to create game images makes tiles click into place like lego.

If you wanted to play around with transforms with a visual tool, you could check out Inkscape, the best vector editor in the world. The matrix transformation sidebar is found by clicking the menus Object , Transform, then clicking the “Matrix” tab.