Trouble with character movement
A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: Trouble with character movement

  1. #1
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128

    Trouble with character movement

    For the movement - imagine a circle, and in the centre of that circle is the main character standing still. It also needs to be from a diablo style view (God view, and a bit to the right).

    Below are the range of values in degrees that if the mouse was clicked between, would goto the corresponding movie clip of the way that the character is walking:

    • Up = 337.5 to 22.5
    • Up-right = 22.5 to 67.5
    • Right = 67.5 to 112.5
    • Down-right = 112.5 to 157.5
    • Down = 157.5 to 202.5
    • Down-left = 202.5 to 247.5
    • Left = 247.5 to 292.5
    • Up-left = 292.5 to 337.5


    I hope you understand what I mean here...if not then I have really confused you and I am sorry if I have! See picture attached to give you a clearer view of what I mean...

    So if any one know how to go about this problem, then please reply.

    Regards,

    Stibily.

    P.S. If you say that I should have posted this in the actionscripting forum, or games, etc... then you are wrong 'cos I have posted this there aswell!

  2. #2
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    Seems like you've already done an excellent analysis of what you need to do.

    What is the problem exactly?

  3. #3
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128
    My problem is that I don't know the scripting for it. Any ideas?

  4. #4
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    Let's say you make a movie in which each frame corresponds to one of your diagonal directions (each frame would contain a movieclip with a walk cycle of the man walking in the desired direction).

    I've modified the order so that it will work with atan2 (0 degrees starts pointing to the right (3:00) and then proceeds clockwise).

    1 * Right
    2 * Down-right
    3 * Down
    4 * Down-left
    5 * Left
    6 * Up-left
    7 * Up
    8 * Up-right


    Set up the movieclip so the crosshairs correspond to the 'center' of the man.

    Put the movieclip on the stage, and call it man_mc.

    Use the following script (attached to a frame on the main timeline) to control which frame to use.

    code:

    man_mc.stop();

    man_mc.onMouseDown = function()
    {
    // dx,dy are the position of the mouse relative to the center of the man
    var dx = this._xmouse;
    var dy = this._ymouse;

    // get the angle of the mouse
    angle = Math.atan2(dy,dx);
    // convert to a frame number (1-8)
    frameNbr = Math.round(8+4*angle/Math.PI) % 8 + 1;
    this.gotoAndStop(frameNbr);
    // trace(angle + ", " + frameNbr);
    }



    Attached is a hastily-constructed sample movie that uses this script in the way that I describe. I'm using static pictures of the man, but instead, each frame of the man_mc movie should contain the animation you wish to use for that direction.
    Attached Files Attached Files

  5. #5
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128
    Thank you so much! This is exactly what I was looking for!
    I cant thank you enough!

    Regards,
    Stibily

  6. #6
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128
    There's one more thing...do you have some script for making him move to the spot? Cos I thought that I could use the script from the sample that comes with flash (the ladybird one), but I can't seem to edit it correctly. Any ideas?

  7. #7
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    A modification.

    code:


    man_mc.stop();

    // Use tx,ty to keep track of desired location
    man_mc.tx = man_mc._x;
    man_mc.ty = man_mc._y;
    man_mc.walkSpeed = .2;

    man_mc.onMouseDown = function()
    {
    // dx,dy are the position of the mouse relative to the center of the man
    this.tx = _root._xmouse;
    this.ty = _root._ymouse;
    var dx = this._xmouse;
    var dy = this._ymouse;

    // get the angle of the mouse
    angle = Math.atan2(dy,dx);
    // convert to a frame number (1-8)
    frameNbr = Math.round(8+4*angle/Math.PI) % 8 + 1;
    this.gotoAndStop(frameNbr);
    // trace(angle + ", " + frameNbr);
    }

    man_mc.onEnterFrame = function()
    {
    this._x += (this.tx - this._x)*this.walkSpeed;
    this._y += (this.ty - this._y)*this.walkSpeed;
    }



  8. #8
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128
    This is fantastic! Thanks!

    Sorry, But I have two last questions though!

    How do I make the character start from standing position, then go back to standing postion after he's walked to mouse click postion?

    Also, is it possible to have the movement at a contant speed instead of slowing down? Or do you think that the slowing down is better? Personally I think a contant speed would look more realistic? What do you think?

    Sorry to bomb-bard you with all these questions, choose to ignore them if you wish!

    Thx again, you've been a great help!

    Stibily

  9. #9
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    Rather than write the whole script, I'll give you the math, and some partial scripts in hopes that you can incorporate it into your script, and thereby learn more in the process.

    The current movement system (from the last script I posted) sets a target
    (tx,ty) and moves a fractional amount in that direction. Kind of like this:

    _x += (tx - _x)*.2;
    _y += (tx - _x)*.2;

    This is sometimes called 'eased movement' or 'zenoing' (based on Zeno's paradox about a runner moving halfway to a target) and it does indeed cause your man to slow down as he comes to a stop. It's often desirable, but in your case, you're wanting a more linear kind of movement. You might want to use easing for the very end of the movement, so he doesn't jerk suddenly to a stop.

    For linear movement, you want to add a constant amount to the x and y coordinates, like so.

    _x += vx;
    _y += vy;

    The hard part is figuring out vx and vy. You start by figuring out the deltas - the distance from the man to the target.

    dx = (tx - _x);
    dy = (ty - _y);


    If you simply did this:

    _x += dx;
    _y += dy;

    The man would make one 'jump' to the target position. So you want to scale dx,dy to some smaller value, so that you can make a number of incremental jumps in that direction.


    There are a few ways to do this. Here's one I commonly use:

    // this gives you the distance to the target.
    distance = Math.sqrt(dx*dx + dy*dh);

    vx = dx/distance;
    vy = dy/distance;

    Now vx,vy make a 'unit vector' - they will cause the man to travel one pixel
    in the desired direction when you do this:

    _x += vx;
    _y += vy;

    If you want the man to go a particular speed, such as 3 pixels per frame, then multiply by that speed when you compute vx,vy.

    speed = 3;
    vx = speed * dx/distance;
    vy = speed * dy/distance;

    Using this method is pretty simple, but you may find it difficult getting the man to stop and easing the motion at the end. One way to accomplish this is to examine the distance

    code:

    // tx,ty are the target
    // vx,vy are the velocity

    easeFactor = .2;
    speed = 3;

    dx = (tx - _x);
    dy = (ty - _y);
    distance = Math.sqrt(dx*dx + dy*dh);
    if (distance < .5) {
    // close enough, stop
    vx = 0;
    vy = 0;
    }
    else if (distance < 5) {
    // use easing style motion
    vx = dx*easeFactor;
    vy = dy*easeFactor;
    }
    else {
    // use linear motion
    vx = speed * dx/distance;
    vy = speed * dy/distance;
    }
    _x += vx;
    _y += vy;



    Finally a suggestion - your question is more games-oriented than physics-oriented - if you post your questions on the games forum (which is a lot busier), you'll get a lot more people answering them...

    As far the standing/walking animation is concerned - you need to animate the different things you want to see, and use those animations at the appropriate points in the walk sequence. For example, when the distance < 5, and the walk cycle is on the right frame number, you could trigger the part of the animation that takes the man from a walk to a standing position.
    Last edited by jbum; 05-12-2004 at 07:09 PM.

  10. #10
    Snowboarder tomstaveley's Avatar
    Join Date
    Mar 2004
    Location
    Brighton, UK
    Posts
    128
    Thank for everything!

    I'll try finding the right values for the equations and if I have any problems then I'll post in the games forum.

    Once again, Thanks a lot!

    Stibily

  11. #11
    Junior Member
    Join Date
    Feb 2006
    Posts
    2
    hi i also would like to produce a point an click game but do not understand, as when i cpyd it to be on my flash my character did not move. i would be thankfully if you could help me with this

  12. #12
    Senior Member ozmic66's Avatar
    Join Date
    Oct 2005
    Posts
    472

    back from the dead

    i'd love to help you out (and not to sound grouchy) but i don't feel like reading that whole thread

    if u could pinpoint a specific problem, rather than saying that you moved it to flash and it's not working, it'd be much easier to help
    Last edited by ozmic66; 02-08-2006 at 11:34 PM.

  13. #13
    Junior Member
    Join Date
    Feb 2006
    Posts
    2
    yea sorry it was a bit stupid now i read myn lol.
    i have relised how to get the character to move now (as i have been typing the code rong).but i waould like it to be like broken sword and have him have a walk animation when he moves plus how to get it to only work in certain areas so my character wont waslk in the sky ov something.
    thanx

  14. #14
    Senior Member ozmic66's Avatar
    Join Date
    Oct 2005
    Posts
    472
    ok... so you want to animate the character when he walks?
    there are many ways to do this, and i think you'd get the best response in the 'games' room since there are more people there usually

    now, is this a side scroller or top view?

    i had the notion that it was top view, in which case there is no sky, so tell me what you mean by your question

    if you don't want the character to walk into other objects, then this would be the right place to get help, just be a little more specific

  15. #15
    Registered User
    Join Date
    Aug 2012
    Posts
    1

    hey

    I found your script the other day and I was trying to translate it to as3, but now its broken.

    this is what I have so far.


    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\code follows\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    man_mc.stop();
    stage.addEventListener(MouseEvent.MOUSE_DOWN,fdire ction);

    function fdirection(e:MouseEvent)
    {
    // dx,dy are the position of the mouse relative to the center of the man
    var dx = this.mouseX;
    var dy = this.mouseY;



    // get the angle of the mouse
    var angle = Math.atan2(dy,dx);
    // convert to a frame number (1-8)
    trace(dy+"dy");
    trace(dx+"dx");
    trace(angle+"angle");
    var frameNbr = Math.round(8+4*angle/Math.PI)%8+1;
    trace(frameNbr+"frameNbr");
    man_mc.gotoAndStop(frameNbr);

    }

    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    I don't know why the math would be any different, I'm thinking that it might be because I'm pointing to the stage instead of the object though, not really sure I'm not really a programmer. Any help would be much appriciated.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center

Poll by Flashkit.com