English What is tween?

14 replies
Goto Page
To the start Previous 1 Next To the start
05.04.18 02:52:15 am
Up
Goo
User
Offline Off
Hello!
I was wondering what is the difference between normal
image
commands and ones that start with
tween_
. Would be helpful to know!
edited 1×, last 05.04.18 03:26:19 am
05.04.18 07:36:10 am
Up
PyKemis
User
Offline Off
So here is the list of all image-related commands.

The difference between image_* and tween_* commands is that image_* will set the property instantly, while tween_* will slowly animate the property within a given interval.

cs2d lua cmd imagealpha (id, alpha) -> sets the alpha instantly

cs2d lua cmd tween_alpha (id, time, alpha) -> animates the alpha over time in milliseconds

The tween commands will look smoother than doing the animation yourself because it only sends one packet to the client - and the animation is done on the client side.
05.04.18 12:17:07 pm
Up
Goo
User
Offline Off
Oh that makes more sense now, thank you.
05.04.18 08:57:17 pm
Up
DC
Admin
Offline Off
Also see https://en.wikipedia.org/wiki/Inbetweening to understand why it's called like that
www.UnrealSoftware.de | www.CS2D.com | www.CarnageContest.com | Use the forum & avoid PMs!
06.04.18 03:16:53 pm
Up
Goo
User
Offline Off
Hi again!
I've tried to use the command
tween_scale
.
After a few good minutes of trying to understand what it does, I failed. I've tried everything but the only way I made it change the original image didn't change over the time I told it to change but rather it instantly changed.
Now maybe the change can be instant (which I really don't want it to since I need it to move) but it doesn't change the way I want it to...
Here's an example of what I want it to look like going from top to bottom. https://i.imgur.com/26ZgUqk.png

Now I would use some type of a spreadsheet but I want it to be animated and @user PyKemis: said it's a lot smoother when you use
tween_
.

Now what the command actually does is cut the image from both sides instead of just one like it's supposed to, what can I do?
06.04.18 04:00:02 pm
Up
Nova
User
Offline Off
Can you show us the code you used?
Hexenverbrennung, Inquisition, Kreuzzüge... Wir wissen, wie man feiert! - Ihre Kirche
06.04.18 04:11:59 pm
Up
Goo
User
Offline Off
Code:
1
2
3
image[id]=image("gfx/image.png",568,649,2)
imagealpha(image[id],0.5)
tween_scale(image[id],30,0,1)
07.04.18 09:06:54 am
Up
Nova
User
Offline Off
The time parameter works with milliseconds. If you want the change to happen in 3 seconds you have to write 3000 (as 3 seconds are 3000 milliseconds).
Hexenverbrennung, Inquisition, Kreuzzüge... Wir wissen, wie man feiert! - Ihre Kirche
07.04.18 07:05:03 pm
Up
Goo
User
Offline Off
@user Nova: 3,000 is 3 seconds so I did 30,000 and it worked!

But one of my problems remain and that is the image is being cut from both sides instead of just one! Is there anything I can do about it?
07.04.18 07:24:26 pm
Up
Masea
Super User
Offline Off
@user Goo:
Code:
1
tween_scale(image[id],30,0,0)

This would work.
Create and design your GUI easy and fast: file cs2d GUI Framework (12) | Go deep of the darkness and try your intrepidity: file cs2d Outlast 2 Modification (25)
07.04.18 07:37:39 pm
Up
Goo
User
Offline Off
@user Masea:

The time should be 30,000 and not 30, this has been fixed.

Having X on 0 means both left and right sides of the image will be cut, same goes for Y.
What I want to do is to cut the image from the RIGHT side only, your method will cut it from all four sides of the image.
07.04.18 07:37:40 pm
Up
DC
Admin
Offline Off
The problem is that the image is centered so scaling is from the center as well. A trick to compensate that would be to combine the scale tween with a move tween and to move the image accordingly along the X axis (to the left) using cs2d lua cmd tween_move.

assuming that the image has a size of w (w needs to be set to the actual width) this should work:

Code:
1
2
3
4
5
6
7
local x=568
local y=649
local w=100 -- todo: set actual image width here
image[id]=image("gfx/image.png",x,y,2)
imagealpha(image[id],0.5)
tween_scale(image[id],30000,0,1)
tween_move(image[id],30000,x-w,y)


I didn't try this but I hope it works.
www.UnrealSoftware.de | www.CS2D.com | www.CarnageContest.com | Use the forum & avoid PMs!
07.04.18 07:46:29 pm
Up
Goo
User
Offline Off
@user DC: Thanks! It worked, but I had to change it up a little.
The problem in your code was that the image moved two pixels to the left and a pixel to the right, resulting in moving one pixel to the left. Or at least that's what I think it was...
The fixed code was multiplying 30,000 by two (60,000).
Code:
1
2
3
4
5
6
7
local x=568
local y=649
local w=100 -- todo: set actual image width here
image[id]=image("gfx/image.png",x,y,2)
imagealpha(image[id],0.5)
tween_scale(image[id],30000,0,1)
tween_move(image[id],60000,x-w,y)
07.04.18 07:52:42 pm
Up
DC
Admin
Offline Off
Oh okay. Then maybe a better fix is to just move it to
x-w/2
or does that lead to a different result?
www.UnrealSoftware.de | www.CS2D.com | www.CarnageContest.com | Use the forum & avoid PMs!
07.04.18 07:57:12 pm
Up
Goo
User
Offline Off
It leads to the same result.
To the start Previous 1 Next To the start