Scaling scene for different aspect ratio - unity3d

In unity I am trying to scale the scene to fit the screen size without loosing it’s aspect ratio. I have tried one solution of aspect utility but it is not working properly, it is showing black strips and so UI do not look good.
I want to target both devices android as well as iPad( e.g 16:9, 4:3 ratio)
Can anybody guide me how to achieve scaling on any kind of devices?

You can use NGUI plugin and attach UIStretchScript on the Image.

try this...name the script as "camera.cs"....add it to your camera...and paste the following code :
using UnityEngine;
using System.Collections;
public class camera : MonoBehaviour {
// Use this for initialization
void Start ()
{
// set the desired aspect ratio (the values in this example are
// hard-coded for 16:9, but you could make them into public
// variables instead so you can set them at design time)
float targetaspect = 16.0f / 9.0f;
// determine the game window's current aspect ratio
float windowaspect = (float)Screen.width / (float)Screen.height;
// current viewport height should be scaled by this amount
float scaleheight = windowaspect / targetaspect;
// obtain camera component so we can modify its viewport
Camera camera = GetComponent<Camera>();
// if scaled height is less than current height, add letterbox
if (scaleheight < 1.0f)
{
Rect rect = camera.rect;
rect.width = 1.0f;
rect.height = scaleheight;
rect.x = 0;
rect.y = (1.0f - scaleheight) / 2.0f;
camera.rect = rect;
}
else // add pillarbox
{
float scalewidth = 1.0f / scaleheight;
Rect rect = camera.rect;
rect.width = scalewidth;
rect.height = 1.0f;
rect.x = (1.0f - scalewidth) / 2.0f;
rect.y = 0;
camera.rect = rect;
}
}
// Update is called once per frame
void Update () {
}
}

There's only two ways to maintain the game's aspect ratio with differing viewport aspect ratios. First, stretching in a given direction, which is never a good option. Second, letterboxing (black bars), which can affect usability, especially on handheld screens. My recommendation would be to allow the game view to scale according to the screen's aspect ratio (which I think is the default functionality in Unity), and design the GUI to be responsive to the screen size (i.e. don't draw GUI elements with pixel specific coords, but with coords relative to the screen size).

Related

Unity 2D - scale sprite according to screen width

I have a square sprite (width == height) and I want to scale it so that both width and height are exactly one fifth of the width of screen.
To find the desired pixel width I do:
float desiredWidthPixels = Screen.width * 0.2f;
float desiredHeightPixels = Screen.width * 0.2f;
How do I apply these values to the sprite?
It depends if your camera is Orthographic or not.
You will have to Scale the object up or down, depending on its original size.
float cameraHeight = Camera.main.orthographicSize * 2;
float cameraWidth = cameraHeight * Screen.width / Screen.height; // cameraHeight * aspect ratio
gameObject.transform.localScale = Vector3.one * cameraHeight / 5.0f;
The code goes into a Script file attached to the GameObject (in your case the sprite) since gameObject means the Game Object it is on. If you are doing it from another script file then you will need to find the object first in the tree before scaling it.

How to zoom in a uiimageview as I scroll down the table?

Hello everyone I am trying to zoom in a out a uiimageview using animation as i am scrolling down a uiscrollview. Please note its not about making a uiimageview zoom in and out in a uiscrollview.
I am able to detect how much i am scrolling down :
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
}
I need to zoom out the image depending( the scroll factor) how much i am scrolling down. Any idea how this can be done?
I suggesting changing the transform property of the image you are trying to scale
- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
// this is just a demo method on how to compute the scale factor based on the current contentOffset
float scale = 1.0f + fabsf(scrollView.contentOffset.y) / scrollView.frame.size.height;
//Cap the scaling between zero and 1
scale = MAX(0.0f, scale);
// Set the scale to the imageView
imageView.transform = CGAffineTransformMakeScale(scale, scale);
}
If you also need the scrollview to go to the top one the imageview has been zoomed out, then you will need to adjust the frame of the scrollview and imageview.
Maybe you can tell us more about your desired effect.
Here's a Swift version of Andrei's answer. I am also exiting early if the user is swiping up (scrolling down), because I only wanted to show the zoom effect when they were pulling down on the table view.
// Exit early if swiping up (scrolling down)
if scrollView.contentOffset.y > 0 { return }
// this is just a demo method on how to compute the scale factor based on the current contentOffset
var scale = 1.0 + fabs(scrollView.contentOffset.y) / scrollView.frame.size.height
//Cap the scaling between zero and 1
scale = max(0.0, scale)
// Set the scale to the imageView
self.imageView.transform = CGAffineTransformMakeScale(scale, scale)

