Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • 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.

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

Virtual joystick and canvas scaler 0 Answers

Instantiating a UI element Screen.height and Screen.width way off 0 Answers

Accidentally did 'something' and now positioning is all out of whack (canvas, camera, scaling?) 0 Answers

Using Hinge Joint 2D with scaled UGUI 0 Answers

How to scale the image through scripting so that the height of the image will be equal to the height of the screen and the width of the image will be scaled with the same percentage? 2 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