Screen Orientation and the black animated rectangle

[flyingaudio]

How can I eliminate the black animated rectangle when changing orientation on an iPad?
I am setup for landscape mode in build.settings, and the content rotates to stay upright, but then there is an animated black rectangle that follows after that.

I understand in Xcode, you can set all background views to hidden or transparent, to eliminate that effect.

I have read in the forums how people are doing it in code, but I can’t image that there isn’t a setting to handle this, hence my question in this section. [import]uid: 47723 topic_id: 30687 reply_id: 330687[/import]

[ignis075]

Hi there,
Currently, the only way to make a “smooth” rotating effect is via code, as you’ve probably seen. It’s not too complicated though: set up an orientation change listener and when it triggers, transition the necessary display groups 90 degrees (and the proper scale too).

Best regards,
Brent Sorrentino

[import]uid: 9747 topic_id: 30687 reply_id: 122956[/import]

[flyingaudio]

Thanks Brent.
I am not looking for a smooth rotation effect when it changes from landscapeLeft to landscapeRight, but to eliminate the black animated rectangle that follows it. I believe it is the native UI elements frame that is rotating, see:
http://developer.coronalabs.com/content/configuring-projects
This link also talks about the “content” setting in build.settings which locks down the Corona canvas to one orientation.

If the native UI element “screen” could be locked, that might work, but I am not sure how that might effect system dialogs.

Another option would be to set the native UI frame not to animate, but snap to the new orientation, like the Corona canvas does. Or have the Corona canvas sync with the UI rotation rotation. Are any these options available? [import]uid: 47723 topic_id: 30687 reply_id: 122973[/import]

[ignis075]

Hi @flyingaudio,

Your requirements are more advanced than I initially thought. I would suggest just trying a sample app to test the “content” parameter, locking the UI layer to a certain configuration, etc. Unfortunately, these aren’t aspects that I’ve experimented with personally, so I can’t tell you the outcome. I would be curious to hear what you discover, however!

I’m not sure how much iOS allows for tweaking some of this behavior. I don’t recall seeing the UI layer “snap” to a different orientation in any app (versus rotating), but I could easily be mistaken on that.

Sorry this isn’t of much help; I’m still curious what you find out in your further testing.
Brent
[import]uid: 9747 topic_id: 30687 reply_id: 123015[/import]

[flyingaudio]

Hi Brent,
I don’t think of this being advanced, but very basic. Basic in the sense that I am looking for a clean user experience.
Since a tablet can be rotated, I would think the core SDK would make it simple to accomplish this function in a way that matches the device. So, if I enable more than one orientation, the rotation would be done in a native fashion, or in this case, animate along with the UI layer.

Even the hit Lost City by Fire Maple Games, shows this rotating rectangle issue when you rotate the iPad.

I used the “content” setting in build.settings before I posted. And sure enough, it did lock the Corona canvas, so it did not rotate, which is not what I need. I just don’t want to see the UI layer animating separately from the Corona layer.

I am looking for a way to make this right with one of the setting files, like build.settings. Would a Plist setting do something here? I looked a little. If it was that easy, I am thinking someone else would have discovered it by now. [import]uid: 47723 topic_id: 30687 reply_id: 123023[/import]

[ignis075]

Hi again,

I just compared 2 apps on my iPad: “Lost City” that you mention, and “Trade Nations”, a popular social trading game. The former, as you say, shows the black rectangle rotating when you change orientation, and I agree that it’s not exactly “clean”. The latter (Trade Nations) rotates the screen smoothly when you change orientation… or probably more technically, it “syncs” the rotation to the device’s UI content, such that the user doesn’t notice any separation. Is this what you had in mind?

This smooth rotation is what is exhibited in the “Fishies” Corona sample code (it’s a fairly old example, but still pertinent for some things). The idea is that you rotate the display group(s) when the orientation change triggers… but timing it to be precisely synced to the OS screen rotation might not be 100% accurate (it might “drift” off by a slight amount). Still, it would look cleaner than the black rectangle option.

So to answer your question, I don’t think there’s a way to “hide” the UI layer rotation or sync Corona’s OpenGL layer precisely with the device’s rotation. But you can get it pretty close using the above method.

Brent

[import]uid: 9747 topic_id: 30687 reply_id: 123026[/import]

[flyingaudio]

Thanks Brent, I appreciate the tip.
I suppose this should become a feature request, because my friend in Xcode can hide it, make it transparent, or even sync it I believe. [import]uid: 47723 topic_id: 30687 reply_id: 123073[/import]

[ignis075]

Hi there,
Currently, the only way to make a “smooth” rotating effect is via code, as you’ve probably seen. It’s not too complicated though: set up an orientation change listener and when it triggers, transition the necessary display groups 90 degrees (and the proper scale too).

