« March 2009 | Main | May 2009 »

April 26, 2009

How to Program Online Games

This was my first eHow article and the bastards deleted it! Thus I am sharing it here!

 

This article will take you through the steps necessary to create and deploy a simple Java game that can be played online.
Using the mouse you will move a white dot around a window, while a black dot will be chasing you. If the black dot gets near you, the game is over. The score is displayed and then the game resets.
To create this game we will use Processing, a developing environment that can generate Java applets. Processing is extremely accessible for novice programmers and allows for the quick creation of graphically rich, interactive, applications.

Instructions

Difficulty: Moderate

Things You’ll Need:

  • a Windows, Mac or Linux computer
  • download the free Processing programming software from: http://www.processing.org/
  • a website to host your game if you plan to share it with the world
  • a bit of programming experience, preferably with C or C++
Go to http://www.processing.org and download the version appropriate for your system (Windows, Linux or Mac).Keep in mind that I am writing these instructions from the perspective of a Windows user.
Unpack the zip, dmg or tgz file that you got and launch the executable file that starts the application.
A new "sketch", as Processing calls its source code files, is open.
Click File/Save as and save your sketch with the name you desire.
 
 
Some comments about how processing is set up. First, the syntax is similar to that of C. If you have trouble understanding the general structure of the code presented in this tutorial, pick up any book on C or C++ and just read the introductory chapters.
However, unlike most programming languages you might have worked with before, programs written in Processing are by default real time applications. This is because Processing has been thoughtfully designed to support animations and interactive applications.
Any program has two main parts, as we shall see in the commented code provided in this tutorial:
a "setup" function which initializes the application's canvas, usually setting up parameters such as the size of the application window and the frame rate. The setup function is by default executed when the application is first launched;  program rests;
The programmer needs to write his or her code being mindful that whatever they put in the draw function will get executed again and again.
 
In order for this game to display the score, we first need to create a font. The font is automatically saved in a sub-folder of your sketch's folder, called "data". At run-time the program will know that all of the application's resource's are in the data folder. Processing has a font creation utility. Choose a smallish font like Arial Narrow, type 16 for size and give it the name "size16.vlw"
Now that we are done with preliminaries,let's see the code! Just copy the text in the next three steps into your Processing window, execute and experiment!
The characters "//" mark a comment, that is the text that follows on that same line is not considered by the compiler. Every line of code is commented so make sure you follow through and understand what the  program does.
Don't worry, the code will look much better inside Processing than it does here...
 
 
//first we define our variables, and also initialize
//some of them.
//These are global variables that can be accessed by all
//subroutines in the program
float chaserx, chasery; //these are the coordinates of
//the point that is chasing yours
float i=0.0001; //this is just a multiplication factor,
//we'll see how it comes into play later
float dotx=100; //this is the initial x position of your dot
float doty=100;// and the initial y position of your dot
float dotspeedx=0; //initial x value of your
//dot's speed (stationary)
float dotspeedy=0; //initial y value of your dot's
//speed (stationary for now)
PFont font; // this variable will store the font of
//your messages to the player.
boolean lose; // this two state variable determines
//whether the game is being
//played or the game has been lost. Soon we will
//see it in action.
int losecounter; //in order to display the losing
//message for an certain
//amount of time, we use a counter that ticks down.
int score; //pretty self explanatory
//below is the setup function where we
//initialize the game environment and
//a few other variables. note
//that although variables should. the setup function
//is an internal construct of processing. It is not defined by
//the programmer but it is up to the programmer to insert
//instructions into this function.
//This function does not return a value and does not have
//arguments, hence the "void" and the "()" respectively.
void setup()
{
font=loadFont("size16.vlw"); //the font variable is
//initialized by loading the font we created earlier.
size(200, 200); //here we initialized a window of 200 pixes
//by 200 pixels, where our game will be displayed
smooth(); //this instruction switches antialiasing on
strokeWeight(5); //this instruction sets the width
//of lines drawn with the program to five pixels
frameRate(100); //we set the frame rate to 100, a high value
//that ensures smooth gameplay (but the higher the frame rate,
//the faster things will move in the game)
lose=false; //we initialized the lose state to false
score=0; //and the initial score is zero.
}

