kaplayjs / kaplay

🦖 A JavaScript/TypeScript Game Library that feels like a game. Make games fast, fun and fanstastic.
https://kaplayjs.com
MIT License
434 stars 32 forks source link

feat: relativeFrame #171

Open amyspark-ng opened 3 months ago

amyspark-ng commented 3 months ago

Describe the bug

A clear and concise description of what the bug is.

Not sure if this is actually a bug, but right now, when you want to get the current frame, it treats all animations of an object as a single animation and returns the frame in this "single animation" thing, instead of returning the frame for the current animation

let's say i have an object with an idle animation (4 frames) and a run animation(3 frames) if im running, the frame would be something above 3, which doesn't make sense

lajbel commented 1 month ago

I don't understand, would you provide example code?

amyspark-ng commented 2 weeks ago

Let's say you have a sprite with animations walk (frames 0 to 3) and jumping (4 to 8)

So if you do something like

player.play("walk") debug.log(player.frame)

this would return well any number between 0 to 3, but if you do

player.play("jumping") debug.log(player.frame)

this would return a number between 4 to 8!!! which doesn't make much sense to me, it should return a number between 0 to 4 (the amount of frames the jumping animation has)

mflerackers commented 2 weeks ago

This should be a new getter relativeFrame, because the other one is the absolute frame of the animation and shouldn't be changed.

amyspark-ng commented 2 weeks ago

fair

mflerackers commented 2 weeks ago
get relativeFrame() {
      if (!spriteData || !curAnim || curAnimDir === null) {
          return this.frame;
      }

      const anim = spriteData.anims[curAnim.name];

      if (typeof anim === "number") {
          return anim;
      }

      return this.frame - anim.from;
  },
amyspark-ng commented 2 weeks ago

oh i see, could work as a method in the type

dragoncoder047 commented 1 day ago

after a cursory look at this

get relativeFrame() {
      if (!spriteData || !curAnim || curAnimDir === null) {
          return this.frame;
      }

      const anim = spriteData.anims[curAnim.name];

      if (typeof anim === "number") {
          return anim;
      }

-     return this.frame - anim.from;
+     return this.frame - Math.min(anim.from, anim.to);
  },

because the anim can have from > to for reverse playing

amyspark-ng commented 10 hours ago

i might make a pr for adding this!