Making a triangle in a UIView with a CGRect Frame

Question

HI I am making a game and need a spike at the bottom which I have decided to do via a UIView and collisions. I am coding in swift.

I currently have a square:

        //Object Setup
        let square = UIView(frame: CGRect(x:100, y:100, width: 100, height: 100))
        square.backgroundColor = UIColor.purpleColor()
        view.addSubview(square)

And I would like a triangle, I do have an image which I can use for a triangle but the image is square so surely the collision would be when it touches the image borders not the actual trianlge borders please advice on how to do with image or how I got square.

Thanks

Alex

Voracious

Have you considered using SpriteKit for your game? Really "shape-matching" physics and collisions are very easing using SpriteKit, however UIKit will reach its limits really fast when you create games – Combings

Answer 1

There is tutorial here:

http://jamesonquave.com/blog/drawing-custom-views-with-swift-andrew-vanwagoner/

with code like this:

func drawPlayPathTo(context: CGContextRef, boundedBy rect: CGRect) {
  CGContextSetFillColorWithColor(context, UIColor.blackColor().CGColor)
  CGContextMoveToPoint(context, rect.width / 4, rect.height / 4)
  CGContextAddLineToPoint(context, rect.width * 3 / 4, rect.height / 2)
  CGContextAddLineToPoint(context, rect.width / 4, rect.height * 3 / 4)
  CGContextAddLineToPoint(context, rect.width / 4, rect.height / 4)
  CGContextFillPath(context)
}

Mills

Answer 2

Steps:

1. Create a new file that subclasses UIView called TriangleView
2. Paste this into the TriangleView class
3. Add a TriangleView through XIB or programmatically

---

import UIKit

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        // Get Height and Width
        let layerHeight = layer.frame.height
        let layerWidth = layer.frame.width

        // Create Path
        let bezierPath = UIBezierPath()

        // Draw Points
        bezierPath.move(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: 0))
        bezierPath.addLine(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.close()

        // Apply Color
        UIColor.green.setFill()
        bezierPath.fill()

        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }
}

---

Result:

Incoming

The Swift 2 compiler will probably tell you that most of your vars should be lets because you don't mutate them after you create them. This includes beizerPath, because you mutate the Objective-C object, but not the pointer. – Wellspoken

how do you pass in a custom parameter or color using this method? – Spectroscope

@AndrewAnthonyGerst check this out - https://mcmap.net/q/23441/-how-to-use-hex-color-values Simply make a Swift Extension to a UIView. You can make the extension in 1 class and access it from any other class as well! – Incoming

@MikeMilla thanks for the prompt reply mike! i did figure it out though. i created a new constructor so i can pass in custom parameters. let triangleView = TriangleView(frame: CGRectMake(0.0, 0.0, 50.0, 50.0), dir: "down", color: UIColor.orangeColor()) do you know if there is a way to add a shadow around the triangle? – Spectroscope

Worked like a charm. – Dyak

To make this render in your storyboard just add @IBDesignable above the class definition. – Costello