Wow, so its been a while since I’ve posted anything. I’ve been kind of busy, and was forcing myself not to post anything unless it was going to be part two of the tutorial. With that said lets begin! For all the code and fully working demo scroll to the bottom.
Last we left off we had a pretty complete demo where we could run and jump around the screen. Now we are going to add some objects that the player can actually collide into!
I’ve seen a few questions on Stackoverflow lately dealing with how to smoothly move an object around on the canvas. This will be the first part, of my first ever attempted tutorial series. So please bear with me as I can sometimes be very confusing (to myself included) when trying to convey any topics dealing with development.
What we will be making
Went a little crazy with a friend of mines bookmarklet he made that would randomly change the colors of all elements on a page.
I decided to create a small project this weekend, using node, and nodejitsu.com. The concept was really simple, to generate a 2d ship that could be used in games, or any programs really. The project turned out pretty well check out http://retroships.com/. The ships are generated via node-canvas, and displayed to the user. The stars are done with standard client side canvas. Im sure Ill be creating a few more micro sites like this, and possibly a full on app for procedural graphic generation at some point.
So I have been really into wave sims lately. It all started with an excellent tutorial posted here. I tried my hand at a JS one first using canvas which turned out pretty awesome.
My son Jacob decided to learn how to program. He followed the great tutorial from Lost Decade Games, and added his own flare to it. He added enemies that shoot, player health, and the game can also end. So proud of him for making it. I helped with a few small things, but the majority was done by him. His brother Gavin also helped with art along with their sister Gabi.
This is something I’ve been looking to do for the longest time. The closest I ever got was using Adobe Air. I didn’t like that solution though because it left all of your assets out in the open. Recently a friend reminded me about QT something I haven’t touched in a few years. After looking over some of their webkit examples I realized I could load in embedded resources.. making self contained canvas games.
I tested out my theory using the Fancy Browser sample, and just modifying it to load an embedded html, which include all the code for the game.
So far it works great. I need to do some more tests, such as finding out what dependencies the executable requires, and also what kind of performance I get (QT5 will include V8). This is still pretty cool in my opinion, just another way to monetize HTML5 games :)…. or even… HTML5 screen savers!
I’ve been coming up with small games and demos using canvas for a couple of years now, and over that time I’ve created a framework for doing so. You can see examples in some of my earlier blog posts such as the SOPA game, and the SHMUP thats been in development for a while. Today I decided to pretty some of it up a bit and post it on github. Minified it comes in at only 31k, and provides quite a bit of functionality (I am biased though).
Here is a link to the github repo and the first of many demo’s Ill be posting.