Difference between revisions of "UI Text"

From GiderosMobile
m (added content)
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
  
−
<languages />
+
Here you will find various resources to help you create texts in Gideros Studio.
  
−
<translate><!--T:1--> Here you will find various resources to help you create texts in Gideros Studio.</translate>
+
'''note''': you may have to provide your own assets (fonts, gfx, …)
  
 +
=== Text Wrap @Gideros Wiki ===
 +
'''Example 1'''
 +
<syntaxhighlight lang="lua">
 +
-- TEXT WRAP FROM GIDEROS WIKI
 +
local mystring = "Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
 +
local textfield = TextField.new(nil, mystring)
 +
textfield:setScale(2)
 +
textfield:setSample(mystring)
 +
textfield:setLayout( {w=144, h=100, lineSpacing=7, flags=FontBase.TLF_CENTER} )
 +
textfield:setPosition(8, 16)
 +
stage:addChild(textfield)
 +
</syntaxhighlight>
  
−
<translate><!--T:1--> '''note''':You may have to provide your own assets (fonts, gfx, …).</translate>
+
'''Example 2'''
−
<br/>
+
<syntaxhighlight lang="lua">
 +
application:setBackgroundColor(0x6c6c6c)
  
−
=== <translate>TextBox</translate> ===
+
-- some vars
−
[[File:Textbox.png]]
+
local width = application:getContentWidth()
 +
local height = application:getContentHeight()
  
−
<source lang="lua">
+
local mystring = [[
−
-- @antix
+
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
−
TextBox = Core.class(Sprite)
+
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
−
 
+
xxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDSxxxxxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDSxxxxxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDS,
−
function TextBox:init(options)
+
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
−
-- default options
+
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
−
local props = {
+
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
−
x = 0,
+
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
−
y = 0,
+
]]
−
width = 256, -- constrain width of TextBox to this
+
local textfield = TextField.new(nil, mystring)
−
linePadding = 3, -- pixel gap between text lines
+
textfield:setSample(mystring)
−
color = 0xe0e0e0, -- default text color
+
textfield:setLayout( {w=width/3, h=height/2, lineSpacing=2, flags=FontBase.TLF_CENTER|FontBase.TLF_BREAKWORDS} )
−
font = Font:getDefault(),
+
textfield:setScale(2)
−
text = "",
+
textfield:setPosition(8, 8)
−
}
+
stage:addChild(textfield)
−
 
+
</syntaxhighlight>
−
-- overwrite default options
 
−
if options then
 
−
for key, value in pairs(options) do
 
−
props[key]= value
 
−
end
 
−
end
 
−
self.props = props
 
−
 
 
−
-- we only need one actual TextField that we will reuse to render our TextBox
 
−
local brush = TextField.new(props.font, "")
 
−
self.brush = brush
 
−
self:redraw()
 
−
end
 
−
 
 
−
-- set new text and redraw
 
−
function TextBox:setText(text)
 
−
local props = self.props
 
−
props.text = text
 
−
self:redraw()
 
−
end
 
−
 
 
−
-- set new font and redraw
 
−
function TextBox:setFont(font)
 
−
local props = self.props
 
−
props.font = font
 
−
self:redraw()
 
−
end
 
−
 
 
−
-- redraw the textbox
 
−
function TextBox:redraw()
 
−
local props = self.props
 
−
local font = props.font
 
−
 
 
−
-- discard any previous imagery
 
−
if self:getNumChildren() > 0 then
 
−
self:removeChildAt(1)
 
−
end
 
−
 
 
−
-- calculate various offsets
 
−
local lineHeight = font:getLineHeight()
 
−
local actualHeight = lineHeight + props.linePadding
 
−
self.lineHeight = lineHeight
 
−
self.actualHeight = actualHeight
 
−
 
 
−
-- split and format text
 
−
local lines = self:splitText(props.text, font, props.width)
 
−
self.lines = lines
 
−
 
 
−
-- create a blank canvas where we will render our text
 
