Display Tricks and Animation by LadyLexUK and Lucid Stew

Have something important that other people might find usefull? Well, drop it here and help others!
User avatar
LucidStew
Level 3
Level 3
Posts: 176

Display Tricks and Animation by LadyLexUK and Lucid Stew

Post#1 » Mon Aug 15, 2016 6:36 pm

moved over from projectspark.com forums

Font size

When displaying text and icons you have a few options for font size. You can use a font size tile, or you can create a text tile with <size:20> (up to size 62)

WHEN DO [display][x-large font][text:Hello World][screen top left]
WHEN DO [display][text: <size:40>][text:Hello World][screen top left]

The comparisons are:

x-large font = <size:28>
large font = <size:22>
medium font = <size:16>
small font = <size:10> (do not recommend text this size or smaller - very hard to read)

Font style

You can change the style of fonts by using

<style:bold>
<style:italic>

WHEN DO [display][text: <size:40>][text:<style:bold>][text:Hello World][screen top left]

Font color

You can change the color of text by adding a predetermined color tile from Values/Color/Colors
or use the new color tile to create a bespoke color

WHEN DO [display][x-large font][orange][text:Hello World][screen top left]

The text is only filled in this color. The outline of the text will remain black.

You can also add [text:<color:orange>] to change the color - but it is not as versatile as just selecting a color tile.

Fonts and Icons Together

In one line of Kode you can display text on top of or alongside an icon image.

WHEN DO [display][x-large font][text:Hello World][icon:World][screen top left]

will display the text on top of the icon

WHEN DO [display][x-large font][text:Hello World][+][icon:World][screen top left]
will display the text before the icon on the same line, and the icon will be sized according to the font size

WHEN DO [display][x-large font][icon:World][+][text:Hello World][screen top left]

will display the text after the icon on the same line, and the icon will be sized according to the font size

If you dont want the icon to be resized then you need to separate the lines of Kode

WHEN DO [display][icon:World][screen top left]
WHEN DO [display][x-large font][[text:Hello World][screen top left] [HUD stack right]

This will place your text to the right of the icon aligned to the top. [HUD stack left] will put it to the left etc..

Showing Icons Together

WHEN DO [display][icon:World][screen top left]
WHEN DO [display][icon:agree][screen top left] [priority][2][no hud stack]

This will display the hand on top of the world icon.

You can display icons or meters on top of each other by using the priority tile.
The higher the number the closer to the top.

Icon Size and Shape

You can change the size of an icon by using scale

WHEN DO [display][icon:World][screen top left] [scale][2]

Or you can stretch it by height or width

WHEN DO [display][icon:World][screen top left] [height][2]

Use -1 on height, and the icon will mirror on the vertical plane (flip upside down)
Use -1 on width, and the icon will mirror on the horizontal plane (flip left)
Use -1 on scale and the icon will mirror on both planes (flip left and upside down)

Icon Color
You can also add a color tile to your display icon line. This will alter the color of the image while retaining any shadows or highlights.So some images will not alter very much.

WHEN DO [display][icon:World][screen top left][red]

Changing an icon to black and stacking icons on top of each other can generate interesting silhouettes that can be used to represent icons that do not exist. Worth experimenting with.

Animating Text and Icons

You can animate your text and icons by using size, color and position.

Animated sparkle effect

To get a sparkle effect underneath another icon I have used scale to animate the icon picture. Warning: Some icons are better than others for this as the transparency on the backgrounds of some icons is not very good and shows a visible box.

WHEN DO [display][prop:apple A][screen top left][priority][2][scale][0.5]
WHEN DO [numvar:scale][=][random number][0.5][to][1.2]
WHEN DO [display][effect:Energy Charge Up][screen top left][scale][numvar:scale][no HUD stack]

This will make the sparkle icon randomly pulse as it gets bigger and smaller, creating a sparkly effect.
End of line.

User avatar
LucidStew
Level 3
Level 3
Posts: 176

Re: Display Tricks and Animation by LadyLexUK and Lucid Stew

Post#2 » Mon Aug 15, 2016 6:47 pm

Some additions to the topic on my part:

scrolling text:

w: once d:[num. var.][=][-1]
w: d: [num var.][increment by][0.1]
w:[num. var][>][1] d:[display][text][at screen position][zero][+][world up][x][num. var.]
w:[num. var][>][2] d:[display][text][at screen position][zero][+][world up][x][num. var.][-][1]
w:[num. var][>][3] d:[display][text][at screen position][zero][+][world up][x][num. var.][-][2]

use the world direction titles in conjunction with [display] in the following manner:

[world up] = positive Y axis
[world down] = negative Y axis
[west] = negative X axis
[east] = positive X axis

you can then swap out [world up] for the others to scroll in different directions.

pseudorotation of HUD layer objects: (credit goes to Myline de Nola)

w: d: [num var: bob][increment by][1]
w:[num var: bob][equal to][360] d: [num var: bob][=][0]
w: d: [num var: bob2][=][cosine][num var: bob]
w: d: [display][whatever][at screen position][vector var: zero][width][num var: bob2]
End of line.

Return to “Tutorials and guides”

Who is online

Users browsing this forum: No registered users and 1 guest

cron