I have two timelines in JavaFX that moves an image on the screen. One is in the onMouseEntered function to move the image left, and the other in the onMouseExited function to move the image back to the right. The keyframe has translateX starting at 0 and going to 10, and the other starts at 10 and goes to 0. The problem is that the two timelines don't move the image the same distance, so that if you activate it several times it starts creeping to the right. Is there something I'm missing here? How do I set up an animation so that it moves the same distance forward and backward?
Figured it out, the return trip should make translateX go to 0, not to -10
Related
I have two objects: one is a ball, whose velocity is given by a vector of components velocity.x and velocity.y, such that, at every frame, the (x, y) position of the ball gets updated to (x + velocity.x, y + velocity.y); the other is a very thin horizontal rectangle that cannot move. Of course, I'd love the ball to change its trajectory whenever it hits the rectangle either from above or from below.
However, I've run into a problem I don't know how to fix: whenever the ball travels fast enough to go from one side of the rectangle to the other side in just one frame, the collision isn't detected because the ball never actually comes in contact with the rectangle. Being the rectangle very thin, the minimum velocity beyond which this behaviour occurs isn't even too high.
I know this is a problem that usually occurs when you want to keep an object inside the screen: in fact, if you just change the sign of its velocity as soon as it exits the screen, this doesn't necessarily make your object rebound off the side of the window (because it could travel so fast that a part of it gets stuck outside the edge), so you actually have to reposition it inside the window first, and then change the sign of its velocity accordingly. But I cannot use this trick here, because the behaviours of the ball on the two sides of the rectangle are supposed to be different: if the ball hits it from above, it will bounce upwards; if from below, it will bounce downwards. But when the ball manages to go past the rectangle in just one frame, how can I tell the program which side the ball should be repositioned? After all, once that frame is drawn, the program isn't able to know whether the ball came 'from the other side' of the rectangle, or if it's always been on that side.
I hope I managed to explain my problem clearly enough. What can I do to solve it?
Take the previous position of the ball and the current position of the ball, and create a line. Use that line to perform collision detection instead of the ball itself. Test for collision detection between the line and the rectangle.
This is going to be a bit more complicated than testing for collision detection between a circle and a rectangle, but googling "line rectangle collision detection" will return a ton of results. Basically you'll want to break the rectangle down into 4 lines and then check whether each line intersects your path line.
This question might help: How do you detect where two line segments intersect?
I am trying to make a bouncing ball animation in TI Basic and The ball is leaving a trail, and I can't figure out how to clear the graph every second. Is there a solution to this problem, if so please post it.
My Code:
ClrDraw
AxesOff
0->Xmin
0->Ymin
94->Xmax
62->Ymax
Xmax/2->X
Ymax/2->Y
1->A
1->B
Line(0, Ymax, Xmax, Ymax)
Line(0, Ymax, 0, 0)
Line(0, 0, Xmax, 0)
Line(Xmax, Ymax, Xmax, 0)
While 1
If X<1 or X>Xmax-3
Then A*-1->A
End
If Y<1 or Y>Ymax-3
Then
B*-1->B
End
Line(X,Y,X+2,Y)
Line(X,Y+1,X+2,Y+1)
Line(X,Y+2,X+2,Y+2)
X+A->X
Y+B->Y
End
You have two options to clear the ball after every frame:
You can either run ClrDraw every frame, before you draw the ball on that frame, or
you can run the code to draw the ball before you update the ball's coordinates, but instead of drawing with a black pen color, you can draw with white or set the erase flag, to erase the ball. There's an optional 5th argument to Line() that if it's set to 0, will erase your line instead of drawing it.
You can use either to remove the "after-image" the ball keeps, but ClrDraw will erase the whole screen, and keep nothing that you had there before, as opposed to the erasing Line() technique, which will only erase the ball.
The code, however, is up to you to implement.
One option that I have used in the past is to render blank all around the object's sides that are leaving trails.
I believe it's the left and top that leave trails, so you can simply draw a blank nothing to the left and above where the ball is rendered, effectively erasing the trail on the fly.
Another option is to use ClrDraw every iteration, but this is highly inefficient on the processor, and will slow down the animation.
You can use ClrDraw, however, it slows the program tremendously, so it is better to use redraw the ball with the last argument as 0 to clear traces, and only use ClrDraw once before the main loop.
I just recently began using Unity3D and this is my first game, so if I'm not doing things like I'm supposed to, please tell me.
There is a 2D character that I want to move one step forward using the Animation mechanism. This movement can be splitted in two parts :
Move forward the back leg, don't move the upper body ;
Use this leg to push and make the step, moving the upper body.
My problème is that I can't find a way to make this step permanent. As soon as it start looping on the "Idle" animation, then, it come back to the original position (before the step).
I don't know how to let my character stay in the position it was just between the "Step Forward" animation and the "Idle" animation.
I tried to add "Rigidbody 2D", "Box Collider 2D" and "Physics2D Material" on both feet and on the floor, but it somewhat breaks the IK script ("Simple CCD", from the youtube video "Unite 2014 - 2D Best Practices In Unity"). And I'm sure there is a much simpler way.
EDIT: My question was not clear enough. The idle animation is the default animation, where the character is doing nothing in particular. It's just moving a little while it's staying in position. When it runs "Step Forward", all the sprites are moved (only when the back leg is pushing). If all animations are stopped right now, then the character is indeed in a new position, closer to it's opponent. I can check that by removing the transition from "Step Forward" to "Idle". But from here, I want it to loop on the Idle animation. When the transition from "Step forward" to "Idle" is done, the character is NOT running Idle from it's new position, but from it's old position, before the step, as if it was pulled from backward. I want to run Idle from the new position.
Here is a longer gif when we can see more of the Idle animation :
And my Hierarchy panel looks like :
Main Camera
Karateka (the top GameObject container, with the Animator component)
Torso (the sprites)
Head
Right arm
Right leg
Right lower leg
Right foot
...
IK (the Inverse Kinematics targets)
Left fist target
Left foot target
...
Any suggestion is welcome.
If I get it right, you have the StepForward animation running and it gets cut in the middle back to idle. There, the StepForward animation triggers again but from the start and you wish to restart from where you left off:
You can record the normalized value of your StepForward animation and use it next time:
float normValue = this.animator.GetCurrentAnimatorStateInfo(0).normalizedTime;
then you can use that value:
this.animator.Play("StepForward", 0, normValue);
Other possibility, you are not after that but simply you want to pause the animation without getting to Idle.
Use a parameter. You can add a float parameter (call it direction) in the Animator window (top left). Then select a state in the animator, it will open the animation setting in the inspector. Under speed, open the drop down where your new parameter should show up. And tick it.
Now, your direction float will affect the speed of your animation as such:
this.animator.SetFloat("direction", value);
if you give 0, you pause. Give back 1 to move forward. You can also lerp the value so it is not abrupt. Your way.
I am a teacher and I am trying to make a page for my students showing the comparative size of the planets and the stars, like in one of those videos that are popular in Youtube.
But I have not been able to solve the problem, the closest I got was using "if window.pageXOffset > 1000" animate width etc. but what I really wanted was for the planets and stars (images) to scroll into view at 100% height and then as the page scrolled towards the right, they´d shrink down till 0% when reaching the left border (left=0px), while the next and next planet scrolled into view (showing 3 or 4 at a time) and so forth. The page should allow the user to scroll back and forth at will.
I tried the transform: scale method but wasn´t successful either.
Any help will be greatly appreciated.
You were going the right direction with using transform: scale(), and I've taken that and run with it. See the following jsfiddle:
https://jsfiddle.net/2z4djt0o/5/
During a scroll event, we look at each planet and decide what its scale should be depending on where it is relative to the left and right edges of the scrolling viewport.
Picture a Windows Phone.
There is a ball (a circle).
When you tap somewhere the ball moves toward that tap.
When it reaches that spot, it stops.
You tap somewhere else.
The ball moves toward that second spot.
BUT, before it reaches its destination, you tap somewhere else. A third tap.
Now the ball changes directions toward the third tap.
To move toward a tap - this is a simple animation.
To change course mid-stream; how do you do that?
If I simply stop the first animation, there is no easing.
I need to change courses gently, smoothly.
An ideas?
If you want the easing to stop right where the ball is at point 2 and then the easing to start moving to point 3, I would do something like this:
Modify endpoint (second spot) to be 10-20 pixels from the balls current location in the direction of second spot.
When the spot reaches the new second spot, start moving toward spot three.
Here is a diagram to help: