Animation of a circle in iOS - ios

I'm learning how to use SpriteKit and would like to have a circle that:
Grows and shrinks smoothly
Pulses with a colour
Is displayed with crisp edges
So far, I've come up with the following code:
import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
addCircle()
}
func addCircle(){
let circle = SKShapeNode(circleOfRadius: 50 ) // Size of Circle
circle.position = CGPointMake(frame.midX, frame.midY) //Middle of Screen
circle.glowWidth = 0.0 // No border
circle.fillColor = SKColor.yellowColor() // Start as yellow
let actualDuration = 1 // Animate for 1s
// Basic actions for grow, shrink, colour up, colour down
let actionGrow = SKAction.scaleTo(CGFloat(2), duration: NSTimeInterval(actualDuration))
actionGrow.timingMode = SKActionTimingMode.EaseInEaseOut
let actionShrink = SKAction.scaleTo(CGFloat(0.5), duration: NSTimeInterval(actualDuration))
actionShrink.timingMode = SKActionTimingMode.EaseInEaseOut
let actionColorUp = SKAction.colorizeWithColor(UIColor.redColor(), colorBlendFactor: 1.0, duration: NSTimeInterval(actualDuration))
let actionColorDown = SKAction.colorizeWithColor(UIColor.redColor(), colorBlendFactor: 0.0, duration: NSTimeInterval(actualDuration))
// Combine the actions
let actionGrowWithColor = SKAction.group([actionGrow,actionColorUp])
let actionShrinkWithColor = SKAction.group([actionShrink,actionColorDown])
// Run and repeat
circle.runAction(SKAction.repeatActionForever(SKAction.sequence([actionGrowWithColor,actionShrinkWithColor])))
// Add the circle
self.addChild(circle)
}
}
The first of my three criteria are met, but the other two are not.
As the SKShapeNode is not a vector, as it grows the edges are not crisp. Is there a better way to draw a circle, or should I just start with a circle that is sufficiently large?
Is there a reason why the colorizeWithColor section doesn't appear to have any effect?
Many thanks in advance!

Related

How to move a character back and forth across horizontally in swift

