Posted by & filed under Random.

Minnie Mouse Coloring Book

Got to drop into dad mode for a bit…

I found the watercolor book on the right while Christmas shopping last month. Watercolors are one of those go-to activities for the kids, but it’s always a bit of a process to get everything out and cleaned up afterwards. These books have the watercolor paint spread right onto each page so you don’t need a separate set of paints. And it’s perforated so you can pull the paint off afterwards to keep the masterpieces.

We didn’t buy them online, but looks like Amazon has a bunch of different versions of watercolor books like this. Wish I had known a long time ago.

Posted by & filed under Coding.

Getting enemies to move tends to be one of the more difficult things for me to get right. It just doesn’t always seem natural. And I’m not talking about moving with any type of AI. Just moving around the screen in a pattern.

Sure, straight lines are pretty easy. But games get really boring if all the enemies just go from right to left or left to right.

For this post we’re going to explore moving an enemy through a series of waypoints using ActionScript 3. I’m going to create a movie clip symbol in Flash named Enemy_mc.

## Let’s see it

Doesn’t do much good to explain with words. This is what we’re going to create.

One minor difference. I set this demo up to loop so the enemy goes back to its starting position and sets its current waypoint back to 0 when it gets to the last one. The real deal will remove the enemy from the stage.

Posted by & filed under Coding.

It’s a pretty common task to get the distance between 2 points. Maybe you’re wanting to see if two points are close enough to have collided. Maybe you’re making a golf game and the closer the ball is to the hole the higher the score. Either way, you need to know the distance.

## The Math

The math for this is related to the Pythagorean Theorem. You know, or can find, the differences between two x values and two y values. What you’re looking for is the hypotenuse of the right triangle formed by those legs.

Here’s the formula. We’ll talk in a bit.

$\Huge \mbox{distance} = \sqrt{(x_2 – x_1)^2 + (y_2 – y_1)^2}$

This should look a lot like the formula Pythagorean Theorem, because it is. Distance is C, the difference between x1 and x2 is A, and the difference between y1 and y2 is B.

Everywhere I’ve seen this formula it’s always listed as x2 – x1 and y2 – y1. It really doesn’t matter though. Because you’re squaring the difference, it will always be a positive number so you don’t need to worry about which number is bigger.

## In Code

In the examples below we’re going to use helper variables just to keep it a bit cleaner.

#### ActionScript

var dX:int = x2 - x1;
var dY:int = y2 - y1;
var distance:Number = Math.sqrt(dX * dX + dY * dY);

ActionScript also has a Point class that does the math for you.

import flash.geom.Point;
var p1:Point = new Point(0, 0);
var p2:Point = new Point(100, 100);
var dist:Number = Point.distance(p1, p2);

#### Java

int dX = x2 - x1;
int dY = y2 - y1;
double distance = Math.sqrt(dX * dX + dY * dY);

And like ActionScript, Java also has a Point class.

import java.awt.Point;
Point p1 = new Point(0, 0);
Point p2 = new Point(100, 100);
double distance = p1.distance(p2); 

The Java class also has a few more methods that will let you get the distance from a point to a specific X, Y value without creating a new Point reference and can get the distance squared as well if you need that.

#### Python

dX = x2 - x1
dY = y2 - y1
distance = math.sqrt(dX * dX + dY * dY)

## Other languages?

Pretty much any language that has a function to get the square root of a number will be able to get the distance between two points. Looking at the 3 languages listed above, the formula is the same for all 3. It’s just the commands that differ a bit.

Posted by & filed under Coding.

There are two ways to measure angles.

You probably learned to measure angles in degrees early in school. A circle has 360 degrees, a perfect corner is a 90 degree angle, and 180 degrees forms a straight line.

1 radian is when the radius is equal to the arc created

But then you took trigonometry or pre-calculus and were introduced to a radian. A radian does the same thing as a degree. It’s a way to measure an angle. But instead of going 0 to 360 like degrees, radians go from 0 to $2 \pi$.

The image to the right, sourced from Wikipedia, shows that 1 radian is the angle created when the ratio between the radius and arc along the circle is 1.

What happens with most people is that a degree makes more sense than a radian because degree was learned first. Similar idea to going between imperial and metric measurements. If you grew up in the US, measuring in inches probably makes more sense than centimeters. Can’t speak for everybody, but I have the same vibe measuring in centimeters and radians compared to inches and degrees.

## Why?

The catch is that much of what we need to do with angles involves trigonometry, and trig uses radians. So we can work in radians, but there will also be times when we have to convert back and forth between radians and degrees.

