enableAutomapping and SKTileMapNode: Create shapes with edges programmatically?

Question

I am trying to create a flexible dialog box programmatically for dialog text in an RPG style game. I've designed a simple box graphic, divided it into all of the correct parts, and added it to my tile set as an 8-way Adjacency Group.

I can successfully add it to my camera node, but automapping does not work. All I get is a solid black box composed of the center tile. According to Apple's documentation, enableAutomapping "specifies whether the tile map uses automapping behavior like the scene editor," so I believe this setting should help me.

It only chooses the center tile, ignores all the edges/corners, and I get a solid black box. The behavior I am looking for is for SpriteKit to choose the appropriate edge and interior tile depending on the shape I am creating.

Here is what my code (Swift 4.2) currently looks like:

func createDialogBox() {
    let dialogTileSet = SKTileSet(named: "Dialog")!

    for tileGroup in dialogTileSet.tileGroups {
        for tileRule in tileGroup.rules {
            for tileDefinition in tileRule.tileDefinitions {
                for texture in tileDefinition.textures {
                    texture.filteringMode = .nearest
                }
            }
        }
    }

    let tileSize = CGSize(width: 32, height: 32)
    let rows = 3, cols = 12

    let dialogBox = SKTileMapNode(tileSet: dialogTileSet,
                                  columns: cols,
                                  rows: rows,
                                  tileSize: tileSize)

    dialogBox.enableAutomapping = true

    for col in 0..<cols {
        for row in 0..<rows {
            dialogBox.setTileGroup(dialogTileSet.tileGroups.first, forColumn: col, row: row)
        }
    }

    dialogBox.zPosition = 2
    dialogBox.position = CGPoint(x: 48, y: -128)
    self.camera?.addChild(dialogBox)
}

score 1 · Answer 1 · answered Dec 24 '18 at 05:07

Advice for working with SpriteKit and SKTileMapNodes programmatically: learn how the editor works in Xcode before trying to do it in code. After asking my question, I decided to build it in the editor and I realized my conceptual model of tile map nodes was incorrect.

I was able to solve my issue by realizing that with automapping enabled, you only need to draw the center of the shape. The edges are filled in and the size of the TileMapNode must be able to accommodate the edge pieces. I had to make my TileMapNode slightly larger.

It works now. Here is the code (Swift 4.2):

func createDialogBox(string: String) {
    let dialogTileSet = SKTileSet(named: "Dialog")!

    for tileGroup in dialogTileSet.tileGroups {
        for tileRule in tileGroup.rules {
            for tileDefinition in tileRule.tileDefinitions {
                for texture in tileDefinition.textures {
                    texture.filteringMode = .nearest
                }
            }
        }
    }

    let tileSize = CGSize(width: 32, height: 32)
    let rows = 5, cols = 14 // Increased the size of the tile map node.

    let dialogBox = SKTileMapNode(tileSet: dialogTileSet,
                                  columns: cols,
                                  rows: rows,
                                  tileSize: tileSize)

    dialogBox.enableAutomapping = true

    // Just draw the center line. Automapping will take care of the surrounding edges.
    for col in 2...11 {
        dialogBox.setTileGroup(dialogTileSet.tileGroups.first, forColumn: col, row: 2)
    }

    dialogBox.zPosition = 2
    dialogBox.position = CGPoint(x: 48, y: -128)
    self.camera?.addChild(dialogBox)
}

enableAutomapping and SKTileMapNode: Create shapes with edges programmatically?

1 Answers1