Trouble understanding a long display groups x-position relative to the viewport

Hello,

I have created a tutorial that acts like a simple slideshow. How I pull it off is by having 6 full-sized images placed side-by-side within long display group. I then scroll the display group to view the correct image. But, for some reason, things aren’t acting the way I would suspect they should in terms of positioning the display group. Here’s a small piece of my code:

 screen1 = display.newImage("tutorial/screen1.png")  
 screen2 = display.newImage("tutorial/screen2.png")  
 screen3 = display.newImage("tutorial/screen3.png")  
 screen4 = display.newImage("tutorial/screen4.png")  
 screen5 = display.newImage("tutorial/screen5.png")  
 screen6 = display.newImage("tutorial/screen6.png")  
  
 screen1.x = 1024 \* 0  
 screen2.x = 1024 \* 1  
 screen3.x = 1024 \* 2  
 screen4.x = 1024 \* 3  
 screen5.x = 1024 \* 4  
 screen6.x = 1024 \* 5  
  
 slideshow\_group:insert(screen1)  
 slideshow\_group:insert(screen2)  
 slideshow\_group:insert(screen3)  
 slideshow\_group:insert(screen4)  
 slideshow\_group:insert(screen5)  
 slideshow\_group:insert(screen6)  
  
 slideshow\_group.x = 512;  
  

Look at that last line of code, the “slideshow_group.x = 512;”. That actually works. It shows the first slide properly. I would have thought that it should be: slideshow_group.x = 0;

Even stranger, in order to transition to the next slides, I have to use these offsets:

local slide_offsets = {-512, -1536, -2560, -3584, -4608, -5632}

In other words, to view screen #2, I need to subtract 512 from slideshow_group.x. To view screen #3, I need to subtract 1536 (512 + 1024). To view screen #4, I need to subtract 2560 (512 + 1024 + 1024) Very odd.

Any ideas what’s going on?

Thanks!

  • Bret [import]uid: 168791 topic_id: 31168 reply_id: 331168[/import]

So wait, your screen width is 1024 and setting the group.x to 512 shows first slide but then subtracting 512 from that (so x=0) shows the second? Could you clarify? That would suggest the screens are 512 wide. I’m sure I’m reading this wrong but want to make sure I understand it before I try to delve deeper :wink: [import]uid: 52491 topic_id: 31168 reply_id: 124661[/import]

@clone45

I think the problem is with the difference between how a group is ‘positioned’(reference point) and other display objects.

“the default reference point for a group is display.TopLeftReferencePoint, whereas other display objects usually have their default reference point set to display.CenterReferencePoint.”

check out this link where display groups are discussed :
http://www.coronalabs.com/blog/2012/02/28/corona-display-groups-101/

As such, your group is aligned to the top left corner of the screen, but when you insert the first image ‘screen1’, it is CenterReferenced… so it’s left edge is actually half-way off the display. Therefore when you set your ‘group’ to 512, you have moved the group’s left edge to the middle of the screen, and you see the full image because the group has pulled that left edge of screen1 with it, so the screen1’s left edge aligns now with your display’s left edge. Hope that makes sense.

Your offsets are correct, they are 1024 apart… as they should be … they are just adjusted for the 512 offset.
I personally would, with what appears to be a fairly basic app, just set each of the screen images as ‘TopLeftReferencePoint’, like the display group… then set all of their y fields to 0, and the first screen image x field to 0, and all should work well. Then your offsets will be 1024, 2048, etc…
good luck!
[import]uid: 148857 topic_id: 31168 reply_id: 124697[/import]

cyberpark seems to have nailed it. Just wanted to decorate a fine point in this regarding the “slide_offsets” mentioned…

As used, slide_offsets isn’t offsets of the images. slide_offsets is actually a group_offset (it’s literally used as a group x coord). So the values it contains each are a single offset of the group for proper display of your content. Each of the pictures has an offset within the group of it’s own, defined in lines 8-13 (groups of course use x coords for their x offset).

With cyberparks modifications, your group x coord display array (slide_offsets)) would basically be the negative value of the individual image x offsets (x coords from lines 8-13) within the group. (the group needs to move left x pixels to show the content for a particular image).

Basically, calling the array “group_offset” might help clear up some semantic confusion.

(It’s subtle, but opens a more robust way of defining it, which would help thinking through supporting variable image sizes, etc) [import]uid: 79933 topic_id: 31168 reply_id: 124698[/import]

Thanks for the replies everyone. That clarifies things. I already worked around it by having the images slide instead of the group, but it’s good knowledge for next time I find myself in that situation.

Cheers,

  • Bret [import]uid: 168791 topic_id: 31168 reply_id: 124781[/import]

So wait, your screen width is 1024 and setting the group.x to 512 shows first slide but then subtracting 512 from that (so x=0) shows the second? Could you clarify? That would suggest the screens are 512 wide. I’m sure I’m reading this wrong but want to make sure I understand it before I try to delve deeper :wink: [import]uid: 52491 topic_id: 31168 reply_id: 124661[/import]

@clone45

I think the problem is with the difference between how a group is ‘positioned’(reference point) and other display objects.

“the default reference point for a group is display.TopLeftReferencePoint, whereas other display objects usually have their default reference point set to display.CenterReferencePoint.”

check out this link where display groups are discussed :
http://www.coronalabs.com/blog/2012/02/28/corona-display-groups-101/

As such, your group is aligned to the top left corner of the screen, but when you insert the first image ‘screen1’, it is CenterReferenced… so it’s left edge is actually half-way off the display. Therefore when you set your ‘group’ to 512, you have moved the group’s left edge to the middle of the screen, and you see the full image because the group has pulled that left edge of screen1 with it, so the screen1’s left edge aligns now with your display’s left edge. Hope that makes sense.

Your offsets are correct, they are 1024 apart… as they should be … they are just adjusted for the 512 offset.
I personally would, with what appears to be a fairly basic app, just set each of the screen images as ‘TopLeftReferencePoint’, like the display group… then set all of their y fields to 0, and the first screen image x field to 0, and all should work well. Then your offsets will be 1024, 2048, etc…
good luck!
[import]uid: 148857 topic_id: 31168 reply_id: 124697[/import]

cyberpark seems to have nailed it. Just wanted to decorate a fine point in this regarding the “slide_offsets” mentioned…

As used, slide_offsets isn’t offsets of the images. slide_offsets is actually a group_offset (it’s literally used as a group x coord). So the values it contains each are a single offset of the group for proper display of your content. Each of the pictures has an offset within the group of it’s own, defined in lines 8-13 (groups of course use x coords for their x offset).

With cyberparks modifications, your group x coord display array (slide_offsets)) would basically be the negative value of the individual image x offsets (x coords from lines 8-13) within the group. (the group needs to move left x pixels to show the content for a particular image).

Basically, calling the array “group_offset” might help clear up some semantic confusion.

(It’s subtle, but opens a more robust way of defining it, which would help thinking through supporting variable image sizes, etc) [import]uid: 79933 topic_id: 31168 reply_id: 124698[/import]

Thanks for the replies everyone. That clarifies things. I already worked around it by having the images slide instead of the group, but it’s good knowledge for next time I find myself in that situation.

Cheers,

  • Bret [import]uid: 168791 topic_id: 31168 reply_id: 124781[/import]