Best way to show part of display and pan?

Getting Started Newbie Questions
#1

Hello,

I have a display group that is a game board and also game pieces on it that are in the display. What is the best way to show only part of the display group on the screen? I am doing this because at the top and bottom are other game items. I want to pan the game board in all directions. All I thought is a scrollview but I was hoping there is a better way to do this.

I will be changing the scaleX/scaleY of the display group so I can see all of the board and then zoom back to normal view. Consider it a game like dominoes and as tiles (bones) are added to the board I will be changing the scale so all tiles are showing in the screen.

Thanks ahead!

Warren

#2

Hi Warren,

Scroll views do not support scaling, as indicated in the “Gotchas” of the docs:

https://docs.coronalabs.com/api/library/widget/newScrollView.html

So, I suggest you use a display group and then manipulate it yourself (scale, move) and implement a touch event handler on it for purposes of panning.

Take care,

Brent

#3

So should I use a mask over the display for the container?

Thanks!

#4

Do you need a mask, or will it occupy the entire screen?

#5

The playing board will not use all of the screen. Its basically a dominoes board where you have your tiles at the bottom to drag up and above the board you have the score and other info. So The board is below in a large box area. I want to drag the board around within the box area. I don’t want the board to come down where my tiles are. I want to keep it within a box area. I also will want to scale the display back and forth for viewing. I would prefer to use scaleX and scaleY since it is easy to return the scale back to the original with those settings.

I was planning on creating a display with a background image that was very large. Then with it centered I will add tiles to the display starting in the middle. Then I can scale out to see more as they are added. If I pan the display in any direction I just won’t let it pan past where the tiles are so I can keep the view of the tiles on the screen within that box area.

Does all of this make sense and seem like it will work?

Thanks,

Warren

#6

Actually I am trying out a display container to see if that will work… Maybe I can add the tiles to another display within the container and then drag that display around within the container. The container will just cut everything off at the border which is what I want.

#7

Hi Warren,

Scroll views do not support scaling, as indicated in the “Gotchas” of the docs:

https://docs.coronalabs.com/api/library/widget/newScrollView.html

So, I suggest you use a display group and then manipulate it yourself (scale, move) and implement a touch event handler on it for purposes of panning.

Take care,

Brent

#8

So should I use a mask over the display for the container?

Thanks!

#9

Do you need a mask, or will it occupy the entire screen?

#10

The playing board will not use all of the screen. Its basically a dominoes board where you have your tiles at the bottom to drag up and above the board you have the score and other info. So The board is below in a large box area. I want to drag the board around within the box area. I don’t want the board to come down where my tiles are. I want to keep it within a box area. I also will want to scale the display back and forth for viewing. I would prefer to use scaleX and scaleY since it is easy to return the scale back to the original with those settings.

I was planning on creating a display with a background image that was very large. Then with it centered I will add tiles to the display starting in the middle. Then I can scale out to see more as they are added. If I pan the display in any direction I just won’t let it pan past where the tiles are so I can keep the view of the tiles on the screen within that box area.

Does all of this make sense and seem like it will work?

Thanks,

Warren

#11

Actually I am trying out a display container to see if that will work… Maybe I can add the tiles to another display within the container and then drag that display around within the container. The container will just cut everything off at the border which is what I want.