Progressive Text

Troubleshooting gui
1

Hi everyone ,



Is that possible to do progressive text like seeing the text writed instead of being displayed in one shot ?

1 Like
2

This is a very special requirement :wink: and therefore not build in.



BUT



What about adding this little custom effect:



[java]package de.lessvoid.nifty.examples.helloworld;



import de.lessvoid.nifty.Nifty;

import de.lessvoid.nifty.effects.EffectImpl;

import de.lessvoid.nifty.effects.EffectProperties;

import de.lessvoid.nifty.effects.Falloff;

import de.lessvoid.nifty.elements.Element;

import de.lessvoid.nifty.elements.render.TextRenderer;

import de.lessvoid.nifty.render.NiftyRenderEngine;



public class TextTyping implements EffectImpl {

private String originalText;

private TextRenderer textRenderer;



@Override

public void activate(Nifty nifty, Element element, EffectProperties parameter) {

textRenderer = element.getRenderer(TextRenderer.class);

originalText = textRenderer.getOriginalText();

updateText("");

}



@Override

public void execute(Element element, float effectTime, Falloff falloff, NiftyRenderEngine r) {

updateText(originalText.substring(0, (int)(originalText.length() * effectTime)));

}



@Override

public void deactivate() {

}



private void updateText(final String currentText) {

textRenderer.setText(currentText);

}

}[/java]



and apply it like so:



[xml]…

<!-- notify Nifty that it now has a new effect called "textTyping" and that it lives in the given class -->

<registerEffect name="textTyping" class="de.lessvoid.nifty.examples.helloworld.TextTyping"/>

…

<!-- this assumes to be in a childLayout="vertical" panel -->

<label text="HELLO NIFTY WORLD" align="left" textHAlign="left">

<effect>

<onActive name="textTyping" length="5000" /> <!-- it should take 5000 ms to show the whole text one character after the other -->

</effect>

</label>

…[/xml]



Nifty? :smiley:

5 Likes
3

omg did you do that just now ? Thank you master void !



What about the CPU when you load that script ? has it good performance ?

4

I did that just now, my young Nifty Apprentice :smiley:



The effect only changes the text that gets rendered on the element so I’d guess that the performance impact (if any) would not be noticeable.

5

This is something I was also interested in; I just haven’t gotten far enough in my project to need it yet :stuck_out_tongue: Excellent stuff though. I see many ways you could supplement this with different text speeds and timings too. Good stuff.



I’m really only in the beginner stages with Nifty but holy crap this thing is crazy versatile Void! :slight_smile: I was thinking just earlier how it would probably be easily possible to make a “choose your own adventure” or dating sim modeled game with JUST Nifty. Great work!



Cheers!

~FlaH

6
void256 said:
I did that just now, my young Nifty Apprentice :D

The effect only changes the text that gets rendered on the element so I'd guess that the performance impact (if any) would not be noticeable.

Thank you ..... , My Master !


tehflah said:
This is something I was also interested in; I just haven't gotten far enough in my project to need it yet :p Excellent stuff though. I see many ways you could supplement this with different text speeds and timings too. Good stuff.

I'm really only in the beginner stages with Nifty but holy crap this thing is crazy versatile Void! :) I was thinking just earlier how it would probably be easily possible to make a "choose your own adventure" or dating sim modeled game with JUST Nifty. Great work!

Cheers!
~FlaH


That's very cool for you , i was also looking for a stuff like that since two weeks. Void rocks !
7

Thanks for the kind words!



And because it’s christmas … here is a little present for you. I’ve extended that TextTyping effect a bit and added a text scale effect to the rendering of the individual characters. So that each character gets zoomed in or stamped on.



A Nifty effect can be used to change render state for a given element or it can be used to render additional things. In the example here the individual characters are rendered additionally so that we can set the textsize of the individual characters. You could even make the characters fly in or something :slight_smile:



Here is the extended effect - quite a bit longer but still pretty small.



[java]package de.lessvoid.nifty.examples.helloworld;



import de.lessvoid.nifty.Nifty;

import de.lessvoid.nifty.effects.EffectImpl;

import de.lessvoid.nifty.effects.EffectProperties;

import de.lessvoid.nifty.effects.Falloff;

import de.lessvoid.nifty.elements.Element;

import de.lessvoid.nifty.elements.render.TextRenderer;

import de.lessvoid.nifty.render.NiftyRenderEngine;

import de.lessvoid.nifty.tools.Color;



public class TextTyping implements EffectImpl {

// length of the effect in ms

private int effectLength;



// start size of the text size effect

private float startSize;



// end size of the text size effect

private float endSize;



// time we have available for each step (char)

private float stepTime;



// the original text

private String originalText;



// the text renderer (for easy access)

private TextRenderer textRenderer;



@Override

public void activate(Nifty nifty, Element element, EffectProperties parameter) {

textRenderer = element.getRenderer(TextRenderer.class);

originalText = textRenderer.getOriginalText();



effectLength = Integer.valueOf(parameter.getProperty(“length”, “1000”));

startSize = Float.valueOf(parameter.getProperty(“startSize”, “5.0”));

endSize = Float.valueOf(parameter.getProperty(“endSize”, “1.0”));

stepTime = effectLength / originalText.length();



updateText("");

}



@Override

public void execute(Element element, float effectTime, Falloff falloff, NiftyRenderEngine r) {

int currentIndex = (int)(originalText.length() * effectTime);

String currentText = originalText.substring(0, currentIndex);



if (currentIndex < originalText.length()) {

String nextChar = originalText.substring(currentIndex, currentIndex + 1);

int textWidth = textRenderer.getFont().getWidth(currentText);



// current time in ms (instead of being in the [0.0,1.0] interval what the effectTime is in)

float currentTime = effectTime * effectLength;



// normalizedStepTime is between 0.0f and 1.0f

float normalizedStepTime = (currentTime % stepTime) / stepTime;



// use normalizedStepTime to calculate the character size for the text size effect

float charSize = startSize + normalizedStepTime * (endSize - startSize);



r.saveState(null);

r.setFont(textRenderer.getFont());

r.setRenderTextSize(charSize);

r.renderText(nextChar, element.getX() + textWidth, element.getY(), -1, -1, Color.WHITE);

r.restoreState();

}



updateText(currentText);

}



@Override

public void deactivate() {

}



private void updateText(final String currentText) {

textRenderer.setText(currentText);

}

}[/java]



You can use it like that:



[xml]<onActive name=“textTyping” startSize=“5.0” endSize=“1.0” length=“5000” />[/xml]



Merry Christmas! :smiley:

2 Likes
8

Oh My God O_O !



THANK YOU !!!



That’s the best virtual present i have ever had :stuck_out_tongue:



Merry Christmas Void !