Currently trying to get a monster character to move across the screen horizontal back and forth. I'm extremely new to Swift as I just started learning last week and also haven't exactly master OOP. So how do I properly call the enemyStaysWithinPlayableArea func while it calls the addEnemy func. Heres what I have so far:
import SpriteKit
class GameScene: SKScene {
var monster = SKSpriteNode()
var monsterMove = SKAction()
var background = SKSpriteNode()
var gameArea: CGRect
// MARK: - Set area where user can play
override init(size: CGSize) {
// iphones screens have an aspect ratio of 16:9
let maxAspectRatio: CGFloat = 16.0/9.0
let playableWidth = size.height/maxAspectRatio
let margin = (size.width - playableWidth)/2
gameArea = CGRect(x: margin, y: 0, width: playableWidth, height: size.height)
super.init(size: size)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func didMove(to view: SKView) {
// I want to run addEnemy() while it checks for enemyStayWithinPlayableArea()
// run(SKAction.repeatForever(...)) ???
enemyStayWithinPlayableArea()
// MARK: - Setting the background
background = SKSpriteNode(imageNamed: "background")
background.size = self.size
// Set background at center of screen
background.position = CGPoint(x:self.size.width/2 ,y:self.size.height/2)
// Layering so everything in the game will be in front of the background
background.zPosition = 0
self.addChild(background)
}
func addEnemy() {
// MARK: - Set up enemy and its movements
monster = SKSpriteNode(imageNamed: "monster")
monster.zPosition = 5
// this is where the enemy starts
monster.position = CGPoint(x: 0, y: 300)
self.addChild(monster)
// I want it to move to the end of the screen within 1 sec
monsterMove = SKAction.moveTo(x: gameArea.maxX, duration: 1.0)
monster.run(monsterMove)
}
func enemyStayWithinPlayableArea(){
addEnemy()
// when the monster reaches the right most corner of the screen
// turn it back around and make it go the other way
if monster.position.x == gameArea.maxX{
monsterMove = SKAction.moveTo(x: gameArea.minX, duration: 1.0)
monster.run(monsterMove)
}
// when the monster reaches the left most corner of the screen
// same idea as above
if monster.position.x == gameArea.minX{
monsterMove = SKAction.moveTo(x: gameArea.maxX, duration: 1.0)
monster.run(monsterMove)
}
}
}
So far the enemy moves across the screen to the right edge of the screen, so that part works perfectly. I just need help making sure it continues in a loop (perhaps using the SKAction.repeatForever method but not sure how).
To understand movement of image in spritekit check this example.
let moveLeft = SKAction.moveTo(CGPoint(x: xpos, y: ypos), duration: duration)
let moveRight = SKAction.moveTo(CGPoint(x: xpos, y: ypos), duration: duration)
sprite.runAction(SKAction.repeatActionForever(SKAction.sequence([moveLeft, moveRight])))
for horizontal movement y position never been changed it should be same as in move left and move right.to stop repeatforever action use this.
sprite.removeAllActions()
Make two functions moveToMax and moveToMin with respective SKActions.And run action with completion handler.
func moveToMin(){
monsterMove = SKAction.moveTo(x: gameArea.minX, duration: 1.0)
monster.run(monsterMove, completion: {
moveToMax()
})
}

SceneKit cube rotation with multiple UIPanGestureRecognizers

Thanks for taking a look at this. I'm sure it is something very basic. I am a beginner.
I am trying to rotate a cube in in a SceneKit view with pan gestures. I have so far been successful in load this sample app onto my iPad and panning my finger on the y axis to rotate the cube on its x axis, or panning along the screens x-axis to rotate the cube along its y-axis.
Currently, I've noticed that whichever gesture recognizer is added last to the sceneView is the one that works. My question is how can I have the cube respond to either a x pan gesture then a y pan gesture or vice versa.
Here is the code I have written so far:
import UIKit
import SceneKit
class ViewController: UIViewController {
//geometry
var geometryNode: SCNNode = SCNNode()
//gestures
var currentYAngle: Float = 0.0
var currentXAngle: Float = 0.0
override func viewDidLoad() {
super.viewDidLoad()
sceneSetup()
}
func sceneSetup () {
//setup scene
let scene = SCNScene()
let sceneView = SCNView(frame: self.view.frame)
self.view.addSubview(sceneView)
//add camera
let camera = SCNCamera()
let cameraNode = SCNNode()
cameraNode.camera = camera
cameraNode.position = SCNVector3(x: 0.0, y: 0.0, z: 5.0)
//add light
let light = SCNLight()
light.type = SCNLightTypeOmni
let lightNode = SCNNode()
lightNode.light = light
lightNode.position = SCNVector3(x: 1.5, y: 1.5, z: 1.5)
//add cube
let cubeGeometry = SCNBox(width: 1.0, height: 1.0, length: 1.0, chamferRadius: 0.0)
let boxNode = SCNNode(geometry: cubeGeometry)
scene.rootNode.addChildNode(lightNode)
scene.rootNode.addChildNode(cameraNode)
scene.rootNode.addChildNode(boxNode)
geometryNode = boxNode
//add recognizers
let panXRecognizer = UIPanGestureRecognizer(target: self, action: "rotateXGesture:")
let panYRecognizer = UIPanGestureRecognizer(target: self, action: "rotateYGesture:")
sceneView.addGestureRecognizer(panXRecognizer)
sceneView.addGestureRecognizer(panYRecognizer)
sceneView.scene = scene
}
func rotateXGesture (sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view)
var newXAngle = (Float)(translation.y)*(Float)(M_PI)/180.0
newXAngle += currentXAngle
geometryNode.transform = SCNMatrix4MakeRotation(newXAngle, 1, 0, 0)
if(sender.state == UIGestureRecognizerState.Ended) {
currentXAngle = newXAngle
}
}
func rotateYGesture (sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view)
var newYAngle = (Float)(translation.x)*(Float)(M_PI)/180.0
newYAngle += currentYAngle
geometryNode.transform = SCNMatrix4MakeRotation(newYAngle, 0, 1, 0)
if(sender.state == UIGestureRecognizerState.Ended) {
currentYAngle = newYAngle
}
}
}
Combine your current two gestures into one. Here's the relevant portion of the code I'm using:
func panGesture(sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view!)
var newAngleX = (Float)(translation.y)*(Float)(M_PI)/180.0
newAngleX += currentAngleX
var newAngleY = (Float)(translation.x)*(Float)(M_PI)/180.0
newAngleY += currentAngleY
baseNode.eulerAngles.x = newAngleX
baseNode.eulerAngles.y = newAngleY
if(sender.state == UIGestureRecognizerState.Ended) {
currentAngleX = newAngleX
currentAngleY = newAngleY
}
}
Here's a gesture for zooming as well:
func pinchGesture(sender: UIPinchGestureRecognizer) {
let zoom = sender.scale
var z = cameraNode.position.z * Float(1.0 / zoom)
z = fmaxf(zoomLimits.min, z)
z = fminf(zoomLimits.max, z)
cameraNode.position.z = z
}
Edit: I found a better way to rotate the model. In the panGesture code at the top, the x-axis pivots as you rotate about the y. This means if you rotate 180 about the y, rotation about the x is opposite your finger motion. The method also restricts motion to two degrees of freedom. The method linked to below, even though it doesn't directly affect the z-axis, somehow seems to allow three degrees of freedom. It also makes all vertical swipes rotate about the x in the logical direction.
How to rotate object in a scene with pan gesture - SceneKit
The way you set up your two gesture recognizers is identical, they will both fire for the same events (which is why the last one to be added predominates). There is no control within pan to specifically limit it to vertical or horizontal pans. Instead, consider analyzing the direction of the pan and then decide whether to rotate your gesture one way or the other, based upon which is greater.

