karai17 / love-spriter

A Spriter implementation for LOVE
MIT License
9 stars 2 forks source link

Scaling is only changed on keyframes, not between them #3

Open tpimh opened 3 months ago

tpimh commented 3 months ago

I have implemented a simple heartbeat animation, it's done by scaling and translating a sprite. Two frames have different sprite scale and sprite position (to keep it centered when it's being scaled). The scaling seems to be only changed on keyframes, and kept the same on the intermediate frames, translation also doesn't seem to be applied correctly.

heart.webm

SCON file:

{
  "entity":[
    {
      "animation":[
        {
          "id":0,
          "interval":100,
          "length":300,
          "mainline":{
            "key":[
              {
                "bone_ref":[

                ],
                "id":0,
                "object_ref":[
                  {
                    "id":0,
                    "key":0,
                    "timeline":"0",
                    "z_index":"0"
                  }
                ]
              },
              {
                "bone_ref":[

                ],
                "id":1,
                "object_ref":[
                  {
                    "id":0,
                    "key":1,
                    "timeline":"0",
                    "z_index":"0"
                  }
                ],
                "time":100
              }
            ]
          },
          "name":"beat",
          "timeline":[
            {
              "id":0,
              "key":[
                {
                  "id":0,
                  "object":{
                    "file":0,
                    "folder":0,
                    "scale_x":0.8,
                    "scale_y":0.8,
                    "x":-205,
                    "y":205
                  },
                  "spin":0
                },
                {
                  "id":1,
                  "object":{
                    "file":0,
                    "folder":0,
                    "x":-256,
                    "y":256
                  },
                  "spin":0,
                  "time":100
                }
              ],
              "name":"heart"
            }
          ]
        }
      ],
      "character_map":[

      ],
      "id":0,
      "name":"heart",
      "obj_info":[

      ]
    }
  ],
  "folder":[
    {
      "file":[
        {
          "height":512,
          "id":0,
          "name":"heart.png",
          "pivot_x":0,
          "pivot_y":1,
          "width":512
        }
      ],
      "id":0
    }
  ],
  "generator":"BrashMonkey Spriter",
  "generator_version":"r10",
  "scon_version":"1.0"
}

Icon used in demonstration is from Fantasy Icon Pack by Ravenmore.

tpimh commented 3 months ago

This is the closest thing I could get (rendered 10 times slower at 5 fps for debugging):

Screencast from 09-04-2024 08:35:58 PM.webm

The zoom out animation seems correct, but the zoom in seems wrong. I have watched Hardcrawler's overview of this library, and it was a pretty good start, but now I am lost again. Any pointers?

tpimh commented 2 months ago

This is done not without a bit of cheating, but it works:

Screencast from 09-08-2024 04:02:54 PM.webm

Also works for animations changing the angle:

Screenshot from 2024-09-08 16-12-46