Create a Flash game like PixelField

August 19, 2008 by Emanuele Feronato
Filed Under Actionscript 2, Flash, Game design • 9 Comments 

I spent some time on PixelField and I liked the way you control the "player" and the overall concept.

PixelField

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.

PLAIN TEXT
ACTIONSCRIPT:
  1. // friction and speed_scale
  2. // playing with these variables will affect gameplay
  3. friction = 0.95;
  4. speed_scale = 0.05;
  5. // movieclip where I will draw the four elastics
  6. _root.createEmptyMovieClip("drawing", _root.getNextHighestDepth());
  7. // big square, the "player"
  8. _root.attachMovie("big_square", "big_square", _root.getNextHighestDepth(), {_x:250, _y:200});
  9. //attaching the four satellites
  10. for (x=0; x<=3; x++) {
  11.     sq = _root.attachMovie("square", "square_"+x, _root.getNextHighestDepth());
  12.     // set their initial speeds to zero
  13.     sq.xspeed = 0;
  14.     sq.yspeed = 0;
  15. }
  16. // main function, to be executed at every frame
  17. _root.onEnterFrame = function() {
  18.     // rotate the big square
  19.     big_square._rotation += 2;
  20.     for (x=0; x<=3; x++) {
  21.         // determining where SHOULD be the x-th satellite without elasticity
  22.         should_be_x = big_square._x+80*Math.cos((big_square._rotation+45+90*x)*0.0174532925);
  23.         should_be_y = big_square._y+80*Math.sin((big_square._rotation+45+90*x)*0.0174532925);
  24.         // determining the distance between the point where it SOULD BE and where it IS
  25.         dist_x = (should_be_x-_root["square_"+x]._x)*speed_scale;
  26.         dist_y = (should_be_y-_root["square_"+x]._y)*speed_scale;
  27.         // adding elasticity... refer to http://www.emanueleferonato.com/2007/09/01/controlling-a-ball-like-in-flash-elasticity-game-tutorial/
  28.         _root["square_"+x].xspeed += dist_x;
  29.         _root["square_"+x].yspeed += dist_y;
  30.         _root["square_"+x].xspeed *= friction;
  31.         _root["square_"+x].yspeed *= friction;
  32.         _root["square_"+x]._x += _root["square_"+x].xspeed;
  33.         _root["square_"+x]._y += _root["square_"+x].yspeed;
  34.         _root["square_"+x]._rotation = big_square._rotation;
  35.     }
  36.     // drawing the elastics
  37.     drawing.clear();
  38.     drawing.lineStyle(1, 0x000000, 50);
  39.     drawing.moveTo(big_square._x, big_square._y);
  40.     drawing.lineTo(square_0._x, square_0._y);
  41.     drawing.moveTo(big_square._x, big_square._y);
  42.     drawing.lineTo(square_1._x, square_1._y);
  43.     drawing.moveTo(big_square._x, big_square._y);
  44.     drawing.lineTo(square_2._x, square_2._y);
  45.     drawing.moveTo(big_square._x, big_square._y);
  46.     drawing.lineTo(square_3._x, square_3._y);
  47. };
  48. // moving the big square if the player pressed mouse button
  49. _root.onMouseDown = function() {
  50.     big_square._x = _root._xmouse;
  51.     big_square._y = _root._ymouse;
  52. };

Enjoy... press the mouse and see what happens

Download the source code and enjoy

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.5 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

9 Responses to “Create a Flash game like PixelField”

  1. Gabriel Bianconi on August 19th, 2008 4:18 pm

    Nice… Are you going to do Part 2?

    Thanks!

  2. JDog053 on August 19th, 2008 8:35 pm

    Now that is awesome !

  3. Kitsuki on August 19th, 2008 11:18 pm

    Glad to see that tonypa realesed a new game here =)
    His tuts on tiles-based engine are greats!

    Thank you for this tut Emanuele! =)

  4. FrozenHaddock on August 20th, 2008 3:45 pm

    Oooh, cool!

  5. tonypa on August 20th, 2008 8:02 pm

    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”.

  6. Brad on August 21st, 2008 6:11 pm

    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

  7. raelz on October 21st, 2008 7:05 pm

    Cool tutorial, first one (out of five) I actually completed ! :D Thanks for this

Leave a Reply




Trackbacks

  1. Flash Tutorials | AS3, AS2 Flash game tutorials roundup part 2 | Lemlinh.com on August 28th, 2008 1:50 am

    [...] Read more [...]

  2. 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. [...]

Posts