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()

Posted by & filed under Coding.

Some games, I’m thinking tower defense, need to give the player the ability to drag symbols around. But you don’t always want to give the player free reign to drag it anywhere. Maybe you want them to only be able to position symbols in a grid. That’s what we’ll create here using ActionScript 3.

## Demo

This is what we’re going to be creating.  Try dragging the green square. It will snap so that it’s always in one of the grid squares.

Posted by & filed under Coding.

Earlier this week I Googled for how to find the dimensions of an image using Java, and most of the solutions were way more complicated than they needed to be. Most of what I came across was code that opened the image and parsed through the binary code to get the dimensions.

Yes, there’s an easier way.

The BufferedImage class has a couple built in methods that will get the dimensions without much trouble at all thanks to the getHeight and getWidth methods.

import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;

public class ImageSize {
public static void main(String[] args) {

BufferedImage img = ImageIO.read(new File("filename.jpg"));

System.out.println("Width = " + img.getWidth());
System.out.println("Height = " + img.getHeight());

}
}

Posted by & filed under Coding.

Want to create a random color in Java? With a bit of math, plus Math.random(), it’s pretty easy.

## A bit about colors

Colors on the computer are made up of a red, green, blue triplet; typically called RGB. And each of the 3 pieces can be in the range from 0 to 255. Java also allows us to create a color using floats for the values in the range of 0.0 to 1.0, or from 0% to 100% of that color. We’re going to use the floats.

As an example, pure red will have an R value of 1.0, a G value of 0.0, and a B value of 0.0.

So we know what numbers we need, but we want ’em random. Read more »

Posted by & filed under Computers & Internet.

Came across a handy little tip this afternoon.

I’ve only recently put images into my signature in Outlook and noticed that most of the time the images weren’t included in replies. Turns out when someone sends a message in plain text Outlook defaults to replying in plain text.

It’s easy enough to change the format to HTML, but the plain text version of the signature was sticking.

The tip I came across today was that, once you switch the format to HTML, you can just right click on the plain text version of the signature and pick the right one.

Posted by & filed under Coding.

Wish I had found this years ago…

Screenshot of the Test Mail Server program

Up until about a week ago my normal process for testing PHP code that sends email was to run sendmail through WAMP and send to my email address. I’m thinking about the amount of time I could have saved had I found this plugin when I first started.

The Test Mail Server Tool runs on your computer and listens on port 25 for outgoing emails, just like sendmail would. Difference is that instead of sending the email out it just saves it to a folder on your computer.

So with your PHP sending out mail messages on port 25 Test Mail Server picks it up, dumps the entire message into a mail file, and optionally opens it up for you. On my notebook they’ll open up in Thunderbird and look almost like a standard email. Only flaw I’ve come across is that images don’t show, and Thunderbird doesn’t give the normal option of viewing images. Could be that the images are coming off of localhost though. Haven’t tried it pulling images from anywhere else.