I had an epiphany just now.
In some places in my very first iPhone app I have hardcoded values referring to the screen width and/or height (320, 460).
now I realize that i never noticed this because in the iPhone 4 simulator i dont notice any drawing issues.
So does this mean the iPhone 4 internally converts 320 to be whatever the width for its screen resolution? i doubt it. But then again, why would i be seeing everything appearing to be fine when i run?
Example:
If I make a ball draw at position (320, 100) I can clearly see that it is drawing at the far right edge of the screen.
What is going on here?
No it does not adapt the screen it's standard 320 for the iphone. It actually adapts the simulator to the mac screen makes it bigger. And about the ball 320 is from left to right 0---320, and the 460 is from up to down 0----460. sow putting the ball at 320,100 should place it in the fa right.
Related
I am completely confused on how to correctly size my lans background image which is landscape based. As of right now I'm doing GameScene(size: self.frame.size) and I print out the size of the screen so I know what size to make my background and it turns out my background should be 1024x768 but that doesn't seem like landscape dimensions? So I made my background 1024x768 but the entire image doesn't fit into my iphone when its landscape because the iphone lanscape dimensions arent 1024x768. How do I make a background that will look 1:1 with the dimensions of my iphone? The only way I can think is if I set the GameScene(size: CGPoint(x: 1334, y: 750)) but then wont it be screwed up for any other device? What's the best way to approach this? I have an artist who is going to make a background for me but I have no idea what dimensions to give him.
When dealing with scenes for Sprite Kit, try not to focus on the screen size, because screen size is no longer a factor (now this is not 100% absolute fact, this is a general rule to go by)
Instead, treat your SKScene as if it was a virtual screen. The size of your SKScene is the "resolution" of your SKScene, and the OS will work in the background to figure out how to convert 1 virtual pixel (From here on out we will call point) to screen pixels( referred to here on out as pixels)
Now there is only 1 special case where the OS will change the resolution (scene size) to match the screen, and that is .resizeFill The other 3 will never change resolution on you.
.aspectFill and .aspectFit will ensure that your point to pixel conversion keeps and equal width and height (e.g. 1 point could equal 4x4 pixels) The only difference is .aspectFill will expand to fill the entire screen, meaning that excess points will be rendered outside the native screen bounds [ so (0,0) may lie 20 pixels left of the left most pixel, thus not being visible] and .aspectFit will fill till it hits a screen border, leaving black bars to fill the unused pixels.
Now .fill does not keep and equal width and height point to pixel ratio, and in the case of a 4:3 going to a 16:9 screen, you will notice that your point to pixel will be 5:4 because a 16:9 screen is 25% wider than a 4:3. This gets you the fatty effect.
So when dealing with your game you need to figure out the desired effect. If you set your scene size to 1024x768, then all non retina iPads will have a 1:1 pixel to point ratio, where retina has 2:1 pixels to point ratio. For an iphone 5, you would get roughly 1.14 pixels to every point (iphone is 1168 and your scene is 1024, so you do 1168/1024) then of the 768, you would be loosing 25%, because the ipad is 25% taller than an iphone in landscape. This means only 576 points will be showing, and the rest are in invisible screen space.
Basically, you can never get a 1:1 with both an iPad and an iPhone doing a universal app because you are working with 2 different aspect ratios. You are going to have to make 2 different sets of assets, or take some creative liberties that doesn't alter the gaming experience. This depends entirely on the game and unfortunately nobody will be able to answer it till they have an understanding of your game.
I'm new to Swift SpriteKit programming and the coordinate system is driving me crazy. I create a sprite and I want to move it to the four corners of the screen. So, I set the position to (0,0). That's off the bottom left corner of the screen. Through some manual testing I've developed the chart below. The lower left and upper right are what the iOS simulator report when I touch the screen.
I have 2 questions:
1: Is there a method of determining the coordinates of the lower left hand corner of the view? Maybe I could build a dictionary with the coordinate values and the determine the machine type and then set the offsets. But, that's a lot of work and might not be accurate for new devices. It just seems that there should be a scene or frame property that I can use to put an object at the bottom left of the window.
2: The math doesn't work. In the iPhone5, 300 (lower left x) + 320 (width) = 620, not the reported 727. Same issue is true with the y coordinates. How does this work?
I set as few parameters as possible. I have not changed the anchorPoint or position of the scene.
Device Size LL UR
iPhone4s (320,480) (260,0) (766,764)
iPhone5 (320,568) (300,0) (727,764)
iPhone5s (320,568) (298,0) (727,764)
iPhone6 (375,667) (297,1) (728,765)
iPhone6plus (414,736) (298,0) (728,766)
iPad2 (768,1024) (226,0) (800,768)
iPad Air (768,1024) (224,0) (800,767)
iPad Retina (768,1024) (225,0) (800,768)
Ok, I think I figured this out. Setting scene!.scaleMode=SKSceneScaleMode.ResizeFill allow me to identify the four corners of the screen. So, now I can determine when a sprite crosses the edge of the screen. This doesn't seem to distort my images. I haven't been able to test it on a read device yet, but it leaves a blank area around the iPad2.
Applause for the hard work! haha
If I was going about getting values for the lower coordinates, I would use CGRectGetMinX to get the x-coordinate and CGRectGetMinY to get the the y-coordinate likewise:
CGPoint minimum = CGPointMake(CGRectGetMinX(self.frame),CGRectGetMinY(self.frame));
Then, if you wanted to get the top coordinates just use the same things but say MaxX or MaxY. Yeah, the coordinates are a bit confusing but if you use those then it will be a breeze.
EDIT: If you need to find if a body has exited outside visible space, so far what has worked for me is making a physics body to detect contact with it on the edge
[SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame]
possibly another option you could try is to see the bounds of a UIScreen object.
I designed a UI that simply doesn't scale the right way - always squeezing and stretching something. I get everything to align the right way but the scaling messes everything up. In Subviews it even gets worse...
Here is a simplified version of the UI:
http:// i.imgur.com/VIKVm5y.png
All the grey circles have images inside, should be buttons and scale proportional to every iPhone display size - so that a bigger display gets bigger buttons...
It's only meant to be for iPhones and portrait mode only.
Ok actually this was pretty simple and I feel kinda stupid I asked the question in the first place.
The solution was to lock the aspect ratio and set either the height or with equal to the superview and then edit the proportion to it in a second step until you have desired result...
The title mostly says it all;
I've got some mockups i am looking at, and as I try to implement them, It seems as though the custom drawing, even with a linewidth of 0.5, is not quite as sharp as the mockup appears when i preview it on my device. Can assets be sharper then what is possible to manually draw using quartz?
Can assets be sharper than what is possible to manually draw using quartz?
No. If that were the case, the iOS graphics system would be spectacularly broken.
Perhaps if you showed your custom drawing code, and an image of what it outputs, we could suggest something. Also, are you working with a "Retina" device?
This is most likely because of the resolution of the screen. The MacBook Pro and iMac without Retina display have approximately 110 pixels per inch and with Retina about 220, whereas the iPhone with Retina has 326 pixels per inch.
When you do coordinates in points and use whole numbers, it is as if the iPhone is 158 pixels per inch (meaning a width of 1 will be 1/158 inches wide) while on your computer it is most likely 110 pixels per inch (which is about 1/110 inches wide). However, since you are using a width of 0.5, a non-retina screen will stay at the same resolution as a width of 1.0 would be, however your device, which is most likely retina, is displaying a line with a width of 0.5 points, which is one pixel.
Because of this, a line with a width of 0.5 points will be 1/326 inches on a Retina device, but will be about 1/110 inches on your computer, which means that the line on the device will be about 3x sharper.
Without the 1136 launch image, apps now run in letterbox mode with black bars on either end.
If you add the Default-568h#2x.png launch image, then the app runs with 1136 pixels (in my case, in landscape mode - 1136x640).
The extra 176 pixels are all getting added to the right side of the screen in landscape mode.
Is there a way that I could have the 176 added pixels distributed 88 to the left and 88 to the right of the screen that I work with in Interface Builder?
To Explain:
If I position an 1136x640 image (to make it work it is actually a 568x320 image with an #2x version in the project) at 0,0 in Interface Builder and run it on an iPhone 5/simulator, the screen shows the entire image even though it's not entirely visible in Interface Builder since it goes off the right side of the screen.
I was hoping to place the 1136x640 image at -88,0 since it is just a background image for my app. If this was possible, I could keep all the menu buttons in their current locations and would just be able to extend my app's background to either end instead of having that area be filled with black bars in letterbox mode.
If that is somehow possible I would love to hear about it... otherwise I better get to repositioning all my buttons and other screen elements! I've recently read about AutoLayout and that is certainly something to strongly consider in any new apps going forward, but I was just hoping for a quick update to my existing apps that would letterbox the apps with additional background art provided by me instead of black bars on either end.
EDIT: Just tried to move buttons around on the screen and it appears that buttons placed on the right-most 176 pixels can't even be clicked on! So I cannot use that extra space on the right even if I reposition everything... =/
AND THEN: I tried AutoLayout, and it too ignored the 176 pixels on the right. If I positioned a button with a constraint of 20 pixels from the right side of the screen, it would show 196 pixels from the right because it's not taking into account the additional screen size that has been added.
Anybody know what is the best way to actually have art fill the entire screen of the new iPhone 5?
Thanks!
I had the same problem of not being able to access the new 176 pixels for the new iPhone. However, this is what I did and now I have access to them.
Open MainWindow.xib with Interface Builder
Select the Window
In Attributes, check Visible at Launch and Full Screen at Launch.
If you hadn't set autoresizing on any of your elements and then enable support for the 4-inch display, indeed you might not have the greatest looking views.
You can use autoresizing to set your views/elements to stretch, center and align, so you should be able to manipulate the resizing mask to do what you'd like.
Autolayout is very fiddly and in most cases overkill if you just want to support the new screen size.
Ended up creating one .xib for for the iPhone 5 size and one .xib for the iPhone 4 size. Both are connected to the same .h/.m file.