Animating text

cemleme

Hello,

Can you please suggest what is the best way to animate text in Spine?

Let's assume we want to create a scrolling text like led signs
Loading Image

so the animation needs to start with the last letter at the left side.

do you use images or add text display groups to the specific slots at runtime?

if you use images and as we can't use masks on spine do you seperate each letter into different image to form the text in spine?

what is the best way for this?

thanks

Xelnath

I would make an on/off texture for each 'dot', then toggle them on/off on each frame as desired.

Alternate 1:

Create it as a pre-rendered texture and cycle through them like a flip-book.

Alternate 2:

Create animations for each column that map to a particularly letter (You will need 5 animations per letter) then cycle through them at run time.

cemleme

thank you for the reply.

I believe I couldn't clarify my issue, sorry about that.

I am not trying to implement the dot based system. What I want is a simple scrolling text (from left to right)

lets say the text is :"example"

frame 1: only letter "e" is visible
frame 2: letters "le" is visible
frame 3: letters "ple" is visible

and so on...

I can do that if I prepare image for each letter and form the skeleton from these images, but it will be an unpleasent job when the text is much larger

(it would be easy if there was a masking system, so I could create the image of the text and scroll it and hide the left and ride of the text)

So I'm asking if there is any other way to implement this?

Mario

Spine currently does not support masking, and it's uncertain if we'll ever support this feature. Many of the engines and frameworks we target at runtime do not have the necessary facilities to implement arbitrary masking. Your best bet at the moment is to manually animate the scrolling as you described I'm afraid.

Erika

How about you make a skeleton with 5 slots, (one for each max column letter vertical line) And you create an animation with 63 frames (the max horizontal length of this given image).
You then have one bone controlling the overall letter position with 5 child bones for each vertical line of the letter.
In the animation you offset the position of the letter (it will be a fixed offset since the dots distance is fixed) and when they arrive at border you deactivate the slots placed in the row that is not supposed to be seen at the ening/starting points.
Finally, you create as many skins as you need for letters etc.

It's a bit of a roundabout but it might do the job.

Xelnath

If it's for a game, the dot matrix + a letter -> grid solution would be the best.

If its prerendered... you're doing something by hand.