iOS UIView 3D border

I have been working on coin like UIView, which has 3d rotation.
I was able to implement rotate effect with CATransform3dRotate, based on the gesture. Now I need to implement shadow like effect, when image rotates.
Please refer to the image attached herewith.
Any suggestions? recommendations? or sample code would be great
Sample Requirement
You might want to look at SceneKit. I've put together a quick demo, which you can download here, of a 3D coin object which rotates horizontally left or right by a swipe gesture, with a realistic light source and shadowing. The relevant code follows:
import UIKit
import SceneKit
class ViewController: UIViewController {
#IBOutlet weak var sceneView: SCNView!
let rotate90AboutZ = SCNAction.rotateByX(0.0, y: 0.0, z: CGFloat(M_PI_2), duration: 0.0)
var currentAngle: Float = 0.0
var coinNode = SCNNode()
override func viewDidLoad() {
super.viewDidLoad()
sceneView.userInteractionEnabled = true
sceneView.backgroundColor = UIColor.blackColor()
sceneView.autoenablesDefaultLighting = true
}
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(true)
coinSceneSetup()
}
func coinSceneSetup() {
let coinScene = SCNScene()
//coin is rendered as a cylinder with a very small height
let coinGeometry = SCNCylinder(radius: 50, height: 2)
coinNode = SCNNode(geometry: coinGeometry)
coinNode.position = SCNVector3Make(0.0, 25.0, 25.0)
coinScene.rootNode.addChildNode(coinNode)
//rotate coin 90 degrees about the z axis so that it stands upright
coinNode.runAction(rotate90AboutZ)
let shinyCoinMaterial = SCNMaterial()
shinyCoinMaterial.diffuse.contents = UIColor.lightGrayColor()
shinyCoinMaterial.specular.contents = UIColor.whiteColor()
shinyCoinMaterial.shininess = 1.0
coinGeometry.firstMaterial = shinyCoinMaterial
sceneView.scene = coinScene
let panRecognizer = UIPanGestureRecognizer(target: self, action: "panGesture:")
sceneView.addGestureRecognizer(panRecognizer)
}
//allows for coin to spin with a right or left finger swipe, while still keeping it rotated 90 degrees about z axis
func panGesture(sender: UIPanGestureRecognizer) {
let translation = sender.translationInView(sender.view!)
var newAngle = (Float)(translation.x)*(Float)(M_PI)/180.0
newAngle += currentAngle
coinNode.runAction(SCNAction.rotateToX(CGFloat(newAngle), y: 0.0, z: CGFloat(M_PI_2), duration: 0.0))
if(sender.state == UIGestureRecognizerState.Ended) {
currentAngle = newAngle
}
}
}
Several excellent introductory tutorials are available, for example here, here, and here. weheartswift.com put out a three part tutorial in Swift that I personally find especially useful. Here are parts 1, 2 and 3.
Jeff Lamarche's introduction to SceneKit on OS X, along with his accompanying source code is a valuable resource as well.

