Transformation Language Design
Posted: Tue Jun 09, 2009 1:23 am
So, I'm working on the transformation language that will be part of Ren'Py, probably starting with the next release. The idea of the transformation language is to provide a convenient way to specify the placement, rotation, scaling, and opacity of images. It will also provide a way to define animations. The idea is that this will become the preferred way to specify aspects of display that vary with time.
Let's see the most trivial transform:
This is the equivalent of the current "right" position, displaying an image on the right of the screen.
This is pretty boring, so let's take a look at a transform that starts the image on the left, moves it to the right, then back to the left:
We now have multiple lines. Each gives a time, and a position. So at 0 seconds it's at the left, at 2 seconds it's at the right, and then at 4 seconds its at the left again. By default, the values are linearly interpolated, but that can be changed, using (for example):
Which would use the ease function to do the interpolation.
Giving the repeat statement causes the current block of code to repeat from 0.
By nesting statements, the amount of time the repeat is for can be controlled:
By separating them with commas, one can include multiple properties on a single line. (Note: I need a better word than property here, as properties is used by the style system.)
Other properties include "rotate", "scale", and "alpha". The following spins its child forever:
While this scales it to full size:
The "parallel" statement lets you run both transforms at the same time. So the following will scale the child while spinning it, and then keep it spinning even after the scaling is done.
I'm not sure about the syntax, but I'd also like for it to be possible to define an animation using this mechanism. So one could probably do:
Of course, this would compose with other transforms.
I have some other ideas (like the ability to respond to events such as idle and hover), but these are the basics, and I thought I'd run them by the community before I start the implementation work. Any comments? Suggestions?
Let's see the most trivial transform:
Code: Select all
transform right:
xalign 1.0
This is pretty boring, so let's take a look at a transform that starts the image on the left, moves it to the right, then back to the left:
Code: Select all
transform bounce_once:
0: xalign 0.0
2: xalign 1.0
4: xalign 0.0
Code: Select all
transform bounce_once_ease:
0: xalign 0.0
2: xalign ease(1.0)
4: xalign ease(0.0)
Giving the repeat statement causes the current block of code to repeat from 0.
Code: Select all
transform bounce:
0: xalign 0.0
2: xalign 1.0
4: repeat
Code: Select all
transform bounce_three_times:
0:
0: xalign 0.0
2: xalign 1.0
4: repeat
12:
xalign 0.0
Code: Select all
transform v_shape:
0: xalign 0.0, yalign 0.0
1: xalign 0.5, yalign 1.0
2: xalign 1.0, yalign 0.0
Code: Select all
transform spin:
0.0: rotate 0
4.5: rotate 360, repeat
Code: Select all
transform scale:
0.0: scale 0
1.0: scale 1
Code: Select all
transform scale_and_spin:
parallel:
0.0: rotate 0
4.5: rotate 360, repeat
parallel:
0.0: scale 0
1.0: scale 1
I'm not sure about the syntax, but I'd also like for it to be possible to define an animation using this mechanism. So one could probably do:
Code: Select all
image eileen anim:
0: "eileen_happy.png"
1: "eileen_vhappy.png"
2: repeat
I have some other ideas (like the ability to respond to events such as idle and hover), but these are the basics, and I thought I'd run them by the community before I start the implementation work. Any comments? Suggestions?