Leaving equal width gap spacing before and between menu buttons

问题

I have created a scrolling menu using the code below. I am trying to create equal row gaps (width spacing) between each of the menu sprite buttons. Currently, I've been able to leave equal width spacing at the left and right ends but not in between sprite buttons. Please see the relevant code below:

class LevelScene: SKScene {

let levelButtonSize = SKSpriteNode(imageNamed: "b1").size
let levelButton1: SKSpriteNode = SKSpriteNode(imageNamed: "b1")

let levelButton2: SKSpriteNode = SKSpriteNode(imageNamed: "b2")
let levelButton3: SKSpriteNode = SKSpriteNode(imageNamed: "b3")
let levelButton4: SKSpriteNode = SKSpriteNode(imageNamed: "b4")
let levelButton5: SKSpriteNode = SKSpriteNode(imageNamed: "b5")
let levelButton6: SKSpriteNode = SKSpriteNode(imageNamed: "b6")
let levelButton7: SKSpriteNode = SKSpriteNode(imageNamed: "b7")
let levelButton8: SKSpriteNode = SKSpriteNode(imageNamed: "b8")

let levelButton9: SKSpriteNode = SKSpriteNode(imageNamed: "b9")
let levelButton10: SKSpriteNode = SKSpriteNode(imageNamed: "b10")
let levelButton11: SKSpriteNode = SKSpriteNode(imageNamed: "b11")
let levelButton12: SKSpriteNode = SKSpriteNode(imageNamed: "b12")

let levelButton13: SKSpriteNode = SKSpriteNode(imageNamed: "b13")
let levelButton14: SKSpriteNode = SKSpriteNode(imageNamed: "b14")
let levelButton15: SKSpriteNode = SKSpriteNode(imageNamed: "b15")
let levelButton16: SKSpriteNode = SKSpriteNode(imageNamed: "b16")
let levelButton17: SKSpriteNode = SKSpriteNode(imageNamed: "b17")
let levelButton18: SKSpriteNode = SKSpriteNode(imageNamed: "b18")


private var scrollCell = SKSpriteNode()

private var moveAmtX: CGFloat = 0
private var moveAmtY: CGFloat = 0
private let minimum_detect_distance: CGFloat = 30
private var initialPosition: CGPoint = CGPoint.zero
private var initialTouch: CGPoint = CGPoint.zero
private var resettingSlider = false

override init(size: CGSize){
  super.init(size: size)

     createMenu()
}

func createMenu() {

    let buttons = [levelButton1, levelButton2, levelButton3, levelButton4, levelButton5, levelButton6, levelButton7, levelButton8, levelButton9, levelButton10, levelButton11, levelButton12, levelButton13, levelButton14, levelButton15, levelButton16, levelButton17, levelButton18]

    for i in 1..<buttons.count  {
        buttons[i-1].name = "level\(i)"
    }

    let padding: CGFloat = 50
    let numberOfRows = CGFloat(buttons.count / 3)

    scrollCell = SKSpriteNode(color: .blue, size: CGSize(width: self.size.width, height: levelButtonSize.height * numberOfRows + padding * numberOfRows))
    scrollCell.position = CGPoint(x: 0 - self.size.width / 2, y: 0 - (scrollCell.size.height - self.size.height / 2))
    scrollCell.anchorPoint = CGPoint.zero
    scrollCell.zPosition = 0
    self.addChild(scrollCell)

    //        let backgroundImage = SKSpriteNode(imageNamed: "bg")
    //        backgroundImage.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
    //        self.addChild(backgroundImage)

    let totalMarginX = self.frame.width - 3*levelButtonSize.width
    let marginX = totalMarginX/4

    let column1PosX = marginX + levelButtonSize.width/2
    let column2PosX = 2*marginX + 3*levelButtonSize.width/2
    let column3PosX = 3*marginX + 5*levelButtonSize.width/2

    print("levelButtonSize.width is \(levelButtonSize.width)")
    print("self.frame.width is \(self.frame.width)")
    print("marginX is \(marginX)")
    print("column1PosX is \(column1PosX)")
    print("column2PosX is \(column2PosX)")
    print("column3PosX is \(column3PosX)")

    var colCount = 0
    var rowCount = 0

    for button in buttons {

        var posX: CGFloat = column2PosX
        if colCount == 0 {
            posX =  column1PosX
        }
        if colCount == 1 {
            posX =  column2PosX
        }

        else if colCount == 2 {
            posX =  column3PosX
            colCount = -1
        }


        let indexOffset = CGFloat(rowCount) * (levelButtonSize.height + padding)
        let posY = scrollCell.size.height - levelButtonSize.height / 2 - (indexOffset + padding / 2)
        button.position = CGPoint(x: posX, y: posY)
        //button.setScale(0.5)
        button.zPosition = 10
        scrollCell.addChild(button)

        if colCount == -1 {
            rowCount += 1
        }
        colCount += 1
    }
}


override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    if let touch = touches.first as UITouch! {

        self.scrollCell.removeAllActions()
        initialTouch = touch.location(in: self.scene!.view)
        moveAmtY = 0
        initialPosition = self.scrollCell.position
    }
}