Dynamically shrink SKSpriteNode

Title sort of explains it all. I have a SKSpriteNode, called bar. It's assigned an image that is a red longways rectangle. I want it to slowly decrease in length over an interval, while keeping the width the same. In other words, imagine it sort of folding in on itself vertically.
You can use SKActions to do that. SKAction.scaleYTo function can be use to scale the height of the sprite. The anchor point can be shifted to one edge to prevent the rectangle from scaling towards the middle.
var sprite = SKSpriteNode(imageNamed: "redBar.png")
sprite.anchorPoint = CGPointMake(0, 0)
sprite.position = CGPointMake(95, 100)
self.addChild(sprite)
let duration = 10.0
let finalHeightScale:CGFloat = 0.0
let scaleHeightAction = SKAction.scaleYTo(finalHeightScale, duration: duration)
sprite.runAction(scaleHeightAction, completion: { () -> Void in
println("Height is zero")
})

SKPhysics with Swift and SpriteKit

I am trying to create a iOS game using Swift Programming Language.
I want to use swipe gestures on the screen to make the character (player) move up, down, left and right
So far so good. But I want some physics. I want the player to collide with the edges of the screen. (and later I want it to collide with other stuff, but I need to know the code first ;)
QUESTION: How do I identify a collision between 2 objects (player and edge of screen)
import SpriteKit
class GameScene: SKScene, SKPhysicsContactDelegate {
var player:SKSpriteNode = SKSpriteNode()
let moveUp = SKAction.moveByX(0, y:2000, duration:10.0) //it is set to 2000 because I want to see if it collides with the edge of the screen
let moveDown = SKAction.moveByX(0, y: -200, duration: 2.0)
// Define the bitmasks identifying various physics objects
let worldCategory:UInt32 = 0x1 << 0
let playerCategory:UInt32 = 0x1 << 1
override func didMoveToView(view: SKView) {
}
override init(size:CGSize) {
super.init(size: size)
self.backgroundColor = SKColor.whiteColor()
player = SKSpriteNode(imageNamed: "Kundvagn1")
player.position = CGPointMake(self.frame.size.width/2, player.size.height/2 + 20)
self.addChild(player)
player.runAction(moveUp)
self.physicsWorld.gravity = CGVectorMake(0, 0)
self.physicsWorld.contactDelegate = self
player.physicsBody = SKPhysicsBody(rectangleOfSize: player.size)
player.physicsBody?.dynamic = true //I dont think the question marks should be there, but Xcode doesn´t accept the code if there is no question marks there
player.physicsBody?.categoryBitMask = playerCategory
player.physicsBody?.contactTestBitMask = worldCategory
player.physicsBody?.collisionBitMask = 0
player.physicsBody?.usesPreciseCollisionDetection = true
}
func didBeginContact(contact: SKPhysicsContact!) {
println("Collision")
}
Assuming that you want the left and right edges to block, simply add two SKShapeNode rectangular objects to your scene, set their heights to the screen height, and place them just beyond the left and right edges of the screen. Set up their physics bodies and you should be good to go.
If you want all the edges of the screen to be boundaries, you need to setup a line-based physics body for your scene, as detailed here: Add boundaries to an SKScene
I added this in case you need a code example to jonogilmour's instructions . Turn on the ShowsPhysics = true in your viewController to see physics. Both sides should be blue. If you want a contact notification of course you would add to this code with your bit mask stuff. Hope this helps!
var leftEdge = SKNode()
leftEdge.physicsBody = SKPhysicsBody(edgeFromPoint: CGPointZero, toPoint: CGPointMake(0.0, self.size.height))
leftEdge.position = CGPointZero;
self.addChild(leftEdge)
var rightEdge = SKNode()
rightEdge.physicsBody = SKPhysicsBody(edgeFromPoint: CGPointZero, toPoint: CGPointMake(0.0, self.size.height))
rightEdge.position = CGPointMake(self.size.width, 0.0);
self.addChild(rightEdge)

Resources