CreateJS + Super Slot Cars = fun times!

Today we are excited to welcome Matthew Hopson founder of fortheinter.net as a guest blogger. He’ll be sharing his experiences and explain how with the help of the CreateJS framework he was able to develop his first Windows 8 game: Super Slot Cars.

I love video games. I play them every day, on both my computer and my game console. I’ll play nearly any game, from story-rich adventures to detailed strategy games. Gaming is even how I learned to develop websites, by developing a website for an online gaming clan I had formed with a group of friends.

fortheinter-logo

Upon leaving school, I started my own business – Fortheinter.net – and began developing websites for a living. Focusing on PHP, MySQL and of course, Javascript I developed a number of custom websites for clients, ranging from blogs with special features to massive social event management systems. It hasn’t made me a millionaire, but I’ve always enjoyed developing something new. The “Holy Grail” for me though, was always going to be to develop games.

I’d attempted it with PHP and Javascript, but found them too rigid. I later tried developing a game with C# and XNA, but quickly lost motivation when it began to progress beyond a basic concept and I had to start working on the menus and game state management. Things that were so simple using web technologies were suddenly so complicated.

Late last year I upgraded to Windows 8 and had soon found myself a new game. By chance I checked the credits and to my amazement saw several Javascript libraries listed, including CreateJS. So I decided to have another crack at creating a game, a game which quickly evolved into Super Slot Cars.

Super Slot Cars

Super Slot Cars

It didn’t take me long to choose CreateJS for Super Slot Cars. I never choose to use libraries easily as I usually prefer to write something myself, but CreateJS was one that quickly struck me as a no-brainer. Nearly every tutorial I came across recommended it , it appeared extremely well documented and to someone with zero experience of new HTML5 features such as canvas and audio, it instantly began to make sense.

One thing I decided from the offset was that I wanted to generate the tracks from some basic coordinates. Using a series of coordinates and rotations, with CreateJS I quickly had a track layout created. With some calculations I was able to create parallel lines across the width of the track for the slots and the trackside walls, and with a bit more effort generated the curbs in the same way. Although many of these calculations were quite complex, one thing I never had to worry about was drawing them to the canvas. It was so easy to add shapes, I ended up littering the canvas with thousands of shapes when debugging the generated coordinates!

screen1

Perhaps the one part of the game that concerned me the most going into it though was sound. I had never used sound on a website (so annoying) and I’d never got to that stage in a game before. I kept putting it off, working on other elements of the game, until I eventually had no choice but to tackle it. To be frank, I shouldn’t have worried as CreateJS again made things so easy. It really was as simple as adding a few lines to each relevant item and I had music playing, slot car sounds that varied with speed and even squeaky buttons!

debug

My game has been released for nearly a week now on the Windows Store, and CreateJS continues to be a great choice. I read this morning that some users were having difficulty with poor performance so I began to have a think. It ran fine on my computer natively and while Visual Studio 2012’s simulator performed poorly I had put it down to it being a simulator. I quickly realised my mistake. While I had already been caching the generated track, wall and curb shapes, I had neglected to consider the impact of up to 100 bitmaps on performance. In the space of an hour everything was all fixed, thanks to CreateJS’ caching and nesting features. By grouping all of the bitmaps together and caching them using CreateJS, the game was soon performing just as well in the simulator as it was natively.

screen5

For me, Super Slot Cars simply wouldn’t have been possible to make without CreateJS. It not only made many aspects of development considerably easier than they would be normally, but it finally inspired and enabled me to do what I always wanted to do – create a game.

(Note: The patch to improve performance is in certification as of 20th March and should be made available in a few days.)

Twitter: @matt_fti

Matthew Hopson

Matthew Hopson

Matthew Hopson Founder | fortheinter.net
Matthew is a website developer, avid gamer and now game creator. Prior to creating Super Slot Cars, he spent eight years developing frameworks, content management systems and websites using a variety of web technologies such as PHP and Javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>