文本 Text

Text 组件为 gameObject 提供了展示文字的能力,使用了 Text 组件后,gameObject 的宽度会在下一帧设置文字所占区域的宽度给 Transform。

Demo

安装

使用 NPM

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

在浏览器中

  1. <script src="https://unpkg.com/@eva/plugin-renderer-text@1.0.x/dist/EVA.plugin.renderer.text.min.js"></script>

使用

  1. import { Game, GameObject } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { Text, TextSystem } from '@eva/plugin-renderer-text'
  4. const game = new Game({
  5. systems: [
  6. new RendererSystem({
  7. canvas: document.querySelector('#canvas'),
  8. width: 750,
  9. height: 1000
  10. }),
  11. new TextSystem()
  12. ]
  13. })
  14. // 此处还在考虑如何设置默认场景的宽高
  15. game.scene.transform.size = {
  16. width: 750,
  17. height: 1000
  18. }
  19. const text = new GameObject('text', {
  20. position: {
  21. x: 0,
  22. y: 0
  23. },
  24. origin: {
  25. x: 0.5,
  26. y: 0.5
  27. },
  28. anchor: {
  29. x: 0.5,
  30. y: 0.5
  31. }
  32. })
  33. text.addComponent(
  34. new Text({
  35. text: '欢迎使用EVA互动游戏开发体系!',
  36. style: {
  37. fontFamily: 'Arial',
  38. fontSize: 36,
  39. fontStyle: 'italic',
  40. fontWeight: 'bold',
  41. fill: ['#b35d9e', '#84c35f', '#ebe44f'], // gradient
  42. fillGradientType: 1,
  43. fillGradientStops: [0.1, 0.4],
  44. stroke: '#4a1850',
  45. strokeThickness: 5,
  46. dropShadow: true,
  47. dropShadowColor: '#000000',
  48. dropShadowBlur: 4,
  49. dropShadowAngle: Math.PI / 6,
  50. dropShadowDistance: 6,
  51. wordWrap: true,
  52. wordWrapWidth: 400,
  53. breakWords: true
  54. }
  55. })
  56. )

参数

text: string

显示的文本

style

NameTypeDefaultDescription
alignstring‘left’optional 作用于多行文本(‘left’, ‘center’ or ‘right’), 单行文本不生效
breakWordsbooleanfalseoptional 是否在词语中间换行
dropShadowbooleanfalseoptional 设置文字阴影
dropShadowAlphanumber1optional 文字阴影的透明度
dropShadowAnglenumberMath.PI/6optional 文字阴影角度
dropShadowBlurnumber0optional 文字阴影模糊度
dropShadowColorstring | number‘black’optional 文字阴影颜色   例如 ‘red’, ‘#00FF00’
dropShadowDistancenumber5optional 文字阴影距离
fillstring‘black’optional 文字颜色,可以是渐变 ‘red’, ‘#00FF00’。传入一个颜色数组则会展示渐变色 [‘#000000’,’#FFFFFF’]
fillGradientTypenumber‘LINEAR_VERTICAL’optional 如果文字颜色为渐变,可以设置水平或者垂直渐变, 水平渐变:LINEAR_VERTICAL 垂直渐变:LINEAR_HORIZONTAL
fillGradientStopsArray.optional 如果文字颜色为渐变,可以设置各个颜色的定位点,如果不设置是均分的
fontFamilystring | Array.‘Arial’optional 字体
fontSizenumber | string26optional 字号(如果是数字的话会被转成像素,可以用字符串:’26px’,’20pt’,’160%’ or ‘1.6em’)
fontStylestring‘normal’optional 字体样式 (‘normal’, ‘italic’ or ‘oblique’)
fontVariantstring‘normal’optional 字体变化 (‘normal’ or ‘small-caps’)
fontWeightstring‘normal’optional 字体加粗 (‘normal’, ‘bold’, ‘bolder’, ‘lighter’ and ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, 800’ or ‘900’)
leadingnumber0optional 行间距
letterSpacingnumber0optional 段落前空的距离
lineHeightnumberoptional 行高
lineJoinstring‘miter’optional 边角样式类型 values “miter” (creates a sharp corner), “round” (creates a round corner) or “bevel” (creates a squared corner).
miterLimitnumber10optionallineJoin 为 miter 的时候,使用此属性,可以减少渲染文字的尖锐性
paddingnumber0optional 有些字体会被裁剪,添加 padding 解决此问题
strokestring | number‘black’optional 描边 ‘blue’, ‘#FCFF00’
strokeThicknessnumber0optional 描边厚度
trimbooleanfalseoptional 去除透明边框
textBaselinestring‘alphabetic’optional 文字基线
whiteSpacestring‘pre’optional 设置换行的逻辑, “normal” 正常逻辑换行,”pre”   保留空白符序列,但是正常地进行换行,”pre-line” 合并空白符序列,但是保留换行符. 需要 wordWrap 为 true
wordWrapbooleanfalseoptional 是否需要换行
wordWrapWidthnumber100optional 超出改宽度换行