In the first part of this series we set the stage by putting together our framework and then getting a simple background on screen. This article will add our rendering loop to the code and let us actually get some bubbles out there.
Read More →
“Bubbles” canvas tutorial part 2: Getting animated
“Bubbles” canvas tutorial part 1: Getting started
When I started this little project I had only a vague idea of how it would look and even less of an idea how it would be written or structured. As it turned out I just slapped down a quick gradient background, came up with a simple Bubble class and set a timer to move the bubbles up the screen. That gave me a basic core to work from, but as I started to tweak and add I realised just how messy it was, even for a simple project like this.
So this tutorial is going to ignore all my mistakes and lead you gently to the finished version with something resembling logical sense. This entry in particular will focus on giving us a basic framework to work within, and go as far as putting a background on screen. Part 2 will introduce the render loop and actual animation.
Read More →
“Bubbles” canvas tutorial: Introduction
After my early forays into canvas and Javascript I commented on Twitter how good it felt to be learning something new, something that felt like it opened up a whole new toolbox to me and the attendant possibilities.
The main upshot of this is that I finally have the tools at my disposal to make the game I’ve been promising my two-year-old son for a while now. This project is ongoing but “functionally usable” now. It hit a few bumps along the road so I’m writing this series of articles to describe the development of the game, the problems I encountered and how I overcame them.
Read More →
Game music: Megaman 5
With Mighty No. 9 around the corner I got to thinking about Megaman. And the music to the Mighty No. 9 trailer likewise got me thinking about Megaman’s music.
Read More →
A whole bunch of HTML 5
The last animation I posted was just a work in progress, halfway to something a little more complex. As promised, here’s the fruits of that work. I’ve put together a page of my little collection of animations.
Mostly this was an excuse to put up another of my HTML5 logos with the stolen XKCD people.
More fun with the HTML5 canvas
Oh go on then. Here’s another canvas animation. It’s pretty simplistic but so far it’s just a work in progress of something more fun. And after that, some thoughts on what comes next on a technical level.
Read More →
First steps in HTML 5 – Getting to grips with the canvas
Today I discovered r/loadingicon and promptly spent an unwise amount of my precious free time staring mesmerised at the screen. When I finally snapped out of it I finally resolved to actually sit down and learn how to use the HTML5 canvas element. I’m not claiming to have the arty chops of the people posting those icons, but it seemed like a really fun way of getting into the spirit of things.
And you know what? Basic canvas drawing with Javascript is easy. Really, really easy. An hour later I had something I’m going to call halfway fun to sit and stare at.
Read More →
Crouching Lemming Hidden Background
More CSS experimentation with the site. Hover over the menu bar up there. Go on, I’ll wait. Whee, Lemming!
The image is a simple animated GIF I put together after a quick Googling. Initially I just wanted to stick the Lemming somewhere unobtrusive on the page, but after a bit of experimenting there’s really nowhere you can put it that doesn’t get a bit distracting and annoying – there’s a reason always-on, auto-playing animations mostly died with Geocities. So I opted to stick it on the menu bar and only appear on mouse over. In itself that’s easy enough – add a “:hover” selector to the menu element and it’s done. But it looks a bit jarring just flicking on and off as you move the mouse around the page so I started looking into having it fade in and out. Since I’ve no idea how to mess with the actual code of a WordPress site or theme it had to be a CSS-only solution.
At first it wasn’t looking hopeful, since it really is the kind of thing people automatically go to Javascript for and with good reason. But eventually I unearthed the fact that Chrome supports transitions on background images. Woo! I did get tripped up by the fact that if you aren’t fading from another image (and one the same size at that) it not only fades but resizes as well. Easy fix, just use another image as the default non-hover background and fade from that.
The code is all below the cut.
My little Oni, Part 2: So, we meet again
Having been distracted suddenly by Child of Light and then by Dark Souls I wasn’t sure if I was going to carry on playing Oni. It’s fun, but so is Child of Light. I know, I thought, I’ll have another session and see how I feel after. So I played the next mission, and you know what? I still don’t know.
Read More →
Game music: Titanfall
I’ve never played Titanfall and since it’s multiplayer-only the odds of me ever playing are effectively zero, anti-social misanthrope that I am. Still, that’s no barrier to enjoying the music.
Read More →