Multi screen interface

Hello,

excuse me if this question is too profane :)

Starting situation:

I want to build an interface with different "screens".
Perhaps a "main screen", "preferences screen" and a "highscore screen".

My question:

Which is best lua way to switch between these screens?
Perhaps with different ".lua" files?
Does there excists a library (class)?
Is there an example?

Thanx a lot for your help :)

I'm so new to Corona there are probably better ways to do this, but I took a look at the Coffee demo from the blog (http://blog.anscamobile.com/2010/09/create-scrolling-list-views-with-text-and-graphics-in-coronasdk-ios-android-tutorial/) and saw how they used "groups" to show and hide collections of objects.

Using that I put together a two-screen demo, the code is below. To make it work you'll need a couple button graphics and the ui.lua file from that Coffee demo. It's pretty plain-Jane, but it does show how to switch from one screen to another.

J. A. Whye

PS - I recorded a little walkthrough video of the code, it's 3-minutes long and you can see it here: http://instantvideowebpages.com/play/380

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
-- test code to switch from one screen to another
-- By J. A. Whye - September 25, 2010 -- http://gamedevnation.com
 
local ui = require ( "ui" )
 
-- button handler for the Play Game button
local function hsButtonHandler(event)
                transition.to(scrnHighScores, {time=400, x=display.contentWidth*-1, transition=easing.linear, alpha=0 })
                transition.to(scrnPlay, {time=400, x=0, transition=easing.linear, alpha=1 })
end
 
-- the button that goes on the High Scores screen, leads you to the Play screen
local hsButton = ui.newButton {
        defaultSrc = "buttonGreen.png" , defaultX = "150" , defaultY = "40",
        overSrc = "buttonGreenOver.png" , overX = "150" , overY = "40",
        onEvent = hsButtonHandler, id = "myButton", x = 150, y = 340,
                text = "Play Game"
}
 
-- button handler for the High Scores button 
local function msButtonHandler(event)
                transition.to(scrnPlay, {time=400, x=display.contentWidth*-1, transition=easing.linear, alpha=0 })
                transition.to(scrnHighScores, {time=400, x=0, transition=easing.linear, alpha=1 })
end
 
-- the button that goes on the Play screen, leads you to the High Scores screen
local msButton = ui.newButton {
        defaultSrc = "buttonGreen.png" , defaultX = "150" , defaultY = "40",
        overSrc = "buttonGreenOver.png" , overX = "150" , overY = "40",
        onEvent = msButtonHandler, id = "msButton", x = 150, y = 300,
                text = "High Scores"
}
 
-- set up groups for the screens
scrnPlay = display.newGroup()
scrnHighScores = display.newGroup()
scrnHighScores.x = display.contentWidth*-1 -- start with the High Score screen out of site
scrnHighScores.alpha = 0 -- and start with it transparent
 
-- create text for the High Scores screen
hsText = display.newText("High Scores Here", 10, 50, native.systemFontBold, 24)
hsText:setTextColor(255, 255, 255)
 
-- put the text and the button into the group
scrnHighScores:insert(hsText)
scrnHighScores:insert(hsButton)
 
-- create text for the Play screen
playScreenText = display.newText("Play Game Here", 10, 50, native.systemFontBold, 24)
playScreenText:setTextColor(255, 255, 255)
 
-- create a colored background to differentiate between the screens
local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,125,125)
 
-- put the , background, text and the button into the group
scrnPlay:insert(detailBg)
scrnPlay:insert(playScreenText)
scrnPlay:insert(msButton)

Great J.A. your example is exactly what I was searching for. Thanks a lot for your help and the vid. Grandiose!

I've went through your tutorial and it is well done but this isn't the target solution I'm looking for.
I understand group logic within Corona but it seems to be it is better used in a simple screen switch example over actually switching level screens in which the new screens have their own logic for that level.

Is there no way to transition or load different lua files for this type of functionality without using groups?

An example of what I'm trying to accomplish is similar to flash or Cocos2D

Screen1 (or scene1) Is a menu screen
Screen2 is a game screen
Screen3 is a total different game screen
etc..

MBD,

you can only use modules which can be required at first. There is no way to load another lua file at will.

And do yourself a favor and stop trying to put ways development you use for Flash or Cocos2D on Corona. It is a completely different beast and so need to be handled differently.

Michael

I am starting to believe that a better scene management should be placed as No.2 most-wanted feature (after IAP) in Ansca's list. Dozens of members seem to be confused with the currently available way for managing scenes.

