This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:objects:text [2019/06/01 22:10]
gdevelop5:objects:text [2020/07/24 19:49] (current)
the_gem_tutorials [Text Object properties]
Line 1: Line 1:
 # Text object # Text object
Line 6: Line 5:
 </​note>​ </​note>​
-As its name suggests, a text object allows us to display text on the screen/scene.+Text objects ​display text on screen. You can customize text properties (for example, size or colour) upon creation. You can also modify text object properties during gameplay using events.
-==== Create a text object ====+## Text Object properties
-First, we need to create a text object by clicking the add object button at the bottom of the Objects list. Select "​Text" ​ from the list that appears. +{{:​gdevelop5:​objects:​text-obj.png?|}}
-{{ :​gdevelop5:​objects:​add-text-object.png?nolink ​|}}+
-==== Change properties ====+### Default text
-Next, you want to change the properties of the text object. Right click on the newly created Text object in the Objects list on the right. Select "Edit object"​ from the popup list. The panel will open up the properties window. +You can set the text displayed by the object ​using the central ​text field:
-{{ :​gdevelop5:​objects:​text-properties-window.png?​nolink |}} +
-==== Change text ==== +
- +
-Here you can change ​the text displayed by the object ​by simply click the text field and type something else.+
 {{ :​gdevelop5:​objects:​change-text.png?​nolink |}} {{ :​gdevelop5:​objects:​change-text.png?​nolink |}}
-==== Change size ====+### Size
-You can also change ​the size of the text by changing the value next to the Size field.+Use the size field to set the default font size of the text:
 {{ :​gdevelop5:​objects:​change-size-of-text.png?​nolink |}} {{ :​gdevelop5:​objects:​change-size-of-text.png?​nolink |}}
-==== Change color ====+### Color
-The color of the displayed ​text can be changed by clicking on the palette color square ​located to the left of the "​Bold"​ checkbox.+The color of the text can be changed by clicking on the palette color square ​:
 {{ :​gdevelop5:​objects:​change-color-of-text.png?​nolink |}} {{ :​gdevelop5:​objects:​change-color-of-text.png?​nolink |}}
-==== Change the font style ==== 
-The style of the displayed text can be changed. ​You can choose from bolditalic ​or even choose a custom font file.+### Font and text style 
 +You can choose from bold and italic. A custom font can also be set for the text:
  {{ :​gdevelop5:​objects:​change-style-of-text.png?​nolink |}}  {{ :​gdevelop5:​objects:​change-style-of-text.png?​nolink |}}
-Further, text can be changed using events. Below, the text object is changed to 150px when the scene is loaded.+### Additional effects
-{{ :​gdevelop5:​objects:​changetextsizeviaevents.png |}}+* You can create **gradients** using the events 
 +Choose an available gradient type from the list and select up to four colors.\\
 +* You can set a **Shadow** using events:
 +{{ :​gdevelop5:​objects:​showtextshadow.png?​nolink |}}
 +{{ :​gdevelop5:​objects:​changetextshadow.png?​nolink |}}
 +When changing the shadow, you can choose the color, distance, blur, and angle. ​ This can also be used to create a glow effect with bright colors.
 +* **Opacity** of the object can be changed:
 +{{ :​gdevelop5:​objects:​changetextopacity.png?​nolink |}}
 +* **Scaling** of the object can be changed:
 +{{ :​gdevelop5:​objects:​textscaling.png?​nolink |}}
 +{{ :​gdevelop5:​objects:​modifytextscale.png?​nolink }}
 +There are three options: "​Scale"​ (constrains proportions to scale on both X and Y axis), "Scale on X axis" (width), and "Scale on Y axis" (height).
 +### Other styles
 +Using events, you can modify other properties:
 +  * Bold
 +  * Italic
 +  * Padding
 +  * Alignment
 +  * Wrapping
 +  * Wrapping Width
 +## In events
 +You can manipulate most properties of a text during the game using events. For example, here is an event changing the size of text font:
 +{{ :​gdevelop5:​objects:​changetextsizeviaevents.png }}
 ## Examples ​ ## Examples ​
Line 63: Line 95:
 * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect