cs193p – Project #5 Assignment #5 Step #2 – The Paddle

Please note, this blog entry is from a previous course. You might want to check out the current one.

Create the paddle lazily. Place it outside (just a little bit) of the game view – which perhaps a bad way to know if it has been created recently. … and make it nice and colorful, with rounded corners etc …
[swift]
struct Constants {
static let PaddleSize = CGSize(width: 80.0, height: 20.0)
static let PaddleCornerRadius: CGFloat = 5.0
static let PaddleColor = UIColor.greenColor()
}

lazy var paddle: UIView = {
let paddle = UIView(frame: CGRect(origin: CGPoint(x: -1, y: -1), size: Constants.PaddleSize))
paddle.backgroundColor = Constants.PaddleColor
paddle.layer.cornerRadius = Constants.PaddleCornerRadius
paddle.layer.borderColor = UIColor.blackColor().CGColor
paddle.layer.borderWidth = 2.0
paddle.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
paddle.layer.shadowOpacity = 0.5

self.gameView.addSubview(paddle)

return paddle
}()
[/swift]

When the paddle is outside the game view (at the beginning and possibly after device roatation), reset its position:
[swift]
override func viewDidLayoutSubviews() {
…
if !CGRectContainsRect(gameView.bounds, paddle.frame) {
resetPaddle()
}
…
}
[/swift]

The initial position of the paddle in the middle of the bottom of the screen (and we set the barrier for the dynamic behavior … to be done later on):
[swift]
func resetPaddle() {
paddle.center = CGPoint(x: gameView.bounds.midX, y: gameView.bounds.maxY – paddle.bounds.height)
addPaddleBarrier()
}
[/swift]

To move the paddle, I added three gesture. The pan gesture handles most movement. However in the heat of the game it might be necessary to move faster … that’s what the left and right swipe gestures are fore:
[swift]
override func viewDidLoad() {
…
gameView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "panPaddle:"))
let swipeLeft = UISwipeGestureRecognizer(target: self, action: "swipePaddleLeft:")
swipeLeft.direction = .Left
gameView.addGestureRecognizer(swipeLeft)
let swipeRight = UISwipeGestureRecognizer(target: self, action: "swipePaddleRight:")
swipeRight.direction = .Right
gameView.addGestureRecognizer(swipeRight)
}
[/swift]

While panning change the position of the paddle according to the panned distance. For swipes move to the far left or right:
[swift]
func panPaddle(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Ended: fallthrough
case .Changed:
placePaddle(gesture.translationInView(gameView))
gesture.setTranslation(CGPointZero, inView: gameView)
default: break
}
}

func swipePaddleLeft(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Ended:
placePaddle(CGPoint(x: -gameView.bounds.maxX, y: 0.0))
default: break
}
}

func swipePaddleRight(gesture: UIPanGestureRecognizer) {
switch gesture.state {
case .Ended:
placePaddle(CGPoint(x: gameView.bounds.maxX, y: 0.0))
default: break
}
}
[/swift]

To change the position of the paddle, change its origin – but take care, not to move it off screen:
[swift]
func placePaddle(translation: CGPoint) {
var origin = paddle.frame.origin
origin.x = max(min(origin.x + translation.x, gameView.bounds.maxX – Constants.PaddleSize.width), 0.0)
paddle.frame.origin = origin
addPaddleBarrier()
}
[/swift]

The barrier equals the dimensions and form of the paddle:
[swift]
struct Constants {
…
static let PaddlePathName = "Paddle"
}

func addPaddleBarrier() {
breakout.addBarrier(UIBezierPath(roundedRect: paddle.frame, cornerRadius: Constants.PaddleCornerRadius), named: Constants.PaddlePathName)
}
[/swift]

Now we have a working paddle, and it’s possible to change the initial position of the ball depending on the paddle:
[swift]
func placeBall(ball: UIView) {
var center = paddle.center
center.y -= Constants.PaddleSize.height / 2 + Constants.BallRadius
ball.center = center
}
[/swift]

The complete code for step #2 is available on GitHub.