override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    if let touch = touches.first as UITouch! {

        let movingPoint: CGPoint = touch.location(in: self.scene!.view)

        moveAmtX = movingPoint.x - initialTouch.x

        let topPos: CGFloat = scrollCell.size.height - self.size.height / 2
        let bottomPos = 0 - (self.size.height / 2)

        if (initialPosition.y - (movingPoint.y - initialTouch.y)) < -topPos {
            print("stop on top")
            moveAmtY = 0
            scrollCell.position.y = -topPos
        }
        else if (initialPosition.y - (movingPoint.y - initialTouch.y)) > bottomPos {
            print("stop on bottom")
            moveAmtY = 0
            scrollCell.position.y = bottomPos

        }
        else {
            moveAmtY = movingPoint.y - initialTouch.y
            scrollCell.position = CGPoint(x: initialPosition.x, y: initialPosition.y - moveAmtY)
        }
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
}

func checkForResettingSlider() {

    let topPos: CGFloat = scrollCell.size.height - self.size.height / 2
    let bottomPos = 0 - (self.size.height / 2)

    if scrollCell.position.y > bottomPos {

        let move = SKAction.moveTo(y: bottomPos, duration: 0.3)
        move.timingMode = .easeOut
        scrollCell.run(move)
    }

    if scrollCell.position.y < -topPos {

        let move = SKAction.moveTo(y: -topPos, duration: 0.3)
        move.timingMode = .easeOut
        scrollCell.run(move)
    }
}

func yMoveActions(moveTo: CGFloat) {

    let move = SKAction.moveBy(x: 0, y: (moveTo * 1.5), duration: 0.3)
    move.timingMode = .easeOut

    self.scrollCell.run(move, completion: { self.checkForResettingSlider() })
}

Please note that I set the scene in the following way:

 let levelScene = LevelScene(size: CGSize(width:480, height:640))
 levelScene.anchorPoint = CGPoint(x: 0.5, y: 0.5)
 levelScene.scaleMode = .aspectFill
 skView?.presentScene(levelScene)

EDIT

The image below shows a portion of my level menu which has more space between the level buttons as compared to the sides. I want to get the same width gaps between buttons and also at the sides.

回答1:

I would suggest:

let scaledWidth = levelButtonSize.width/2;
let totalMarginX = self.frame.width - 3*scaledWidth 
let marginX = totalMarginX/4 

let column1PosX = marginX + scaledWidth/2 
let column2PosX = 2*marginX + 3*scaledWidth/2 
let column3PosX = 3*marginX + 5*scaledWidth/2 

来源：https://stackoverflow.com/questions/43817782/leaving-equal-width-gap-spacing-before-and-between-menu-buttons