mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
Update rich text texts example
This commit is contained in:
parent
b628212c58
commit
76ab3811fa
59
docs_md/components/manual_rich_text.md
Normal file
59
docs_md/components/manual_rich_text.md
Normal 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
|
@ -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
|
||||
|
@ -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,
|
||||
|
BIN
example/assets/fonts/Exo2-LightItalic.ttf
Normal file
BIN
example/assets/fonts/Exo2-LightItalic.ttf
Normal file
Binary file not shown.
BIN
example/assets/fonts/Exo2-Regular.ttf
Normal file
BIN
example/assets/fonts/Exo2-Regular.ttf
Normal file
Binary file not shown.
@ -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
|
17
example/assets/fonts/game_thin_italic.font
Normal file
17
example/assets/fonts/game_thin_italic.font
Normal 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
@ -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
|
||||
|
||||
|
||||
|
51
utils/annotations_manual.lua
Normal file
51
utils/annotations_manual.lua
Normal 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
|
Loading…
x
Reference in New Issue
Block a user