Text Box

Hey guys. So Im fiddling with the idea of a text box in a game I want to write. Basically it would be scrollable and provide information on events happening in game/when you examine objects.

How would you recommend I go about doing this?

Would it be an input box? Or (which I think) an output box?

For a simple output box, draw a rectangle, and write text over it. The textSize function tells you how wide and tall your text is, so you can draw your box big enough.

Output

I completely understand that part…I’m trying to go for something where you have a chat log, and by dragging up on the box you’ll smoothly be able to navigate to higher messages

The user and all related content has been deleted.

@Invad3rZIM I’ll try putting a simple example up later today (if dave hasn’t already put his superpowers to this xD)

@stevon8ter thank you. I’m trying to write my own ATM but having a couple issues aha

I don’t know if I’m correct (haven’t tested it) but I think you could just draw a rectangular box, then store a table of y values for the texts and have them scroll when you swipe up and down in the box, and to make sure the text only draws in the box you can set clipping bounds to the box for when you draw the text, no? I’ll make a demo if you don’t get what I mean :stuck_out_tongue:
(Actually, I’ll make a demo anyways because I need it for something I’m making, too)

@Invad3rZIM That doesn’t sound hard to do. Unfortunately my superpowers are limited to certain hours. I just have enough time to read some posts and reply to this one before I have to leave again. If @stevon8ter doesn’t have an example for you, I’ll write one, but it won’t be until a lot later.

I think the biggest issue I’m having is making it so that by scrolling up it translates smoothly

Invad3rZIM, I will try to write you an example in the next few hours, I have an idea of how to make one

Would it help if I posted code that I already have?

There’s code for a scrollable text box at https://gist.github.com/loopspace/5611534#file-font-lua. Scan down to TextArea. It’s not droppable in any old code since it relies for the touch interface on other of my code, but it may give some ideas on how to achieve this.

here’s a small example, tho it probably isn’t very clear, I hope it helps a little bit at least, if you have any questions, feel free to ask

Also, not everything is worked out as it should, the scrolling isn’t 100% smooth, and you can scroll past the currentline thing, you’ll see when you try it

it’s been a while since I programmed so excuse me if there are misstakes or inefficient code

-- Text-output

-- Use this function to perform your initial setup
function setup()
    parameter.action('add small line', add)
    parameter.action('add long line', addl)
    chat = Log(0,0,500,200)
    number = 1
end

-- This function gets called once every frame
function draw()
    background(255, 255, 255, 255)
    chat:draw()
end

function add()
    chat:add("This is a small line_____"..number)
    number = number + 1
end

function addl()
        chat:add("This is a long line that wouldn't normally fit in the logbox, but it does because it's a mess if it doesn't show up correctly_____"..number)
    number = number + 1
end

function touched(touch)
    chat:touched(touch)
end





Log = class()

function Log:init(x, y, width, height, bgColor, textColor, txtsize, txtfont)
    -- the x and y are the bottom-left corner of the log
    -- x and y are the given value, if no value was given, it places the log in the bottom-left corner of the screen
    self.x = x or 0
    self.y = y or 0
    -- width and height are the given value, if no value was given, it's as big as the screen
    self.w = width or WIDTH
    self.h = height or HEIGHT
    -- backgroundcolor and textcolor... same as above...
    self.bg = bgColor or color(0, 0, 0, 255)
    self.txt = textColor or color(0, 255, 255, 255)
    -- size and font of the text
    self.size = txtsize or 17
    self.font = txtfont or "ArialMT"
    -- makes a table for the loglines
    self.log = {}
    -- sets the maximum lines that should be drawn at 1 time, this makes it so that it doesn't eat your fps
    self.maxlines = (self.h/self.size)
    -- used for the scrolling position
    self.currentline = 1
end

function Log:draw()
    pushStyle()
    pushMatrix()
    
    fill(self.bg)
    rectMode(CORNER)
    rect(self.x, self.y, self.w, self.h)
    
    fill(self.txt)
    font(self.font)
    textSize(self.size)
    textMode(CORNER)
    local linepos = 0
    self.linesonscreen = 0
    for i=self.currentline, self.currentline + self.maxlines do
        if self.log[i] then
            local width, height = textSize(self.log[i])
            linepos = linepos + math.ceil(width/self.w)
            textWrapWidth(self.w)
            text(self.log[i], self.x, self.y + self.h - linepos*self.size)
            textWrapWidth(9999999999)
        end
    end
    
    popMatrix()
    popStyle()
end

function Log:touched(touch)
    if touch.deltaY >= 15 then
        self.currentline = self.currentline + 1
    elseif touch.deltaY <= -15 and self.currentline > 1 then
        self.currentline = self.currentline - 1
    end
end

-- function to add something to the log, if something's added, the log will jump back to that line (this can be disabled)
function Log:add(str)
    table.insert(self.log, str)
end

Here’s a quick example I whipped up :slight_smile:
You can edit it and add other things fairly simply.

PS: tell me if this is any help to you (or if you find any bugs, as I plan to use it for my project)

EDIT: Edited to support different fonts, as well as to get rid of some annoying things

EDIT: added parameters to make it easier to see what it looks like when adding text

EDIT: added a little circle to tell where you are in the box :slight_smile:

EDIT: added option to change the color of the little circle AND, this will blow your mind, made the clipping bounds 1 pixel inside the box so it looks nicer

EDIT: made it have the awesome power of movability! Also, removed “Hello World” text. Also also also, made it only calculate the trackball position when there’s a change

EDIT:moved to my below comment :slight_smile: (avoiding dual post)

would you be ok to put class and main in same code bloc? Then i could add it into Codea Showcase…

@Jmv38 absolutely :slight_smile:
Done and done, just for you!

thanks!

@Jmv38 you’re welcome, any Time!