Multi screen interface

Hello,

excuse me if this question is too profane :slight_smile:
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 :slight_smile: [import]uid: 8285 topic_id: 2187 reply_id: 302187[/import]

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

[code]

– 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)
[/code] [import]uid: 9440 topic_id: 2187 reply_id: 6631[/import]

Great J.A. your example is exactly what I was searching for. Thanks a lot for your help and the vid. Grandiose!
[import]uid: 8285 topic_id: 2187 reply_id: 6640[/import]

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…

[import]uid: 9046 topic_id: 2187 reply_id: 6971[/import]

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 [import]uid: 5712 topic_id: 2187 reply_id: 6998[/import]

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.

[import]uid: 7356 topic_id: 2187 reply_id: 6999[/import]

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? [import]uid: 5712 topic_id: 2187 reply_id: 7003[/import]

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!

[import]uid: 9046 topic_id: 2187 reply_id: 7005[/import]

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!
[import]uid: 7356 topic_id: 2187 reply_id: 7006[/import]

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.

[code]

– 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
[/code] [import]uid: 6114 topic_id: 2187 reply_id: 7029[/import]

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
[import]uid: 9046 topic_id: 2187 reply_id: 7082[/import]

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:

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)  
  

For a more complete example of this approach, take a look at the TabBar sample included in the SDK (or here: http://bitbucket.org/gilbert/view-controller-library/src/tip/TabBar/). Each screen is a group that is defined in a separate Lua file. In response to TabBar touch events, the main.lua file loads each screen at runtime using a require() call. See if this does what you need.

Tim

[import]uid: 8196 topic_id: 2187 reply_id: 7095[/import]

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

Tim [import]uid: 8196 topic_id: 2187 reply_id: 7096[/import]

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
[import]uid: 9046 topic_id: 2187 reply_id: 7128[/import]

This is one of the best topics to discuss. Few modifications to our work environment can create a productivity change as dramatic as adding a additional monitor. The open source synergy package provides an excellent method of linking many displays with out purchasing additional hardware.
Unlike traditional single-screen setups, multi-screen display systems require special considerations for UIs. This article present tools and close designed to address the acquisition and change of input focus across multiple displays. By enhancing existing X Window system focus information multi screen users can know precisely where their input focus is even on displays 4200*3150 pixels and larger. Some of hardware and software requirements are necessary for this.

dc web design
washington dc web design

[import]uid: 137489 topic_id: 2187 reply_id: 96279[/import]