I don't know if it is a problem started in Swift 1.2 or not. I am new to both swift and SpriteKit. I was watching an online tutorial and the guy there was able to put a green box on the bottom-left corner of the screen by doing the following:
let greenBox = SKSpriteNode(color: UIColor.greenColor(), size: CGSize(width: 200, height: 200))
let somePoint = CGPointMake(0, 0)
greenBox.position = somePoint
self.addChild(greenBox)
However when I try the same thing, it does not even appear on the screen! Later, I found out that bottom left of the screen was actually something close to (300,10). Why would that happen?
Also, I found out that the self.frame.size equals to (1024.0, 768.0) which is even more confusing since it has no relation iPhone6's size. (I was testing with iPhone 6 though.)
I am stuck at this. Any help will be appreciated, thanks!
There are a few things. First of all, make sure your gameViewController.swift has this code in the viewDidLoad function:
self.screenSize = skView.frame.size.width
/* Set the scale mode to scale to fit the window */
scene.scaleMode = .AspectFill
scene.size = skView.bounds.size
This will make sure you have the right aspect ratio and size of an iPhone screen.
To get the bottom left of the screen, you can use this:
let somePoint = CGPointMake(CGRectGetMinX(self.frame), CGRectGetMinY(self.frame))
Finally, I believe the greenBox has a center anchor point, so it will put the center of the box in the bottom left which means that about 75% of the block will fall off screen.
You can change the anchor point to the bottom left of the green box to make sure it shows entirely.
greenBox.anchorPoint = CGPointMake(0, 0)
Related
I am creating a SpriteKit game and want to be able to take advantage of textAlerts - like all the games I grew up playing. I also want them to be flexible so I can subclass them and add them throughout my game - I am not sure how to do this and so would be very grateful of any advice.
There are a number of ways that I have started to look into:
Use another SKScene
The idea here would be to add another scene immediately on top of our current one. This would have a faded out background and would be configured with the text to be displayed. This seems like the wrong approach
Use an SKNode
I could create a custom node and initialise it with my specific text. I would then disable movement and add the node at the bottom of the screen. I would then customise the actions that occur when it is tapped.
Use an SKLabel
SKLabels are designed to show text so these seem like a promising place to look. The issue is that I want to add an image into the popup view (this a headshot of the person you are talking to) and so it doesn't feel like I should be able to inject an image in.
Use something else
I don't know what this might be. Is what I am trying to do easy or harder than I think?
My problem is that I come from a swift background so am struggling to convert to a SpriteKit mindset. In Swift I would put together a custom UIView with all the UIKit components and add it to the screen. In SpriteKit we don't have the same tools so I don't know the right combinations to put together what I want.
Ideally I want to be able to configure the text popup with an array of text so that a conversation can be had with the user tapping for each new line.
Edit 1: What I have tried so far
Based on #ElTomatos comment I have experimented with adding a SKSpriteNode and an SKLabelNode on top of each other using the following code:
guard let camera = camera else { return }
let dialogueBackground = SKSpriteNode(texture: nil, color: .red, size: CGSize(width: screenSize.width / camera.xScale, height: screenSize.height / 3 / camera.xScale))
dialogueBackground.anchorPoint = CGPoint(x: 0, y: 0)
dialogueBackground.zPosition = 50
dialogueBackground.position = CGPoint(x: -screenSize.width, y: -screenSize.height)
camera.addChild(dialogueBackground)
let label = SKLabelNode(text: "Hello world")
label.zPosition = 100
label.position = CGPoint(x: -screenSize.width, y: 100 - screenSize.height)
camera.addChild(label)
As you can see the view doesn't go to the edge of the screen. Is this something to do with the safe area? It's difficult to get the width and height as the camera doesn't have a CGSize we can use.
I have the problem that the images I add are distorted. I have created a pixel accurate background for the iPhone X at (1125 x 2436), so I don't have to use .aspectFill and .aspectFit because I want a screen without black borders.
I use the following code to create the images:
func animateDeck() {
let chip = SKSpriteNode(imageNamed: "Chip")
chip.position = CGPoint(x: 300, y: 400)
chip.zPosition = 2
chip.setScale(1)
gameScene2.addChild(chip)
print("test")
}
Is there a way to display the images in their correct size without using .aspectFit or .aspectFill?
now (left) and how it should be (right)
Thank you in advance!
Check out this project I just made to show you how to create a texture and apply it to a node. All you need should be in GameScene.swift.
Also, in your ViewController, make sure that your GameScene is initialised properly as shown in my project, or how you did it with this:
gameScene2 = GameScene(size: view, bounds: size)
I would like to display a bunch of draggable images in spriteKit. Some of the images will require me to cut a hole in the graphic dynamically so I can see what is behind the images. And as I drag around the images I'll be able to see the other images through the holes I've cut in the images.
If you need a visual, think of jigsaw puzzle pieces.
This stack exchange link below looked very simple and promising, but the white circle cutout doesn't seem to display. At least not in the simulator. I'll have to see if I get a better result on my iphone via testflight.
Draw a hole in a rectangle with SpriteKit?
Using this
https://developer.apple.com/reference/spritekit/skcropnode
and
https://www.hackingwithswift.com/read/14/2/getting-up-and-running-skcropnode
"anything in the colored part will be visible, anything in the transparent part will be invisible."
I have my first success. I need to work on positioning next, obviously.
var taMain = SKTexture(imageNamed: "landscape144.jpg")
var sprite1 = SKSpriteNode()
sprite1 = SKSpriteNode(texture: taMain)
sprite1.xScale = 2
sprite1.yScale = 2
sprite1.zPosition = 1
var cropNode:SKCropNode = SKCropNode()
cropNode.xScale = 1
cropNode.yScale = 1
cropNode.position = CGPoint(x: 0, y: 0)
cropNode.zPosition = 2
cropNode.maskNode = SKSpriteNode(imageNamed: "maskimage3.png")
cropNode.maskNode?.position = CGPoint(x: 0, y: 0)
cropNode.addChild(sprite1)
self.addChild(cropNode)
and during touchesbegan
for touch: AnyObject in touches {
//uncomment 2 lines to help you get your image positioned on screen.
// it moves the whole cut image + hole
//let location = touch.locationInNode(self)
// cropNode.position = location
//Or uncomment these 2 lines to move just the mask
//let location = touch.locationInNode(cropNode)
// cropNode.maskNode?.position = location //moves just the hole
}
During the touchesbegan you can uncomment the line "cropNode.position = location" if you want to move the image and the hole together and figure out a good location for it on screen. OR you can uncomment "cropNode.maskNode?.position = location" if you want to move the hole.
Moving the hole only works if your maskimage has enough to cover your whole image that you're cutting from. Otherwise you end up losing more of your image than you intended. So, for my purposes I'll probably end up making an image and maskimages that are exactly the same height/width. Then, depending on what I need I'll load up different maskimages.
My images:
Mask with transparent hole 144 by 144 pixels
Landscape 144 by 144 pixels
Results in iphone 6 simulator - xcode 6.2
Larger Mask with transparent hole
This is known as inverse masking. At this point, there doesn't seem to be an easy way to do this within SpriteKit.
You will have to fake it. The easiest way to do this is replicate the background, and positively mask it.
This looks like a hole, but is not a hole.
Place this positively masked replication where the hole would be, above the"cheese" that's got the "hole" in it.
Here is my previous attempt to find out how to do this in SpriteKit: How to cut random holes in SKSpriteNodes
Here's what I have so far in my didMoveToView() function:
backgroundLayer.zPosition = -1
hudLayer.zPosition = 100
addChild(backgroundLayer)
addChild(hudLayer)
backgroundColor = SKColor.whiteColor()
let healthBar: SKSpriteNode = SKSpriteNode(imageNamed: "Healthbar")
healthBar.position = CGPoint(x: 0, y: 0)
healthBar.anchorPoint = CGPoint(x: 0, y: 1.0)
hudLayer.addChild(healthBar)
My background shows up fine, and I have both a backgroundLayer and a hudLayer. I even made the zposition much higher for the hudLayer to make sure it's in front. As for the positioning, I think I have the anchor point to be at the top-left of the sprite, and tried various ways to position it- it seems to only show up when I use something like:
healthBar.position = CGPoint(x: 0, y: size.width/2)
My question is why? size.width/2 isn't working for when I test on different screen sizes (on an iphone4, the health bar is further down).
Doesn't size take the current size of the screen? I thought using size would make it somewhat 'responsive' but I can't get the behavior to work right. Therefore, I thought maybe the CGPoint coordinate system (0-1.0) would work better, but it's not showing up at all with that.
Thanks for reading, I don't understand why it won't show up :(
I have added a SKNode to my SKView by using this code:
tile.fillColor = SKColor.blueColor()
tile.position = CGPoint(x: 64, y: 64)
self.addChild(tile)
However, after fiddling with window sizes in the MainMenu.xib file, the position of tile becomes inaccurate even when the SKView lines up with the window itself:
How do I fix this?
Modifying the tile's anchor point might make it easier to place. I'm not 100% clear on where precisely you want to place that tile, but if you were trying to get that tile lined up on the bottom edge, and 64 from the left edge of the parent, you could simplify things by moving the anchor point of the tile to its bottom left before placing it. By default, as rakeshbs points out, the anchor point is at the center of the tile.
tile.fillColor = SKColor.blueColor()
tile.anchorPoint = CGPointMake(0, 0)
tile.position = CGPoint(x: 64, y: 0)
self.addChild(tile)
Maybe you're already aware of the ability to modify the anchor point on a SKSpriteNode, if so please disregard; perhaps I'm not fully understanding your issue.