Game Dev Movement cheatsheet with examples

aka My Cheat Sheet of Helpful Code

I created a blog post way back title Game Snippets I Always Forget. I put it up basically as a dumping ground for random game related bits of code I found myself looking up over.. and over. A few of them are a bit cryptic but that’s mostly due to me quickly logging in and pasting before Id forget. While now I have (most) memorized I figured I would revisit the article and add some examples that may help others out. The following are examples dealing with movement, angles, and directions.

Read More

Working on a new JS game

I’ve been furloughed from my job (government contractor) so I’ve had a bit of free time on my hands the last 2 weeks. I decided to start and hopefully in a reasonable amount of time finish a full fledged html5/canvas game.

The name of the game is Grapple Hero, check out a few of the wip screenshots.

levelselect

grapple herograsstiles

menu progress

If anyone has played my old js1k entry  you’ll recognize the game play immediately. Your character cannot move any way but using his grapple. Once your grapple makes a connection you are shot up into the air where you need to grapple again or you’ll fall (sometimes to your death). I created a website for the game  where you can play the most current demo build, which involves you trying to escape from lava.

I plan on releasing it on Windows, Linux, as a standalone executable, on Android via cacoonjs, on the Google app store, and Desura (hopefully).

Its also been added to IndieDB check it out 🙂

Grapple Hero Windows, Linux, Web, Mobile, Android, MetroTab game

Creating a canvas platformer tutorial part two

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!

Read More

Creating a canvas platformer tutorial part one

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

Read More

Retroships.com

retroship

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.

Read More

My sons first game Dark Slayer

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.

Read More

Turning canvas games into executables


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!

JEST another HTML5 Game Framework

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.

HTML5 Canvas Flood Fill

Messing around in JS today (surprising eh?) making an HTML5 vs of rampart-ish. The more I do the less it becomes like rampart. Today I decied to tackle the flood fill portion which is a major part of the gameplay.

Here is the workhorse function

function floodFill(mapData, x, y, oldVal, newVal){
    var mapWidth = mapData.length,
        mapHeight = mapData[0].length;

        if(oldVal == null){
            oldVal=mapData[x][y];
        }

        if(mapData[x][y] !== oldVal){
            return true;
        }

    mapData[x][y] = newVal;

    if (x > 0){
        floodFill(mapData, x-1, y, oldVal, newVal);
    }

    if(y > 0){
        floodFill(mapData, x, y-1, oldVal, newVal);
    }

    if(x < mapWidth-1){
        floodFill(mapData, x+1, y, oldVal, newVal);
    }

    if(y < mapHeight-1){
        floodFill(mapData, x, y+1, oldVal, newVal);
    }
}

Which is called by doing this

floodFill(map, 3,3,null,2);

map refers to a 2 dimensional array which contains the data, in my case, 0 or 1. The second 2 parameters are the x and y of where to start on the map, null is the initial value to start with, and 2 is the change value parameter, which tells the function to change any tile with the value 0, to 2.

The function is pretty straightforward it recursively checks each points north/south/east/west neighbor until it encounters a neighbors whos value is not 0. Try the code for yourself. I have portions commented out that generate a larger random map to fill for testing purposes. Anything beyond 256×256 has issues within chrome due to stack size restrictions.

Below is the result of the function.

And here is a link to some great information on recursive floodfilling