//the draw function gets executed continuously,
//in this case 100 times per second because that is
//the value we set with the frameRate() function
//continues in next step...
Step5
//continued
void draw()
{
if (lose!=true) //the block below will implement the game
//engine during normal play, that is when the player has not
//(yet) lost to the ravenous black dot
{
score++; //score is incremented every iteration of
//the draw function.
background (226);//this sets the background to a
//neutral gray, and also erases everything previously drawn,
//refreshing the view.
chaserx=chaserx+(dotx-chaserx)*i; // the x value of
//the black dot are updated to make it try to approach
//the player's dot. the i factor can be thought of as
//the speed of the game overall, which increases with time
chasery=chasery+(doty-chasery)*i; //same goes for the y value
dotspeedx=(mouseX-dotx) * i; // the x direction
//speed of the white dot, the player's dot,
//is determined by the position of the cursor
//versus the position of the dot
dotspeedy=(mouseY-doty) * i; //same for the y speed. again,
//the i factor sets the speed of the game
dotx=dotx+dotspeedx; //the x position of the player's dot
//is updated by adding the speed every iteration of
//the draw function
doty=doty+dotspeedy; //same goes for the y position
if (dotx>200) //if the player's dot passes the right
//edge of the screen...
{
dotx=200; //the x position of the white (player's)
//dot is reset to the edge
dotspeedx=0; //the x value of the white dot's speed
//is set to zero
}
if (dotx<0) //same for the left edge
{
dotx=0;
dotspeedx=0;
}
if (doty>200) //and the bottom edge...
{
doty=200;
dotspeedy=0;
}
if (doty<0) //and finally the top edge...
{
doty=0;
dotspeedy=0;
}
stroke(255); //this instruction sets the color of the elements
//drawn from now on to white
line(dotx,doty,dotx,doty); //we draw our white dot as a line
// where the start and end point are the same
stroke(0); //now we set the color of the enemy dot to black
line(chaserx,chasery,chaserx,chasery); //and draw it.
i=i+0.0001; //by increasing the i factor we increase the
//overall speed of the game,
//making it more and more challenging!
//continues in next step
Step6
//continued
if (abs(dotx-chaserx)<5 && abs(doty-chasery)<5)
//if the black dot comes within five
//pixels horizontal and five pixels vertical of the white dot...
{
lose=true; //we lose the game
losecounter=500; //the losecounter will tick for
//five hundred executions of the draw function
//thus displayin the text for five seconds
}
}
else //so, we lost the game...what do we do now?
{
if (losecounter>0) //first we check if the losecounter
//ticker has not reached zero (at zero the game restarts)
{
textFont(font); //we load the font we defined in the
// setup function
fill(255, 0, 0); //set the fill RGB color to a bright red
//(Red is 255, Green is 0 and Blue is also 0)
//stroke() sets the color of lines and fill() that of
//inner spaces, like text
text("The dot has caught you!" ,10,15); //we display
//the first row of text at 10 pixels horizontal and 15 vertical
text("Your score is " + score,10,30); //the the score just under
//that (30 pixels down)
text("Try again!",10,46); //and the final message
losecounter--; //we decrement the losecounter, our ticker
}
else //now, if the ticker has reached zero, we
//reset the game variables
{
lose=false; //lose becomes false yet again
chaserx=0; //reset the black dot's position
chasery=0;
i=0.0001; //the game speed
dotx=100; //the player's dot position
doty=100;
dotspeedx=0; //the player's dot speed
dotspeedy=0;
score=0; // and the score
}
}
}


//and this is it! just copy the code into your processing window
//and press play to see it in action
 
Now we want to roll out our game for the world to see. You can create a java applet complete with web page, or a java application for the platform of your choice. Let's create a java applet. For that, go to File/Export.

 
After you have clicked File/ Export, an folder window called "applet" pops up. Simply copy the files in that folder into your website, then point your browser to the "index.html" file that was generated in the applet folder, and you will be able to play the game from your browser!

I hope you have enjoyed this tutorial!

Tips & Warnings

  • to get information on a command or Processing keyword, select the word and then right click on it. A menu will appear. Click on "Find in reference"
  • processing.org has tutorials and forums to help you with the language. you can even show off your creations to other users.
  • see more accessible codes in Processing, C and Matlab at http://www.solvengineer.com/
  • Use the code provided here at your own risk. Deploy and execute the code provided here at your own risk!

April 12, 2009

Happy Easter and NSTimer finally working

So I guess the NSTimer has to be placed in the 'ViewDidLoad' method of your view controller for it to work. At least that was my experience.

But placed there it works fine. So, time to start making the game. I will have two views first, one for now with just a button stating 'play game' and then another one where th game actually plays. I'm thinking to make this one completely from code with no NIB. We'll see....still a lot of stuff I need to figure out.

April 07, 2009

Found some great iPhone coding tutorials!

This site has a great collection of tutorials, including a series on game creation. Everything is ieasy to follow and well organized. A must see.

 

http://icodeblog.com

April 04, 2009

happy 404

I'm trying to use the NSTimer for animations in Xcode. So far, spectacular failure...when I figure out (that is, somebody shows me how to do it), I'll let you know...

April 01, 2009

First working 'App'

So I finally made a simple iPhone (well, iPhone simulator) app on my own. It draws a circle on the screen which you can move using buttons and a label updates with the title of the last button.

The simplicity belies the many concepts involved: Quartz, View class, View Controller, IBActions and IBOutlets.

I think the code for this app is actually quite educational and I'm planing to create a tutorial and make the source code freely downloadable. I'm not sure if I should put the tutorial here or on eHow and just link to it from this site.

Holla back what you think.

 


Hosting by Yahoo!