Basic File Structure

July 7th, 2008

A lot of times when I do work for companies, or freelance work, I really stress the importance of good file structuring so programmers, and non-programmers, know the flow of the web site. I am sure there are a few of you rolling your eyes already thinking this is a waste saying, "I already know how to do this", but then there are some saying, "This is great, just what I need to help me get started in web site developing". This article is for that audience. However, some of you who already know how to structure a web site could learn something new.

A lot of you might structure the web site like so:

  • index.php
  • db_access.php
  • footer.php
  • header.php
  • images
    • (all the images)
  • style.css

or

  • index.php
  • include
    • db_access.php
    • footer.php
    • header.php
    • style.css
  • images
    • (all the images)

If you are new to web site development, the first structure is most likely your method, placing all your files in the root directory without knowing the importance or hierarchy of the files and folders. The second method is approached more often once you become more experienced and start organizing your files and folders. These two methods are fine and expected, but I would like to share with you how I organize my files and folders so maybe you can start learning at a more quicker pace. This is how I structure my web sites:

  • assets
    • assets.php
    • css
      • (all css files)
    • images
      • (all image files)
    • js
      • (all javascript files)
    • php
      • (all php files)
  • index.php
  • layout.php

I have a directory called "assets" (of course you can call this "include" if you wish), and within that assets directory I have more directories that correspond to what that specific file/extension belongs to. So CSS files go in the "css" directory, PHP classes and functions go in the "php" directory, etc. My "assets.php" file keeps track of all my main and global variables. For example, I like to create a variable called $DR (short for Document Root), which acts like a fake document root, yet works just like a document root. This is very helpful for when trying to place an image on the page. Instead of having to guess how many directories I have to think back, I can just do this:

PHP:
  1. <img src="<?php echo $DR; ?>/assets/images/file.png" />

instead of:

PHP:
  1. <img src="../../../../../../assets/images/file.png" />

I could just type / instead of ../../../../, but again, I use the $DR as a fake document root because maybe I have the site in separate directory. Ok, lets get back on track, apologizes for straying a bit. In my assets.php file, I could also use PHP's build in function session_start() so I don't have to keep typing it every time, and have it connect to my MySQL database, etc.

Well, that is all I have to share with my Basic File Structure. Please let me know how you structure your websites, I would love to hear some tips and tricks from your experience. Thanks

Website

Astrolander

June 26th, 2008

I would like to demonstrate how to make my version of an Astrolander game. My version consists just the basics of movement through space, collision detection with the ground, and collision detection with the platform which you must land softly and vertically or your ship will crash. Hopefully with this basic tutorial you will be able to grasp the concept and expand more ideas into this type of game. So lets begin by setting up the 3 movie clips we will be using, the Rocket, the Ground/Level, and the Platform.

Read the rest of this entry »

AS2 > Games

RPG Character Movement – Part 2

June 21st, 2008

This tutorial is continuing from last one posted here: RPG Character Movement - Part 1

In the last tutorial we talked about basic movement and key detection. This time we are going to cover Hero walking animation and collision detection.

First, lets begin opening our Hero movie clip set in the Library. Highlight both the left and right circled arms and convert it to a movie clip. Give the movie clip the name "arms" since this movie clip are the arms of our Hero. In the "arms" movie clip, create a tween for each of the circled arms, moving them back and forth of each other to represent the moving arms of our Hero when walking.

Read the rest of this entry »

AS3 > Games > RPG

SmashCam Class

June 18th, 2008

This Actionscript 3 class is very useful for just about any game you are developing in Flash. I made this "SmashCam" class based off of Colin Moock's vCam. I was really impressed by what it can do for animators in Flash and it inspired me to use it for developers who make Flash games. The vCam isn't really complicated a script, it is very straight forward - its a real clever script on how to use a movie clip as a camera. Let me show you what the script does in action, move the blue circle with arrow keys around the stage.

The SmashCam is actually set right now to focus and maintain the square and circle in the center of the stage as the two movie clips move around and about. But in this example only the blue circle is moving. The green painted clouds on the stage are there to help you see that blue circle is moving and the stage is enlarging and shrinking to the affect coming from the SmashCam.

I won't go into too much detail on how to setup the .fla to have the circle move around stage, since that tutorial is in my last post, but I will show how to set up the SmashCam. This is what is you need to do:

Actionscript:
  1. // SmashCam(display_container:MovieClip, target1:MovieClip, target2:MovieClip, [width:int = 600, [height:int = 450]]);
  2. var camera:SmashCam = new SmashCam(this, Circle, Square);

Thats it. The SmashCam takes three required parameters, the display_container,target1,target2, and two optional parameters width and height (the default width is 600, and default height is 450). You can also set up the SmashCam's minimum and maximum width and height of how far it should scale the display_container like so:

Actionscript:
  1. camera = new SmashCam(this, Circle, Square, 550, 400);
  2. camera.min_width = 200;
  3. camera.min_height = 150;
  4. camera.max_width = 2000;
  5. camera.max_height = 1500;

All that is left to explain is the calculation of the SmashCam executed every frame. To do so, in the main game loop add this line of code:

Actionscript:
  1. camera.calculate();

I will let you do the rest of the experimenting and looking into of what the SmashCam Class is really doing. I appreciate any feedback on improvements or better alternatives. Or if you have questions, I will do my best to explain. Thanks and have fun!

SmashCam class download

AS3

RPG Character Movement – Part 1

June 13th, 2008

Today I am going to share a small sample of RPG type character movement using Flash Actionscript 3. I will say up front, this sample will look very boring, but this tutorial is for Actionscript 3 beginners. However, I will continue to build examples and more tutorials off this one. I also would like to point out that I will be writing this code in the main time line, which is something you should try not to do in Actionscript 3. So why am I writing the code on the main time line? In honesty, this is how I begin to program in Actionscript 3 to help understand the newer syntax and different structure and event handling and everything Actionscript 3 has to offer from Actionscript 2. I also would like to point out that I am not going to discuss all the syntax throughly (for the most part, but I will try my best), because if you want to program games, you will have to do some research and testing on "hows" and "whys" and "what the...?".

So lets begin with the sample of what you will have by the end of this tutorial:

Read the rest of this entry »

AS3 > Games > RPG