Hello everyone,
I’m new to Codea and I’m trying to create a program with multiple screens. My question is how do I clear the screen so that I can display new contents on the screen?
Thanks.
Every time the draw() function is called, it draws something new on the screen, but it never really deletes the old images. By default in the draw() function, Codea calls the background() function, which will draw over what is already on the screen with a new color, which appears as if it deletes the old images. If you took out the background() function, anything you drew would just go on top of the old screen. background() just sets the screen back to the default background, which is what I think you’re looking for.
.@developer4codea Here is some simple code that shows how to display different screens. There are many and better ways to do this. That will depend on what you want to do.
displayMode(FULLSCREEN)
function setup()
s=1
end
function draw()
fontSize(40)
if s==1 then
screen1()
end
if s==2 then
screen2()
end
if s==3 then
screen3()
end
end
function screen1()
background(255, 220, 0, 94)
fill(255,0,0)
text("screen 1",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
function screen2()
background(95, 255, 0, 95)
fill(255,0,0)
text("screen 2",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
function screen3()
background(0, 255, 239, 95)
fill(255,0,0)
text("screen 3",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
function touched(t)
if t.state==BEGAN then
s=s+1
if s>3 then
s=1
end
end
end
To show code in the forum, you put 3 tildes ~ before and after the code. I usually put a blank line between the tildes and the code. When you do a preview, the code will show correctly, but the tildes won’t show. For example:
===
where I show the 3 equal signs, you would put 3 tildes ~
The code goes between the tildes.
The tildes won't show when you do a preview or post the code.
===
I see
:D
Thank you ver much, this will be very useful!
Thanks everyone for the quick reply. I will try out your suggestions later after work. I’m an iOS veloper after dark, well it’s more like a hobby 
Cheers!
@dave1707 Thanks for your advice. In your sample code, you’re showing your screens as functions. What if the screens were classes, how do you exit from the draw() function of one class and move to the draw() function of another class?
.@developer4codea Here’s the above code but the screen functions are now classes. As I said above, there are better ways to do this, I’m just taking the easy/quick way.
displayMode(FULLSCREEN)
function setup()
s1=screen1()
s2=screen2()
s3=screen3()
s=1
end
function draw()
fontSize(40)
if s==1 then
s1:draw()
end
if s==2 then
s2:draw()
end
if s==3 then
s3:draw()
end
end
function touched(t)
if t.state==BEGAN then
s=s+1
if s>3 then
s=1
end
end
end
screen1=class()
function screen1:init()
end
function screen1:draw()
background(255, 220, 0, 94)
fill(255,0,0)
text("screen 1",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
screen2=class()
function screen2:init()
end
function screen2:draw()
background(95, 255, 0, 95)
fill(255,0,0)
text("screen 2",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
screen3=class()
function screen3:init()
end
function screen3:draw()
background(0, 255, 239, 95)
fill(255,0,0)
text("screen 3",WIDTH/2,HEIGHT/2)
text("tap screen for next screen",WIDTH/2,HEIGHT/2-200)
end
--# End
End = class()
function End:init()
end
function End:draw()
background(255, 0, 0, 255)
output.clear()
print("Screen End")
sprite("Planet Cute:Character Boy",WIDTH/2,HEIGHT/2)
end
function End:touched(touch)
Selectscreen(MENU)
end
--# Game
Game = class()
function Game:init()
end
function Game:draw()
background(59, 255, 0, 255)
output.clear()
print("Screen Game")
sprite("Planet Cute:Character Pink Girl",WIDTH/2,HEIGHT/2)
end
function Game:touched(touch)
Selectscreen(END)
end
--# Main
-- SelectScreen
function setup()
MENU=1
GAME=2
END=3
Selectscreen(MENU)
end
function draw()
currentscreen:draw()
end
function touched(touch)
if touch.state==ENDED then
currentscreen:touched(touch)
end
end
--# Menu
Menu = class()
function Menu:init()
end
function Menu:draw()
background(9, 0, 255, 255)
output.clear()
print("Screen Menu")
sprite("Planet Cute:Character Cat Girl",WIDTH/2,HEIGHT/2)
end
function Menu:touched(touch)
Selectscreen(GAME)
end
--# Selectscreen
Selectscreen = class()
function Selectscreen:init(option)
mySelect = {self.one, self.two, self.three, self.four}
local myFunc = mySelect[option]
if myFunc ~= nil then
myFunc()
else
self.defaultFunc()
end
end
function Selectscreen:one()
currentscreen=Menu()
end
function Selectscreen:two()
currentscreen=Game()
end
function Selectscreen:three()
currentscreen=End()
end
function Selectscreen:four()
print("This is four")
end
function Selectscreen:defaultFunc()
print("Error: An unknown error has occurred.")
end
When I use the little snippets that @dave1707 has posted, and modify them so the colours are “lighter” (such as background(39, 98, 39, 255)), I can see a faint image or ghost like appearance of the Codea Dev environment in the background, as though the screen doesnt get wiped properly.
I get this same effect in my own app that I’ve just started…its barely noticeable, but once you notice it, it becomes really annoying. With a more vibrant background, or total black, I see no ghosting at all.
Is there something else I need to do to properly clear the screen?
@FunkyMagic I get the ghosting also. It eventually goes away as you display other things. I don’t even worry about it anymore.
If I mirror the iPad out via HDMI to TV, there is no ghosting (on the TV) which is a bit strange…I’ll try and ignore it now I know its just the way it is rather than something I’m doing wrong!
@developer4codea try with parameters.
function setup()
--your original page
imagen = image(WIDTH,HEIGHT)
here: Parameter.integrer("DELETE",function()
imagen = image(WIDTH,HEIGHT) --clean the page
end)
end