Masking Edges in Letterbox Scaling

Solar2D General Questions/Discussion
#1

Hello Friends,

I’m using letterbox scaling for my app, and for the most part, it’s working fine. However, when I implemented a carousel list feature, which shifted a display group horizontally, the carousel goes through the edge of the letterbox screen.

http://imgur.com/PgNhK1P

Does anyone know how to mask the edges so that the text won’t appear in areas outside of the letterbox area?

Btw, while I’m at it, can someone tell me how to post an image to this forum rather than linking it through the URL. Whenever I try to directly upload an image here, it says I don’t have permission to use that image extension in this community.

#2

Anyone?

#3

Hi @atrizhong,

We’d probably need to see your code and the mask setup to figure out why this is occurring. I assume that you carefully followed the mask guidelines outlined in the guide?

http://docs.coronalabs.com/guide/media/imageMask/index.html

As for posting images, what extension are you trying to upload? Are you using the method where you click on “More Reply Options” and then, on the next page, using the “attach file” section below the message input box?

Brent

#4

I think you misunderstood my question :stuck_out_tongue: . My bad for being unclear.

What’s happening is that I have a display group that contains groups of text. You can swipe the display group so that the x value changes. This gives it a sort of “carousel” effect. Because I’m using letterbox scaling, Corona is (at least in my understanding) supposed to clip out anything that goes off the bounds of the screen, leaving black margins on screens that are too big. However, my text carousel is visible in the letterbox margins. I don’t know why this is the case, and I don’t know how to fix it.

This may be a little bit too complicated to understand, so I’ll attach my example program showing what’s wrong.

Edit: View as Samsung Galaxy S5 to see the issue!

#5

Hi @atrizhong,

Actually, Corona will not clip/mask items that enter the “letterbox bars” zones. In fact, those regions should be filled with some visual content, otherwise the marketplace reviewers may reject your app because it does not appear to occupy the entire screen.

Now, if you want to prevent your carousel group from appearing in those regions, you’ll need to make the entire display group, and that can be done by following the instructions in the guide that I linked you to.

Take care,

Brent

#6

Even if I mask the carousel display group, the issue still isn’t resolved. It actually becomes worse! I really don’t think masks are appropriate in this situation, because my carousel dynamically moves. All the mask seems to do is block out the appropriate content.

The only way that masks might help is if it were possible to mask the entire display screen, but that is not possible.

Right before carousel shift

The problem(s) occur after the carousel shift

#7

Hi @atrizhong,

I probably wasn’t clear enough. You should try masking one group and then putting your carousel group inside of that group.

Or better yet, just use a container object and place your  carousel group within that.

http://docs.coronalabs.com/api/library/display/newContainer.html

Take care,

Brent

#8

Anyone?

#9

Hi @atrizhong,

We’d probably need to see your code and the mask setup to figure out why this is occurring. I assume that you carefully followed the mask guidelines outlined in the guide?

http://docs.coronalabs.com/guide/media/imageMask/index.html

As for posting images, what extension are you trying to upload? Are you using the method where you click on “More Reply Options” and then, on the next page, using the “attach file” section below the message input box?

Brent

#10

I think you misunderstood my question :stuck_out_tongue: . My bad for being unclear.

What’s happening is that I have a display group that contains groups of text. You can swipe the display group so that the x value changes. This gives it a sort of “carousel” effect. Because I’m using letterbox scaling, Corona is (at least in my understanding) supposed to clip out anything that goes off the bounds of the screen, leaving black margins on screens that are too big. However, my text carousel is visible in the letterbox margins. I don’t know why this is the case, and I don’t know how to fix it.

This may be a little bit too complicated to understand, so I’ll attach my example program showing what’s wrong.

Edit: View as Samsung Galaxy S5 to see the issue!

#11

Hi @atrizhong,

Actually, Corona will not clip/mask items that enter the “letterbox bars” zones. In fact, those regions should be filled with some visual content, otherwise the marketplace reviewers may reject your app because it does not appear to occupy the entire screen.

Now, if you want to prevent your carousel group from appearing in those regions, you’ll need to make the entire display group, and that can be done by following the instructions in the guide that I linked you to.

Take care,

Brent

#12

Even if I mask the carousel display group, the issue still isn’t resolved. It actually becomes worse! I really don’t think masks are appropriate in this situation, because my carousel dynamically moves. All the mask seems to do is block out the appropriate content.

The only way that masks might help is if it were possible to mask the entire display screen, but that is not possible.

Right before carousel shift

The problem(s) occur after the carousel shift

#13

Hi @atrizhong,

I probably wasn’t clear enough. You should try masking one group and then putting your carousel group inside of that group.

Or better yet, just use a container object and place your  carousel group within that.

http://docs.coronalabs.com/api/library/display/newContainer.html

Take care,

Brent