Hello
THE PROBLEM
Continuing on from my tween crosshair topic I have some questions on the logic for implementing different tween behaviour for different player states. For example when the player is moving the crosshair will spread apart then when the player jumps that spread becomes larger, when crouching the spread becomes smaller etc. I want to know the best method of implementing this successfully.
Would the best way to do this be by creating multiple different tween animations and functions for individual state and then call these functions accordingly?
MY ATTEMPT
The below is inside the update function of my movement script and is referencing functions inside a separate crosshair script. Would this be the best way to achieve this?
if (this.playerJumping || this.playerFalling) {
// this.entity.script.crosshair. jumping/falling tween function
}
else if (this.playerShooting) {
// this.entity.script.crosshair. shooting tween function
else if (this.playerMoving) {
// this.entity.script.crosshair. moving tween function
}
else if (this.playerCrouching) {
// this.entity.script.crosshair. crouching tween function
}
else {
// this.entity.script.crosshair. stopping tween
}
I have tried this so far but the problem with the above is that the tweens overlap with each other and glitch or some tweens do not even trigger. I am having trouble implementing each of these together without them overlapping each other.
Below is the statement I use for each individual tween function but I am having trouble implementing this all together without breaking everything.
// e.g. Jumping Tween Function
if (this.crosshair_dynamic) {
this.topTweenIn.stop();
this.leftTweenIn.stop();
this.rightTweenIn.stop();
this.bottomTweenIn.stop();
this.topTweenOut.start();
this.leftTweenOut.start();
this.rightTweenOut.start();
this.bottomTweenOut.start();
}
I will link a project example too and some videos once I return from school.
Thanks.
I’m not 100% what your setup is like, so when you have a chance to post your project, I can take a look. In general, it can get dangerous to be managing tweens directly in your update functions since each time you use the .start() it starts a new tween. This can make it difficult to trouble shoot if you’re not careful, and increases the likelihood that you’re inadvertently starting tweens when you don’t mean to.
2 Likes
I have put together a quick project of what it looks like currently. Sorry I did not have time to make it better currently because of homework 
I tried to keep it as tidy as possible but its still messy. Im just doing tests on it and as a test I used lots of different tweens for the individual functions/states. Here is the project: https://playcanvas.com/project/825548/overview/tween2
So basically I want 4 different tweens for shooting(left clicking), moving, walking and jumping/falling without them all interrupting each other. Shooting tween is somewhat small, moving is a bit bigger, walking is the smallest, jumping/falling is the largest etc. The approach I took is probably really wrong but I am trying to get an understanding of implementing this.
Also to mention - currently the movement tween works as I want it, the jumping tween also somewhat works but only the first time (the first jump) after that the tween becomes glitched. Below is a video of it looking smooth at the first jump.
After the first tween it becomes like this:
Because I don’t know exactly what kind of effect you are trying to create, it is very difficult to say what is going wrong. Despite that, I don’t think you’re supposed to stop and start a new tween every frame, and that’s what happened now. I solved this by inserting a bool that keeps track of whether the jump/fall tween has already started. Try to do something like this for every tween and see if it improves the effect.
To better understand what your script is doing, try to use the console of your browser. You can open the console with the F12 key on chrome/windows.
-
Try to add for example console.log("check"); to see when this rule is executed.
-
You can add for example console.log("1"); and console.log("2"); and console.log("3"); on different places in your script to see if your script executes in the correct order.
-
You can read a variable at the desired moment by using for example console.log(this.tweenActive);.
1 Like
the effet he wants to make is common with fps games, the tween expanding shows that when you move you are less accurate, and the expanded ui shows where the bullets may go, it should also be based off the type of movement(sprinting, crouching, jumping) or speed of your movements.
2 Likes
I generally wouldn’t use the tween library for this and would lerp manually via update to the desired position of the cross hair bits based on what action the user is doing.
ie. if the user is still, the target position of the cross sections would be 5 pixels from the middle, running would be 30. In the update function, it would just lerp to the current target position.
That way you don’t have to worry about if a tween is active, or whether you have two tweens going on. It’s just always going to lerp towards the current target position of the sections based on the action.
4 Likes
DONE!
I thought that lerping was more performance intensive from looking at unity forums but I managed to solve the issue with only 2 lines of code (for lerping) rather than the lots of code when writing the tween functions. Turns out lerping was way easier and more convient than I initially thought 
2 Likes
hey, i took your crosshair script and tried to make it work with another script, it didnt, so i just pasted the script into YOUR script, but it just said “script is undefined”
Hi
Feel free to use the code. I don’t know how to debug your error unfortunately so maybe if you can ask the forum they might be able to help you with this.
