Create a Flash game like PixelField
I spent some time on PixelField and I liked the way you control the “player” and the overall concept.
So here I am ready to clone it for Tony Pa’s pleasure…
In this first step I’ll show you how to control the player.
In this version you control a square (in the original one it was a triangle, so don’t say I did’t add something to the original concept… I added a side…) that will move wherever you click the mouse.
Attached to the square there are four little squares that will follow the main square with an elastic effect.
You will find the code familiar if you read Controlling a ball like in Flash Elasticity game tutorial… the four satellites move using this engine.
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // friction and speed_scale
// playing with these variables will affect gameplay
friction = 0.95;
speed_scale = 0.05;
// movieclip where I will draw the four elastics
_root.createEmptyMovieClip("drawing", _root.getNextHighestDepth());
// big square, the "player"
_root.attachMovie("big_square", "big_square", _root.getNextHighestDepth(), {_x:250, _y:200});
//attaching the four satellites
for (x=0; x<=3; x++) {
sq = _root.attachMovie("square", "square_"+x, _root.getNextHighestDepth());
// set their initial speeds to zero
sq.xspeed = 0;
sq.yspeed = 0;
}
// main function, to be executed at every frame
_root.onEnterFrame = function() {
// rotate the big square
big_square._rotation += 2;
for (x=0; x<=3; x++) {
// determining where SHOULD be the x-th satellite without elasticity
should_be_x = big_square._x+80*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
should_be_y = big_square._y+80*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
// determining the distance between the point where it SOULD BE and where it IS
dist_x = (should_be_x-_root["square_"+x]._x)*speed_scale;
dist_y = (should_be_y-_root["square_"+x]._y)*speed_scale;
// adding elasticity... refer to http://www.emanueleferonato.com/2007/09/01/controlling-a-ball-like-in-flash-elasticity-game-tutorial/
_root["square_"+x].xspeed += dist_x;
_root["square_"+x].yspeed += dist_y;
_root["square_"+x].xspeed *= friction;
_root["square_"+x].yspeed *= friction;
_root["square_"+x]._x += _root["square_"+x].xspeed;
_root["square_"+x]._y += _root["square_"+x].yspeed;
_root["square_"+x]._rotation = big_square._rotation;
}
// drawing the elastics
drawing.clear();
drawing.lineStyle(1, 0x000000, 50);
drawing.moveTo(big_square._x, big_square._y);
drawing.lineTo(square_0._x, square_0._y);
drawing.moveTo(big_square._x, big_square._y);
drawing.lineTo(square_1._x, square_1._y);
drawing.moveTo(big_square._x, big_square._y);
drawing.lineTo(square_2._x, square_2._y);
drawing.moveTo(big_square._x, big_square._y);
drawing.lineTo(square_3._x, square_3._y);
};
// moving the big square if the player pressed mouse button
_root.onMouseDown = function() {
big_square._x = _root._xmouse;
big_square._y = _root._ymouse;
}; |
Enjoy… press the mouse and see what happens
Download the source code and enjoy
They can be easily customized to meet the unique requirements of your project.
9 Responses to “Create a Flash game like PixelField”
Leave a Reply
Trackbacks
-
Flash Tutorials | AS3, AS2 Flash game tutorials roundup part 2 | Lemlinh.com on
August 28th, 2008 1:50 am
[...] Read more [...]
-
Create a Flash game like PixelField - part 2 : Emanuele Feronato on
September 5th, 2008 10:40 pm
[...] Here we are with the second part of Create a Flash game like PixelField. [...]
- 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
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- 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
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- 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 flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/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)

(10 votes, average: 4.50 out of 5)





Nice… Are you going to do Part 2?
Thanks!
Now that is awesome !
Glad to see that tonypa realesed a new game here =)
His tuts on tiles-based engine are greats!
Thank you for this tut Emanuele! =)
Oooh, cool!
Hey, nice tutorial :)
I think I used these values in the game:
friction = 0.97;
speed_scale = 0.006;
which makes the little ones move “softer”.
Couldnt get it to work. I had the boxes all rotating, the strings showing up, but whatever I did the little squares would stay rooted in position, I could click the box around and everything though :P
Cool tutorial, first one (out of five) I actually completed ! :D Thanks for this