Best regards,
Brent Sorrentino

[import]uid: 9747 topic_id: 30687 reply_id: 122956[/import]

[flyingaudio]

Thanks Brent.
I am not looking for a smooth rotation effect when it changes from landscapeLeft to landscapeRight, but to eliminate the black animated rectangle that follows it. I believe it is the native UI elements frame that is rotating, see:
http://developer.coronalabs.com/content/configuring-projects
This link also talks about the “content” setting in build.settings which locks down the Corona canvas to one orientation.

If the native UI element “screen” could be locked, that might work, but I am not sure how that might effect system dialogs.

Another option would be to set the native UI frame not to animate, but snap to the new orientation, like the Corona canvas does. Or have the Corona canvas sync with the UI rotation rotation. Are any these options available? [import]uid: 47723 topic_id: 30687 reply_id: 122973[/import]

[ignis075]

Hi @flyingaudio,

Your requirements are more advanced than I initially thought. I would suggest just trying a sample app to test the “content” parameter, locking the UI layer to a certain configuration, etc. Unfortunately, these aren’t aspects that I’ve experimented with personally, so I can’t tell you the outcome. I would be curious to hear what you discover, however!

I’m not sure how much iOS allows for tweaking some of this behavior. I don’t recall seeing the UI layer “snap” to a different orientation in any app (versus rotating), but I could easily be mistaken on that.

Sorry this isn’t of much help; I’m still curious what you find out in your further testing.
Brent
[import]uid: 9747 topic_id: 30687 reply_id: 123015[/import]

[flyingaudio]

Hi Brent,
I don’t think of this being advanced, but very basic. Basic in the sense that I am looking for a clean user experience.
Since a tablet can be rotated, I would think the core SDK would make it simple to accomplish this function in a way that matches the device. So, if I enable more than one orientation, the rotation would be done in a native fashion, or in this case, animate along with the UI layer.

Even the hit Lost City by Fire Maple Games, shows this rotating rectangle issue when you rotate the iPad.

I used the “content” setting in build.settings before I posted. And sure enough, it did lock the Corona canvas, so it did not rotate, which is not what I need. I just don’t want to see the UI layer animating separately from the Corona layer.

I am looking for a way to make this right with one of the setting files, like build.settings. Would a Plist setting do something here? I looked a little. If it was that easy, I am thinking someone else would have discovered it by now. [import]uid: 47723 topic_id: 30687 reply_id: 123023[/import]

[ignis075]

Hi again,

I just compared 2 apps on my iPad: “Lost City” that you mention, and “Trade Nations”, a popular social trading game. The former, as you say, shows the black rectangle rotating when you change orientation, and I agree that it’s not exactly “clean”. The latter (Trade Nations) rotates the screen smoothly when you change orientation… or probably more technically, it “syncs” the rotation to the device’s UI content, such that the user doesn’t notice any separation. Is this what you had in mind?

This smooth rotation is what is exhibited in the “Fishies” Corona sample code (it’s a fairly old example, but still pertinent for some things). The idea is that you rotate the display group(s) when the orientation change triggers… but timing it to be precisely synced to the OS screen rotation might not be 100% accurate (it might “drift” off by a slight amount). Still, it would look cleaner than the black rectangle option.

So to answer your question, I don’t think there’s a way to “hide” the UI layer rotation or sync Corona’s OpenGL layer precisely with the device’s rotation. But you can get it pretty close using the above method.

Brent

[import]uid: 9747 topic_id: 30687 reply_id: 123026[/import]

[flyingaudio]

Thanks Brent, I appreciate the tip.
I suppose this should become a feature request, because my friend in Xcode can hide it, make it transparent, or even sync it I believe. [import]uid: 47723 topic_id: 30687 reply_id: 123073[/import]

[davidcondolora]

@flyingaudio: I know I’m digging up an old post here, but I’m having the exact same issue and concern. How did you end up solving it? It looks like it’s solved in Graphics 2.0 (see the bottom of this thread), but I’m on a Graphics 1.0 project.

Thanks!
 

• David

[ingemar]

(I gave this answer in another post, and for completeness sake I’m posting it here too)

I think that this piece of code will be of help:

http://developer.coronalabs.com/code/proper-orientation-rotation-animation

[davidcondolora]

@flyingaudio: I know I’m digging up an old post here, but I’m having the exact same issue and concern. How did you end up solving it? It looks like it’s solved in Graphics 2.0 (see the bottom of this thread), but I’m on a Graphics 1.0 project.

Thanks!
 

• David

[ingemar]

(I gave this answer in another post, and for completeness sake I’m posting it here too)

I think that this piece of code will be of help:

http://developer.coronalabs.com/code/proper-orientation-rotation-animation