A strange way to move the player with Flash

May 30, 2007 by Emanuele Feronato
Filed Under Flash •  

When I look for some inspiration I browse some sites where talented designers post.

One of them is Newgrounds, almost all famous games are listed in it. I found a pretty good game called Pacco with a strange way to move the player. I have to be honest, I did not like the game itself but I liked something about the way you move the player.

pacco

I guess I can do a quite nice game starting from it.

First of all, play a bit Pacco, the follow the tutorial.

The character

The main character is a ball with a rotating arrow. Here it is how I did it: I created a movieclip linkaged as ball and inside of it I put the movieclip linkaged as arrow

character

The picture represents the ball movieclip, not the scene

The arrow must rotate, no matter if clockwise or counter-clockwise at the moment

PLAIN TEXT
ACTIONSCRIPT:
  1. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  2. ball.onEnterFrame = function() {
  3.     this.arrow._rotation += 5;
  4. };

Line 1: crete the ball (with the arrow inside of it)

Lines 2-4: rotates the arrow of 5 degrees clockwisely at every frame

Press the mouse to stop rotation

This does not happen in Pacco but I am going to change a bit the gameplay. I want the arrow to stop when I press the mouse button

PLAIN TEXT
ACTIONSCRIPT:
  1. rotate = true;
  2. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  3. ball.onEnterFrame = function() {
  4.     if (rotate) {
  5.         this.arrow._rotation += 5;
  6.     }
  7. };
  8. function onMouseDown() {
  9.     rotate = false;
  10. }

Line 1: Boolean variable indicating that the arrow must rotate

