Asteroids

Flash, Games, Programming, ade's stuff No Comments

Lazy reader’s link to the current version of the game

I went to a short flash-based videogame course a few weeks back. The exam is in form of a homework assignment where you select one of three games to implement. I chose to make a asteroids-style game clone. The platform is Flash CS3 and Actionscript 3.

I started out with the ship, drawing it as a movieclip with 4 frames, for idling, turning left and right, and moving forward. Then i made a SpaceShip-class that handled as much as possible of the ship and its movement. First, I made it turn, with some basic turning-speed acceleration and deceleration, using the three different frames to animate it. Click to try, use left and right arrows to turn.

Then there was some coding involved with making the ship move. The ship uses a vector for movement and modifying its course uses vector addition, which creates a pretty cool skidding effect. When the ship moves toward the edge of the game area, it needs to warp the opposide side of the screen, and there should be visual evidence before the transfer is complete that the spaceship is going to show up on the other end. So, there needed to be a “clone” involved that acts as a copy of the spaceship until the original ship is outside the screen, at which point the clone will take over. I ended up using a border of movieclips and using hit-testing to see if the ship was getting close to the edge. Try version two. Use left, right and up arrows.
When the ship movement was complete, i started working on the “asteroids”. So I put some rocks from my plant in my scanner and put them as a single movieclip in flash. Then i made the Rock class, to handle the rocks movement across the screen. They use a similar edge-detection and clone method, as well as movement. They start with a random position, speed and apperance. Click here to see.

Then of course, I needed to make a end-game screen when the ship hit an asteroid. So i had this vision in my head, how i would call rockMovieClip.hitTest(shipMovieClip) and just find out at once if the ship was hitting the rock. But a quick test revals that flash uses boxes for hit detection and a not-so-fast googling of the situation revealed that there was not really a practical way to do this. I tried to make the pixel-level hitdetection that was described in the BitmapData class but it just wasn’t a very clean solution, so i just made the objects check for their distance instead, since the rocks are kinda round and the ship too. Try here.

Finally, the ship obviously needs to shoot something. I made a green little round particle thingy and copied the movement code from the other classes and wired everything together in the flash file (first frame). Tanja decided my green projectiles were unsatisfactory and suggested I made them pink instead which turned out quite fabulous. Use spacebar to shoot. You may notice that the shots are aware of the ship’s movement.

There’s a slight bug still, where asteroids can “leak” outside the playing area. Need to check my edge-handling code a bit. The “A:” counter shows how many rock instances you are currently dealing with. Get it to 0 and you win (but I haven’t made the win-screen yet.)

Update: The final version is complete.

Flash upload system

Flash, Programming, ade's stuff No Comments

I’ve started work on a new Flash/PHP web upload system… to make sharing files easier when MSN is too slow or when i’m at school/work and want to send something straight home (without having to re-download it when I get home)

i’ve thought of some stuff i want to make but i started out with the most important feature, uploading files. i looked around on the web for a suitable solution matching my criteria,

  • be able to show percentage progress bar
  • show upload speed
  • be reasonably compatible

turns out it’s a pain making a progress bar with AJAX & PHP. while certainly possible, apparently requires a recompiling php with a patch and stuff, and that’s going to create problems in the long run. however, you can do it in flash pretty easily. now, not all systems have a flash player, but that’s likely to change. this also allows for some funky animations and stuff :D

so, building on the source from the papervision logo i made earlier, i extended my cube class and converted it to a plane, with texturing. then i chopped up a default file icon from vista in parts of 16×16 pixels (with actionscript code) and assigned them to a grid of 11×14 planes. i also added the target rotation angles instead of just target coordinates. as the file upload progresses, planes come out from the lower left corner and build up the file icon. so it’s like a progressbar (but way cooler)… ;)

oh, and the back end on the server is just a simple php script that eats the transferred file and puts it in the right place. btw, i had to mod the php config a bit to make it accept files larger than 2mb, and run for longer than 30sec. the current system has been tested and works with 700mb+ files.

i won’t post the real thing here because i dont want my server clogged with random files, but here’s a demo of how it looks with the uploading code removed.

again, this is made with Flash CS3 + the papervision3d lib.

click it to start it or reset progress!

papervision logo

Flash, Programming, ade's stuff 1 Comment

made a new flash thing today… it’s made with Flash CS3, Papervision3d in Actionscript 3.

concept: make a logo in flash with the 3d library papervision… the idea was to take a small image with the text “ade.se” and make every pixel into a cube in a 3d scene, where the cubes or pixels would come flying into the view, and eventually form the textual image in a nice perspective.

i started with the basics (haven’t made anything other than a few easy tutorials in flash/papervision/actionscript 3 before) and created the scene with a placeholder rectangle (to show the final position of the cubes). then I made a class to handle the cubes, which has a few important functions, setPos, setTargetPos, and moveCloser(speed). the thought is to have the first frame in the movie set up the cubes at random positions and then invoke moveCloser at every rendered frame which causes the cubes to move one step closer to their target position.

the first problem was to make the cubes move in a nice manner toward their goal.

you need to make them move at different speeds in every dimension, as they will be at a different distance in X, Y and Z from their target. here’s a cube moving to pixel position 0, 0 with the reference rectangle visible: movement.htm


also, I needed to make sure that i could actually handle having so many cubes rendered at one time… I created a image in photoshop to act as the target, each (colored) pixel representing a cube and its final position. I settled for a image size of 80×19. selecting the colored pixels with the wand and quick look at the histogram window reveals that there will be 790 cubes needed:

target image

remember that every cube has 6 faces, and 2 triangles for each face. that means 9480 triangles to render in total. this would be a laugh for every computer today in a normal 3d-accelerated environment, but working with it here in a high level unaccelerated state is a bit different. i created a basic benchmark to see how it ran. as you can see, the FPS is acceptable but not very good… benchmark.htm

as creating 790 objects by hand and giving them the right properties would take a long time and be immensely boring, I made a small app in visual basic 6 to read the image and spit out a finished script.

here’s the result! (click it to randomize cube positions)