−
local canvas = RenderTarget.new(props.width, (#lines + 1) * actualHeight)
 
−
self.canvas = canvas
 
−
 
 
−
local brush = self.brush
 
−
-- render text to canvas
 
−
for i = 1, #lines do
 
−
local line = lines[i]
 
−
local words = line.words
 
−
for w = 1, #words do
 
−
local word = words[w]
 
−
brush:setText(word.word)
 
−
brush:setTextColor(word.color)
 
−
brush:setPosition(word.x + line.x, i * actualHeight)
 
−
canvas:draw(brush)
 
−
--print(string.format("word=%s, x=%d, 0x%06x", word.word, word.x, word.color))
 
−
end
 
−
end
 
−
 
 
−
-- create bitmap to display
 
−
local bitmap = Bitmap.new(canvas) -- our canvas is the texture)
 
−
bitmap:setPosition(props.x, props.y)
 
−
 
 
−
self:addChild(bitmap)
 
−
end
 
−
 
 
−
-- recolor a single matching string text or all matching text if "all = true"
 
−
function TextBox:recolor(text, color, all)
 
−
local brush = self.brush
 
−
local canvas = self.canvas
 
−
 
 
−
local lineHeight = self.lineHeight
 
−
local actualHeight = self.actualHeight
 
  
−
local lines = self.lines
+
=== Text Wrap2 @ar2rsawseen ===
−
for i = 1, #lines do
+
Please follow this link: '''[[Text Wrap2 @ar2rsawseen]]'''
−
local line = lines[i]
 
−
local words = line.words
 
−
for j = 1, #words do
 
−
local word = words[j]
 
−
if word.word == text then
 
−
canvas:clear(0x000000, 0, word.x + line.x, i * actualHeight - lineHeight, word.width, actualHeight) -- clear area where word was
 
−
word.color = color
 
−
brush:setText(word.word)
 
−
brush:setTextColor(color)
 
−
brush:setPosition(word.x + line.x, i * actualHeight)
 
−
canvas:draw(brush) -- draw word
 
−
if not all then
 
−
return
 
−
end
 
−
end
 
−
end
 
−
end
 
−
end
 
  
−
-- this does the heavy lifting, splitting and formatting text lines and words
+
=== TextBox @antix ===
−
function TextBox:splitText(text, font, maxWidth)
+
[[File:Textbox.png|128px]]
−
local props = self.props
 
  
−
local spaceWidth = font:getAdvanceX(" ")
+
Please follow this link: '''[[TextBox @antix]]'''
  
−
local words = {}
+
=== TypeWriter @mokalux ===
−
local lines = {}
+
Please follow this link: '''[[TypeWriter @mokalux]]'''
−
local wordList = {}
 
  
−
-- split text into words (space separated)
 
−
local smatch = string.gmatch
 
−
local pattern = '([^ ]+)'
 
−
for str in smatch(text, pattern) do
 
−
words[#words + 1] = str
 
−
end
 
  
−
local i = 1 -- which word we are currently processing
+
{{GIDEROS IMPORTANT LINKS}}
−
local x = 0 -- the x offset for any line of text
 
−
local lineWidth = 0 -- total width of text in pixels
 
−
local color = props.color -- initial color
 
−
local align = "left" -- current alignment
 
−
local line = ""
 
−
 
 
−
local function newLine()
 
−
-- calculate offset for aligned text
 
−
if align == "left" then
 
−
x = 0
 
−
elseif align == "right" then
 
−
x = maxWidth - lineWidth
 
−
elseif align == "center" then
 
−
x = (maxWidth * 0.5) - (lineWidth * 0.5)
 
−
end
 
−
 
−
lines[#lines + 1] = {
 
−
color = color,
 
−
text = line,
 
−
align = align,
 
−
width = font:getAdvanceX(line),
 
−
words = wordList,
 
−
x = x,
 
−
}
 
−
 
 
−
lineWidth = 0
 
−
line = ""
 
−
wordList = {}
 
−
i = i + 1
 
−
end
 
−
 
 
−
local done = false
 
−
repeat
 
−
local word = words[i]
 
−
 
 
−
if word == "#n#" then
 
−
-- process line feed
 
−
newLine()
 
−
elseif word == "#color#" then
 
−
-- process text color change
 
−
color = tonumber(words[i + 1])
 
−
i = i + 2
 
−
elseif word == "#align#" then
 
−
-- process text alignment
 
−
align = words[i + 1]
 
−
i = i + 2
 
−
else
 
−
-- process a normal word
 
−
local wordWidth = font:getAdvanceX(word)
 
−
 
 
−
local w = {
 
−
word = word,
 
−
width = wordWidth,
 
−
x = lineWidth,
 
−
color = color,
 
−
}
 
−
 
 
−
if lineWidth + wordWidth + spaceWidth >= maxWidth then
 
−
-- container width exceeded, create a new line but skip back one word because it needs to appear on the next line
 
−
i = i - 1
 
−
newLine()
 
−
else
 
−
-- process word normally
 
−
wordList[#wordList + 1] = w
 
−
line = line .. " " .. word
 
−
lineWidth = lineWidth + wordWidth + spaceWidth
 
−
i = i + 1
 
−
end
 
−
end
 
−
 
 
−
if i > #words then
 
−
-- all words processed, append the last line and set exit condition
 
−
newLine()
 
−
done = true
 
−
end
 
−
until done
 
−
 
 
−
return lines
 
−
end
 
−
 
 
−
--[[
 
−
-- USAGE
 
−
local textBox = TextBox.new(
 
−
{
 
−
  text = "This is a TextBox. It contains text that is automatically split into multiple lines"..
 
−
" and of course every #color# 0x0066ff word #color# 0x33ff55 can #color# 0x33ffff be"..
 
−
" #color# 0xff66ff individually #color# 0x00ff00 colored."..
 
−
" #color# 0xffffff Then there are line breaks which make life..."..
 
−
" #n# #n# so much easier!!!"..
 
−
" #n# #n# #color# 0xf00000 #align# right Lets align the text to the right #n#"..
 
−
" It looks pretty good this way #n# #n# #align# center #color# 0x4080d0 but centered text #n# is always good"..
 
−
" also #n# #n# #color# 0xf0f0f0 #align# left Well that's a wrap :)",
 
−
}
 
−
)
 
−
stage:addChild(textBox)
 
−
-- recolor all occurences of "is" to the color magenta
 
−
textBox:recolor("is", 0xff00ff, true)
 
−
-- recolor the first occurence of "the" to the color cyan
 
−
textBox:recolor("the", 0x00ffff)
 
−
]]
 
−
</source>
 
−
<br/>
 
−
<br/>
 

Latest revision as of 22:45, 18 November 2023

Here you will find various resources to help you create texts in Gideros Studio.

note: you may have to provide your own assets (fonts, gfx, …)

Text Wrap @Gideros Wiki

Example 1 

-- TEXT WRAP FROM GIDEROS WIKI
local mystring = "Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
local textfield = TextField.new(nil, mystring)
textfield:setScale(2)
textfield:setSample(mystring)
textfield:setLayout( {w=144, h=100, lineSpacing=7, flags=FontBase.TLF_CENTER} )
textfield:setPosition(8, 16)
stage:addChild(textfield)

Example 2 

application:setBackgroundColor(0x6c6c6c)

-- some vars
local width = application:getContentWidth()
local height = application:getContentHeight()

local mystring = [[
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
xxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDSxxxxxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDSxxxxxxxxxxxxxxxxxxxxxxxxTLF_BREAKWORDS,
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Some very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor.
]]
local textfield = TextField.new(nil, mystring)
textfield:setSample(mystring)
textfield:setLayout( {w=width/3, h=height/2, lineSpacing=2, flags=FontBase.TLF_CENTER|FontBase.TLF_BREAKWORDS} )
textfield:setScale(2)
textfield:setPosition(8, 8)
stage:addChild(textfield)

Text Wrap2 @ar2rsawseen

Please follow this link: Text Wrap2 @ar2rsawseen

TextBox @antix

Textbox.png

Please follow this link: TextBox @antix

TypeWriter @mokalux

Please follow this link: TypeWriter @mokalux


Retrieved from ‘https://wiki.gideros.rocks/index.php?title=UI_Text&oldid=23074’