How do I move an object in animation to certain position

0 favourites
  • 10 posts
From the Asset Store
This is a single chapter from the "Construct Starter Kit Collection". It is the Student Workbook for its Workshop.
  • I'm creating a cards game, the thing is that i want to create a deck and then move each card to its position, the thing is I want to move them in a fluid animation, it should be simple in CSS or js, but I have no idea how to do it in C2....

    some advises please?

    thanks.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Maybe i din't explain myself very well (my english is not so good... sorry for that)

    What I really mean is I have some cards (24 for example) with a common starting position, and then i have the finish position for each one on an array, I try to set position, but that didnt move, just change it from the very begining, i want to animate the changing of position....

    ask me if you need more explanations!!

    thanks all

  • The way I would do it is by assigning the cards two Instance variables, say TargetX and TargetY. You need to put desired coordinates in there. Then you use the wonderful lerp function to interpolate the movement of the cards towards their target locations - something like Set position to lerp(Sprite.X,Sprite.TargetX,dt) - and you can change the dt*Something to change the movement speed.

    I actually whipped up an example for you, just simplified with a base position.

    You could add a variable to the cards, like a boolean IsMoving and then only dot the lerp when it's moving. Then you can disable it if target X and Y have been reached, but also do something like enable that variable on a timer so the cards fly out one after another nicely.

  • The way I would do it is by assigning the cards two Instance variables, say TargetX and TargetY. You need to put desired coordinates in there. Then you use the wonderful lerp function to interpolate the movement of the cards towards their target locations - something like Set position to lerp(Sprite.X,Sprite.TargetX,dt) - and you can change the dt*Something to change the movement speed.

    I actually whipped up an example for you, just simplified with a base position.

    You could add a variable to the cards, like a boolean IsMoving and then only dot the lerp when it's moving. Then you can disable it if target X and Y have been reached, but also do something like enable that variable on a timer so the cards fly out one after another nicely.

    THANKS!!!!

    you really helped me, you can take a look here

    http://www.therealgeekgirl.com/memorymatch/

  • Excellent implementation - really feels like a card shuffle. Mind showing your events for it?

    If I may comment on the game - the moment when you see the cards feels a little short, mainly because you are not prepared for it, perhaps add a "Ready?" there after the shuffed and start after a click. Also I would make the sounds about 1/3 in length. I would also add some drop shadows to th objects on the table to add some dimension.

  • Excellent implementation - really feels like a card shuffle. Mind showing your events for it?

    If I may comment on the game - the moment when you see the cards feels a little short, mainly because you are not prepared for it, perhaps add a "Ready?" there after the shuffed and start after a click. Also I would make the sounds about 1/3 in length. I would also add some drop shadows to th objects on the table to add some dimension.

    Hello!! First of all, thanks for your help and your comments!!

    I'm working in this mini-game with my bf, we are using it to make some tests, so the sounds are provisional (from the free bundle of scirra! hahaha), but you are right, they are too long, you made us think about the "ready?" questions, it seems a great idea so we provably will implement it in next versions. In other hand.... I will work a little more on graphics since some of them have drop sadow (like the cards or the glasses) and other doesn't, they are mainly from this free to use bundle:

    http://medialoot.com/item/flat-statione ... ms-mockup/

    Also the card images are from this:

    https://dribbble.com/shots/1380706-Free-Flat-Icons-2

    (we will credit in the ended version, of course!)

    When we have the ended version we will post the complete .capx full commented (in spanish, sorry for that...) but by the momment, to do this "card shuffle" animation, as I told you before:

    • we start from the deck position, creating all the cards, also we allready have the final position of each card on an array. As you proposed we store those values on instance variables on the card, also we have other instance variables witch indicates the card order to shuffle, and another witch sais what frame to show when the cards are facing the images (the diferent images are all stored in animation frames).

    these are the events:

    NOTES:

    gNumeroCartas are the total number of cards we are goint to show, gNumeroCartas and gNumeroCartas2 are the same value.

    esEsta is the local variable witch indicates the order to shuffle.

    cartaCaraFrame is the local variable witch indicates the frame to show in the face of the card.

  • Thanks for the thorough reply. I'm no expert, but it's a joy when someone actually does things instead of being like "Pls make gam for me".

    One more thing you could do to make it more lively would be to set the initial deck rotation to something like random(88,92) - and just set them to 90 or lerp to 90 over the shuffle - would probably look neat. Or maybe even not make them straight - would feel a little more natural (but maybe not - just an idea).

    I get the feeling that placement could be optimized a bit, but not understanding the language it's hard to tell. But it works so it's good enough.

    Also you do the cards one by one, and very quick so that every 0.2 seconds thing works. You could probably make it go a little slower and smoother by making that esEsta = gAghoraReparte into esEsta < or > than that - in that case your cards could fly out in a sequence, kinda mildly overlapping.

    Actually the effect is so nice I made an example (since it could be useful later), check it out:

    [attachment=0:3lv9qaxn]Card Fun.capx[/attachment:3lv9qaxn]

    You could also use something like http://www.bfxr.net/ to make your own quick and simple sounds.

    Well, either way it looks pretty good - will check it out when finished.

  • Hi! I'm sorry to ask questions at somebody elses topic, but I had the same question! I don't have the most recent version of Construct, so I couldn't download your example.

    I have this dialog box that I want to appear when I tap a sign, or NPC or whatever. I'm still connecting the dots on what's the best way to do this (please bear with me, I'm a rookie, I downloaded the program like 3 days ago). So yeah, I want that dialog box to fade and move in when I tap. For the movement, this is what I have now:

    Needless to say, it doesn't work. Would you mind telling me why? Thanks in advance.

  • ametrine - lerp makes sense when used over time - in your case it's used once when the touch happens.

    You need to sort-of chain events - make the tap set in motion a series of events that will make your textbox appear.

    So, the best way is to split anything that needs to happen into steps in your head - then it's easy to split into actions. So instead of thinking "A box fades in" you think "A box appears, for example, above the play area, with opacity of 0, then it moves over to the desired position while fading in - this takes 2 seconds to complete". Now there's a plan!

    You already have the coordinates as variables, now you could add a boolean variable that checks if the dialog box should be moving.

    Then, for example, on tap you spawn a dialog box somewhere offscreen, set it's targetx and targety to where it should appear (you would set the boolean to active by default and opacity to 0 when you edit the object in the editor (to save on actions).

    Now you make a condition like - Is Boolean instance variable set - for your textbox. Move your set position code here - that one from above is good, just replace the 400 with dp - and see how fast it moves - if it's too slow make ti bigger by using dp*2 - or more. If it's too fast make it slower by using, for example dp/2 - or less. Add something similar to your opacity.

    This should work. Then you can add something like - if txtbox opacity >= 100 set the boolean to false.

    Another thing - if it's always the same (like your dialog panel always comes up from below) - there's no need for the instance variables, you can do something simple, like lerp(Sprite.Y,200,dt) <== If 200 is the target coordinate.

    Hopefully this gets you on the right track.

  • Actually the effect is so nice I made an example (since it could be useful later), check it out:

    [attachment=0:17bj9ll6]Card Fun.capx[/attachment:17bj9ll6]

    You could also use something like http://www.bfxr.net/ to make your own quick and simple sounds.

    Well, either way it looks pretty good - will check it out when finished.

    Ey!! this look so nice!! maybe I will use it, so thanks you!! you are great! <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)