Even Cocos2d, which is considered to be the "hard way", offers much easier scene management in a very clear conceptual box.

Dozends of members??? You and MDB is not a dozend. Others are using Corona now for a long time and are waiting for other features to be implemented first.

This is Corona SDK and not Flash, nor Cocos2D. If you want Cocos 2D behavior, why don't you use it?

Michael,
I've tried using modules but I'm not getting it to work. Basically I've got some function code in a "module" that resides in another lua file. I require that file in the main.lua and call it using modulename.functionname but the entire code won't run when I attempt that.
I'm sure, coming from a long history of using other languages that I'm just not getting the syntax correct. Do you have any good working examples?

Thanks for your help,
I'm trying to become more of a fan of Corona, trust me.. I believe in the dream!

MikeHart, if you read the recent threads of the last month you will find at least 5 topics with members asking how to properly implement scenes! I was actually got motivated to write my previous post after answering this post and then clicked on the current topic. Scene questions are everywhere in these forums!

I know that you are kind of expert in Lua/Corona code. It is apparently easy for you to understand how to work with scenes. But take a moment and think about some of us, the "newbies". Don't we also have the equal right to express our own difficulties and expectations? This is called feedback (the seed for evolution).

As for Cocos2d, I have not abandoned it, I actually love it, but I would prefer to work with something easier (I am lazy and not so smart)! I think Corona has many things to gain by studying what other platforms are implementing (and how).

Corona current abstractions set is just a mean for Ansca to deliver convenience in rapid mobile apps development. If proven in need, it is easier to write an additional abstraction layer than force its customers to understand and use something (maybe excellent for experts) that is not easily perceived by newcomers.

Don't forget that ma$$es are not always smart enough. Had they been, middleware would have been out of need!

As I am working on an App that has 7 "popup windows" this subject is of interest. Coming from REAL Studio and Adobe Flex IDEs, which have elegant ways to manage windows, I see the Corona SDK doesn't provide for real window management. No Worries Mate! We can roll our own.

I put the code that creates each of the 7 windows in a module that has a function that builds a display group and that seems to work. What I miss is the auto-modal features the IDEs provide, so that you have to dismiss the window and no user interaction outside the window is functional.

I am still figuring this out, but so far, first laying down an "overlay" half-alpha screen that captures and discards touches and then placing my new window over that seems to help. I do need to set focus to the current window on top as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
----------------------------------------------------------  
--  show an overlay for modal window mode
----------------------------------------------------------
local overlay = nil    
function doOverlay()
    return true
end
function showOverlay()
    overlay = display.newRect( 0, 24, display.contentWidth, display.contentHeight ) 
    overlay:setFillColor( 200,200,200,128 )     -- grey 50% alpha
    overlay:addEventListener( "touch", doOverlay )
end
function killOverlay()
    overlay:removeEventListener( "touch", doOverlay )
    overlay:removeSelf()
    overlay = nil
end

This isn't bad, thanks for sharing.
The main piece of this I'm missing is how to put code into a function or such? Groups would work for me if I understood how to (for example) put entire levels or unique functions inside a display group. They seem to me to be nothing more than a fancy way of putting graphic items on the screen. How do you call an individual function from a Display group?
Exmaple:

myscrn = display.newGroup()
local test = display.newImage ("test.png")
myscrn:insert(test)

BUT, how do I put a function (or separate code specific to THAT group) in the group myscrn?

Richard

Hi MBD,

A Corona group is a Lua table and, like any Lua table, defines a new namespace that can contain custom functions, properties. Using your code as an example:

1
2
3
4
5
6
7
8
9
myscrn = display.newGroup()
function myscrn:compute(a,b)
        return a + b
end   
local test = display.newImage ("test.png")
myscrn:insert(test)
 
-- Call compute() on myscrn
local result = myscrn:compute(1,2)

J. A, thanks for the great sample and video.

Tim

I've tried the tab demo but it doesn't work on the Android side, iphone is fine - just not Android.
I'm still stuck on this unfortunately,

The closest I've come to having a working model of switching screens is using display groups and transitioning between them using the transition.to call, but only having simple elements in the groups such as photos, or text.

Groups work, but I can't seem to get functions or more advanced code (like playing a sound) to work correctly inside of a group.
I wish there were an easier way.

Richard

views:2168 update:2011/10/5 21:23:48
corona forums © 2003-2011