Maps, loading bars, windows, learning!

[rf928]

Howdy,

Couple questions, first off I want to say I posted in game dev because this is all for a game I am making.

Now to business:

-How do I create like a virtual map, (strategy game) and be able to scroll around, and have a limit to scrolling? I got it to scroll, just can’t get it to define boundaries. I thought it might be better to set physics boundaries, but the image of the map is outside them anyways!

-Popup windows. Say the user wants to pop up a menu for something, like statistics? Over top of the main view. How could I do that without adjusting anything going on in the background? Is storyboard overlay something to look into for that?

-Loading bars. User taps on something, loading bar is displayed. Is there a way to do this without all the crazy coding I’ve discovered on the tutorials?

I guess I’m asking is there an easy-ish way to do this, not a lot of code for simple things like this.

Thank you so much, without you guys I wouldn’t be where I am!

Ryley [import]uid: 28237 topic_id: 33519 reply_id: 333519[/import]

[rob]

Lots of really good questions!

1. You could use a scrollView (http://docs.coronalabs.com/api/library/widget/newScrollView.html) to define the size of the scroll area and manage the scrolling for you. But in reality putting a simple check in whatever code you’re using to move the map around to make sure you have not exceeded a boundary will be less overhead. I would suggest looking in the Community Code for some of the Camera modules and see how they are doing it.

2. Storyboard’s overlay’s would be a good use for this, if you’re using storyboard already. If you are not, then I would suggest that simply creating a displayGroup for your popup’s content and then using various hiding techniques like alpha or have it offscreen and then slide it onscreen would be pretty easy to do as well.

-- this is untested btw  
local function hideStats()  
 transition.to(statGroup, {time=500, y=display.contentHeight+statGroup.height/2, alpha=0.0})  
end  
  
local function showStats()  
 statGroup:toFront()  
 transition.to(statGroup, {time=500, y=display.contentHeight+statGroup.height/2, alpha=1.0})  
end  

Notice I didn’t move the statGroup to the back because it’s off screen and I don’t care, but you might have drawn things on the screen where the group is going to show, so I want to make sure it’s in front when I bring it back on screen.

3. Loading bars. Not really. We have a new Spinner widget and you could put effort into probably making it do a loading bar, but by the time you build the required sprite sheet for it and figure it out, you probably could build your own custom loading bar that does more than just spin (or grow at a fixed rate or repeat over and over).
   [import]uid: 199310 topic_id: 33519 reply_id: 133209[/import]

[rf928]

Hello,

Awesome answers! Very helpful.

Scroll view I will sure look into more, looks to be apexactly what I need! Now if I wanted to include buttons on the scroll view that move when I drag my finger, a display group would do wouldn’t it?

E: what exactly is a bitmask? Can’t figure put what it is saying there.

I am using storyboard, but last night I thought of something similar to what you posted. Seems it would work too, but the overlay may be simpler. Guess ill just mess around with both and see what I like!

Lastly, the loading bar. I think it might be easier to base a % number off a timer, and show that instead. I’m not a very skilled coder, I’m actually 15. So getting there!

Thank you [import]uid: 28237 topic_id: 33519 reply_id: 133237[/import]

[rob]

Scroll Views exist because you have content bigger than the area you want to show it in. Typically many people will have the physical screen be the view port into the larger scroll view after all what is off screen can’t be seen.

When you want the scrolling visible area to be smaller than the whole screen, you have to be able to tell Corona only have the scroll view show just in the area you want. This is done with a “Mask” or sometimes called a bit mask. It’s an image that has a black area and a white area. The white area will show the scrollView. Anything black will not show.

There are certain rules in making the bitmask. There are certain rules in making the bitmask and they are covered here: http://developer.coronalabs.com/reference/bitmap-masks-tableviews-and-scrollviews

Your idea for the loading bar and that seems like a reasonable way to proceed.

[import]uid: 199310 topic_id: 33519 reply_id: 133308[/import]

[rob]

Lots of really good questions!

1. You could use a scrollView (http://docs.coronalabs.com/api/library/widget/newScrollView.html) to define the size of the scroll area and manage the scrolling for you. But in reality putting a simple check in whatever code you’re using to move the map around to make sure you have not exceeded a boundary will be less overhead. I would suggest looking in the Community Code for some of the Camera modules and see how they are doing it.

2. Storyboard’s overlay’s would be a good use for this, if you’re using storyboard already. If you are not, then I would suggest that simply creating a displayGroup for your popup’s content and then using various hiding techniques like alpha or have it offscreen and then slide it onscreen would be pretty easy to do as well.

-- this is untested btw  
local function hideStats()  
 transition.to(statGroup, {time=500, y=display.contentHeight+statGroup.height/2, alpha=0.0})  
end  
  
local function showStats()  
 statGroup:toFront()  
 transition.to(statGroup, {time=500, y=display.contentHeight+statGroup.height/2, alpha=1.0})  
end  

Notice I didn’t move the statGroup to the back because it’s off screen and I don’t care, but you might have drawn things on the screen where the group is going to show, so I want to make sure it’s in front when I bring it back on screen.

3. Loading bars. Not really. We have a new Spinner widget and you could put effort into probably making it do a loading bar, but by the time you build the required sprite sheet for it and figure it out, you probably could build your own custom loading bar that does more than just spin (or grow at a fixed rate or repeat over and over).
   [import]uid: 199310 topic_id: 33519 reply_id: 133209[/import]

[rf928]

Hello,

Awesome answers! Very helpful.

Scroll view I will sure look into more, looks to be apexactly what I need! Now if I wanted to include buttons on the scroll view that move when I drag my finger, a display group would do wouldn’t it?

E: what exactly is a bitmask? Can’t figure put what it is saying there.

I am using storyboard, but last night I thought of something similar to what you posted. Seems it would work too, but the overlay may be simpler. Guess ill just mess around with both and see what I like!

Lastly, the loading bar. I think it might be easier to base a % number off a timer, and show that instead. I’m not a very skilled coder, I’m actually 15. So getting there!

Thank you [import]uid: 28237 topic_id: 33519 reply_id: 133237[/import]

[rob]

Scroll Views exist because you have content bigger than the area you want to show it in. Typically many people will have the physical screen be the view port into the larger scroll view after all what is off screen can’t be seen.

When you want the scrolling visible area to be smaller than the whole screen, you have to be able to tell Corona only have the scroll view show just in the area you want. This is done with a “Mask” or sometimes called a bit mask. It’s an image that has a black area and a white area. The white area will show the scrollView. Anything black will not show.

There are certain rules in making the bitmask. There are certain rules in making the bitmask and they are covered here: http://developer.coronalabs.com/reference/bitmap-masks-tableviews-and-scrollviews

Your idea for the loading bar and that seems like a reasonable way to proceed.

[import]uid: 199310 topic_id: 33519 reply_id: 133308[/import]