## Formulas

The conversion formulas to go from radians to degrees or degrees to radians are inverses of each other.

$\LARGE \mbox{radians} = \mbox{degrees} \times \frac {\pi}{180}$

$\LARGE \mbox{degrees} = \mbox{radians} \times \frac{180}{\pi}$

## With Code

Since you can’t type $\pi$ into your IDE, you’ll need to use something else. For most cases, using an approximation of $\pi$ like 3.1415 is probably close enough.

Most languages do have a constant for $\pi$. For Java and ActionScript it’s Math.PI. Python uses math.pi.

So in ActionScript, we could use the following two conversions.

radians = degrees * Math.PI / 180;
degrees = radians * 180 / Math.PI;

Posted by & filed under Coding.

At first glance the Pythagorean Theorem doesn’t appear to relate to game development. But we’ll see in a bit that it does.

First though, let’s cover a bit of math. The Pythagorean Theorem states that for any right triangle, the sum of the squares of the two legs is equal to the square of the hypotenuse.

Don’t know about you, but pictures always help me. So let’s take a look at the triangle below.

Right triangle with sides a, b, and c

Assuming that the angle between a and b is 90 degrees, the formula to find c, or the hypotenuse, is.

$c^{2} = a^{2} + b^{2}$

or

$c = \sqrt{a^{2} + b^{2}}$

The triangle above is a special case called a 3-4-5 triangle. It’s sides measure 3, 4, and 5. 3-4-5 is called a Pythagorean triple which is a when the 3 sides of a right triangle are integers.

Here is our triangle again, this time with some numbers.

A 3-4-5 Right Triangle

Same triangle, scaled down a bit so you can see the squares on the outside.

In the example a=3, b=4, and c=5.

\begin{align}c^2 &= a^2 + b^2\\ 5^2 &= 3^2 + 4^2\\ 25 &= 9 + 16\\ 25 &= 25\end{align}

Between the a and b sides there are 25 squares (9 + 16) and there are also 25 squares on the c side.

## Ok, so what about games?

Let’s say you’re making a pong game in ActionScript. How boring would it be if you could only move the ball horizontally or vertically? Not much of a game. You’d either put both paddles in the middle and watch the ball bounce back and forth or do nothing as the ball bounces up and down in the middle.

What you need is a way to make the ball move diagonally, but you can only change the x and y values. Take a look at the following code.

ball.y += 5;
ball.x += 12;

How far does the ball move diagonally?

It’s moving 5 pixels vertically and 12 pixels horizontally. But since they’re happening at the same time it’s moving diagonally. Let’s use the Pythagorean Theorem to figure out how far it’s moving each frame.

Side a is 5, side b is 12.

\begin{align}c &= \sqrt {a^2 + b^2}\\ &= \sqrt{5^2 + 12^2}\\&= \sqrt{25 + 144}\\&= \sqrt {169}\\ c &= 13\end{align}

So our ball is moving 13 pixels diagonally each time. 5-12-13 is another Pythagorean Triple.

## Now what?

Real world, you’ll probably be doing it the other way around. You know the speed you want the ball to move, the hypotenuse,  and have to figure out the x and y deltas. That takes a bit of trigonometry though and this post is getting long enough.

Posted by & filed under Coding.

Creating the next great side scroller? Well, you’ll need a scrolling background. And if you’re programming in Java, here’s an easy way to do it.

## Quick Demo

Here’s a little demo of what we’re going to create. What’s happening is that there are two copies of the same image scrolling from the right to left. As one copy gets all the way off the left edge it leapfrogs back over to the right side. Normally they’d be the same, but it makes more sense on the demo for the two copies to be different colors.

The black box is the screen. Everything to the right or left of the box is happening off screen.

Click to start and click to stop.

Posted by & filed under Coding.

This is a follow up to an earlier post where we created a scrolling background in Flash using ActionScript. This time we’re going to do the same thing, but using Python and Pygame.

Posted by & filed under Coding.

Take a look at your favorite game. Odds are good that there is a scrolling background of some type. Think Super Mario Brothers.

Mario is a bit different than what we’re after though. The background in Mario is a single graphic that scrolls as Mario moves through the world. What we want is a scrolling background that loops forever. We’re going to scroll horizontally like a platform jumping game, but the same concept works vertically.

Posted by & filed under Coding.

Thanks to Pygame, there’s a quick and easy method to get the dimensions of an image. You just have to load it into a Surface and use the Surface methods get_height() and get_width().

import pygame

print "Width = " + img.get_width()
print "Height = " + img.get_height()