Differences

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 [2018/10/12 19:38]
valiant_curiosity [Text object]
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 it 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&​200 ​|}}+
  
-==== 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&​400 ​|}} +{{ :​gdevelop5:​objects:​change-text.png?​nolink |}}
-==== Change text ====+
  
-Here you can change the text displayed by the object by simply click the text field and type something else. +### Size
-{{ :​gdevelop5:​objects:​change-text.png?​nolink&​200 |}}+
  
-==== Change ​size ====+Use the size field to set the default font size of the text: 
 +{{ :​gdevelop5:​objects:​change-size-of-text.png?​nolink |}}
  
-You can also change the size of the text by changing the value next to the Size field. +### Color
-{{ :​gdevelop5:​objects:​change-size-of-text.png?​nolink&​200 |}}+
  
-==== Change ​color ====+The color of the text can be changed by clicking on the palette color square : 
 +{{ :​gdevelop5:​objects:​change-color-of-text.png?​nolink |}}
  
-The color of the displayed ​text can be changed by clicking on the palette color square located to the left of the "​Bold"​ check box. +### Font and text style
-{{ :​gdevelop5:​objects:​change-color-of-text.png?​nolink&​400 |}} +
-==== 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. +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&​400 ​|}}+ {{ :​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?600 |}}+* You can create **gradients** using the events 
 +{{:​gdevelop5:​objects:​textgradient.png?nolink|none|}}\\
  
 +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 49: Line 81:
 Manipulate a Text Object Manipulate a Text Object
  
-[[https://​editor.gdevelop-app.com/?​project=example://​manipulate-text-object|{{ :​gdevelop5:​objects:​changetextexample1.png?400 |}}]]+[[https://​editor.gdevelop-app.com/?​project=example://​manipulate-text-object|{{ :​gdevelop5:​objects:​changetextexample1.png |}}]]
  
 * https://​editor.gdevelop-app.com/?​project=example://​manipulate-text-object * https://​editor.gdevelop-app.com/?​project=example://​manipulate-text-object
  
 Fade Text In and Out Fade Text In and Out
-[[https://​editor.gdevelop-app.com/?​project=example://​text-fade-in-out|{{ :​gdevelop5:​objects:​textfadeoutinexample.png?400 |}}]]+[[https://​editor.gdevelop-app.com/?​project=example://​text-fade-in-out|{{ :​gdevelop5:​objects:​textfadeoutinexample.png |}}]]
  
 * https://​editor.gdevelop-app.com/?​project=example://​text-fade-in-out * https://​editor.gdevelop-app.com/?​project=example://​text-fade-in-out
Line 60: Line 92:
 Type on Text Effect Type on Text Effect
  
-[[https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect|{{ :​gdevelop5:​objects:​type-ontexteffectexample.png?400 |}}]]+[[https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect|{{ :​gdevelop5:​objects:​type-ontexteffectexample.png |}}]]
  
 * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect
 +
 +
 +