Manually Scaling UIImage for UIImageView

What is the best way to manually reproduce
contentMode = UIViewContentModeScaleAspectFit;
without using it?
I need to scale a UIImageView (inside a scroll view) to fit the aspect ratio. I need to know the new size of the image to draw overlays over it.
Recently, I needed to find the frame of the image inside an ImageView, to add touchable views over that image, this is how I did it:
-(void)calculateScaleAndContainerFrame{
if(!imageView || !image) return;
CGSize imageSize = image.size;
CGSize imageViewSize = imageView.frame.size;
float imageRatio = imageSize.width / imageSize.height;
float viewRatio = imageViewSize.width / imageViewSize.height;
if(imageRatio > viewRatio){
scale = imageSize.width / imageViewSize.width;
}else{
scale = imageSize.height / imageViewSize.height;
}
CGRect frame = CGRectZero;
frame.size = CGSizeMake(roundf(imageSize.width / scale), roundf(imageSize.height / scale));
frame.origin = CGPointMake((imageViewSize.width - frame.size.width) / 2.0, (imageViewSize.height - frame.size.height) / 2.0);
[container setFrame:frame];
}
I'm pretty sure you can use it as a guide, replacing the imageViewSize with the content size of your scroll view (or the view you want to put your image in).
Note 1: In my case, I needed to center the view vertically, if you don't, just set the y to 0 on the line where I set the frame origin. Same for x if you don't want to center the image horizontally.
Note 2: This is NOT, by any means, a code you can just plug in into your project and work, you'll probably have to read it, understand it, and then apply the method to your own project. I don't have time right now to modify it to your needs.
Note 3: With that code I managed to get a view perfectly over the image inside a image view that used that content mode, so it works.

Scaling custom draw code for different iOS resolutions