Line 4: If rotate is true (and it's true by default) then proceed with the rotation routine

Lines 8-10: If the mouse button is pressed (I mean pressed, not released) the rotate variable turns to false

Now the arrow stops rotating when we press the mouse button

Charging the power

The next step is to chage the power when we hold the mouse button pressed.

I edited the ball movieclip inserting a dynamic text field called pwr... just to show the power while it charges

PLAIN TEXT
ACTIONSCRIPT:
  1. rotate = true;
  2. power = 0;
  3. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  4. ball.onEnterFrame = function() {
  5.     if (rotate) {
  6.         this.arrow._rotation += 5;
  7.     } else {
  8.         power++;
  9.         if (power>50) {
  10.             power = 50;
  11.         }
  12.     }
  13.     this.pwr.text = power;
  14. };
  15. function onMouseDown() {
  16.     rotate = false;
  17. }

Line 2: Initializing the power to 0

Lines 7-12: If the arrow is not rotating (this means the player pressed the mouse) then start charging the power. Lines 9-11 prevents the power to raise over 50

Line 13: Displays the power writing its value in the text field

Now we have a charging power but you can notice that the power charges even if we stop holding the mouse down and there is no way to reset it.

Charging the power - step 2

Now I want the power to reset if I release the mouse button, and want the charged power to spread along arrow direction

PLAIN TEXT
ACTIONSCRIPT:
  1. rotate = true;
  2. power = 0;
  3. dir = 1;
  4. ballspeed_x = 0;
  5. ballspeed_y = 0;
  6. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  7. ball.onEnterFrame = function() {
  8.     if (rotate) {
  9.         this.arrow._rotation += 5*dir;
  10.     } else {
  11.         power++;
  12.         if (power>50) {
  13.             power = 50;
  14.         }
  15.     }
  16.     this.pwr.text = power;
  17. };
  18. function onMouseDown() {
  19.     rotate = false;
  20. }
  21. function onMouseUp() {
  22.     if (!rotate) {
  23.         rotate = true;
  24.         ballspeed_x += Math.sin(ball.arrow._rotation*Math.PI/180)*power/10;
  25.         ballspeed_y += Math.cos(ball.arrow._rotation*Math.PI/180)*power/10;
  26.         power = 0;
  27.         dir *= -1;
  28.     }
  29. }

Lines 4-5: Initialize ball speed at zero.

Lines 21-29: Function to call when the mouse button is released, only if rotate value is false.

Line 23: Rotate value is set to true again

Lines 24-25: ball speed x and y are calculated according to rotation and power using trigonometry as explained in this tutorial

Line 26: resets the power

Line 27: Changes the rotation way. If you noticed lines 3 and 9 you can understand how dir value affects the way of rotation. I want the rotation to change every time I release the mouse.

Now it's time to move the player

Moving the player

To have the ball moving we need this actionscript

PLAIN TEXT
ACTIONSCRIPT:
  1. rotate = true;
  2. power = 0;
  3. dir = 1;
  4. ballspeed_x = 0;
  5. ballspeed_y = 0;
  6. friction = 0.99;
  7. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  8. ball.onEnterFrame = function() {
  9.     if (rotate) {
  10.         this.arrow._rotation += 5*dir;
  11.     } else {
  12.         power++;
  13.         if (power>50) {
  14.             power = 50;
  15.         }
  16.     }
  17.     this._x += ballspeed_x;
  18.     this._y -= ballspeed_y;
  19.     ballspeed_x *= friction;
  20.     ballspeed_y *= friction;
  21.     this.pwr.text = power;
  22. };
  23. function onMouseDown() {
  24.     rotate = false;
  25. }
  26. function onMouseUp() {
  27.     if (!rotate) {
  28.         rotate = true;
  29.         ballspeed_x += Math.sin(ball.arrow._rotation*Math.PI/180)*power/10;
  30.         ballspeed_y += Math.cos(ball.arrow._rotation*Math.PI/180)*power/10;
  31.         power = 0;
  32.         dir *= -1;
  33.     }
  34. }

Line 6: Defining the friction as we do not want the player to move forever. You can find a tutorial about friction here

Lines 17-18: Updating ball _x and _y according to ballspeed_x and ballspeed_y values

Lines 19-20: Applying the friction to ballspeed_x and ballspeed_y

Finally we have the moving ball!

Time to introduce some obstacles

The wall

The wall is the king of all obstacles. Obey the wall! I do it everyday.

I created a new movieclip linkaged as wall and changed the actionscript:

PLAIN TEXT
ACTIONSCRIPT:
  1. rotate = true;
  2. power = 0;
  3. dir = 1;
  4. ballspeed_x = 0;
  5. ballspeed_y = 0;
  6. friction = 0.99;
  7. attachMovie("ball", "ball", 1, {_x:300, _y:200});
  8. attachMovie("wall", "wall", 2);
  9. ball.onEnterFrame = function() {
  10.     if (rotate) {
  11.         this.arrow._rotation += 5*dir;
  12.     } else {
  13.         power++;
  14.         if (power>50) {
  15.             power = 50;
  16.         }
  17.     }
  18.     this._x += ballspeed_x;
  19.     this._y -= ballspeed_y;
  20.     ballspeed_x *= friction;
  21.     ballspeed_y *= friction;
  22.     this.pwr.text = power;
  23.     if (wall.hitTest(this._x, this._y-10, true) or wall.hitTest(this._x, this._y+10, true)) {
  24.         ballspeed_y *= -1;
  25.     }
  26.     if (wall.hitTest(this._x+10, this._y, true) or wall.hitTest(this._x-10, this._y, true)) {
  27.         ballspeed_x *= -1;
  28.     }
  29. };
  30. function onMouseDown() {
  31.     rotate = false;
  32. }
  33. function onMouseUp() {
  34.     if (!rotate) {
  35.         rotate = true;
  36.         ballspeed_x += Math.sin(ball.arrow._rotation*Math.PI/180)*power/10;
  37.         ballspeed_y += Math.cos(ball.arrow._rotation*Math.PI/180)*power/10;
  38.         power = 0;
  39.         dir *= -1;
  40.     }
  41. }

Line 8: Attaching the wall in the scene

Lines 23-25: if the upper or lower part of the ball collides with the wall, I invert ball's y speed because I am sure I touched the "ceiling" or the "floor". For more information about hitTest method refer to this tutorial

Lines 26-28: Same thing with the leftmost and the rightmost part of the ball, inverting the x speed.

Caution: use this method only if you are SURE you have only horizontal or vertical straight walls. If you plan to put obstacles of different shapes or rotations, then you should apply the bounce method explained in this tutorial.

I am realizing I wrote a lot of tutorials... everytime I try to introduce something new I end writing "as said in this tutorial". This should reward regular readers increasing their knowledge without studying all tuts in a time.

Anyway, that's the game "finished". It's not over of course, as I plan to develop some new ideas starting from this tutorial.

Meanwhile, download the full sources and give me feedback.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

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

11 Responses to “A strange way to move the player with Flash”

  1. abhilash on May 31st, 2007 9:48 am

    its cool!!
    when you will be posting line rider’s next part??
    and will you mind if I post ‘ICY BUBBLE II’?? it’s much more cooler than the first part.

  2. Emanuele Feronato on May 31st, 2007 3:00 pm

    I will be pleased to publish it of course…

  3. fairlyn on May 31st, 2007 7:51 pm

    managed to get the ball stuck in the ceiling

    some interesting tutorials (when are you goint to go bact on the ball rewamped tutorials ?)

  4. mousey on May 31st, 2007 7:55 pm

    amazing as always, but how would you change it so when it reachs 50 it declines back down to 0 again?

  5. Samuel on June 2nd, 2007 2:11 am

    mousey:

    Define a variable at line 4:

    forceDirection = 1;

    then, in the “add force loop”, change to this:

    if (rotate) {
    this.arrow._rotation = 5*dir;
    } else {
    power = forceDirection;
    if (power>50 || power

  6. Samuel on June 2nd, 2007 2:14 am

    continue (don’t know why it cut off):

    (btw - it should read “power = forceDirection”)

    …
    if (power>50 || power

  7. Samuel on June 2nd, 2007 2:16 am

    Crap, I don’t get to finish the reply.

    Okei, in plain text:

    If power is bigger than 50 OR smaller than 0, multiply forceDirection with -1.

  8. eblup on June 2nd, 2007 2:27 am

    hey i would like to say can you make a tut of this ok?

    http://www.wizards.com/playdnd/playdnd.asp

    the game is in the walking tut

  9. Noahdecoco on October 15th, 2007 9:38 am

    Hey,

    This is a cool tutorial… everything works fine… I’m trying to build my first game in flash, its a school project, thought I could use this to make an interesting way of moving my character… the only problem right now it, it keeps getting stuck onto the walls… do you know what I mean? How can I solve that? And also, how do I make it so that the power goes up and down, back and forth? I tried using the above post, but it didn’t work… Any help at all is greatly appreciated!

    Cheers!

  10. MrNat on November 14th, 2007 1:05 am

    you should make the arrow actually shape it like an arrow and make an animation of the arrow filling up with red. then you make a movie clip and give it the actions “onMouseDown = function() { _root.ball.hero.play(); }
    onMouseUp = function() { _root.ball.arrow.gotoAndStop(1); }”

Leave a Reply




Trackbacks

  1. Developing a Flash game from scratch - day 1 - lobsterweb.com on September 23rd, 2008 2:44 pm

    [...] going pretty well, although I realise that this is only early days. I found a great tutorial from Emanuele Feronato which explains a neat method of moving the ball around using the mouse and a range/angle gizmo. [...]