• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by prafull2001 · May 22, 2018 at 01:24 AM · iphonecanvasscaling

Canvas Scaling Issue

I am currently in the process of preparing to publish my game to the iOS Appstore. However, as I ran the game on my phone I came across an issue.

The game in the Unity Editor looks fine, however on my phone, it is completely scaled off. I looked this up already and added a canvas scaler component to scale to the size of the screen, however it hasn't made much of a difference thus far. I am stuck here.


Here are 2 screenshots, the first from the Editor and the second from my iPhone 5s: alt textalt text

screen-shot-2018-05-21-at-91351-pm.png (45.2 kB)
image-1.jpg (86.6 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
2

Answer by FlaSh-G · May 22, 2018 at 10:05 AM

Canvas Scaling is one part of a properly setup canvas - the other is using the correct anchors in each RectTransform.

To have the Canvas scale like the rest of your scene does, set the "Screen Match Mode" of the Canvas Scaler to "Match Width or Height", and then pull the slider to the very right "Height".

Now check if all the UI elements' anchors are properly set. Your rainbow-colored bar at the top should be aligned to the top, and stretch horizontally. So it's this one: Anchor

The pause button should be aligned at the top center (no stretch), your score top right, and so on.

Comment
Add comment · Show 7 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image prafull2001 · May 24, 2018 at 05:43 PM 0
Share

After I do this, the pause button doesn't move at all - it stays in the same place and I have to physically move it down. What is the point of anchors, I still don't quite understand?

avatar image FlaSh-G · May 24, 2018 at 06:34 PM 0
Share

Imagine a 250px wide screen. A button in the center is 50px wide, so it's got 100px to the left and 100px to the reft.

Your button will behave differently when scaling the screen, depending on the set anchor. If your button's anchor is

  • left-aligned, the distance to the left will stay 100px, and the distance to the right will change

  • right-aligned, the distance to the right will stay 100px, and the distance to the left will change

  • set to stretch, the distance to both sides will stay 100px, and the button will change its width to achieve that

The same applies to the vertical axis. That's what anchor's do.

avatar image prafull2001 FlaSh-G · May 24, 2018 at 11:35 PM 0
Share

I understand the concept behind anchors now, thanks! However, even with these anchors, the game looks the same: alt text

I applied the anchors as you said, pause being top center, and scores being top left/right respectively, however neither the player or the bar in the original screenshot appear in the screenshot above (neither are in canvas and only the player has anchoring options which I made bottom center)

img-1847.png (59.7 kB)
avatar image FlaSh-G · May 24, 2018 at 11:37 PM 0
Share

Try checking different resolutions in your game window. $$anonymous$$aybe you'll find vlues about where your elements go.

avatar image prafull2001 · May 25, 2018 at 01:59 AM 0
Share

I did exactly as you suggested and I found the dimensions that best fit what I was experiencing (iPhone Tall 2:3). However, even after correctly placing the objects and using the anchors, the game looks exactly like the screenshot above on the phone. Is there anything I'm missing, or any other resources you could point me to? I've already read the documentation which didn't really help.

avatar image FlaSh-G · May 25, 2018 at 09:56 AM 0
Share

So it looked fine in all the tested resolutions in the editor? Is there any specific way you load the sprites or something? Do you use Resources.Load for this?

avatar image prafull2001 FlaSh-G · May 26, 2018 at 03:41 PM 0
Share

Yes it did look fine in all the resolutions after I modified the placement of all my assets. I am not using Resources.Load for anything, but I am using $$anonymous$$usic? I don't know if that is the problem however.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

If you’re new to Unity Answers, please check our User Guide to help you navigate through our website and refer to our FAQ for more information.

Before posting, make sure to check out our Knowledge Base for commonly asked Unity questions.

Check our Moderator Guidelines if you’re a new moderator and want to work together in an effort to improve Unity Answers and support our users.

Follow this Question

Answers Answers and Comments

107 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How to make a Raycast2D proportional to a CanvasScaler dynamic resizing? 0 Answers

UI scaling too big after build 0 Answers

Instantiate Objects responsively [2D] 1 Answer

What to put in reference resolution for responsive UI? 1 Answer

Builded game for android resolution scruwed 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges