Be my fan on FacebookUsing Photoshop to draw levels for Flash games
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 1280×1344 pixels
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | yspeed = 0;
xspeed = 0;
wind = 0.00;
power = 0.35;
gravity = 0.05;
upconstant = 0.75;
friction = 0.99;
_root.attachMovie("ball","ball",2,{_x:246,_y:171,_width:8,_height:8})
_root.attachMovie("map","map",1,{_x:200,_y:65})
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed = xspeed-power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed = xspeed+power;
}
if (Key.isDown(Key.UP)) {
yspeed = yspeed-power*upconstant;
}
if (Key.isDown(Key.DOWN)) {
yspeed = yspeed+power*upconstant;
}
xspeed = (xspeed+wind)*friction;
yspeed = yspeed+gravity;
map._y -=yspeed;
map._x -=xspeed;
if(map.hitTest(this._x,this._y,true)){
map._x = 200;
map._y = 65
}
}; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | yspeed = 0;
xspeed = 0;
wind = 0.00;
power = 0.35;
gravity = 0.05;
upconstant = 0.75;
friction = 0.99;
_root.attachMovie("ball", "ball", 2, {_x:246, _y:171});
_root.attachMovie("map", "map", 1, {_x:40, _y:-250, _xscale:400, _yscale:400});
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed = xspeed-power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed = xspeed+power;
}
if (Key.isDown(Key.UP)) {
yspeed = yspeed-power*upconstant;
}
if (Key.isDown(Key.DOWN)) {
yspeed = yspeed+power*upconstant;
}
xspeed = (xspeed+wind)*friction;
yspeed = yspeed+gravity;
map._y -= yspeed;
map._x -= xspeed;
if (map.hitTest(this._x, this._y, true)) {
map._x = 40;
map._y = -250;
yspeed = 0;
xspeed = 0;
}
}; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import flash.display.BitmapData;
bitmap = BitmapData.loadBitmap("abusimbel");
map = this.createEmptyMovieClip("map", 0);
map.attachBitmap(bitmap, 0);
map._x = 40;
map._y = -250;
yspeed = 0;
xspeed = 0;
wind = 0.00;
power = 0.35;
gravity = 0.05;
upconstant = 0.75;
friction = 0.99;
_root.attachMovie("ball", "ball", 2, {_x:246, _y:171});
ball.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
xspeed = xspeed-power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed = xspeed+power;
}
if (Key.isDown(Key.UP)) {
yspeed = yspeed-power*upconstant;
}
if (Key.isDown(Key.DOWN)) {
yspeed = yspeed+power*upconstant;
}
xspeed = (xspeed+wind)*friction;
yspeed = yspeed+gravity;
map._y -= yspeed;
map._x -= xspeed;
if (bitmap.getPixel(this._x-map._x, this._y-map._y) != 0) {
map._x = 40;
map._y = -250;
yspeed = 0;
xspeed = 0;
}
}; |
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
(1 votes, average: 5.00 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
5 Responses to “Using Photoshop to draw levels for Flash games”
Leave a Reply
- Citrus Engine released for free for learning
- My epic fail with ClickBank
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Triqui MochiAds Arcade plugin for WordPress official page
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.74/5)
- Create a flash artillery game – step 2 (4.74/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 1 (4.71/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)
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.
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).
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.
hi, i cant open source code files. i have flash mx 2004. what to do.
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.