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?
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)
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
(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
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
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 (avoiding dual post)
would you be ok to put class and main in same code bloc? Then i could add it into Codea Showcase…
thanks!