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. [...]
- Create incredible particle effects with Partigen 2
- PixelBlitz AS3 game framework
- Being a geek in Venezuela
- Box2D tutorial for the absolute beginners – revamped
- Triqui’s Picks #16
- Are you ready for this?
- Box2DFlash 2.1a released – what changed
- Get detailed statistics about your Flash game with SWFStats
- Games that Challenge the World Come2Play contest – $8,000 in prizes
- Triqui’s Picks #15
- 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
- Create a flash artillery game - step 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Flash game creation tutorial – part 5.2 (4.87/5)
- Create a flash artillery game – step 1 (4.78/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Flash game creation tutorial – part 3 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.70/5)
- Create a flash artillery game – step 2 (4.70/5)
- Flash game creation tutorial – part 1 (4.69/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/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