Pong pt 4 soon, a thanks for now

I just wanted to take a moment to thank all of you for the encouraging comments. My entire reason for creating this blog is to help people learn how to make there own games. I remember when I first started, not enough of the basic info was covered clearly. By the comments I have received, I see I am doing it right. Thanks for the support. You guys keep me motivated!

Ponged pt.3

The plan for today: We are going to create our ball, start the class for our game Engine.

- Create a folder where you are going to keep your game, The .Fla file and all your class files have to reside in that folder so the copiler can find them. After we start our first class I will show you how to direct Flash to the
folder you have choosen.

- Now that you have your project folder, we are going to create our ball.

- Create a circle with a Width of 12 and a height of 12. Remember you can create any circle and manually enter these numbers. Make the fill color white and the outline color anything you think looks good. My settings (remember position is irrelevant at the moment)

- Now that we have created all the visual elements we need for our game, we are going to start our first class! All actual code is going to be written in courier font and be highlighted in grey as such:



package {

import flash.display.*;

public class Engine extends MovieClip {

public function Main() {

}
}
}

- As always all a copy of all files that we work on can be found at the end of this post, but I highly recommend that you type them all out for yourself so you understand them.

- Lets start our code for our Engine.as class. If you remember from yesterday this is our main class and the one that flash will load from when our game is started. We want to start a new ActionScript file. Press (Ctrl+N) to bring up the new file type menu and select ActionScript:

- Once selected a new tab will open. This is where we write our ActionScript.

package {

import flash.display.*;

public class Engine extends MovieClip {

public function Main() {

}

}

}

- The above is the bare minimum for our game class. Now to explain what our code does:

