• home
  • forum
  • my
  • kt
  • download
    • Home / 2D Graphics / Flash / Games /

    A different way to move a character with Flash

    Author: 2008-10-02 14:17:16　From:

    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.

    discuss this topic to forum

    [Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (68)
      Utilities (21)
      Getting Started (91)
      Video (24)
      Interactivity (43)
      Web Design (29)

    New

    Hot

    JCWcn.com
    Copyright © 2007 All rights reserved