powerup-iOS icon indicating copy to clipboard operation
powerup-iOS copied to clipboard

Proper support for multiple screen aspect ratios

Open justkd opened this issue 6 years ago • 22 comments

Description

As a developer, I need to update media assets to be aspect ratio agnostic. This especially affects iPhoneX.

This seems to be a hefty issue...

Some of what may be expected to be several small visual assets are actually single, full screen images.

Eg. The start screen is a single full screen image. The buttons are a part of the background, not individual assets used as the image for an actual button. The map view has the same issue: the images for the unlocked buttons are actually full screen with a transparent background.

Because of the forced aspect ratio of these assets, they can not be properly placed for the iPhoneX (and probably would have caused some headache on iPad).

The assets need to be broken up into individual components, including the stripes that are regularly used as an accent in the bottom corners. Then all of these assets will need to be lain out again, with proper constraints to account for the three different aspect ratios on iOS.

The continue button needs to be moved or changed in order to account for the extra space at the top of the iPhone X. It should probably be moved lower rather than elongated, since the iPhoneX will have different margins for a slide-out view depending on which landscape mode is currently being used (the top could be on the left or right).

This is an issue that also affects layouts in Android, since the full screen assets have similar problems with the multitude of Android screen sizes.

Mocks

image.png

screen shot 2018-05-17 at 10 01 08 pm screen shot 2018-05-17 at 10 01 22 pm screen shot 2018-05-17 at 10 01 32 pm screen shot 2018-05-17 at 10 08 10 pm

Acceptance Criteria

Update [Required]

  • [ ] check and update programmatic layouts for all mini-games
  • [ ] update visual assets to be separate components where appropriate
  • [ ] update full screen asses (such as backgrounds) to be aspect ratio agnostic (maybe extra neutral space around the edges)
  • [ ] update storyboard layouts to use the new visual assets
  • [ ] check and update IBOutlets and IBActions to ensure code is still relevant and functional following storyboard updates

Definition of Done

  • [ ] All of the required items are completed.
  • [ ] Approval by 1 mentor.

justkd avatar May 18 '18 03:05 justkd

Can I work on this issue?

anubhavpulkit avatar Feb 02 '20 19:02 anubhavpulkit

@anubhavsingh16 What do you propose to do exactly? This issue involves some UI/graphics work in addition to coding.

sunjunkie avatar Feb 03 '20 18:02 sunjunkie

@sunjunkie I want to check and update IBOutlets and IBAction to ensure code is still relevant and functional following storyboard updates.

anubhavpulkit avatar Feb 04 '20 17:02 anubhavpulkit

This issue requires UI and graphic updates before IBOutlets and IBActions can be checked or updated. So it cannot be worked on until new graphic elements are created.

sunjunkie avatar Feb 04 '20 19:02 sunjunkie

This issue requires UI and graphic updates before IBOutlets and IBActions can be checked or updated. So it cannot be worked on until new graphic elements are created.

Ok so Can I Work on the update full-screen asses (such as backgrounds) to be aspect ratio agnostic (maybe extra neutral space around the edges)

anubhavpulkit avatar Feb 04 '20 19:02 anubhavpulkit

No, that would only be a temporary fix. The full screen assets have to be recreated and the screen layout redone based on the new images. This will require a lot of discussion and UI/image development. This issue is not ready to be worked on until we get the graphics recreated.

sunjunkie avatar Feb 05 '20 22:02 sunjunkie

This issue requires UI and graphic updates before IBOutlets and IBActions can be checked or updated. So it cannot be worked on until new graphic elements are created.

Hey @sunjunkie I have created new graphic images assets for all this issue.Is that ok to reopen this issue again

MANI14011998 avatar Feb 22 '20 08:02 MANI14011998

This issue is still open. Those closed tags are on other issues that were directed to this particular one. If you have some assets you've made, maybe you could post some examples here, or a link where we can download them, so we can see how they address the issue and discuss what might need to happen to implement a fix?

justkd avatar Feb 24 '20 15:02 justkd

Hey! @sunjunkie @justKD I have made some graphics of buttons used in the app. Please have a look and let me know if I can replace the older Start View Scene Components with new ones. I will add more graphical stuffs in the folder after approval. Drive Link

vatsalkul avatar Feb 24 '20 18:02 vatsalkul

School-3 with chimney WhatsApp Image 2020-02-25 at 1 05 38 AM old one Screenshot 2020-02-21 at 9 20 52 PM

@justKD have look if this is assign to me i will make whole assets

MANI14011998 avatar Feb 24 '20 19:02 MANI14011998

@vatsalkul The images should not have extra pixels. Crop the image as close as possible to the button - as in this screenshot: image

sunjunkie avatar Feb 29 '20 00:02 sunjunkie

Let's break up this issue into smaller pieces. One issue for each screen we want to update. @vatsalkul you are welcome to work on the Start View scene. @MANI14011998 you are welcome to take the Mine Sweeper Game. @anubhavsingh16 you are welcome to take the map screen. Each of you please create an issue for just one screen. Once I approve it, you can work on the image assets for that screen. Please follow the issue template.

sunjunkie avatar Feb 29 '20 01:02 sunjunkie

Ohk ma'am i will do that

MANI14011998 avatar Feb 29 '20 13:02 MANI14011998

@sunjunkie Please review my Issue

vatsalkul avatar Feb 29 '20 14:02 vatsalkul

@sunjunkie I can't find any issue in map screen as mention above I think it is solved so Can I take the Mine Sweeper Game issue?

anubhavpulkit avatar Mar 12 '20 11:03 anubhavpulkit

There is only one issue on the map which is Smoke of the chimney.

anubhavpulkit avatar Mar 12 '20 11:03 anubhavpulkit

@sunjunkie So can I work on Minesweeper game issue, please.

anubhavpulkit avatar Mar 12 '20 17:03 anubhavpulkit

@anubhavsingh16 There is a big issue with the map - The map should have a blackground image and separate images for the buildings. So there is a work to be done breaking that up.

Anyway, yes, create an issue for the mine sweeper game and I'll review it before you work on it.

sunjunkie avatar Mar 12 '20 19:03 sunjunkie

Thank You so much @sunjunkie

anubhavpulkit avatar Mar 12 '20 20:03 anubhavpulkit

@sunjunkie now only first issue is not solved in this list of issues so can you close this issue and make(or I open) a new one only for the first issue.

anubhavpulkit avatar Apr 03 '20 20:04 anubhavpulkit

Ok. I'll take a look.

sunjunkie avatar Apr 03 '20 21:04 sunjunkie