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.
-
// 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
Tell me what do you think about this post. I'll write better and better entries.
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. [...]

(10 votes, average: 4.5 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