package {

This is where we tell Flash to look for all the associated classes. Right now we have it blank, but if we were using a lot of classes for a really complex game we would package them all together. an example of package reference:

package com.gaming.ponged {

Don't worry about what this means, for now the only thing you need to know is that ALL class files start with the word package followed by an open curly brace {

our next line:

import flash.display.*;

Tells the compiler to import all the files in the flash.display class group. These are part of the default classes that flash has available to use. There are a bunch of pre-constructed classes we can import to increase functionality of our projects. Again, don't let this overwhelm or scare you. All you need to know is that import is a flash keyword telling the compiler to include any listed classes in our file. All games will import flash.display.*; it has to. The ; signifies the end of a single instruction. Think of it like the period at the end of a sentence. It tells the compiler to move on to the next instruction.

Our next line:

public class Engine extends MovieClip {

public - is a keyword telling the compiler that other classes can reference variables and methods in this class. All main classes for our games have to be public.

class - another keyword. This indicates that the that everything between the following {} braces is the actual code to execute. 

Engine - is the name of our class.

extends - is a keyword that means our class inherits all the code and functionality of the class name that follows, in this case MovieClip.

MovieClip - is the class that all main classes of our various games HAVE to extend.

All games will have the following form for the document class constructor:

public class <insert class name> extends MovieClip {

our next line:

public function Engine() {

Again we have the public keyword, we know this. Next:

function - this keyword tells flash that everything between the next {} are done together whenever the function is called. Don't worry to much about calling a function right now. For now all you really need to now is that a function is just a group of related instructions and or variables. It can be anything you want to be done together. The next word is our function name Engine(). The () always follows a function name. Don't worry about why at the moment. 

The reason the function name is Engine is cause this is the name of our class, which is our main class. The class that is called by the compiler when our game is run. 

The:

    }

   }

  }

close our function, class and package in order. Every open brace { needs to be closed by a }. when finished it should look like:

The words in blue are ActionScript keywords and are automatically highlighted in blue by the compiler.

Save your file as Engine. Make sure to save it in your PONGED folder. Now we will tell the compiler where to find all our class files for this game. Click on the PONGED tab beside your Engine tab. Now click on the [edit] button beside profile:

Then hit the [settings...] button:

Then set you source path to the location of the folder you keep your game and classes in.

Perfect! We have created our first class file and pointed the compiler to our project folder. Join me tomorrow and we will start filling in our classes. Maybe make our ball bounce... 

Ponged pt.2

Time to start.

Today we are going to get our stage ( the background where the game takes place ) and our actors ( The paddles ) designed and ready to code.

- Open Adobe Flash CS4

- Choose 'New ActionScript 3.0 file

- Set your properties as such in the right hand side menu. The 'Class' field is the name of the ActionScript 3.0 file that the game will load when the game is loaded. We haven't actually created it yet so when you type in 'Engine' you will get a warning, just click [OK], we will fix it later.

- After your properties are set, create a straight line with the following properties.

- With these properties set, draw a line across the page, like so:

- Now use the 'Selection Tool' to select your line and manual change the properties to match:

-  Left-Click the line and select 'Convert to Symbol':

- Change the name field to "wall" (Capitalizations matter in ActionScript). Check the 'Export for ActionScript' box. Change the 'Class' field to "Wall". (As a matter of convention all class names should begin with a capital letter):

- When everything is ready, click [OK]. You will get a warning:

This simply means that the compiler cannot find the class file 'Wall' that we specified. Do not worry about this warning, we will be creating a class for our wall at a later point. Just click [OK].

- Your line is now a symbol that can be controlled by and referenced with ActionScript! Good job so far. Select your line and create a new copy (Ctrl+C, Ctrl+V). Select your new line and manually change its coordinates to: X:0.0, Y:290.

- Now select the 'Text Tool' (a picture of a T on the right hand side menu). Change the settings to:

- Click anywhere on your background and type "PONGED". After you have typed it, select it with your 'Selection Tool' and set its position to:

- Select your 'Text Tool' again, click anywhere on your backround and type "0:0" with the following settings:

- Of special note is the part that I circled in green. Changing the type to 'Dynamic Text' means we can use ActionScript to change what our text says dynamically, so when someone scores we can change one text to 1:0. The name 'scoreBoard' is the name of the text field, we will use that name when we want to access that text field with our ActionScript code.

- Using the 'Line Tool' create a dotted line with the following parameters:

- This will be our center line. It is merely aesthetic.

- Next create a line with the following properties:

This will be our paddle

- After you have created your paddle line create another one by selecting your paddle with the 'Selection Tool' and copying and pasting (Ctrl+C, Ctrl+V). Select your new paddle and change its color to something that you find appealing. I made mine light blue so it is easily visible against our black background. This will be the computer controlled paddle. Don't worry about the positions of either of the paddles at the moment, cause in our next lesson we will be converting them to symbols and using ActionScript to place and control them. Our paddle will be controlled by either keyboard or mouse and the enemy paddle will be controlled by scripted AI.

- Your project should look something like this:

- A copy of our project so far: PONGED.fla

Ponged pt.1

The first project we will take on is re-creating Pong. A relatively simple game that will teach us how to:

- Setup a project
- Basic sprites
- Event handlers
- Keyboard control
- Very simple geometry
- A score system
- Simple AI

The game will be broken down into it's simplest concepts and each one will be done step-by-step, all code written out, explained and full source code at the end of each step. At the end of the project, we will sign up for and enable MochiAds in our game, submit it and start making our very first money!

Starting from nothing

   Welcome to the first of many, many entries in my blog, designed to take you through the steps of learning, then monetizing, flash games. A whole world of fun, learning, and eventually, money, awaits you if you are willing to put in the time and effort. I will walk you through every step, one-by-one, from the first line of code all the way through to finished games with embedded Mochi Ads. I will keep statistics and charts updated weekly to track the success, or lack thereof, of each of the games I teach you how to make.
   Beyond just the games though, I will make sure you grasp the fundamentals of the language (Actionscript 3.0) so you can alter the games to your own liking and create whole new ones.
   I will take you step by step through the process of submitting those games to the most relevant Flash portals (Newgrounds, Kongregate, etc..).

First lesson coming very soon.