Using Photoshop to draw levels for Flash games

May 31, 2007 by Emanuele Feronato
Filed Under Flash •  

This is an example when things go not so good.

I was trying to draw a level for a Flash game like Tunnelball using Photoshop, and then import it into Flash.

Since it's just an experiment, I did not draw any map but I simply downloaded one at Speccy Screenshot Maps to use it as a sample.

This is the map, its original size is 1280x1344 pixels

Map

And these are the experiments. The "engine" of the "game" is the same as explained in this tutorial

First experiment

The first experiment consist in putting the map "as is", and using it as a background.

PLAIN TEXT
ACTIONSCRIPT:
  1. yspeed = 0;
  2. xspeed = 0;
  3. wind = 0.00;
  4. power = 0.35;
  5. gravity = 0.05;
  6. upconstant = 0.75;
  7. friction = 0.99;
  8. _root.attachMovie("ball","ball",2,{_x:246,_y:171,_width:8,_height:8})
  9. _root.attachMovie("map","map",1,{_x:200,_y:65})
  10. ball.onEnterFrame = function() {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     map._y -=yspeed;
  26.     map._x -=xspeed;
  27.     if(map.hitTest(this._x,this._y,true)){
  28.         map._x = 200;
  29.         map._y = 65
  30.     }
  31. };

As you can see, the (tiny) ball in the center of the movie does not move because even if the map is "black", flash considers the entire picture as an object, then the hitTest is always true.

Second experiment

The second experiment is the same as the first, but with the map modified with the "Trace bitmap" (Flash menu -> Modify -> Bitmap -> Trace Bitmap) and with the black areas removed.

Not only the map looksblurry, but the hitTest is not accurate...

Third experiment

It's the same as the second, but with the traced map zoomed 4x as you can see in line 9

PLAIN TEXT
ACTIONSCRIPT:
  1. yspeed = 0;
  2. xspeed = 0;
  3. wind = 0.00;
  4. power = 0.35;
  5. gravity = 0.05;
  6. upconstant = 0.75;
  7. friction = 0.99;
  8. _root.attachMovie("ball", "ball", 2, {_x:246, _y:171});
  9. _root.attachMovie("map", "map", 1, {_x:40, _y:-250, _xscale:400, _yscale:400});
  10. ball.onEnterFrame = function() {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     map._y -= yspeed;
  26.     map._x -= xspeed;
  27.     if (map.hitTest(this._x, this._y, true)) {
  28.         map._x = 40;
  29.         map._y = -250;
  30.         yspeed = 0;
  31.         xspeed = 0;
  32.     }
  33. };

I don't like the result... it has poor accuracy as before...

Fourth experiment

I like this experiment but I do not know how does it run on old/small computers.

I converted the orginal bitmap in a bitmapdata and performed the hit test looking at the color of the pixel at the centre of the ball (line 32).

Assuming that the "walkable" areas are all black, if the pixel has a color different than black, there is a collision

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.display.BitmapData;
  2. bitmap = BitmapData.loadBitmap("abusimbel");
  3. map = this.createEmptyMovieClip("map", 0);
  4. map.attachBitmap(bitmap, 0);
  5. map._x = 40;
  6. map._y = -250;
  7. yspeed = 0;
  8. xspeed = 0;
  9. wind = 0.00;
  10. power = 0.35;
  11. gravity = 0.05;
  12. upconstant = 0.75;
  13. friction = 0.99;
  14. _root.attachMovie("ball", "ball", 2, {_x:246, _y:171});
  15. ball.onEnterFrame = function() {
  16.     if (Key.isDown(Key.LEFT)) {
  17.         xspeed = xspeed-power;
  18.     }
  19.     if (Key.isDown(Key.RIGHT)) {
  20.         xspeed = xspeed+power;
  21.     }
  22.     if (Key.isDown(Key.UP)) {
  23.         yspeed = yspeed-power*upconstant;
  24.     }
  25.     if (Key.isDown(Key.DOWN)) {
  26.         yspeed = yspeed+power*upconstant;
  27.     }
  28.     xspeed = (xspeed+wind)*friction;
  29.     yspeed = yspeed+gravity;
  30.     map._y -= yspeed;
  31.     map._x -= xspeed;
  32.     if (bitmap.getPixel(this._x-map._x, this._y-map._y) != 0) {
  33.         map._x = 40;
  34.         map._y = -250;
  35.         yspeed = 0;
  36.         xspeed = 0;
  37.     }
  38. };

As I said, I am not fully satisfied of those experiment, but I would like you to tell me what do you think about.

Here you will find the source codes

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

5 Responses to “Using Photoshop to draw levels for Flash games”

  1. David on May 31st, 2007 10:38 pm

    I like it. It doesn’t work very accurately though, perhaps you can perform four collision detections. One for each side of the ball.

    If the ball’s radius is 10, then doing a detection for each side would just be ball._x 5 (or - 5) and ball._y 5 (or - 5). Not sure about the actionscript involved since I’m new to this though.

  2. David on May 31st, 2007 10:40 pm

    Edit: to above post.

    ball._x PLUS 5 and ball._y MINUS 5 (don’t know why the plus and minus symbols wouldn’t show up).

  3. Jerry on June 1st, 2007 4:31 pm

    Have you tried removing the black in Photoshot and making the back ground transparent and then using the Trace Bitmap in Flash? This may remove the artifacting that is causing the blurry image and may help make it more solid. Then you should beable to do a normal collision detection.

  4. shirin on July 25th, 2007 7:25 am

    hi, i cant open source code files. i have flash mx 2004. what to do.

  5. peter on November 7th, 2007 2:29 pm

    like jerry says,

    iff u remove the black (ore make ur own map) and then make the walkable path transparent, then save it like gif or png because they save transparancy (i don’t now iff flash ignores transparancy) but maybe it would just work without a trace, because there wouldn’t be anything where the transparency is.

Leave a Reply