I have been creating a game with Codea and started thinking how I might like to create a library of simple controls that are easy to implement with just a few lines of code. The first one I worked on is a simple dialog control that displays text in a popup speech bubble and disappears when clicked on. It could be used for character speech or as a pop up for instructions, etc.
Experienced coders, I would love to hear if you have any ideas on how this could be better implemented as I would like to get this and other controls (button is next) to production quality.
Here is the ShowDialog Class:
ShowDialog = class()
function ShowDialog:init(text,location,width,height)
self.minimumFontSize = 6
--Set the above to the lowest size you want text automatically scaled down to
self.text = text
self.location = location
self.width = width
self.height = height
self.visible = false
self.fontSize = 20
self.font = "Georgia"
end
function ShowDialog:draw()
if self.visible == true then
sprite(self.image, self.location.x, self.location.y)
end
end
function ShowDialog:touched(touch)
if self.visible == true then
if touch.x >= self.location.x - self.width/2 and
touch.x <= self.location.x + self.width/2 and
touch.y >= self.location.y - self.height/2 and
touch.y <= self.location.y + self.height/2 then
--Close box
self.visible = false
end
end
end
function ShowDialog:setFont(newfont,size)
self.font = newfont;
self.fontSize = size;
end
function ShowDialog:changeText(text)
self.text = text
end
function ShowDialog:move(location)
self.location = location
end
function ShowDialog:resize(width, height)
self.width = width
self.height = height
end
function ShowDialog:hide()
self.visible = false
end
function ShowDialog:show()
--Now we have to create the image
local textWidth, textHeight
self.image = image(self.width, self.height)
setContext(self.image)
sprite("Planet Cute:SpeechBubble",self.width/2,self.height/1.25,self.width,self.height*1.6)
font(self.font)
fontSize(self.fontSize)
textWrapWidth(self.width * .8)
noStroke()
fill(0, 0, 0, 255)
local textFits = false
while textFits == false do
textWidth, textHeight = textSize(self.text)
if textHeight > self.height * .8 then
local stringLength = string.len(self.text)
if self.fontSize >= self.minimumFontSize + 1 then
self.fontSize = self.fontSize - 1
fontSize(self.fontSize)
elseif stringLength > 10 then
self.text = string.sub(self.text,1,stringLength - 10)
else
self.text = "error, box too small!"
textFits = true -- not really, but what else can we do?
end
else textFits = true
end
end
text(self.text, self.width * .525, self.height * .525)
setContext()
self.visible = true
end
and here is a demo program
displayMode(FULLSCREEN)
function setup()
dialog1 = ShowDialog("Click to close me.",vec2(180,180),180,180)
dialog1:setFont("Georgia",14)
dialog1:show()
dialog2 = ShowDialog("Notice that I set the fontSize for this text to be 22 pt in the main setup fuction. At this size, the text wouldn't fit, so the control automatically shrinks it down to a size that does fit.",vec2(WIDTH-260,HEIGHT-160),320,320)
dialog2:setFont("Papyrus",22)
dialog2:show()
end
function touched(touch)
dialog1:touched(touch)
dialog2:touched(touch)
end
function draw()
background(0, 0, 0, 255)
dialog1:draw()
dialog2:draw()
end
Feedback appreciated.