Site Chooser

Blog posts from September 2012

Playing With Canvas


So, last week I had a little time on my hands to play around with JavaScript and Canvas. This is all part of my long term goal to make a nice little Squage-based platform game in my spare time.

So far, I’ll be honest, I’ve not quite got there – heck the example below doesn’t even work in IE (but, well… y’know…), however it runs fine in Firefox, Chrome, Safari, Dolphin etc and is quite fun if you’re bored for a minute or two, and like pressing Space a lot:

No, it doesn’t increase speed. No, it doesn’t recall high scores. No, there’s literally zero reason for it to be a horse on a roller coaster track.

Yes, it’s just a test. 🙂 It’s given me a chance to play with image warping (using canvas’ drawImage function to draw slices of the coaster track image at differing heights along a particular section), parallax scrolling / looping backgrounds, basic animation and simple user interaction. Plus it features a comedic looking horse on a roller coaster track!

Following this, I’ve created a free scrolling 2D environment, which follows a “character” that you control, with basic collision detection / slowing up slopes / speeding down slopes etc… yes, the Squage game is coming… although it’s looking like this at the moment:

There, um, is a way to go yet.



Posted on Thu 27 Sep in Creative,Fun,Game with Comments (2)

Oppa Is Hangman Style!


Every once in a while a song comes into your life that you cannot help having on repeatedly and simply don’t tire of. Sometimes there’s an accompanying video that’s good enough to keep watching at the same time. Sometimes there’s a dance that consists of pretending to ride a horse(!).

Sometimes all three of those things occur.

Rarely, admittedly.

But yes, if you’ve not yet experienced the Internet sensation that is “Gangman Style” then you’re in for a treat:

It’s an example of K-Pop (short, I’m assuming, for Korean Pop) by the very, very funny South Korean rapper “PSY”, and is a light micky-taking of the wealthy Gangman district in South Korea (where PSY does not originate). I challenge you not to want to watch it more than once.

Hangman Style!

“Surely you’re not just posting a pop video on your arty designy blog, are you Pat?”

Well, no. Following a few days of watching the video a la Clockwork Orange, I thought of what can only be described as a terrible pun to use on a T-Shirt:

Oppa is Hangman Style!

Buy the T-Shirt Here!

Go on, you know you want to.

Byeee 🙂


Posted on Tue 11 Sep in Creative,Fun,T-Shirts with No Comments

Animating a Walk Cycle!


It’s late on Saturday night (in fact, technically, it’s Sunday) and I’m totally wasted, just back from a crazy night out with my friends in Brighton town! It’s rather impressive that I’m even able to type coherently after the huge quantity of alcohol I’ve had tonight. You’d be forgiven for thinking I’ve been at home all evening, sober as a judge.

You’d be forgiven for thinking that primarily because you’d be right:

Tonight I’ve stayed in on my computer.

Rock and also roll.

What I’ve been up to is actually quite fun though: I’ve been animating things! I had a look at the simple-yet-elegant example of a walk cycle on Idleworm’s Animation Tutorial, and decided to finally fulfil my ambition to animate this cute little guy I drew in a meeting at work many years ago:

Cute Guy

Referencing the images on the tutorial, I used my tablet and Adobe Illustrator to draw each of the 8 frames of the walk cycle on separate layers, then imported them into Flash / split them apart over a timeline.

I was very pleased in that it pretty much worked straight away! So, I went on to neaten the drawings (adding colour and shading), then… then it got a bit out of hand. I added three layers of background, added some music, added some… well, you’ll see!

Illustrator: Utter chaos and over 40 layers of madness…

Flash: Relative peace and calm…

The music is the brilliant Only Ten Left Re-Edit of Underworld – Caliban’s Dream.

Hope you enjoyed 🙂


Posted on Sun 02 Sep in Animation,Creative,Fun with Comments (2)