I am struggling to get my custom drawing code to render at the proper scale for all iOS devices, i.e., older iPhones, those with retina displays and the iPad.
I have a subclass of UIView that has a custom class that displays a vector graphic. It has a scale property that I can set. I do the scaling in initWithCoder when the UIView loads and I first instantiate the vector graphic. This UIView is shown when the user taps a button on the home screen.
At first I tried this:
screenScaleFactor = 1.0;
if ([UIScreen instancesRespondToSelector:#selector(scale)]) {
screenScaleFactor = [[UIScreen mainScreen] scale];
}
// and then I multiply stuff by screenScale
... which worked for going between normal iPhones and retina iPhones, but chokes on the iPad. As I said, you can get to the UIView at issue by tapping a button on the home screen. When run on the iPad, if you display the UIView when at 1X, it works, but at 2X I get a vector graphic that twice as big as it should be.
So I tried this instead:
UPDATE: This block is the one that's right. (with the corrected spelling, of course!)
screenScaleFactor = 1.0;
if ([self respondsToSelector:#selector(contentScaleFactor)]) { //EDIT: corrected misspellng.
screenScaleFactor = (float)self.contentScaleFactor;
}
// again multiplying stuff by screenScale
Which works at both 1X and 2X on the iPad and on the older iPhones, but on a retina display, the vector graphic is half the size it should be.
In the first case, I query the UIScreen for its scale property and in the second case, I'm asking the parent view of the vector graphic for its contentsScaleFactor. Neither of these seem to get me where I want for all cases.
Any suggestions?
UPDATE:
Here's the method in my subclassed UIView (it's called a GaugeView):
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform t0 = CGContextGetCTM(context);
t0 = CGAffineTransformInvert(t0);
CGContextConcatCTM(context, t0);
[needle updateBox];
[needle draw: context];
}
needle is of class VectorSprite which is a subclass of Sprite which is subclassed from NSObject. These are from a programming book I'm working through. needle has the scale property that I set.
updateBox comes from Sprite and looks like this:
- (void) updateBox {
CGFloat w = width*scale;
CGFloat h = height*scale;
CGFloat w2 = w*0.5;
CGFloat h2 = h*0.5;
CGPoint origin = box.origin;
CGSize bsize = box.size;
CGFloat left = -kScreenHeight*0.5;
CGFloat right = -left;
CGFloat top = kScreenWidth*0.5;
CGFloat bottom = -top;
offScreen = NO;
if (wrap) {
if ((x+w2) < left) x = right + w2;
else if ((x-w2) > right) x = left - w2;
else if ((y+h2) < bottom) y = top + h2;
else if ((y-h2) > top) y = bottom - h2;
}
else {
offScreen =
((x+w2) < left) ||
((x-w2) > right) ||
((y+h2) < bottom) ||
((y-h2) > top);
}
origin.x = x-w2*scale;
origin.y = y-h2*scale;
bsize.width = w;
bsize.height = h;
box.origin = origin;
box.size = bsize;
}
Sprite also has the draw and drawBody methods which are:
- (void) draw: (CGContextRef) context {
CGContextSaveGState(context);
// Position the sprite
CGAffineTransform t = CGAffineTransformIdentity;
t = CGAffineTransformTranslate(t,x,y);
t = CGAffineTransformRotate(t,rotation);
t = CGAffineTransformScale(t,scale,scale);
CGContextConcatCTM(context, t);
// draw sprite body
[self drawBody: context];
CGContextRestoreGState(context);
}
- (void) drawBody: (CGContextRef) context {
// Draw your sprite here, centered
// on (x,y)
// As an example, we draw a filled white circle
if (alpha < 0.05) return;
CGContextBeginPath(context);
CGContextSetRGBFillColor(context, r,g,b,alpha);
CGContextAddEllipseInRect(context, CGRectMake(-width/2,-height/2,width,height));
CGContextClosePath(context);
CGContextDrawPath(context,kCGPathFill);
}
How, exactly, are you rendering the graphic?
This should be handled automatically in drawRect: (the context you get should be already 2x). This should also be handled automatically with UIGraphicsBeginImageContextWithOptions(size,NO,0); if available (if you need to fall back to UIGraphicsBeginImageContext(), assume a scale of 1). You shouldn't need to worry about it unless you're drawing the bitmap yourself somehow.
You could try something like self.contentScaleFactor = [[UIScreen mainScreen] scale], with appropriate checks first (this might mean if you display it in an iPad at 2x, you'll get high-res graphics).
Fundamentally, there's not much difference between an iPad in 2x mode and a "retina display", except that the iPad can switch between 1x and 2x.
Finally, there's a typo: #selector(contentsScaleFactor) has an extra s.

Formula for producing a CGRect for a UIScrollView, that displays a UIImage in scaled to fit way

I am loading in images with varying sizes and putting them in UIScrollViews, all the images are larger than the UIScrollView.
The user can scroll and zoom as they please, but initially I would like for the image
to be centered and scaled so the largest side of the image aligns with the edge of the scrollView, i.e. if the picture is in landscape I would like to size and scale it so that the left and right side goes all the way to the edge of the UIScrollVIew and vice versa
I found a formula in a utility function in the Programming guide but it does not quite fit my needs.
My approach is to use:
CGrect initialPos = ?
[self.scrollView zoomToRect:initialPos animated:YES];
I know the size of my scrollView and the size of my image, what I need to figure out is the scale and CGRect to apply to the scrollView to center and size my image.
Hope someone can help out:) Thanks
Edit: previous version was sizing the image to the view rather than the other way around. I think this should correct that:
double imgRatio = imageSize.width / imageSize.height;
double viewRatio = viewSize.width / viewSize.height;
if ( imgRatio >= viewRatio )
{
initialPos.size.width = imageSize.width;
initialPos.size.height = imageSize.width / viewRatio;
initialPos.origin.x = 0;
initialPos.origin.y = (imageSize.height - initialPos.size.height) / 2;
}
else
{
initialPos.size.height = imageSize.height;
initialPos.size.width = imageSize.height * viewRatio;
initialPos.origin.y = 0;
initialPos.origin.x = (imageSize.width - initialPos.size.width) / 2;
}