This post has been modified to include a screenshot and code...
It's been four days of trying to solve this, so can someone please clearly point out what's wrong with my implementation? It's my first time lol.
Have a look at my screenshot below.
-I'm using UIKit Dynamics and am trying to trap those 3 smaller balls inside the ROUND bounds of the larger ball, but they are only being kept inside the bounds of the larger ball's rectangle.
Here's the relative code:
The large bubble is created in IB and is declared in my class:
#IBOutlet weak var homeMainBubble: UIButton!
var gravity: UIGravityBehavior!
var animator: UIDynamicAnimator!
var collision: UICollisionBehavior!
var ballOne : UIImageView!
var ballTwo : UIImageView!
var ballThree : UIImageView!
var circlePath : UIBezierPath!
override func viewDidAppear(_ animated: Bool) {
circlePath = UIBezierPath(arcCenter: CGPoint(x: homeMainBubble.frame.midX,y: homeMainBubble.frame.midY), radius: homeMainBubble.frame.width/2, startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)}
In viewDidAppear(), I create a UIBezierPath()
//Adds or removes fake balls inside 'mainBubble()' when swiped up or down---------------------
func addOrRemoveFakeBalls(fakeBalls: String) {
let ballOneIs = positionOneBubble()
let ballImages = ["playBubble", "statsBubble", "settingsBubble", "cheatsBubble"]
let ballOneImage = ballImages[ballOneIs.tag - 1] //Determines the image to used for 'fake ball 1' based on the bubble in position one
var ballTwoImage : String = ""
var ballThreeImage : String = ""
if ballOneImage == "playBubble" { //Derivitive from ballOneImage, this determines the ball to the left & ensures correct array looping.
ballTwoImage = ballImages[3]
} else {ballTwoImage = ballImages[ballOneIs.tag - 2]}
if ballOneImage == "cheatsBubble" { //Derivitive from ballOneImage, this determines the ball to the right & ensures correct array looping.
ballThreeImage = ballImages[0]
} else {ballThreeImage = ballImages[ballOneIs.tag]}
switch fakeBalls {
case "Add":
ballOne = Ellipse(frame: CGRect(x: 125, y: 50, width: largeBubbleWidth, height: largeBubbleWidth))
ballOne.image = UIImage(named: ballOneImage)
ballOne.layer.zPosition = 1
ballOne.alpha = 0.3
ballTwo = Ellipse(frame: CGRect(x: 100, y: 50, width: mediumBubbleWidth, height: mediumBubbleWidth))
ballTwo.image = UIImage(named: ballTwoImage)
ballTwo.layer.zPosition = 1
ballTwo.alpha = 0.3
ballThree = Ellipse(frame: CGRect(x: 150, y: 50, width: mediumBubbleWidth, height: mediumBubbleWidth))
ballThree.image = UIImage(named: ballThreeImage)
ballThree.layer.zPosition = 1
ballThree.alpha = 0.3
homeMainBubble.addSubview(ballOne)
homeMainBubble.addSubview(ballTwo)
homeMainBubble.addSubview(ballThree)
animator = UIDynamicAnimator(referenceView: homeMainBubble)
gravity = UIGravityBehavior(items: [ballOne, ballTwo, ballThree])
gravity.magnitude = 1
animator.addBehavior(gravity)
collision = UICollisionBehavior(items: [ballOne, ballTwo, ballThree])
collision.addBoundary(withIdentifier: "Circle" as NSCopying, for: circlePath)
collision.collisionDelegate = self
collision.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collision)
case "Remove":
animator.removeAllBehaviors()
gravity.removeItem(ballOne)
gravity.removeItem(ballTwo)
gravity.removeItem(ballThree)
collision.removeAllBoundaries()
ballOne.removeFromSuperview()
ballTwo.removeFromSuperview()
ballThree.removeFromSuperview()
default: break
}
}
I've temporarily added collision.translatesReferenceBoundsIntoBoundary = true so that the balls don't drop off the screen, but with that commented out, why does the 'circlePath' UIBezierPath() not hold my smaller balls inside?
I have pretty much tried every approach and had every outcome EXCEPT for what I want :P.
What am I missing in order to keep the 3 smaller balls trapped inside the large ball's image (not rectangle) bounds?
THANK YOU for saving my week! :)
If you are using UIDynamics then you can follow the advice in this other question & answer
Namely, looks like you'll want to define collisionBoundingPath to be a UIBezierPath that is round.
override public var collisionBoundingPath: UIBezierPath {
let radius = min(bounds.size.width, bounds.size.height) / 2.0
return UIBezierPath(arcCenter: CGPointZero, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true)
}
From there you can customize the behavior of the smaller balls hitting the outer edge through the UICollisionBehaviorDelegate (again, see linked question and answer).
Update
With more code posted, another issue I think you are having is the UICollisionBehavior isn't including the "main ball". You are only adding collision behavior between the 3 sub-balls, which is likely why they are not properly interacting with the big ball as you'd want. Hopefully that helps!
Related
This question was challenging to word, but explaining the situation further should help.
Using the code below, I'm essentially masking a circle on the screen wherever I tap to reveal what's underneath the black UIView. When I tap, I record the CGPoint in an array to keep track of the tapped locations. For every subsequent tap I make, I remove the black UIView and recreate each tapped point from the array of CGPoints I'm tracking in order to create a new mask that includes all the previous points.
The result is something like this:
I'm sure you can already spot what I'm asking about... How can I avoid the mask inverting wherever the circles intersect? Thanks for your help!
Here's my code for reference:
class MiniGameShadOViewController: UIViewController {
//MARK: - DECLARATIONS
var revealRadius : CGFloat = 50
var tappedAreas : [CGPoint] = []
//Objects
#IBOutlet var shadedRegion: UIView!
//Gesture Recognizers
#IBOutlet var tapToReveal: UITapGestureRecognizer!
//MARK: - VIEW STATES
override func viewDidLoad() {
super.viewDidLoad()
}
//MARK: - USER INTERACTIONS
#IBAction func regionTapped(_ sender: UITapGestureRecognizer) {
let tappedPoint = sender.location(in: view)
tappedAreas.append(tappedPoint) //Hold a list of all previously tapped points
//Clean up old overlays before adding the new one
for subview in shadedRegion.subviews {
if subview.accessibilityIdentifier != "Number" {subview.removeFromSuperview()}
}
//shadedRegion.layer.mask?.removeFromSuperlayer()
createOverlay()
}
//MARK: - FUNCTIONS
func createOverlay(){
//Create the shroud that covers the orbs on the screen
let overlayView = UIView(frame: shadedRegion.bounds)
overlayView.alpha = 1
overlayView.backgroundColor = UIColor.black
overlayView.isUserInteractionEnabled = false
shadedRegion.addSubview(overlayView)
let path = CGMutablePath()
//Create the box that represents the inverse/negative area relative to the circles
path.addRect(CGRect(origin: .zero, size: overlayView.frame.size))
//For each point tapped so far, create a circle there
for point in tappedAreas {
path.addArc(center: point, radius: revealRadius, startAngle: 0.0, endAngle: 2.0 * .pi, clockwise: false)
path.closeSubpath() //This is required to prevent all circles from being joined together with lines
}
//Fill each of my circles
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path;
maskLayer.fillRule = .evenOdd
//Cut out the circles inside that box
overlayView.layer.mask = maskLayer
overlayView.clipsToBounds = true
}
}
You asked:
how can I avoid inverting the mask when masked regions intersect?
In short, do not use the .evenOdd fill rule.
You have specified a fillRule of .evenOdd. That results in intersections of paths to invert. Here is a red colored view with a mask consisting of a path with two overlapping circular arcs with the .evenOdd rule:
If you use .nonZero (which, coincidentally, is the default fill rule for shape layers), they will not invert each other:
E.g.
class ViewController: UIViewController {
#IBOutlet weak var imageView: UIImageView!
var maskLayer: CAShapeLayer = {
let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = UIColor.white.cgColor
return shapeLayer
}()
var points: [CGPoint] = [] // this isn't strictly necessary, but just in case you want an array of the points that were tapped
var path = UIBezierPath()
override func viewDidLoad() {
super.viewDidLoad()
imageView.layer.mask = maskLayer
}
#IBAction func handleTapGesture(_ gesture: UITapGestureRecognizer) {
let point = gesture.location(in: gesture.view)
points.append(point)
path.move(to: point)
path.addArc(withCenter: point, radius: 40, startAngle: 0, endAngle: .pi * 2, clockwise: true)
maskLayer.path = path.cgPath
}
}
Resulting in:
Working on a game right now, I've faced a problem regarding management of SkSpriteNodes. I have a SpriteNode whose texture size is lower than physicsBody size assigned to it. It is possible to move, thanks to something similar to an SKAction, only the texture of a node and not its physicsBody?
To explain the problem in other terms, I will give you a graphic example:
As you can see, what I want to achieve is not to modify physicsBody proprieties(in order to not affect collision or having problems with continuos reassigning of PhysicsBody entities), but changing its texture length and adjusting its position. How can I achieve this programmatically?
A bit of code for context, which is just illustrative of the problem:
let node = SKSpriteNode(color: .red, size: CGSize(width: 8, height: 60)
node.physicsBody = SKPhysicsBody(rectangleOf: CGSize(width: 8, height: 60)
self.addChild(node)
//what I've tried is something like that
//It causes glitches in visualisation... and I need to move the object since resizing is towards the center.
let resize = SKAction.scaleY(to: 0.5, duration: 5)
let move = SKAction.move(to: node.position - CGPoint(x:0, y:node.size.height*0.5), duration: 5)
let group = SKAction.group([resize, move])
node.run(group)
//And this is even worse if I add, in this specific example, another point fixed to the previous node
let node2 = SKSpriteNode(color: .blue, size: CGSize(width: 8, length: 8)
node2.physicsBody = SKPhysicsBody(rectangleOf: CGSize(width: 8, height: 8))
node2.position = CGPoint(x: 0, y: -node.height)
self.addChild(node2)
self.physicsWorld.add(SKPhysicsJointFixed.joint(withBodyA: node.physicsBody! , bodyB: node2.physicsBody!, anchor: CGPoint(x: 0, y: -node.size.height)))
I get your problem.
let resize = SKAction.scaleY(to: 0.5, duration: 5)
This line will cause the physicsBody to scale the x and y axis uniformly. While your texture will just scale the y axis.
Its not so straight forward changing physicsBody shapes to match actions
One way to do it though would be to call a method from
override func didEvaluateActions()
Something like this:
var group1: SKAction? = nil
var group2: SKAction? = nil
var touchCnt = 0
var test = SKSpriteNode(texture: SKTexture(imageNamed: "circle"), color: .blue, size: CGSize(width: 100, height: 100))
func setActions() {
let newPosition = CGPoint(x: -200, y: 300)
let resize1 = SKAction.scaleY(to: 0.5, duration: 5)
let move1 = SKAction.move(to: newPosition, duration: 5)
group1 = SKAction.group([resize1, move1])
let resize2 = SKAction.scaleY(to: 1, duration: 5)
let move2 = SKAction.move(to: position, duration: 5)
group2 = SKAction.group([resize2, move2])
}
func newPhysics(node: SKSpriteNode) {
node.physicsBody = SKPhysicsBody(texture: node.texture!, size: node.size)
node.physicsBody?.affectedByGravity = false
node.physicsBody?.allowsRotation = false
node.physicsBody?.usesPreciseCollisionDetection = false
}
override func sceneDidLoad() {
physicsWorld.contactDelegate = self
test.position = CGPoint(x: 0, y: 300)
setActions()
newPhysics(node: test)
addChild(test)
}
override func didEvaluateActions() {
newPhysics(node: test)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if touchCnt == 0 {
if !test.hasActions() {
test.run(group1!)
touchCnt += 1
}
} else {
if !test.hasActions() {
test.run(group2!)
touchCnt -= 1
}
}
}
if you put the above code in your gameScene, taking care to replace any duplicated methods and replacing the test node texture. then when you tap the screen the sprite should animate as you want while keeping the physics body is resized at the same time. There are a few performance issues with this though. As it changes the physics body on each game loop iteration.
I'm having trouble using SKNode.contains() on scaled sprites, and I can't figure out what important concept I'm missing.
I have "gremlin" sprites that move around inside a "jail" sprite. Gremlins can go through walls sometimes, and I want to know when they've left the jail. I thought I could simply use jail.contains(gremlin) (or some variant), perhaps with a bit of math done on it to get the scale right, but no joy. I can't seem to figure out which sprite or which frame, or which size, or what kind of transform, or whatever, to use with contains().
I've read quite a bit about coordinate systems, frames and bounds, hit testing, scaling, frames, sizes, origins, anchor points, everything I've been able to find. I've read this SO question, and this, this, this, and this, and quite a few others.
I'm missing something. Here's some stripped-down code that shows the problem I'm having. This is the cleaned-up version. I've tried every permutation of convertPoint(), shrinking and growing size, shrinking and growing scale, changing who is whose parent, and various other desperate attempts to understand. No luck.
In this sample code, just to get my head around the problem, I'd like to control which of the big rectangles is to serve as the container for the small ones. The way it's set right now, I'm trying to get the little rectangles outside the red rectangle to be gray. As you can see, it seems that the red rectangle's hit-test area is the same size as that of the blue rectangle. That is, everything is green except the ones out at the very edges of the blue rectangle.
Help!
class GameScene: SKScene {
static var shared: GameScene?
var bottomSprite: SKSpriteNode!
var middleSprite: SKSpriteNode!
var setupComplete = false
var spriteTexture: SKTexture?
var textureAtlas: SKTextureAtlas?
var topSprite: SKSpriteNode!
func getMarkerColor(outerSprite: SKSpriteNode, innerSprite: SKSpriteNode) -> NSColor {
return outerSprite.frame.contains(innerSprite.frame) ? .green : .gray
}
override func didMove(to view: SKView) {
GameScene.shared = self
spriteTexture = SKTexture(imageNamed: "debugRectangle")
}
func drawContainerSprite(parent: SKNode, scale: CGFloat, color: NSColor) -> SKSpriteNode {
let sprite = SKSpriteNode(texture: spriteTexture)
sprite.color = color
sprite.colorBlendFactor = 1.0
sprite.anchorPoint = CGPoint(x: 0.5, y: 0.5)
sprite.setScale(scale)
sprite.size = scene!.size
parent.addChild(sprite)
sprite.position = CGPoint.zero
return sprite
}
func drawMarkerSprite(parent: SKNode, scale: CGFloat) -> SKSpriteNode {
let sprite = SKSpriteNode(texture: spriteTexture)
sprite.size = CGSize(width: bottomSprite.size.width * 0.05, height: bottomSprite.size.height * 0.05)
sprite.colorBlendFactor = 1.0
sprite.anchorPoint = CGPoint(x: 0.5, y: 0.5)
let x = Int.random(in: Int(-self.bottomSprite.size.width)..<Int(self.bottomSprite.size.width))
let y = Int.random(in: Int(-self.bottomSprite.size.height)..<Int(self.bottomSprite.size.height))
sprite.position = CGPoint(x: x, y: y)
parent.addChild(sprite)
return sprite
}
override func update(_ currentTime: TimeInterval) {
if !setupComplete {
bottomSprite = drawContainerSprite(parent: self.scene!, scale: 0.5, color: .blue)
middleSprite = drawContainerSprite(parent: bottomSprite, scale: 0.5, color: .orange)
topSprite = drawContainerSprite(parent: middleSprite, scale: 1.0, color: .red)
setupComplete = true
}
let markerSprite = drawMarkerSprite(parent: self.scene!, scale: 1.0)
markerSprite.color = getMarkerColor(outerSprite: topSprite, innerSprite: markerSprite)
}
}
Here is what you're missing: SKNode.contains(_:) is not the same as CGRect.contains(_:).
SKNode.contains(_:) is not about rectangles. It's about hit-testing whether a point is inside a parent node. CGRect.contains(_:) is about rectangles, and it knows nothing about nodes, or scaling, or SpriteKit. If you're going to use a sprite's frame to check whether the gremlins are getting out of jail, you'll have to scale it yourself.
The problem I have is when I initialize my sprite, I have another sprite defined the same way and that sprite shows that it has a physics body because I see the green outline on that, but this sprite below has no green outline on it, I think that there is a problem when I create the SKPhysicsBody or maybe because I create 13 duplicates of the same sprite at random positions as shown in the second snippet of code.
#objc func CreateNewAsteroid() {
var asteroid : SKSpriteNode?
let moveAsteroidDown = SKAction.repeatForever(SKAction.moveBy(x: 0, y: -1, duration: 0.01))
let rotateAsteroid = SKAction.repeatForever(SKAction.rotate(byAngle: 25, duration: 5))
let asteroidXpos = randomNum(high: self.frame.size.width/2, low: -1 * self.frame.size.width/2)
let asteroidYpos = randomNum(high: 2.5*self.frame.size.height, low: self.frame.size.height/2)
let asteroidOrigin : CGPoint = CGPoint(x: asteroidXpos, y: asteroidYpos)
asteroid = SKSpriteNode(imageNamed: possibleAsteroidImage[Int(arc4random_uniform(4))])
asteroid?.scale(to: CGSize(width: player.size.height, height: player.size.height))
asteroid?.position = asteroidOrigin
asteroid?.run(moveAsteroidDown)
asteroid?.run(rotateAsteroid)
let asteroidRadius : CGFloat = (asteroid?.size.width)!/2
asteroid?.physicsBody? = SKPhysicsBody(rectangleOf: (asteroid?.size)!)
asteroid?.physicsBody?.categoryBitMask = asteroidCategory
asteroid?.physicsBody?.affectedByGravity = false
asteroid?.physicsBody?.isDynamic = false
asteroid?.physicsBody?.allowsRotation = false
asteroid?.physicsBody?.categoryBitMask = asteroidCategory
asteroid?.physicsBody?.collisionBitMask = 0
asteroid?.physicsBody?.contactTestBitMask = shipCategory
asteroidArray.append(asteroid!)
self.addChild(asteroid!)
}
I create 13 of the sprites like this
for _ in 0...13 {
CreateNewAsteroid()
}
Instead of making the SKSpriteNode asteroid an optional, make it a non-optional so it does not become a null value by deleting the ? in var asteroid : SKSpriteNode?
So you want to put var asteroid : SKSpriteNode
After making this change, some errors will show up telling you to delete some !'s and ?'s (Make sure to delete these of course).
then go to your GameViewController.swift file and add the line view.showsPhysics = true under view.showsNodeCount = true
When you are done you should see a green outline around the sprite.
Taking a view roundView and making it round and then draw a circular path along roundView and giving a start stroke and giving end stroke at time method. Is it a correct way of doing
var count = 0.0
var circlePath: UIBezierPath!
var roundView: UIView!
var circleShape: CAShapeLayer!
var x: Timer!
var headerView: HeaderView!
override func viewDidLoad() {
super.viewDidLoad()
// setup()
roundView = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 300))
roundView.addSubview(label)
label.centerXAnchor.constraint(equalTo: roundView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: roundView.centerYAnchor).isActive = true
roundView.layer.cornerRadius = roundView.frame.size.width / 2
// bezier path
circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
radius: roundView.frame.size.width / 2,
startAngle: CGFloat(-0.5 * Double.pi),
endAngle: CGFloat(1.5 * Double.pi),
clockwise: true)
// circle shape
circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
circleShape.borderWidth = 10
circleShape.strokeColor = UIColor.blue.cgColor
circleShape.fillColor = UIColor.clear.cgColor
circleShape.lineWidth = 10
// set start and end values
circleShape.strokeStart = 0.0
x = Timer.scheduledTimer(timeInterval: 0.4, target: self, selector: #selector(self.update), userInfo: nil, repeats: true)
}
Add end stroke
#objc func update() {
// Something cool
if count >= 1{
x.invalidate()
}
count = count + 0.01
self.label.text = String(Int(count * 100))
circleShape.strokeEnd = CGFloat(count)
roundView.layer.addSublayer(circleShape)
// add subview
self.tableView.addSubview(roundView)
print(count)
}
When we talk about good or bad practice, it often means if the approach is efficient, safe or not. Say doing a force unwrap is bad practice, and using if let is a good practice.
In your case, a circular progress bar is nothing other than a view with some layer or path on top, which finally formed the bar liked view. It is the correct way of doing it and it is not a bad practice.