Archive | February, 2013

GameDevelopersWeb.com Merger

I recently decided to merge my other blog, gamedevelopersweb.com, with my personal one. I was tired of having to manage both separately, and I feel like my other interests (biology, web development, learning) could have an overlap with game development.

For those interested, in order not to lose my SEO ranking for gamedevelopersweb.com, I followed these steps:

  1. I exported all the posts/comments/categories from GameDevelopersWeb.com and imported into a local installation of WordPress
  2. I reworked the categories and adjusted the theme to fit my personal website blog
  3. I exported them from my local installation into MichelCarroll.com
  4. Quickly after, I added a .htaccess 301 rule for each page and article on GameDevelopersWeb.com, including the root domain
  5. I logged into Google Webmaster Tools, and advised them that the domain name change had been made

I’ve yet to see the results of this, so I hope the domain change will go seamlessly.

HTML5 Tower Defense Game using EaselJS – Part 2 – Path to Castle

In the last post, we initiated the project, drafted how the game’s overall look & feel, and drew a red circle as proof that EaselJS is working. In this part, we’re going to render the path to the castle.

The Path to the Castle – Concept

First, let’s give ourselves an idea of what the path is going to need to be, so that we’re better prepared to code it.

Conceptually, here’s what its role is in the game:

  • A logical set of way-points for the orcs to follow in order to reach the castle
  • A logical separation between the orcs and the archers
  • A visual path, so that the player knows where it begins and where it ends

Let’s try to keep the code as simple as possible, so that we don’t get tangled in our own logic. In my opinion, the simplest way to represent a path here is as a set of way-points. Here’s an illustration of what I mean:

The big dots represents coordinate points, which we’re going to represent logically as an array of points. The dotted lines mean that the points are connected sequentially in our game logic to form a linear path.

In order to have a nice background, and to not have to worry about rendering a castle later on, let’s use a static image background in which to display the game on. We need to keep in mind the size of the image when creating/using a background image, because shrinking/growing it might distort the image. I’m going to make my image 640 x 480, which will also be the size of my game stage.

Using my master programmer artistic abilities, I present to you with my map:


(if you find it too embarrassing, feel free to make/use your own)

Notice how I tried my best to keep the width of the path constant, so that we have an easier time mapping the way-points with the image later on.

It’s now time to get down to the code.

The Path to the Castle – Coding

First of all, lets move the image file into our project, and render the map to our browser.

Let’s create a new folder inside the root of our project called images, in which we’ll move map.jpg to:

Then, lets modify our existing code a bit to render the map using an Image class and a Bitmap EaselJS object. An Image object is equivalent to an img HTML tag; Javascript uses it to link to images. The Bitmap object is part of the EaselJS namespace; it’s responsible for knowing what to display and where to display it on the stage:

loadGame = function() {
	var canvas = document.getElementById('main');
	stage = new Stage(canvas);

	var mapImg = new Image();
	mapImg.src = "images/map.jpg";

	var mapBitmap = new Bitmap(mapImg);
	mapBitmap.regX = 0;
	mapBitmap.regY = 0;

	stage.addChild(mapBitmap);
	stage.update();
};


After refreshing, you should now see the map render on your browser.

Now, using an image editor, I’ve determined where our path coordinate points are going to be . Essentially, using the pixel coordinates (x,y), I took note of where each node is situated. Here they are, in Javascript list form:

var coordinates = [
	[200, 0],
	[177, 127],
	[289, 152],
	[480, 100],
	[566, 131],
	[575, 250],
	[362, 262],
	[78, 310],
	[80, 394],
	[288, 400]
];


Using this list, and a simple looping function, lets render lines where the path is going to be, so that we can validate that the waypoints are accurate. Here, I’m creating a line for each pair of coordinates. Each line is a separate shape that needs to be added separately to the stage in order to render correctly.

Think of the Graphics object as the computer’s pen. Here’s what I’m doing step by step:

  1. I change the thickness (setStrokeStyle) of the pen to 1
  2. I move the pen to a new location (point 1), without actually drawing (moveTo)
  3. I put my pen down, and give it a red color (beginStroke)
  4. I draw all the way to point 2 (lineTo)
  5. I commit the Shape to the stage (addChild) before drawing a new one

var g = new Graphics();

for(var i = 1; i < coordinates.length; i++)
{
	var s = new Shape(g);
	s.x = 0;
	s.y = 0;

	var point1 = coordinates[i-1];
	var point2 = coordinates[i];

	s.graphics
		.setStrokeStyle(1)
		.moveTo(point1[0], point1[1])
		.beginStroke(Graphics.getRGB(255,0,0))
		.lineTo(point2[0], point2[1]);

	stage.addChild(s);
}

stage.update();


I put this logic right after the code that renders the map, so that the lines appear on top of the map, and not under.

Here’s what should be the results:

Success! Our coordinates are very accurate!

Conclusion

Now we’re ready drawing orcs, and make them follow the path. This is going to be the next part. Until then, feel free to try it out on your own using what you know so far.

Here’s the source code of my project at this point: Source Code

Latin Roots – The “Pro”s of Learning Them

So I found Memrise a few weeks ago, a website that facilitates memorization. They have a plethora of existing “flash card” sets, ranging from memorizing the numbers of Pi to memorizing the names of trees. Their web application actually makes it very fun and interactive tool.

Among the existing sets is Latin Prefixes & Roots. Since I’ll be studying biology next term at school, I figure learning  Latin prefixes will give me an edge. Rather than memorizing all those terms, it might help me better understand where they come from instead. Good deal.

 

Command-Based Architecture using Comet

Here’s a picture I found in my archives from last year. It’s a rough sketch of how a game developer might use comet to make a command-based architecture for a multi-player browser game.

I mocked this up while I was getting my hands dirty in NodeJS. If I had to do something similar now, I would probably go with Socket.IO.

Command-Based Architecture using Comet

Command-Based Architecture using Comet