Animated Headline

To provide textual information accompanying in-game events in Nicely Dicely in a visually versatile way, a corresponding headline system was developed.

It offers a diversely animatable headline design, while maintaining an easy development interface giving access to its full feature set. Using a single method call, a headline can be instantiated and animated into the visible screen area. After a certain reading time it can automatically rewind the animation back out of the screen. It is possible to set up a general reading rime per char (see NDHeadLineText component in the image), which can automatically calculate the reading time for a headline, or one can specify a manual reading time, after which the headline should animate back. Each headline will be dynamically created by code, containing separately addressable characters and their blurred shadows for better readability (see light blue highlight).

Four animation styles were added: push in, bounce in, scale in and fade in (see pink highlight). Additionally, six character delay types were implemented: no delay, iterative delays starting from the leftmost character or the rightmost, iterative delays starting from the center character going outwards (ARROW_DOWN) or vice versa or a completely random pattern of iterative delays (see ARROW_DOWN in pink highlight and the headline screenshot during a V shaped push in animation). Like this, 24 different headline animations can be achieved, creating enough visual variety for informing on various game aspects in an appropriate manner. Finally, it is also possible to directly test an animation from the editor, to speed up development (see pink highlight).

Though this system proves how complex a rather simple element like a headline can be, it also shows that investing the required work for such a system can drastically benefit an application’s development and visual versatility on the long run.