Site Chooser

Creative JS!

Helloooo!

What a couple of days. I’ve been absorbing more about JavaScript and HTML5 than a code sponge living on the great data carrier reef *.

By which I mean: I’ve learned a lot. And made some COOL things!

For I’ve just finished a 2 day training course named Creative JS. Run by the excellent Seb Lee-Delisle, he showed the group of us how to make a huge range of cool things within a web browser and some pretty awesome techniques in order to do so. It was a practical course, so we were coding and testing as we went – being taught whilst developing is definitely the way to go.

I’ve learned loads, from HTML canvas tricks and tips through 3D and vector techniques to some funky trig.

I’m going to be using what I’ve learned to transfer my Flash-based games into HTML5, meaning I’ll be able to have them played on everyone’s favourite restricted mobile operating system (no, not Symbian. The other one.)!

Without further ado, to give you an idea of some of the bits we were making, below are are a couple of examples. Both are based on code we developed during the course (and using some handy libraries created by Seb and built upon by yours truly):

Swirly Particle Thing!

A moving, bouncing, colour-changing and exploding Catherine wheel type thing – I thought I’d make something that brought back memories of Windows screensavers from the mid 00’s. I don’t quite know why. 🙂

swirly

Asteroids!

A nice and simple Asteroids game, with funky particle-based explosions. Up = Thrusters, Left/Right = Rotate, Space = Fire bullets.

asteroids

Cool, huh?

(I hope to God those didn’t just set your browser on fire)

Pat

* I tried to think of something that sounded techie and also a bit like “Great Barrier Reef”. This was the result. The summary? I shouldn’t blog when I’m tired.

Posted on Wed 19 Dec in Animation,Coding,Creative,Education,Game with Comments (2)

Sssh! Aliens!

[Whispered] Hi, thanks for popping over… now, as you know, we’ve got to keep it down because… oh no, HE’S RIGHT ABOVE US!

What on Earth am I talking about? Well, the second week’s homework for the awesome Adobe Animation Course I’m doing:

To explain: we were given the challenge of building on a brief animation we’d been taught to do, featuring a UFO shape motion-tweening towards the planet Earth.

I decided to expand on the tweening techniques, add a bit of humour to it and add some Scullion-Cartoon-Stylings to the UFO. It took just over 2 hours, and despite it not being the most amazing thing in the world, I’m pretty happy with it.

Hope you like it too!

More animations to come as I continue to learn extra bits. Oh and as an aside, I decided to animate Squage walking blomping on and off screen:

Yet another step in the “Squage Computer Game” prep, which is being helped by the continued work on the Adobe Game Design course I’m also on.

Fun times!

Pat

Posted on Tue 16 Oct in Animation,Creative,Fun with Comments (2)

Online Games and Animation Courses

Imagine a Dingbats card, featuring the following:

D
R
O
W

Well, that’s my greeting to you today. I thought I’d counter any “attempt to be cool” through the use of a Dingbats device to convey it.

This week I’ve started a couple of online courses, courtesy of Adobe Generation.

How They Work

They’re 10 week long courses, primarily focusing of a weekly 1 hour interactive online lecture that comes complete with guest speakers, live chat room, on-screen tutorials and more. Alongside this are various resources such as weekly lecture notes and an online forum to share ideas and ask questions. It’s really very good!

You have weekly assignments, so it keeps you engaged in it – and the great thing with it being online is that if you miss a couple of weeks you can catch up (both using the resources and also a recording of the interactive lecture) easily.

These are largely introductions to the principles of each subject, but they seem to be going into enough detail to get one off and running.

Oh and the best thing? It’s completely free. Boom.

Games Design

As you’re probably aware, I’m working on making a Squage-based platform game in my spare time, so when this course appeared I jumped at the chance to get on it. We’ll be making a Flash-based (yeah, I know) simple platform game (oh, hello!), and learning about the many aspects of how to make a great computer game.

I’ve no examples to show you yet, other than a static screen with some rectangles on, so I’ll perhaps leave showcasing my work ’til a future week.

Animation

This is something I used to love doing when I was a kid, but for some reason I just drifted away from it over the years. Well, recently I’ve remembered how much I enjoy it (see the walk cycle animation post for more on that!).

So again, this course has come at the right time. In our first week we were taught about making a very simple stick man wander on screen, and learned about the term “boiling” to describe that Rhubarb and Custard / Salad Fingers effect of “shaky lined objects” in an animation.

Our assignment was to make our own “stick man walking on screen” animation, and to add our own little extra to it. So… I decided to do this:

Right, back to scaring myself with old Salad Fingers episodes…

Pat

Posted on Thu 04 Oct in Animation,Creative,Fun with Comments (2)

Animating a Walk Cycle!

Helloooo!

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 🙂

Pat

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

Punbelievable: The Fallen Tree

So, I found some software to convert SWF files to video format.

You’ll probably wish I hadn’t:

Sorry 🙂

Pat

Posted on Thu 02 Feb in Animation,Creative with No Comments

Browse

Follow