best way to tween sprite fonts?

  • hi, just wondering what the best way to tween sprite fonts.

    I want my sprite font to size up and size down when you select it. sort of like one cycle of a Sine on Size.

    since Sine doesn't effect the size of spritefont, I made it a value and adjust the scale, but it's difficult to deal with.. anyone know a better way to pop up your text with a tween?

    not exactly like this.. but the whole word

  • jobel

    yeah, the problem with scaling the font is that you have to also adjust with width and height so that the text will still fit inside after increasing the scale...

    it is a lot easier to make a sprite out of the font characters used in the sprite font and work with that.

    unless you need to use text that changes in the game - like player's name, or score...

    this is how I would make a sprite bounce in size:

    https://www.rieperts.com/games/forum/tweenfont.c3p

  • AllanR

    looks good!

    but wow, what a pain even with a sprite, nevermind text you need to change!

    Sine should REALLY have a one-off or a continuous checkbox like Particles do. That way you could do the Sine behavior just once and you should be able to set the cycle bounds: default is -100 to 100 but you should be able to set it to 0 (meaning no change) to 100 full change.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • jobel

    just updated my sample with a sprite font...

    the other problem with a sprite font is that the origin is the top left corner, so to make it bounce you also have to re-center it every tick.

    just realized that spritefont does let you change the origin!

    so download the file again and take a look.

    EDIT: I also just re-read you original post and saw that you wanted a full sine cycle - mine only does half a cycle while the mouse is over the object and then finishes the cycle when the mouse is not over... to change my sample you would have to make the shrink tweens automatically start when the grow tweens finish.

  • AllanR excellent... I thought that the width/height of the sprite would just change the box not the text like Sine does for size... cool!

    still though, triple nested events for a simple movement. This should really be a Behavior if I ever saw a need!

    No I only wanted half of the Sine's cycle. Normally a Sine starts at zero and goes to 100 then goes down to -100 and back to 0 for a whole cycle. I only wanted the 0-100-0 bit. you got it right in your example.

  • AllanR

    try turning Sampling to Nearest and watch the SpriteFont do extra movement. What is happening there? do you think it has to do with pixel rounding for spritefonts?

  • jobel

    for the spritefont, changing the width and height doesn't change the size of the text - I do that at the bottom:

    every tick - set scale to self.Width/self.OriginalWidth

    and I think that, plus the elastic tween results in the strange movement (pixel rounding might also play a role).

    I tried a few other tween settings, and things like only tweening the height and leaving the width at a fixed setting, but nothing seemed to help very much.

    I don't think tweening the scale of a spritefont is going to be a viable option. Tweening a sprite works much better...

    there may be a way to paste the text of a spritefont into a canvas and load that into a sprite if you really need text that can change. otherwise, make sprites of the words you need.

    or make sprites of individual letters and combine those to make the words you need (so, basically a custom sprite font).

  • yeah that's probably good advice, thanks for looking into it!

  • hi, just wondering what the best way to tween sprite fonts.

    here you go.

    http://www.sizzle-games.com/bouncy_spritefont.c3p

  • sizcoz

    that's awesome! I knew there had to be a tween value - I just didn't scroll down far enough!

    There are definitely a couple bugs in spritefont - when you specify character widths, the font no longer centers properly, and it seems like it checks for word/character wrapping before it applies the character width adjustments. And it doesn't seem to calculate TextWidth properly either.

    those things work properly in C2. I am going to file a bug report...

    in my sample I put a yellow sprite behind spritefont2 so that I can see where the edges of the font are (to see why it wasn't centered). I am also changing the size, as well as the scale, so that the mouse wont trigger the tween unless the mouse is near the text.

    https://www.rieperts.com/games/forum/tweenfont2.c3p

  • sizcoz good job.. that works! I knew there had to be a simpler way!

    yeah AllanR good idea since it works in C2 it might just be an oversight in C3.. thanks for doing that!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)