I have an image mySprite#2x.png it's dimensions 1240 x 1240 pixels or 620 x 620 points.
I want to use it for all iPhone models (different screen sizes). All I want it to resize it, but I can't figure out how to do this properly.
Here is what's go wrong:
let sprite = SKSpriteNode(imageNamed:"mySprite")
sprite.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))
println(sprite.size)
sprite.size = CGSize(width: 300, height: 300)
println(sprite.size)
println(self.view?.frame.size)
self.addChild(sprite)
Here is log from testing on the iPhone 4S:
(620.0,620.0)
(300.0,300.0)
Optional((480.0,320.0))
log looks ok, but on screen I can see that image is bigger than iPhone 4S width. It's width and height (it's a square) almost as high as iPhone 4 screen height (about 440 pts).
Scene scaleMode is AspectFill.
Scene and sprite xScale and yScale = 1.0
I don't understand what I'm doing wrong.
Based on the log message from your view's frame, the width is 480 and the height is 320, meaning your view is in landscape mode.
If your SKScene's size is set to the size of your view in portrait mode, using scaleMode AspectFill will stretch the width of your scene from 320 to 480.
This means your SKSpriteNode will seem 450pts instead of 300pts.
You probably want to use SKSceneScaleModeResizeFill instead?
Related
I am working on an ObjectiveC app in which I need to set the width and height of a uiview in pixels and than scale that uiview equal to the devices width. The width and height values in pixels are fixed ( let say 900 px x 500 px).
Currently I am doing this,
UIScreen* mainScreen = [UIScreen mainScreen];
CGRect frame = CGRectMake(0, 0, 900.0, 500.0);
[view setFrame:frame];
CGFloat valScale = mainScreen.bounds.size.width/900.0;
[view setContentScaleFactor:valScale];
But this is not giving me the desired values.
What should I do?
(P.S) Does view.frame.size.width return the width in pixels or points?
Hi for scaling a view you can use the transform property. Say you wish to scale your UIView by a factor of 2 then you can use.
self.view.transform = CGAffineTransformScale(CGAffineTransformIdentity, 2, 2);
CGRect width and height returns points not pixels. One point has two pixels for 2x devices like iPhone 6,7 and three pixels for 3x devices like iPhone 6 Plus,7 Plus.
For more detail you can refer this Apple's documentation link.
The iPhone 6 and 6s are supposed to have a 750 x 1334 resolution [1], and the screen ratio for every iPhone since the iPhone 5 is 16:9 [2]. So in order to have a background image for an app that fits perfectly, it must have a 16:9 ratio. I'm working on a project using SpriteKit and I want the game to have a wallpaper that covers the back from edge to edge. However, when I run the app on the simulator the background image always gets cropped on the right and left. I've even tried with all sorts of ratios and resolutions. The code for this background on the project is:
let background = SKSpriteNode(imageNamed: "backtImage")
background.size = self.size
background.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
background.zPosition = 0
self.addChild(background)
What am I doing wrong?
This could happened because your SKView don't match with your SKScene dimensions.
The sources:
#available(iOS 7.0, *)
public enum SKSceneScaleMode : Int {
case Fill /* Scale the SKScene to fill the entire SKView. */
case AspectFill /* Scale the SKScene to fill the SKView while preserving the scene's aspect ratio. Some cropping may occur if the view has a different aspect ratio. */
case AspectFit /* Scale the SKScene to fit within the SKView while preserving the scene's aspect ratio. Some letterboxing may occur if the view has a different aspect ratio. */
case ResizeFill /* Modify the SKScene's actual size to exactly match the SKView. */
}
You can change your code as below:
override func viewDidLoad() {
super.viewDidLoad()
if let scene = GameScene(fileNamed:"GameScene") {
// Configure the view.
let skView = self.view as! SKView
...
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .ResizeFill // <- this is an example
skView.presentScene(scene)
}
}
If your image is getting cropped on the left and right side (in Portrait) Then we are dealing with an .AspectFill scale mode, and your aspect for your scene is shorter than the screen resolution. This is probably happening because the default scene size provided in the template build is a square. Go into your .sks file, and change the scene size to something in a 9x16 ratio, and your problem should be solved
I'm new to SpriteKit and Swift (done a lot in Obj-C in the past for iOS) but I'm struggling on something that should be very basic.. positioning sprites on the screen!
Centering a label on the screens seems easy enough:
myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));
But when I try to put in the Bottom-left or top-right of the screen it isn't visible:
//Bottom-left label
myLabel.horizontalAlignmentMode = .Left
myLabel.position = CGPoint(x: 0.0, y: self.size.height)
or
//Top-right label
myLabel.horizontalAlignmentMode = .Right
myLabel.position = CGPoint(x: self.size.width, y: self.size.height)
This is with a new project, no other code. What am I doing wrong, please?
What you have to keep in mind is that a SpriteKit scene by default takes up far more than the screen. Its default size is 1024 by 768 and everything is scaled for universality unless you tell it otherwise. In your view controller you could see how the scene is initialized. You will see that it probably has a statement that says something like
scene.scaleMode = .AspectFill
This is the source of this. Apple in the documentation explains this in a straightforward manner what happens when you use AspectFill scaleMode:
The scaling factor of each dimension is calculated and the larger of the two is chosen. Each axis of the scene is scaled by the same scaling factor. This guarantees that the entire area of the view is filled but may cause parts of the scene to be cropped.
There are other scale Modes to explore, which you can try but Aspect Fill has a large advantage with its universality.
You can specify the size of an SKScene when you create it. Typically you pass the size of the containing SKView so it covers the entire view. If the device rotates, your view is resized (if your app allows the new orientation). I'm not sure if the SKScene if resized. But either way, you need to update the position of your scene contents so that for example the label is in the top-right with the new dimensions.
The view controller whose view presents the scene receives the message viewWillTransitionToSize(_ size:,withTransitionCoordinator coordinator:). You can subclass this method to send a message to a custom method of the presenting SKScene that the size is changing. Then, you can simply reposition the node using the new size since self.frame will update.
myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));
Back to the core of the question! How to position a label in the top-right of the scene? Take into account that the scene origin is bottom-left. For SKLabelNode, the center is really in the center. So, offset by half of the label's dimensions.
myLabel.position = CGPoint(x: self.size.width - myLabel.size.width /2,
y: self.size.height - myLabel.size.height/2)
By the way, I have never seen an iOS game which uses a sprite based engine (such as Sprite Kit or Cocos2d) which supports device rotation/multiple screen sizes when running on the same device (iPhone/iPad).
If the default anchor point for an SKScene is (0,0) then does that make the scene stick its top left corner to the top left corner of the device's screen?
Also, if so, what's an easy way to support multiple devices using one scene? For example the default scene size (1024, 768) just fits a landscape iPad such that if I put a node at (0,0) in the scene it appears at the bottom left corner. How do developers usually get around this?
Edit 1
I tried setting the scale mode of the scene to .ResizeFill in didMoveToView():
let screenWidth = UIScreen.mainScreen().bounds.width
let screenHeight = UIScreen.mainScreen().bounds.height
print("Screen size: (\(screenWidth), \(screenHeight))")
print()
print("Scene size before setting scaling: (\(self.frame.width), \(self.frame.height))")
print()
self.scaleMode = .ResizeFill
print("Scene size after setting scaling: (\(self.frame.width), \(self.frame.height))")
This prints out:
Screen size: (667.0, 375.0)
()
Scene size before setting scaling: (1024.0, 768.0)
()
Scene size after setting scaling: (1024.0, 768.0)
How to get the screen width and height only in landscape orientation , i have two ipad 4 tablets and on one of them it takes me the landscape width & height , and on the other one it takes me the portrait one even if it's orientation is on lanscape
at the moment i am using this but its not working well
CGFloat width = self.view.bounds.size.width;
CGFloat height = self.view.bounds.size.height;
Use [UIScreen mainScreen].bounds you'll have the same.
Discussion
This rectangle is specified in the current coordinate
space, which takes into account any interface rotations in effect for
the device. Therefore, the value of this property may change when the
device rotates between portrait and landscape orientations.
Use [UIScreen mainScreen].nativeBounds in iOS8 only to get the portrait-locked bounds.
Discussion This rectangle is based on the device in a
portrait-up orientation. This value does not change as the device
rotates.
Swift 3
let pixelWidth = UIScreen.main.nativeBounds.width
let pixelHeight = UIScreen.main.nativeBounds.height
let pointWidth = pixelWidth / UIScreen.main.nativeScale
let pointHeight = pixelHeight / UIScreen.main.nativeScale
print ("Pixels: \(pixelWidth) x \(pixelHeight)")
print ("Points: \(pointWidth) x \(pointHeight)")
On a 6s Plus will print...
Pixels: 1080.0 x 1920.0
Points: 414.0 x 736.0