Intro To Math For Game Development

Intro To Math For Game Development

At last weekend’s NY Game Makers Meetup I covered 10 simple math examples that are critical in any game. These example range from handling layout to simple collision detection. While I am no expert at math, I have learned and collected the following examples over the years as I built up a library of reusable code that can be easily ported to different programming languages. To make demonstrating these examples easier to run, I wrote them all in JavaScript, posted them to JSFiddle so you can see them in action and also play around with each one on your own. While math in gaming may seem intimidating, especially if you are like me and come from an art background, I hope you will find the following examples easy to use and useful in your next game. Let’s get started. Layout Laying out objects on the screen is critical for any type of program. Here are 3 basic layout algorithms that will help you such as centering a pop up window on the screen, laying out elements in a HUD and even making a grid for a level selection screen. Centering Centering one object inside of another is relatively easy. Here we have two boxes, one red and the other yellow. In the following example we will center the yellow box inside the red box. There are a few different ways to do this but the simplest is the following formula: center = (width1 – width2) / 2 If you are looking to center something horizontally you would use the first and second object’s width and assign the center value...
Intro To Programming For Games With JavaScript

Intro To Programming For Games With JavaScript

I have been running my Game Development workshops in NYC now for a little over 3 months and one of the most common problems I run into are people who have never coded before or have coded and are interested in getting into game development. So last weekend I figured I would take a step back and start with a blank slate to teach people the fundamentals of game programming. The lesson was a great success and I wanted to capture it here on my blog to help ease the fears of others learning how to program their first game. For this lesson I chose to use JavaScript. It is easy to create something with JavaScript right in the browser, there are lots of resources on how to build JavaScript games and finally JavaScript requires no tools outside of a simple text editor to write. I highly suggest using a resource such as Code Academy’s online JavaScript course to get you started. I designed this to be a cheat sheet of sorts for those still learning JavaScript and want to start making HTML5 games. With that in mind, these examples all revolve around use cases you would find in games and are designed to help you think about how this code is applicable to game development. Variables The first thing you will ever hear in programming is that “a variable is a container”. We use variables to store data. In JavaScript we use var to denote a variable. Here is an example: var playerName = "Jesse Freeman"; There are 3 basic types of “primitive” variables: Strings – this is...
Porting Heroine Dusk to Windows Phone 8

Porting Heroine Dusk to
Windows Phone 8

Earlier in the week I posted an in depth walkthrough of how I ported an HTML5 game called Heroine Dusk by Clint Bellanger to Windows 8 in less than 10 minutes. I used NodeJS and Grunt to create an automated workflow that allowed me to work in Visual Studio to test out the Windows 8 build but also generate a deploy folder for the web. Shortly after doing this I realized I should give it a try with Windows Phone 8 since there is a rudimentary HTML5 app templates that comes with the Windows Phone 8 SDK. I’ve talked about it a little before and since I had a general” idea that it was possible I decided to give it a try. This process took me all of 5 minute to do and I immediately had a playable version of Heroine Dusk without any code changes running on WP8. Here is how I did it. First you are going to need to have the Windows Phone SDK installed in Visual Studio or simply download Visual Studio Express for Windows Phone. From there search for the Windows Phone HTML5 template and create a new project: Now you will need to copy over the contents of the deploy/web directory from my previous tutorial into the Html folder in the WP project. Don’t worry about overriding the files that already exist in there. Make sure these files are included in your project and it should look something like this: Now if you run the project you will get the emulator but you won’t see the game. That is because there is a...
Porting Heroine Dusk To Windows 8 in 10 Minutes

Porting Heroine Dusk To
Windows 8 in 10 Minutes

Last week I read about this great HTML5 game called Heroine Dusk by Clint Bellanger which was featured on Two things go my attention, first I am seeing more and more HTML5 games get featured on and also this game was a perfect candidate to see how quickly I could get it up and running on Windows 8. I’ve talked a lot about the great opportunity the Windows Store offers HTML5 game developers to monetize their games so after contacting Clint he sent me a link to the source code on GitHub and I got to work. The entire process took less than 10 minute and I documented it here for others to check out. In addition to showing how I got it up and running in Visual Studio I also was able to add some of the Grunt workflow stuff I have been talking about lately which allowed me to keep both a Windows 8 and Web build in sync which is key for anyone looking to get the most out of their investment HTML5 game’s code base. To get started you are going to want to get a copy of Heroine Dusk’s source code on GitHub here. From there, simply open up Visual Studio Express and create a new Window 8 JavaScript project. Now that we have a Windows 8 project, go to where you downloaded Heroine Dusk’s source code and copy over all the contents of the release folder to your Visual Studio project. I learned a little trick and you can actually just copy files from the explorer and paste them into your...
Phaser Project Template

Phaser Project Template

The other week I wrote an introduction to Phaser and I wanted to follow up with a short walk through on how to get a project up and running with Phaser, TypeScript, NodeJS and Grunt. I have talked about a similar workflow in the past as well but figured I should come up with a basic Phaser Project Template to help get others started. Here are some instructions on how to use it. You can download the Phaser Project Template from my Github repo here. What is the Phaser Project Template? This is a simple project template I created to help add a structure to your next Phaser game. It includes the following things: A package.json for installing npm dependencies GruntFile.js for automating build tasks and compiling your game src folder where you can put your game code. Deploy folder where all code gets compiled to and you can push to a server To get started all you need to do is download a copy of this template, the latest version of Phaser and make sure you have NodeJS and Grunt installed. Installing NodeJS and Grunt You can get a copy of NodeJS on its site here and install it. After installing it you will want to install grunt from the command line. If you have installed Grunt in the past you may want to remove it first: > npm uninstall -g grunt Now you can install Grunt’s command line tools by typing out the following: > npm install -g grunt-cli From here, Grunt should work via the command line. If you want to learn more about how all...
Automating TypeScript with Node And Grunt

Automating TypeScript with
Node And Grunt

Over the past week I have been playing around with NodeJS trying to figure out how to help make my own workflow more productive. Coming from a Flash and Java background I have been using Ant for years to automate builds of my projects and after switching over to HTML5 dev I find Ant not only overkill but a pain to set up, especially on Windows. So last week while I started doing some code experiments in TypeScript I decided to also dig into NodeJS and finally set up Grunt. Here is little background on how I got everything setup. Most people consider NodeJS only a server side technology but it actually is incredibly useful when running locally. It’s easy to setup, simply go to and download the installer for your OS. Once you install NodeJS you will be able start setting up a project workflow. There are a few automation tools out there but I ended up settling on one called Grunt. Grunt is basically the NodeJS equivalent of Ant and for the most part actually better in many ways. In order to install Grunt or any other NodeJS modules you need to do a few things on the command line. So open that up. To install NodeJS modules we will be using a utility that comes with the NodeJS install called NPM. This command line based app will go out and fetch modules for you and install them globally or in your project. To get started simply type the flowing to make sure NPM is correctly installed: > npm This will run you through all the...

Subscribe To My Mailing List

Want to learn how to make a game? Not sure where to start? Even if you are a seasoned game maker there is still a lot you can learn from my mailing list. I'll be covering tips and tricks for how to build, release and market games each month.

Simply sign up for my mailing list and also get access to a 50% off discount code for my eBooks and other content. I promise to not spam your inbox!

Join Now