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

Simple 2d Terrain With Midpoint Displacement

Codepen terrain

Screenshot from scrolling terrain and shooting stars demo on codepen.io

In a few of my demos I’ve used 2d terrain. I love the effect and its really easy to do especially in 2d. The algorithm I use most is Diamond Square also known as Midpoint Displacement. What’s great about the algorithm besides its easy of use is that it can be used for simple 2d terrain as well as with 3d terrain. For now I will just be talking about generating 2d terrain, in a future article I will discuss how to use the same algorithm to make create height maps that can be used in turn to create 3d terrain.

Read More

Burn Away Effect Explanation

This explanation doesn’t show any code more of just an overview of how to achieve a simple but cool looking effect.

I’ve seen variations this effect used in different places, one of the more recent examples I can think of is the loading screens from Red Orchestra 2. RO2’s effect definitely uses a different method than mine but it gave me an idea to try something similar. I ended up with a similiar effect using pixel manipulation, and a tiny bit of Cellular Automaton.

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

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