Skip to main content


The Text component provides the gameObject with the ability to display text. After using the Text component, the width of the gameObject will set the width of the text area to the Transform in the next frame.



With NPM

npm i @eva/plugin-renderer @eva/plugin-renderer-text

In Browser

<script src=""></script>


import {Game, GameObject} from '@eva/eva.js'
import {RendererSystem} from '@eva/plugin-renderer'
import {Text, TextSystem} from '@eva/plugin-renderer-text'

const game = new Game({
systems: [
new RendererSystem({
canvas: document.querySelector('#canvas'),
width: 750,
height: 1000
new TextSystem()

// Here is still considering how to set the width and height of the default scene
game.scene.transform.size = {
width: 750,
height: 1000

const text = new GameObject('text', {
position: {
x: 0,
y: 0
origin: {
x: 0.5,
y: 0.5
anchor: {
x: 0.5,
y: 0.5

new Text({
text:'Welcome to use EVA interactive game development system! ',
style: {
fontSize: 36,
fill: ['#b35d9e','#84c35f','#ebe44f'], // gradient
fillGradientType: 1,
fillGradientStops: [0.1, 0.4],
strokeThickness: 5,
dropShadow: true,
dropShadowBlur: 4,
dropShadowAngle: Math.PI/6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 400,
breakWords: true



text: string

Displayed text


alignstring'left'optional For multi-line text ('left','center' or'right'), single-line text does not take effect
breakWordsbooleanfalseoptional Whether to break in the middle of a word
dropShadowbooleanfalseoptional Set text shadow
dropShadowAlphanumber1optional The transparency of the text shadow
dropShadowAnglenumberMath.PI/6optional Text shadow angle
dropShadowBlurnumber0optional Text shadow blur degree
dropShadowColorstring | number'black'optional Text shadow color, such as'red','#00FF00'
dropShadowDistancenumber5optional Text shadow distance
fillstring'black'optional Text color, can be gradient'red','#00FF00'. Passing in a color array will display the gradient color ['#000000','#FFFFFF']
fillGradientTypenumber'LINEAR_VERTICAL'optional If the text color is a gradient, you can set a horizontal or vertical gradient, horizontal gradient: LINEAR_VERTICAL vertical gradient: LINEAR_HORIZONTAL
fillGradientStopsnumber[]optional If the text color is gradient, you can set the anchor point of each color, if not set, it will be divided equally
fontFamilystring | string[]'Arial'optional font
fontSizenumber | string26optional Font size (if it is a number, it will be converted to pixels, you can use a string: '26px','20pt','160%' or '1.6em')
fontStylestring'normal'optional font style ('normal','italic' or'oblique')
fontVariantstring'normal'optional font change ('normal' or'small-caps')
fontWeightstring'normal'optional font bold ('normal','bold','bolder','lighter' and '100', '200', '300', '400', '500 ', '600', '700', 800' or '900')
leadingnumber0optional Line spacing
letterSpacingnumber0optional The distance before the paragraph
lineHeightnumberoptional line height
lineJoinstring'miter'optional Corner style type values ​​"miter" (creates a sharp corner), "round" (creates a round corner) or "bevel" (creates a squared corner).
miterLimitnumber10When optionallineJoin is miter, using this attribute can reduce the sharpness of rendered text
paddingnumber0optional Some fonts will be cropped, add padding to solve this problem
strokestring | number'black'optional Stroke'blue','#FCFF00'
strokeThicknessnumber0optional Stroke thickness
trimbooleanfalseoptional Remove transparent border
textBaselinestring'alphabetic'optional Text Baseline
whiteSpacestring'pre'optional Set the logic of line breaks, "normal" normal logical line breaks, "pre" retains blank character sequences, but normal line breaks, "pre-line" merges blank character sequences, but keeps them Newline character. Requires wordWrap to be true
wordWrapbooleanfalseoptional Need to wrap
wordWrapWidthnumber100optional Wrap beyond the change width