Good day, I am trying to use a SKEmitterNode in swift, but I can't seem to be able to change its' width, so the particles only cover half of the screen.
My code:
if let particles = SKEmitterNode(fileNamed: "Snow.sks") {
particles.position = CGPointMake(frame.size.width/2, frame.size.height)
particles.targetNode = self.scene
particles.zPosition = 999
addChild(particles)
}
How can I make the particles to cover the whole screen width?
After looking at the so called "emitter editor", as suggested by #Knight0fDragon, I was able to find the right parameter - particlePositionRange
if let particles = SKEmitterNode(fileNamed: "Snow.sks") {
particles.position = CGPointMake(frame.size.width/2, frame.size.height)
particles.targetNode = self.scene
// frame.size.width to cover the length of the screen.
particles.particlePositionRange = CGVector(dx: frame.size.width, dy: frame.size.height)
particles.zPosition = 999
addChild(particles)
}
Through the position and particlePositionRange you can get your goal
By the documentation:
particlePositionRange
Declaration
var particlePositionRange: CGVector { get set }
Discussion
The default value is (0.0,0.0). If a component is non-zero, the same component of a particle’s position is randomly determined and may vary by plus or minus half of the range value
Related
I need to animate a CATextLayer's bounds.size.height, position, and fontSize. When I add them to a CAAnimationGroup, the text jitters during the animation, just like this:
https://youtu.be/HfC1ZX-pbyM
The jittering of the text's tracking values (spacing between characters) seems to occur while animating fontSize with bounds.size.height AND/OR position. I've isolated fontSize, and it performs well on its own.
How can I prevent the text from jittering in CATextLayer if I animate bounds and font size at the same time?
EDIT
I've moved on from animating bounds. Now, I only care about fontSize + position. Here are two videos showing the difference.
fontSize only (smooth): https://youtu.be/FDPPGF_FzLI
fontSize + position (jittery): https://youtu.be/3rFTsp7wBzk
Here is the code for that.
let startFontSize: CGFloat = 16
let endFontSize: CGFloat = 30
let startPosition: CGPoint = CGPoint(x: 40, y: 100)
let endPosition: CGPoint = CGPoint(x: 20, y: 175)
// Initialize the layer
textLayer = CATextLayer()
textLayer.string = "Hello how are you?"
textLayer.font = UIFont.systemFont(ofSize: startFontSize, weight: UIFont.Weight.semibold)
textLayer.fontSize = startFontSize
textLayer.alignmentMode = kCAAlignmentLeft
textLayer.foregroundColor = UIColor.black.cgColor
textLayer.contentsScale = UIScreen.main.scale
textLayer.isWrapped = true
textLayer.backgroundColor = UIColor.lightGray.cgColor
textLayer.anchorPoint = CGPoint(x: 0, y: 0)
textLayer.position = startPosition
textLayer.bounds.size = CGSize(width: 450, height: 50)
view.layer.addSublayer(textLayer)
// Animate
let damping: CGFloat = 20
let mass: CGFloat = 1.2
var animations = [CASpringAnimation]()
let fontSizeAnim = CASpringAnimation(keyPath: "fontSize")
fontSizeAnim.fromValue = startFontSize
fontSizeAnim.toValue = endFontSize
fontSizeAnim.damping = damping
fontSizeAnim.mass = mass
fontSizeAnim.duration = fontSizeAnim.settlingDuration
animations.append(fontSizeAnim)
let positionAnim = CASpringAnimation(keyPath: "position.y")
positionAnim.fromValue = textLayer.position.y
positionAnim.toValue = endPosition.y
positionAnim.damping = damping
positionAnim.mass = mass
positionAnim.duration = positionAnim.settlingDuration
animations.append(positionAnim)
let animGroup = CAAnimationGroup()
animGroup.animations = animations
animGroup.duration = fontSizeAnim.settlingDuration
animGroup.isRemovedOnCompletion = true
animGroup.autoreverses = true
textLayer.add(animGroup, forKey: nil)
My device is running iOS 11.0.
EDIT 2
I've broken down each animation (fontSize only, and fontSize + position) frame-by-frame. In each video, I'm progressing 1 frame at a time.
In the fontSize only video (https://youtu.be/DZw2pMjDcl8), each frame yields an increase in fontSize, so there's no choppiness.
In the fontSize + position video (https://youtu.be/_idWte92F38), position is updated in every frame, but not fontSize. There is only an increase in fontSize in 60% of frames, meaning that fontSize isn't animating in sync with position, causing the perceived chopping.
So maybe the right question is: why does fontSize animate in each frame when it's the only animation added to a layer, but not when added as part of CAAnimationGroup in conjunction with the position animation?
Apple DTS believes this issue is a bug. A report has been filed.
In the meantime, I'll be using CADisplayLink to synchronize the redrawing of CATextLayer.fontSize to the refresh rate of the device, which will redraw the layer with the appropriate fontSize in each frame.
Edit
After tinkering with CADisplayLink for a day or so, drawing to the correct fontSize proved difficult, especially when paired with a custom timing function. So, I'm giving up on CATextLayer altogether and going back to UILabel.
In WWDC '17's Advanced Animations with UIKit, Apple recommends "view morphing" to animate between two label states — that is, the translation, scaling, and opacity blending of two views. UIViewPropertyAnimator provides a lot of flexibility for this, like blending multiple timing functions and scrubbing. View morphing is also useful for transitioning between 2 text values without having to fade out the text representation, changing text, and fading back in.
I do hope Apple can beef up CATextLayer support for non-interactive animations, as I'd prefer using one view to animate the same text representation.
I'm trying to add water to my game. Except for a different background color, there isn't much to it.
However, I'd like the player-sprite to float on top of it (or halfway in it). If the player just walks into the water from below, I'd like him to float to the top. If he falls down, I'd like him to slowly change direction and float back up.
I tried making the gravity negative when he's in the water, but this gives me some slightly unwanted effects. For example as he (the player) surfaces, the normal gravity will push him back down, the water will push him up, and so on. Ultimately the player will be "bouncing" in the water, being pushed from one end to another. I'd like him to calmly remain on top of the water when he surfaces. How can I achieve this?
Here's the code I have in my update-loop:
SKNode *backgroundNodeAtPoint = [_bgLayer nodeAtPoint:_ball.position];
if ([backgroundNodeAtPoint.name isEqualToString:#"WATER"]) {
self.physicsWorld.gravity = CGVectorMake(self.physicsWorld.gravity.dx, 2);
} else {
if (self.physicsWorld.gravity.dy != -4) {
self.physicsWorld.gravity = CGVectorMake(self.physicsWorld.gravity.dx, -4);
}
}
Basically this changes my gravity to 2 when the player is in the water, and otherwise changes it to -4 unless it's already -4.
Thanks!
There are three possible options I believe you have with regards to simulating water.
1) As mentioned in the comments you could try to use SKFieldNode (iOS 8+). But from personal experience the field node didn't really do it for me because you don't get much control over your simulation with it unless you heavily customize it, in which case you might as well just do your own calculations from scratch and reduce complexity.
2) You could adjust the linear and rotational damping of your sprite when inside the water. In fact, even apple mentions this in the quote from their documentation. However this won't give you buoyancy.
The linearDamping and angularDamping properties are used to calculate
friction on the body as it moves through the world. For example, this
might be used to simulate air or water friction.
3) Perform the calculations yourself. In the update method, check when the body enters you "water" and when it does you can calculate viscosity and/or buoyancy and adjust the velocity of your node accordingly. This in my opinion is the best option but also the more difficult.
Edit: I just wrote a quick example of option 3 in Swift. I think it's what you are looking for. I added factor constants on the top so you can adjust it to get exactly what you want. The motion is applied dynamically so it won't interfere with you current velocity (i.e. you can control your character while in the water). Below is the code for the scene and a gif as well. Keep in mind that the delta time is assumed to be 60 frames a second (1/60) and there is no velocity clamping. These are features you may or may not want depending on your game.
Swift
class GameScene: SKScene {
//MARK: Factors
let VISCOSITY: CGFloat = 6 //Increase to make the water "thicker/stickier," creating more friction.
let BUOYANCY: CGFloat = 0.4 //Slightly increase to make the object "float up faster," more buoyant.
let OFFSET: CGFloat = 70 //Increase to make the object float to the surface higher.
//MARK: -
var object: SKSpriteNode!
var water: SKSpriteNode!
override func didMoveToView(view: SKView) {
object = SKSpriteNode(color: UIColor.whiteColor(), size: CGSize(width: 25, height: 50))
object.physicsBody = SKPhysicsBody(rectangleOfSize: object.size)
object.position = CGPoint(x: self.size.width/2.0, y: self.size.height-50)
self.addChild(object)
water = SKSpriteNode(color: UIColor.cyanColor(), size: CGSize(width: self.size.width, height: 300))
water.position = CGPoint(x: self.size.width/2.0, y: water.size.height/2.0)
water.alpha = 0.5
self.addChild(water)
self.physicsBody = SKPhysicsBody(edgeLoopFromRect: self.frame)
}
override func update(currentTime: CFTimeInterval) {
if water.frame.contains(CGPoint(x:object.position.x, y:object.position.y-object.size.height/2.0)) {
let rate: CGFloat = 0.01; //Controls rate of applied motion. You shouldn't really need to touch this.
let disp = (((water.position.y+OFFSET)+water.size.height/2.0)-((object.position.y)-object.size.height/2.0)) * BUOYANCY
let targetPos = CGPoint(x: object.position.x, y: object.position.y+disp)
let targetVel = CGPoint(x: (targetPos.x-object.position.x)/(1.0/60.0), y: (targetPos.y-object.position.y)/(1.0/60.0))
let relVel: CGVector = CGVector(dx:targetVel.x-object.physicsBody.velocity.dx*VISCOSITY, dy:targetVel.y-object.physicsBody.velocity.dy*VISCOSITY);
object.physicsBody.velocity=CGVector(dx:object.physicsBody.velocity.dx+relVel.dx*rate, dy:object.physicsBody.velocity.dy+relVel.dy*rate);
}
}
override func touchesEnded(touches: NSSet!, withEvent event: UIEvent!) {object.position = (touches.anyObject() as UITouch).locationInNode(self);object.physicsBody.velocity = CGVectorMake(0, 0)}
}
Objective-C
#import "GameScene.h"
#define VISCOSITY 6.0 //Increase to make the water "thicker/stickier," creating more friction.
#define BUOYANCY 0.4 //Slightly increase to make the object "float up faster," more buoyant.
#define OFFSET 70.0 //Increase to make the object float to the surface higher.
#interface GameScene ()
#property (nonatomic, strong) SKSpriteNode* object;
#property (nonatomic, strong) SKSpriteNode* water;
#end
#implementation GameScene
-(void)didMoveToView:(SKView *)view {
_object = [[SKSpriteNode alloc] initWithColor:[UIColor whiteColor] size:CGSizeMake(25, 50)];
self.object.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:self.object.size];
self.object.position = CGPointMake(self.size.width/2.0, self.size.height-50);
[self addChild:self.object];
_water = [[SKSpriteNode alloc] initWithColor:[UIColor cyanColor] size:CGSizeMake(self.size.width, 300)];
self.water.position = CGPointMake(self.size.width/2.0, self.water.size.height/2.0);
self.water.alpha = 0.5;
[self addChild:self.water];
self.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
}
-(void)update:(NSTimeInterval)currentTime {
if (CGRectContainsPoint(self.water.frame, CGPointMake(self.object.position.x,self.object.position.y-self.object.size.height/2.0))) {
const CGFloat rate = 0.01; //Controls rate of applied motion. You shouldn't really need to touch this.
const CGFloat disp = (((self.water.position.y+OFFSET)+self.water.size.height/2.0)-((self.object.position.y)-self.object.size.height/2.0)) * BUOYANCY;
const CGPoint targetPos = CGPointMake(self.object.position.x, self.object.position.y+disp);
const CGPoint targetVel = CGPointMake((targetPos.x-self.object.position.x)/(1.0/60.0), (targetPos.y-self.object.position.y)/(1.0/60.0));
const CGVector relVel = CGVectorMake(targetVel.x-self.object.physicsBody.velocity.dx*VISCOSITY, targetVel.y-self.object.physicsBody.velocity.dy*VISCOSITY);
self.object.physicsBody.velocity=CGVectorMake(self.object.physicsBody.velocity.dx+relVel.dx*rate, self.object.physicsBody.velocity.dy+relVel.dy*rate);
}
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
self.object.position = [(UITouch*)[touches anyObject] locationInNode:self];
self.object.physicsBody.velocity = CGVectorMake(0, 0);
}
#end
When your player makes contact with the water, push him up until he is no longer in contact with the water. At this point, modify the player's contact bit mask to collide with the water thus "making him walk on water".
Alternately, you can trigger the walk on water contact bit mask modification by a strategically placed invisible node instead waiting for water contact to occur.
To revert the player's contact bit mask back to normal use another predetermined contact the player will make, such as land or an invisible node, as the trigger.
Whenever i try to draw a SKSpriteNode, it would be drawn lower than it should be.
But it seems that other SKSpriteNode works fine with no problems.
This is my current code:
func initMainGround() {
let gSize = CGSizeMake(self.size.width/4*3, 120);
ground = SKSpriteNode(color: SKColor.brownColor(), size: gSize);
ground.name = gName;
ground.position = CGPointMake(0, 0);
ground.physicsBody = SKPhysicsBody(rectangleOfSize: ground.size);
ground.physicsBody.restitution = 0.0;
ground.physicsBody.friction = 0.0;
ground.physicsBody.angularDamping = 0.0;
ground.physicsBody.linearDamping = 0.0;
ground.physicsBody.allowsRotation = false;
ground.physicsBody.usesPreciseCollisionDetection = true; //accurate collision
ground.physicsBody.affectedByGravity = false;
ground.physicsBody.dynamic = false;
ground.physicsBody.categoryBitMask = gBitmask;
ground.physicsBody.collisionBitMask = pBitmask;
self.addChild(ground);
}
func addBomb() {
let bomb = SKSpriteNode(imageNamed: "trap");
bomb.size = CGSizeMake(30, 30);
bomb.position = CGPointMake(ground.position.x, actualY+10);
bomb.physicsBody = SKPhysicsBody(circleOfRadius: bomb.size.width/2);
bomb.physicsBody.restitution = 0.0;
bomb.physicsBody.allowsRotation = false;
bomb.physicsBody.usesPreciseCollisionDetection = true;
bomb.physicsBody.affectedByGravity = false;
bomb.physicsBody.dynamic = false;
bomb.physicsBody.categoryBitMask = bBitmask;
bomb.physicsBody.collisionBitMask = pBitmask;
bomb.physicsBody.contactTestBitMask = pBitmask;
self.addChild(bomb);
}
Although the bomb is suppose to be almost directly above the ground, but it seems that the bomb is almost 100+ above the ground instead.
The ground is suppose to fill up almost one third of the screen height since the game is in landscape, but it is way lower than normal.
Why is it that the ground is drawn at the wrong position, but the bomb is drawn at the correct position?
This sounds like the same problem I had when starting to work with SpriteKit. If your game uses an .sks file to present it's main scene (as it does by default), this scene uses arbitrary dimension values defined in the .sks file.
Try setting the dimensions of your scene dynamically to see if this is the case.
In your didMoveToView function, add something like this at the top of the function:
self.size = view.bounds.size
This way the dimension values from the .sks file will be overridden with your actual screen dimensions.
Hope this helps!
Set the anchorPoint on your ground image.
ground.anchorPoint = CGPointZero // same as CGPointMake(0, 0)
ground.position = CGPointZero
The default anchorPoint is (0.5, 0.5), the center of the image. So without it set, the center of the ground image is drawn in the lower left corner of the screen (0, 0).
Your bomb draws where you expect it for the same reason, the center is placed at the position you specified.
I'm working on a sidescroller with Spritekit and Swift. I don't understand how to define a playable area bigger than the screen and center the camera on the player. How can this be done?
This is my current code, I tried to create a "world node" which I could move around to simulate the camera, however it's somehow disassociated from it's shape and I haven't been able to get the player inside it.
override func didMoveToView(view: SKView) {
self.anchorPoint = CGPointMake(0.5, 0.5)
self.physicsWorld.contactDelegate = self
self.size = CGSizeMake(view.bounds.size.width, view.bounds.size.height)
// Add world
let r : CGRect = CGRectMake(0, 0, 500, 500)
world = SKShapeNode(rectOfSize: r.size)
world.physicsBody = SKPhysicsBody(edgeLoopFromRect: r)
world.strokeColor = SKColor.blackColor()
world.position = CGPointMake(0, 0)
self.addChild(world)
// Add player
player = SKShapeNode(rectOfSize: CGSize(width: 50, height: 50))
player.physicsBody = SKPhysicsBody(rectangleOfSize: CGSize(width: 50, height: 50))
player.fillColor = SKColor.blackColor()
player.position = CGPointMake(0, 0)
world.addChild(player)
// Accelerometer updates
motionManager.startAccelerometerUpdates()
}
The example in Apple's documentation is in the Advanced Scene Processing section. Apple suggests making a "World" SKNode as a child of the Scene, and a "Camera" SKNode as a child of the world.
They suggest constantly moving the world so that it centers on the Camera during the didSimulatePhysics step. This method allows you to perform actions or simulate physics on the Camera itself, if you so choose. If you center the camera prior to this step, you won't be able to use physics to affect the Camera Node.
If you specifically only want left and right scrolling, simply restrict the movement to the X-axis.
Edit:
The current problem is because of your creation of the world and the physicsBody from a Rect that has its position predetermined. This is causing trouble with your anchorPoint setting (the world & physicsBody are being created with their lower left corners starting at the Scene's anchor point).
This can be fixed by creating the World and Player without using a Rect with position set. SKShapeNode's shapeNodeWithRectOfSize works, as does SKSpriteNode's spriteNodeWithColor:size: PhysicsBody is a bit trickier, and should likely use bodyWithEdgeLoopFromPath: world.path
EDIT: For future persons interested in creating a side-scroller with a camera always focused on the player, this is probably the simplest way to get one to work:
var player = SKShapeNode()
var world = SKShapeNode()
override func didMoveToView(view: SKView) {
self.anchorPoint = CGPointMake(0.5, 0.5)
self.size = CGSizeMake(view.bounds.size.width, view.bounds.size.height)
// Add world
world = SKShapeNode(rectOfSize: CGSizeMake(300, 300))
world.physicsBody = SKPhysicsBody(edgeLoopFromPath: world.path)
world.fillColor = SKColor.blackColor()
self.addChild(world)
// Add player
player = SKShapeNode(rectOfSize: CGSize(width: 50, height: 50))
player.physicsBody = SKPhysicsBody(rectangleOfSize: CGSize(width: 50, height: 50))
player.fillColor = SKColor.blackColor()
world.addChild(player)
}
override func update(currentTime: CFTimeInterval) {
world.position.x = -player.position.x
world.position.y = -player.position.y
}
I followed Ray Wenderlich's tutorial on a side scrolling game Super Koalio (or something like that). That game is a side scroller where the game map is larger sideways than the screen. The following code is for my game which is a vertical scrolling game.
In the update method I call a method called setViewPointCenter.
-(void)update:(CFTimeInterval)currentTime
{
// Other things are called too
[self setViewPointCenter:self.player.position];
}
Then in that method you just update the view
- (void)setViewPointCenter:(CGPoint)position
{
NSInteger x = MAX(position.x, self.size.width / 2);
NSInteger y = MAX(position.y, self.size.height /2);
x = MIN(x, (self.map.mapSize.width * self.map.tileSize.width) - self.size.width / 2);
y = MIN(y, (self.map.mapSize.height * self.map.tileSize.height) - self.size.height / 2);
CGPoint actualPostion = CGPointMake(x, y);
CGPoint centerOfView = CGPointMake(self.size.width/2, self.size.height/2);
CGPoint viewPoint = CGPointSubtract(centerOfView, actualPostion);
self.map.position = viewPoint;
}
Now my character is always in the center of the screen. I did change some items from horizontal to vertical, but at least you get an idea. Also, I used a tile map that is why you see mapSize and tileSize. You might want to take a look at Ray's tutorial. And of course you will need to convert into the methods into Swift!!
I am trying to draw a basic ground to the game for my sprite to run on.
But it seems that the ground is too short although it is suppose to take up 1/3 of the height of the screen.
My GameScene.sks is already changed to 568x320 (landscape, iPhone 5/5S)
this is my current code
func initMainGround() {
let gSize = CGSizeMake(self.size.width/4*3*2, 120);
let ground = SKSpriteNode(color: SKColor.brownColor(), size: gSize);
ground.name = gName; //Ground
ground.position = CGPointMake(0, 0);
ground.physicsBody = SKPhysicsBody(rectangleOfSize: gSize);
ground.physicsBody.restitution = 0.0;
ground.physicsBody.friction = 0.0;
ground.physicsBody.angularDamping = 0.0;
ground.physicsBody.linearDamping = 0.0;
ground.physicsBody.allowsRotation = false;
ground.physicsBody.usesPreciseCollisionDetection = true; //accurate collision
ground.physicsBody.affectedByGravity = false;
ground.physicsBody.dynamic = false;
ground.physicsBody.categoryBitMask = gBitmask; // 0x1 << 0
ground.physicsBody.collisionBitMask = pBitmask; //0x1 << 1 playerCategoryBitmask
self.addChild(ground);
}
NSLog(String(self.size.height)) return 320.0 which is perfectly fine.
But why is it that the SKSpriteNode is draw wrongly?
Setting the height of the ground to 320 only fills up half of the screen although the height of the screen in landscape is 320.
Like Jon said, this is a placement issue not a size issue. The default anchor point of any given node is in its center, so you have two options here:
1) set ground.position to CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame))
(or even better yet, capture that as an ivar, because you'll be referring to it a whole lot when adding things to your screen, and there's no real reason to do the calculations dozens of times)
2) change the anchor point of the ground node. This is done as a CGPoint, but is interpreted as a percentage of the size of the node in question, with the default (center) being (0.5, 0.5). ground.anchorPoint = CGPointZero (which is just a shortcut for CGPointMake(0, 0)) will set the node's anchor point to its lower-left corner, at which point setting its position to (0,0) will correctly place it starting at the lower-left corner of your scene (or its parent node, in any event).