Kode for displaying text

Some tutorials for manipulating text displays on screen

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.

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..

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.

Moving display text and objects across the screen (with thanks to Lucid Stew)

Left to right

WHEN [once] DO [numvar:xcoord][=][-1]
WHEN [once] DO [numvar:ycoord][=][0]
WHEN DO [vectorvar:animation][y][=][numvar:ycoord]
WHEN DO [vectorvar:animation][x][=][numvar:xcoord]
WHEN DO [numvar:xcoord][increment by][0.01]
WHEN DO [display][icon:Camera Gizmo][at screen position][vectorvar:animation]
WHEN [countdown timer][10][in frames] DO [vectorvar:animation][=][vectorvar:animation][+][right][x][0.1]

Scrolling up

WHEN [once] DO [numvar:xcoord][=][0]
WHEN [once] DO [numvar:ycoord][=][-1]
WHEN DO [vectorvar:animation][y][=][numvar:ycoord]
WHEN DO [vectorvar:animation][x][=][numvar:xcoord]
WHEN DO [numvar:ycoord][increment by][0.01]
WHEN DO [display][icon:Camera Gizmo][at screen position][vectorvar:animation]
WHEN [countdown timer][10][in frames] DO [vectorvar:animation][=][vectorvar:animation][+][up][x][0.1]

To reverse and have a down scroll or left scroll, change this line:

WHEN DO [numvar:ycoord][decrement by][0.01] or
WHEN DO [numvar:xcoord][decrement by][0.01]

You do not have to change the last line from up to down or right to left, as it makes no difference to the object – however you may want to change it so you do not get confused as to which direction you are using.
You can also make an object appear to move towards or away from you by altering the scale of the object.

Combine it with the movement and you can have more complicated animation of your object.

WHEN DO [numvar:scale][increment by][0.01]
WHEN DO [display][icon:Camera Gizmo][at screen position][vectorvar:animation][scale][numvar:scale]

Comments are closed.

Powered by WordPress.com.

Up ↑

%d bloggers like this: