Update rich text texts example

This commit is contained in:
Insality 2023-05-31 23:51:57 +03:00
parent b628212c58
commit 76ab3811fa
10 changed files with 1529 additions and 77 deletions

View File

@ -0,0 +1,59 @@
# Druid Rich Text
## Links
[Rich Text API here](https://insality.github.io/druid/modules/RichText.html)
## Overview
## Setup
Rich Text requires the next GUI Node scheme:
```bash
root
├── text_prefab
└── node_prefab
```
or make the copy of `/druid/custom/rich_text/rich_text.gui` and adjust your default settings
Create Rich Text:
```lua
local RichText = require("druid.custom.rich_text.rich_text")
function init(self)
self.druid = druid.new(self)
self.rich_text = self.druid:new(RichText, "template_name")
self.rich_text:set_text("Insert your text here")
end
```
## Usage
| Tag | Description | Example |
|---------|------------------------------------------------|---------------------------------------------|
| a | Create a "hyperlink" that generates a message | `<a=message_id>Foobar</a>` |
| | when clicked (see `richtext.on_click`) | |
| br | Insert a line break (see notes on linebreak) | `<br/>` |
| color | Change text color | `<color=red>Foobar</color>` |
| | | `<color=1.0,0,0,1.0>Foobar</color>` |
| | | `<color=#ff0000>Foobar</color>` |
| | | `<color=#ff0000ff>Foobar</color>` |
| shadow | Change text shadow | `<shadow=red>Foobar</shadow>` |
| | | `<shadow=1.0,0,0,1.0>Foobar</shadow>` |
| | | `<shadow=#ff0000>Foobar</shadow>` |
| | | `<shadow=#ff0000ff>Foobar</shadow>` |
| outline | Change text shadow | `<outline=red>Foobar</outline>` |
| | | `<outline=1.0,0,0,1.0>Foobar</outline>` |
| | | `<outline=#ff0000>Foobar</outline>` |
| | | `<outline=#ff0000ff>Foobar</outline>` |
| font | Change font | `<font=MyCoolFont>Foobar</font>` |
| img | Display image | `<img=texture:image/>` |
| | Display image in fixed square | `<img=texture:image,size/>` |
| | Display image in fixed rectangle | `<img=texture:image,width,height/>` |
| nobr | Prevent the text from breaking | `Words <nobr>inside tag</nobr> won't break` |
| size | Change text size, relative to default size | `<size=2>Twice as large</size>` |
## Usecases
## Notes

View File

@ -9,56 +9,9 @@ local utf8 = utf8 or utf8_lua
local M = {}
M.ADJUST_STEPS = 10
M.ADJUST_STEPS = 20
M.ADJUST_SCALE_DELTA = 0.02
---@class rich_text.metrics
---@field width number
---@field height number
---@field offset_x number|nil
---@field offset_y number|nil
---@field node_size vector3|nil @For images only
---@class rich_text.lines_metrics
---@field text_width number
---@field text_height number
---@field lines table<number, rich_text.metrics>
---@class rich_text.word
---@field node Node
---@field relative_scale number
---@field color vector4
---@field position vector3
---@field offset vector3
---@field scale vector3
---@field size vector3
---@field metrics rich_text.metrics
---@field pivot Pivot
---@field text string
---@field shadow vector4
---@field outline vector4
---@field font string
---@field image rich_text.word.image
---@field default_animation string
---@field anchor number
---@field br boolean
---@field nobr boolean
---@class rich_text.settings
---@field parent Node
---@field size number
---@field fonts table<string, string>
---@field color vector4
---@field shadow vector4
---@field outline vector4
---@field position vector3
---@field image_pixel_grid_snap boolean
---@field combine_words boolean
---@field default_animation string
---@field node_prefab Node
---@field text_prefab Node
-- Trim spaces on string start
local function ltrim(text)
return text:match('^%s*(.*)')
@ -125,7 +78,7 @@ local function get_text_metrics(word, previous_word, settings)
local text = word.text
local font_resource = gui.get_font_resource(word.font)
---@type rich_text.metrics
---@type druid.rich_text.metrics
local metrics
local word_scale_x = word.relative_scale * settings.text_scale.x * settings.adjust_scale
local word_scale_y = word.relative_scale * settings.text_scale.y * settings.adjust_scale
@ -158,9 +111,9 @@ local function get_text_metrics(word, previous_word, settings)
end
---@param word rich_text.word
---@param settings rich_text.settings
---@return rich_text.metrics
---@param word druid.rich_text.word
---@param settings druid.rich_text.settings
---@return druid.rich_text.metrics
local function get_image_metrics(word, settings)
local node_prefab = settings.node_prefab
gui.play_flipbook(node_prefab, word.image.anim)
@ -177,10 +130,10 @@ local function get_image_metrics(word, settings)
end
---@param word rich_text.word
---@param settings rich_text.settings
---@param previous_word rich_text.word|nil
---@return rich_text.metrics
---@param word druid.rich_text.word
---@param settings druid.rich_text.settings
---@param previous_word druid.rich_text.word|nil
---@return druid.rich_text.metrics
local function measure_node(word, settings, previous_word)
local metrics = word.image and get_image_metrics(word, settings) or get_text_metrics(word, previous_word, settings)
return metrics
@ -242,9 +195,9 @@ function M.create(text, settings)
end
---@param words rich_text.word
---@param metrics rich_text.metrics
---@param settings rich_text.settings
---@param word druid.rich_text.word
---@param metrics druid.rich_text.metrics
---@param settings druid.rich_text.settings
function M._fill_properties(word, metrics, settings)
word.metrics = metrics
word.position = vmath.vector3(0)
@ -267,9 +220,9 @@ function M._fill_properties(word, metrics, settings)
end
---@param words rich_text.word[]
---@param settings rich_text.settings
---@return rich_text.word[][]
---@param words druid.rich_text.word[]
---@param settings druid.rich_text.settings
---@return druid.rich_text.word[][]
function M._split_on_lines(words, settings)
local i = 1
local lines = {}
@ -310,7 +263,7 @@ function M._split_on_lines(words, settings)
end
end
local overflow = (current_line_width + next_words_width) > settings.width
local is_new_line = (overflow or word.br) and settings.is_multiline
local is_new_line = (overflow or word.br) and settings.is_multiline and not word.nobr
-- We recalculate metrics with previous_word if it follow for word on current line
if not is_new_line and previous_word then

View File

@ -104,11 +104,6 @@ M.register("img", function(params, settings)
width = width and tonumber(width)
height = height and tonumber(height)
---@class rich_text.word.image
---@field texture string
---@field anim string
---@field width number
---@field height number
settings.image = {
texture = texture,
anim = anim,

Binary file not shown.

Binary file not shown.

View File

@ -1,4 +1,4 @@
font: "/builtins/fonts/vera_mo_bd.ttf"
font: "/example/assets/fonts/Exo2-Regular.ttf"
material: "/builtins/fonts/font-df.material"
size: 40
antialias: 1

View File

@ -0,0 +1,17 @@
font: "/example/assets/fonts/Exo2-LightItalic.ttf"
material: "/builtins/fonts/font-df.material"
size: 40
antialias: 1
alpha: 1.0
outline_alpha: 0.0
outline_width: 0.0
shadow_alpha: 0.0
shadow_blur: 0
shadow_x: 0.0
shadow_y: 0.0
extra_characters: ""
output_format: TYPE_DISTANCE_FIELD
all_chars: false
cache_width: 0
cache_height: 0
render_mode: MODE_MULTI_LAYER

File diff suppressed because it is too large Load Diff

View File

@ -14,7 +14,16 @@ function init(self)
self.rich_text_2:set_text("Here is color example for <color=0.4,0.6,0.25,1>Rich Text</color>. You can adjust the <color=0000ff>color</color>, <shadow=#FF0000>shadow</shadow> or <outline=00000055>outline</outline>")
self.rich_text_3 = self.druid:new(RichText, "case3/rich_text")
self.rich_text_3:set_text("Here <font=another_font>font change</font> example. Can be used<font=another_font>for bold and italic fonts or other one</font>")
self.rich_text_3:set_text("Here <font=game_thin>font change</font> example. Can be used<font=game_thin>for bold and <font=game_thin_italic>italic fonts</font> or other one</font>")
self.rich_text_4 = self.druid:new(RichText, "case4/rich_text")
self.rich_text_4:set_text("Hello! Here are new line<br/><nobr>and this long text will be without any new line until nobr is end</nobr> he<br/>re text with br too")
self.rich_text_5 = self.druid:new(RichText, "case5/rich_text")
self.rich_text_5:set_text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue <color=0.4,0.6,0.25,1>ligula ac quam viverra</color> nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Lorem ipsum dolor sit amet, <shadow=#FF0000>consectetur adipiscing elit</shadow>. Donec a diam lectus.")
self.rich_text_6 = self.druid:new(RichText, "case6/rich_text")
self.rich_text_6:set_text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.")
end

View File

@ -0,0 +1,51 @@
---@class druid.rich_text.metrics
---@field width number
---@field height number
---@field offset_x number|nil
---@field offset_y number|nil
---@field node_size vector3|nil @For images only
---@class druid.rich_text.lines_metrics
---@field text_width number
---@field text_height number
---@field lines table<number, druid.rich_text.metrics>
---@class druid.rich_text.word
---@field node Node
---@field relative_scale number
---@field color vector4
---@field position vector3
---@field offset vector3
---@field scale vector3
---@field size vector3
---@field metrics druid.rich_text.metrics
---@field pivot Pivot
---@field text string
---@field shadow vector4
---@field outline vector4
---@field font string
---@field image druid.rich_text.image
---@field default_animation string
---@field anchor number
---@field br boolean
---@field nobr boolean
---@class druid.rich_text.word.image
---@field texture string
---@field anim string
---@field width number
---@field height number
---@class druid.rich_text.settings
---@field parent Node
---@field size number
---@field fonts table<string, string>
---@field color vector4
---@field shadow vector4
---@field outline vector4
---@field position vector3
---@field image_pixel_grid_snap boolean
---@field combine_words boolean
---@field default_animation string
---@field node_prefab Node
---@field text_prefab Node