Do animations still use animations.yaml?

Help
1

Having difficulty implementing custom animations.

I’m trying to do a pretty simple animation (image moves to right, flips, moves to left, flips, etc) but I can’t figure out how to make it work.

I have been following the documentation but I wonder if it’s out of date? It references animations.yaml and config.yaml which both no longer exist when a new project is made.

I created a test project and made a new animations.yaml file with this code, which I think is following the documentation:

animations:
walk:
keyframes: walk
options:
duration: 5000
interations: infinity
direction: alternate

keyframes:
walk:
- transform: translateX(100px) translateY(10px)
- transform: translateX(100px) translateY(-10px)
- transform: scaleX(-1)
- transform: translateX(-100px) translateY(10px)
- transform: translateX(-100px) translateY(-10px)
- transform: scaleX(-1)

Then, I added this line to common.yaml with the filepath for animations.yaml:

animations: src/config/animations.yaml

Then, I wrote this into the game.narrat file:

main:
“test”
run test_walk
test_walk:
animate .dialog walk

As far as I can tell this all follows the documentation but I keep getting an error that the walk animation isn’t found. Am I doing something wrong or is this no longer the proper way to do this? Are animations done via main.css now?

edit: looks like the forum removes indentation levels–confirming the indentations are, to my knowledge, correct

2

OK, I think I have figured this out myself via a lot of trial and error. You can create an animations.yaml file but you have to add it to the index.ts file in the config folder

image
image439×682 19 KB

That said I am having trouble figuring out how to adjust the timing of the keyframes. I see a lot of examples online using percentages (ie, 48% { transform: 50px 50px}) but when adding those percentages to the code in animations.yaml the animation no longer runs. The docs refer to an offset value and link to a mozilla page but I’m not following how to translate the format they use to the format used by narrat (specifically, in narrat every keyframe object is on its own line with a dash in front of it–not sure where the offset value goes. Every way I’ve attempted makes the animation not run)

3

image
image904×454 18.5 KB

Given how the offset value is used in the mozilla examples, I assume something like that would work:

keyframes:
  rotate:
    - offset: 0
      transform: rotate(0deg)
    - offset: 0.5
      transform: rotate(360deg)

as it looks like the offset is just a prop that can be added to the object for the keyframe

4

Yup, that did it. Thanks, didn’t know you could have multiple lines per dash.

5

each dash is an object in the array basically

6

Makes sense. Just didn’t realize they also had to be on another line (I had attempted to put the “offset: [value]” on the same line originally and it didn’t work). These kinds of little syntactical things are killers for newbie with little code experience, hopefully this thread helps someone like me in the future