I was trying to add an image (640X1136PX) as background for a project with following code:
SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:#"Background"];
background.position = CGPointMake(self.size.width * .5, self.size.height * .5);
background.anchorPoint = CGPointZero;
background.blendMode = SKBlendModeReplace;
[self addChild:background];
With the above code the background image is shown on left bottom showing hardly 10% of the image, if I comment the the following
background.anchorPoint = CGPointZero;
Then it shows the image centered but the 30% of the area is not covered.
Please help me on this, I am very new to SpriteKit.
Thanks
Try this approach in your Scene-class. Try to leave anchorPoint-properties with default values.
- (void)constructBackground
{
self.scaleMode = SKSceneScaleModeAspectFill;
self.background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame);
self.background.size = self.frame.size;
}
Thank you for helping me, i got fixed the issue, i am using xcode 6.0.1 and simulator is running iOS8 so we need to follow image conventions as per iOS8, when i resize the image to high resolution 1242 X 2208 px the issue was solved
#Astoria thanks for the clue.
Related
I'm trying to position the background all over the scene background, but for some reason it puts it outside of screen.
This is what I used:
SKTexture *backgroundTexture = [self.atlas textureNamed:#"back"];
SKSpriteNode *background = [SKSpriteNode spriteNodeWithTexture:backgroundTexture size:self.view.frame.size];
background.position = (CGPoint) {CGRectGetMidX(self.view.frame), CGRectGetMidY(self.view.frame)};
[self addChild:background];
This is how it puts it:
You need to add your background image to the SKScene view and as such determine the coordinates from self.
SKSpriteNode *backgroundNode = [SKSpriteNode spriteNodeWithImageNamed:#"BackgroundImage"];
backgroundNode.position = CGPointMake(self.size.width/2, self.size.height/2);
backgroundNode.zPosition = 1;
[self addChild:backgroundNode];
Actually the problem was that in the new Xcode 6.3.1 when you create a new scene it adds a SKScene view of some kind, this view is bigger then the iPhone normal screen, maybe it's iPhone 6+ screen size that's why the background image was out of screen bounds. I just had to remove this view file and not reload it from code and then it worked out.
Thanks anyway, the comment above helped me to understand that.
I've developed a game in SpriteKit for a 5s. All my sprites are positioned just where I want them when I run the Xcode simulator on a 4s, 5 or 5s:
http://tinypic.com/r/f0yanl/8
But when I run it on a 6 my sprites are not positioned correctly, and some are even placed off the entire frame/screen:
http://tinypic.com/r/akdac7/8
Notice my HUD is showing up top out of the frame, and the shadow and positioning of my "Machine" at the bottom is off, etc.
Is there a quick, simple fix to ensure the sprites maintain their position relative to my background image, when running on a 6? For now, I'm OK with the entire screen being collapsed a bit when running on a 6 (with empty borders on all four sides), but I would like to make sure everything at least looks just as clean and in order as it does on a 5.
I've used anchor points for most of my nodes, for e.g.:
+ (instancetype) machineAtPosition:(CGPoint)position {
GameMachineNode *machine = [self spriteNodeWithImageNamed:#"machine_1"];
machine.position = position;
machine.name = #"Machine";
machine.anchorPoint = CGPointMake(0.5, 0);
....
}
My "GameViewController.m" includes a resize to fill mode:
SKScene * scene = [GameTitleScene sceneWithSize:skView.bounds.size];
scene.scaleMode = SKSceneScaleModeResizeFill;
Update: figured it out. Was as simple as adding this single line of code to the initWithSize method:
background.size = self.frame.size;
Full code block for reference:
-(id)initWithSize:(CGSize)size {
if (self = [super initWithSize:size]) {
self.lastUpdateTimeInterval = 0; //initializing this property
self.timeSinceEnemyAdded = 0; //initializing this property
self.addEnemyTimeInterval = 1.25;
self.totalGameTime = 0;
self.minSpeed = GameAstroDogMinSpeed;
self.restart = NO;
self.gameOver = NO;
self.gameOverDisplayed = NO;
// Setup your scene here....
SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:#"background_1"];
background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
background.size = self.frame.size;
I am a beginner to iOS app coding but not to coding in general. I am following a tutorial for a sprite game kit app and I am having some trouble with the sizing of stuff. It came time to put in edges so the balls can bounce off of them. I noticed that the edges seemed to be off the screen, the balls would leave the screen then bounce back.
So I had xcode output the width/height, it said 320x568. I also change the scale mode by setting scene.scaleMode = SKSceneScaleModeAspectFit; and you can see the boundaries look like a square:
If I put the scaling back to normal by scene.scaleMode = SKSceneScaleModeAspectFill; It shows the screen like this:
but the balls still go off the screen.
By the way, I believe I am setting the edge nodes correctly to be on the left and right edge so I don't think that is the issue.
// Add edges
SKNode *leftEdge = [[SKNode alloc] init];
leftEdge.physicsBody = [SKPhysicsBody bodyWithEdgeFromPoint:CGPointMake(0, 0) toPoint:CGPointMake(0, self.size.height)];
leftEdge.position = CGPointMake(0, 0);
[self addChild:leftEdge];
SKNode *rightEdge = [[SKNode alloc] init];
rightEdge.physicsBody = [SKPhysicsBody bodyWithEdgeFromPoint:CGPointMake(0, 0) toPoint:CGPointMake(0, self.size.height)];
rightEdge.position = CGPointMake(self.size.width, 0);
[self addChild:rightEdge];
In your GameScene file (or whatever you may have called the SKScene file), add this method to the start of didMoveToView:
self.size = self.view.frame.size;
What is happening is that your game thinks the screen is running a different size. You need to change self.size to the actual size of the frame you are working with. The above method works with SKSceneScaleModeAspectFill, but I have not yet tested it with the other modes. Good luck!
I'm trying to set a background texture and I want it to cover the entire screen.
I prepared the background files exactly to size in photoshop before hand. There are 2 files in my project:
background.png - 1024x768px
background#2x.png - 2048x1536px
I am running the following code:
SKTexture *backgroundTexture = [SKTexture textureWithImageNamed:#"background"];
SKSpriteNode *background = [SKSpriteNode spriteNodeWithTexture:backgroundTexture];
background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
background.size = CGSizeMake(750, 550);
[self addChild:background];
And it is giving me this result http://d.pr/i/Ej2m - notice that the entire screen is almost filled and the background size is background.size = CGSizeMake(750, 550). Why is this?
You manually changed the sprite's size:
background.size = CGSizeMake(750, 550);
So it will display in a smaller region (750x550) than its original size (1024x768). Allow me to say: d'uh! ;)
I created a Sprite Sheet with SpriteHelper. When I created a background in spritehelper (universal app), the picture size was 1920 x 1280. How to make backgrounds for all devices and all screens?
CGSize winSize = [CCDirector sharedDirector].winSize;
CCSpriteBatchNode *sprites_for_game;
sprites_for_game = [CCSpriteBatchNode batchNodeWithFile:#"sprite_UntitledSheet.png"];
[[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:#"sprite_UntitledSheet.plist"];
[self addChild:sprites_for_game];
CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:#"background"];
sprite.position = ccp(winSize.width/2,winSize.height/2);
[sprites_for_game addChild:sprite];
iPhone Retina 3.5 inch http://pixs.ru/showimage/Snimokekra_9096412_10672667.png
iPhone Retina 4.0 inch http://pixs.ru/showimage/Snimokekra_8101239_10672678.png
who can help me?
Thanks
Well, it comes down to two options.
Option 1: Scale the image to fit the screen with the scale property like sprite.scale = 1.5f;. I would NOT recommend this as the image will look like garbage as you scale it up.
Option 2: Re-render the image at the higher resolutions and decide in your code which image to use based on your screen size. This is what I would recommend doing for better quality.