Proper support for multiple screen aspect ratios

[justkd]

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

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.

[anubhavpulkit]

Can I work on this issue?

[sunjunkie]

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

[anubhavpulkit]

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

[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.

[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.

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)

[sunjunkie]

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.

[MANI14011998]

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

[justkd]

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?

[vatsalkul]

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

[MANI14011998]

old one

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

[sunjunkie]

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

[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.

[MANI14011998]

Ohk ma'am i will do that

[vatsalkul]

@sunjunkie Please review my Issue

[anubhavpulkit]

Ok great

…

On Sat, 29 Feb 2020, 19:41 vatsalkul, ***@***.***> wrote: @sunjunkie <https://github.com/sunjunkie> Please review my Issue <#355> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#264?email_source=notifications&email_token=ALMYYFVQJ7YICGTITNQLPODRFELRHA5CNFSM4FAQICLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENL3BNI#issuecomment-592949429>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALMYYFTYYPGR3QBYGOVM4C3RFELRHANCNFSM4FAQICLA> .

[anubhavpulkit]

@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]

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

[anubhavpulkit]

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

[sunjunkie]

@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.

[anubhavpulkit]

Thank You so much @sunjunkie

[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.

[sunjunkie]

Ok. I'll take a look.