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 [2019/06/01 22:10]
nilarjun
gdevelop5:objects:text [2019/07/27 14:06] (current)
4ian
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. +### Default ​text
-{{ :​gdevelop5:​objects:​add-text-object.png?​nolink |}}+
  
-==== Change properties ==== +You can set the text displayed by the object ​using the central ​text field:
- +
-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. +
-{{ :​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 
 +{{:​gdevelop5:​objects:​textgradient.png?​nolink ​}}
  
 +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 93:
  
 * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect * https://​editor.gdevelop-app.com/?​project=example://​type-on-text-effect
 +
 +
 +