Sections

  • Search Chrome Cow

Design a Day



The Game Design section was starting to look a little overrun by Flash and ActionScript tutorials, so I’ve added a whole new page for Flash and ActionScript. Check there for the latest experiments.

Speaking of which: Drawing Regular nGons in Flash.

That’s right. NGons, baby! Try to curb your enthusiasm.

I’m working on a project that requires the drawing (or at least calculating) of regular nGons (pentagons, hexagons, octagons, etc.), so I threw together a demo movie. As usual, source code is included.


I’ve collected together all of my various experiments with Flash on this page. Most of what you will find here are snippets of code and small movies that test certain features of Flash, or solve some small, specific problems. There are also a few game-like projects.

Each of the movies posted here also show the source code (or at least the important bits). The goal is to create a resource for other people who are learning Flash, especially ActionScript . All of the exercises below are created in Flash 8. Some of them will work in earlier versions, some will not.

<

 Drawing Regular NGons

Game Prototype: Drunken Seek

  Here’s a Flash prototype I did to test a gameplay question in my last game, "Destroy All Humans: Big Willy Unleashed" for the Wii. [ Link ]


 Drawing Regular NGons

Documentation: Palabre 0.6

I am in need of a Flash compatible Socket Server, and found a great open source project, Palabre, with poor docs. This is info gather from docs, forums, etc. [ Link ]


 Drawing Regular NGons

Drawing Regular NGons

I have a project in progress that require me to draw regular NGons (Pentagons, Hexagons, Octagons, etc). I’ve posted the Flash movie and the source code for drawing them, using a simple rotation equation. [ Link ]


Learning Flash

Learning Flash

Since returning from GDC, I have been fired up to learn Flash as a tool for doing some simple gameplay prototyping. It has been rewarding, and at times fairly frustrating, as Flash has some interesting quirks of implementation. It has…personality.

  • Loading Text as Unicode
  • Create and Format a Dynamic Text Field
  • Write-On Text in a Fixed Amount of Time
  • Using Checkboxes
  • The Game Loop

  [ Link ]


Radial Solo Ball

Radial Solo Ball

Flash game number one. Basic goal, build a game with a main execution loop.

First experimentation with collision detection in Flash. [ Link ]


eRadiRace

eRadiRace

A simple wall avoidance game.

First iteration using built-in collision handling in Flash.
[ Failed ]

Second iteration using Flash 8’s Draw API. [ Somewhat Final ]


 


Regular nGons. We’ve all wanted to draw them at some time, right? Look no further, seeker of knowledge, I’ve got just what you’re looking for.

The method I’m using is pretty simple.

  • Assume we are drawing our nGon with its center at 0,0
  • Start with a point at
    • x = 0
    • y = nGon radius
  • for an nGon with n sides
    • rotate the point 360/n degrees
    • do this n+1 times
      • to close the polygon
    • add 360/n degrees each time we iterate

So assume we want a 12 sided nGon. We rotate the first point 30 degrees, the next point 60 degrees, 90 degrees and so on.

For the rotation, I’m using:

x’ = x cos Φ - y sin Φ
y’ = y cos Φ + x sin Φ

Where:
x and y are the original position
x’ and y’ are the new position
Φ is the degree of rotation

And because Flash uses radians instead of degrees, we have to convert from degrees to radians when doing this calculation:

radians = (degrees * Π/180)

Add in an x and y offset to each point to place the polygon in the center of the screen.

Here the code that run the movie:

// Drawing Regular Ngons
// Sean Hyde-Moyer
// April 2007
//
// Initialize variables

xOffset = 350
yOffset = 200
var xArray:Array = new Array();
var yArray:Array = new Array();

vert.text = 5;
radius.text = 120;

this.createEmptyMovieClip("planet_mc", this.getNextHighestDepth());

this.onEnterFrame = function() {
    incrementalRot = 0.0
    updateFlag = 0
    startVerts = Number(vert.text)           
    ngonRadius = Number(radius.text)
   
        //sanity check user values
        if (ngonRadius >180) {
            ngonRadius = 180
            //radius.text = 180;
        }
        if (ngonRadius <= 20) {
            ngonRadius = 20
            //radius.text = 1;
        }

        if (startVerts >512) {
            startVerts = 512
           
        }
        if (startVerts <= 3) {
            startVerts = 3

        }       
   
    // If values change, redraw poly
    if (oldStartVerts != startVerts ){
        updateFlag = 1
    }
    if (oldngonRadius != ngonRadius) {
        updateFlag = 1
    }
    if (updateFlag == 1) {

        degreeRot = 360/startVerts
   
        // Resize the demo circle
       
        circle_mc._height = ngonRadius*2
        circle_mc._width = ngonRadius*2
        circle_mc._x = xOffset
        circle_mc._y = yOffset
   
        // Draw the Ngon
       
        planet_mc.clear()

        planet_mc.lineStyle(1, 0xFFFF00, 100, true, "normal", "square", "miter", 3);
        planet_mc.moveTo(xOffset,ngonRadius+yOffset);
       
        for (i=0; i<=startVerts; ++i) {
            radianRot = (incrementalRot * Math.PI/180)
            xArray[i] = ((0*Math.cos(radianRot)) - (ngonRadius*Math.sin(radianRot)))
            yArray[i] = ((ngonRadius*Math.cos(radianRot)) - (0*Math.sin(radianRot)))
            xArray[i] += xOffset
            yArray[i] += yOffset
            incrementalRot = incrementalRot + degreeRot
            planet_mc.lineTo(xArray[i],yArray[i]);
        }
    }
oldStartVerts = startVerts
oldngonRadius = ngonRadius
}