Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
TextArea — advanced text class — Gideros Forum

TextArea — advanced text class

n1cken1cke Maintainer
edited June 2016 in Code snippets
TextArea is superpowered version of TextField.
TextArea has normal anchoring as opposed to TextField and supports multiline text with different alignment modes, first-line indentation and other settings to fine-tune it.
TextArea can be created with:
TextArea.new(font, text, sample, align, width, letterspace, linespace)
where
font        = TTFont | Font
text        = string
sample      = string | nil
align       = "L" | "C" | "R" | "J" | nil
width       = number | nil
letterspace = number | nil
linespace   = number | nil
`font` and `text` parameters are same as for TextField.
`sample` is a string which overwrites a height of `text` and optionally adds first-line indentation. For example, if you have "note" text and "|" sample the result will have "|" height so all lines will have same height. To enable first-line indentation you need to use `width` parameter` and prefix `sample` with spaces. Each line after '\n' chars will be indented. If sample is not defined then it will be copied from `text`.
`align` is alignment for multiline text an can be the following char: "L" (left) | "C" (center) | "R" (right) | "J" (justified). If `align` is not defined then you will get oneline text.
`width` is optional width of multiline text. When defined the text will be automatically splitted into lines to fit into this width. If not defined then text will be splitted by '\n' chars.
`letterspace` is a space between characters so you can narrow or widen the text with it.
`linespace` is a space between lines for multiline text. It will be added to normal height of lines (i.e. to height of `sample`).
TextArea has following setters and getters:
setText          - getText
setSample        - getSample
setAlignment     - getAlignment
setLetterSpacing - getLetterSpacing
setLineSpacing   - getLineSpacing
setTextColor     - getTextColor
Example:
local font = TTFont.new("Airstream.ttf", 40)
 
local text = [[
The MIT License (MIT)
 
Copyright (c) <year> <copyright holders>
 
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.]]
 
local textarea = TextArea.new(font, text, "  fg|", "J", 800, 0, -10)
textarea:setTextColor(0x0088BB)
stage:addChild(textarea)
The result is attached jpg.

Hint: In order to get better justified text you need to use higher font size and then downscale the result. This is because TextField.setLetterSpacing function rounds down it's arguments which internally used by TextArea class for text justification ("J"-alignment).
TextArea.jpg
795 x 903 - 196K
lua
lua
TextArea.lua
6K
+1 -1 (+9 / -0 )Share on Facebook

Comments

  • totebototebo Member
    edited June 2016
    Holy mackerel, this is impressive stuff. I'm working on a multiplayer game, and I've been looking for a good debug textfield that can be scrolled if needed (swipe?). I'm using Artur's TextWrap for now, but had to hack it to add an addLine() method, and it's a bit buggy.

    Does TextArea allow adding a single line of text?
    My Gideros games: www.totebo.com
  • n1cken1cke Maintainer
    "Does TextArea allow adding a single line of text?"
    Only this way:
    textarea:setText(textarea:getText().."\n"..your_text)
    If you want "infinite" lines with scrolling then you need to implement it differently.
    First, add, say, 10 TextAreas + 1 extra TextArea to a Sprite and add offsetY (between 0 and lineheight) field. Then setClip to that Sprite and while scrolling update each textarea with a text. So you can have huge text database with minimal performance overhead.

    P.S. I am currently working on good demos/tutorials for my upcoming Gideros GUI library which supports all stuff your need, so you can just wait a little for it :)
    +1 -1 (+4 / -0 )Share on Facebook
  • totebototebo Member
    Fantastic. Yes, I'll wait, keenly. :) Thanks for sharing. Stuff like this could be added to the official Gideros release I reckon.
    My Gideros games: www.totebo.com
  • talistalis Guru
    edited June 2016
    @n1cke fantastic job. I am really amazed with it. Looking forward to your gui class and all other stuff in it. I am always saying this community is never loosing the power of sharing and soul.
    =D>
  • antixantix Member
    @n1cke, fantastic. I look forward to seeing your GUI :)

    @totebo, I published my LogWindow class back in January . It has everything you require, except history and scrolling which would be pretty easy to add. I've just updated it my thread (http://giderosmobile.com/forum/discussion/6257/simple-log-window-class#Item_1) to be the same one that I use currently in my RogueLike game.

    Likes: totebo

    +1 -1 (+1 / -0 )Share on Facebook
  • totebototebo Member
    Great, I remember that one now, super. Will try it out.
    My Gideros games: www.totebo.com
  • antixantix Member
    Me again. I was checking out n1cke's code and then looking at my code wondered why the hell I was splitting text into paragraphs at all. I've updated Logwindow to just split text into words and process those. It also now uses /n for newlines.

    Likes: n1cke

    +1 -1 (+1 / -0 )Share on Facebook
  • antixantix Member
    Sorry to hijack your thread @n1cke but I have now posted another version of LogWindow. It now has the ability to scroll back through previously appended text (just for @totebo). Feel free to hack that stuff into TextArea :)

    Likes: totebo

    +1 -1 (+1 / -0 )Share on Facebook
  • n1cken1cke Maintainer
    edited June 2016
    Sorry for the GUI release delay, guys. I realized good GUI needs better text editing support so now I am working on editable multiline text and supercustomizable touchscreen keyboard. Also I will add more examples to GUI.
    For now you can feast your eyes on touchscreen keyboard :)
    imageimage
    Keyboard2.png
    876 x 255 - 18K
    Keyboard1.png
    1139 x 237 - 8K
    +1 -1 (+6 / -0 )Share on Facebook
  • antixantix Member
    Looks great!
  • hi @n1cke, did i remember right that you wrote recently that you are working on/planning to share a 'file chooser gui' class (which works at least on android/win)? or was it somebody else? i needed one for a long time, so it would be great if you could share it when it's done. also i can help you (e.g. test it) if you need. thanks in advance
  • n1cken1cke Maintainer
    @keszegh, right. I am currently working on editable text (virtual keyboard is finished). That "file manager" will be a part of Layout library examples. Currently it's in alpha stage, will finish it later and of course I will share my Layout library with it.

    Likes: keszegh, pie, antix, simwhi

    +1 -1 (+4 / -0 )Share on Facebook
Sign In or Register to comment.