SpriteKit中SKTexture(rect:in:)偏移致瓦片地图显示异常求助

我之前在开发SpriteKit瓦片地图时也遇到过完全一样的问题——用SKTexture(rect:in:)提取的瓦片在缩放后出现行间隙，漏出相邻纹理的颜色。这个问题主要由浮点精度误差和纹理采样模式两个因素共同导致，下面是具体的分析和解决方案：

问题原因分析 #

1. 浮点精度误差：当你用CGFloat计算纹理rect的坐标和宽高时，除法运算会产生微小的精度损失。比如tileSize / sourceWidth的结果可能不是精确的分数值，导致纹理rect的边界没有完全对齐瓦片的实际像素，放大后（比如你设置的setScale(2)）就会暴露这个误差，显示出相邻瓦片的像素。
2. 线性过滤模式：SpriteKit的纹理默认使用.linear过滤模式，这种模式会对纹理边界的像素进行插值采样。当rect有微小偏移时，采样器会“抓取”到旁边瓦片的像素，也就是你看到的蓝色部分。

解决方案 #

1. 修正纹理坐标计算，添加精度缓冲 #

给纹理rect的宽高减去一个极小的像素值（比如0.5），避免采样到相邻瓦片的边界像素。同时确保tileY的坐标计算正确（适配SpriteKit的纹理坐标系）：

let source = SKTexture(imageNamed: "snowiceCor")
let superNode = SKNode()
let sourceWidth = source.size().width
let sourceHeight = source.size().height
let tileSize: CGFloat = 32.0
// 假设你要提取的瓦片在第0列，第8行（从0开始计数，图片左上角为第0行）
let tileCol: CGFloat = 0
let tileRow: CGFloat = 8

// 添加一个微小的偏移量，避免边界采样
let epsilon: CGFloat = 0.5

for i in 0...8 {
    for j in 0...8 {
        // 正确计算纹理坐标系的rect：适配SpriteKit左下角原点，y轴向上
        let rX = (tileCol * tileSize) / sourceWidth
        // 图片中tileRow行的瓦片，转换为纹理坐标系的y起点
        let rY = 1 - ((tileRow * tileSize) + tileSize) / sourceHeight
        // 减去epsilon，避免采样到相邻瓦片
        let rW = (tileSize - epsilon) / sourceWidth
        let rH = (tileSize - epsilon) / sourceHeight
        
        let rect = CGRect(x: rX, y: rY, width: rW, height: rH)
        let texture = SKTexture(rect: rect, in: source)
        
        // 关键：设置纹理过滤模式为最近邻，避免插值模糊
        texture.filteringMode = .nearest
        
        let node = SKSpriteNode(texture: texture, color: .clear, size: CGSize(width: tileSize, height: tileSize))
        superNode.addChild(node)
        node.zPosition = 99
        node.position.x = CGFloat(i*32)
        node.position.y = CGFloat(j*32)
    }
}
addChild(superNode)
superNode.setScale(2)

2. 强制使用最近邻采样模式 #

将纹理的filteringMode设置为.nearest，这样SpriteKit会直接取最近的像素，而不是进行线性插值。这能彻底解决边界模糊和相邻像素采样的问题，尤其适合像素风格的瓦片地图。

3. 预先生成所有瓦片纹理（可选优化） #

如果你的瓦片地图需要重复使用同一瓦片，建议提前一次性提取所有需要的瓦片纹理并缓存，避免每次循环都重新计算rect，减少精度误差的累积：

// 缓存瓦片纹理的字典
var tileTextures: [String: SKTexture] = [:]

func getTileTexture(col: Int, row: Int, source: SKTexture, tileSize: CGFloat) -> SKTexture {
    let key = "\(col)-\(row)"
    if let cached = tileTextures[key] {
        return cached
    }
    
    let sourceWidth = source.size().width
    let sourceHeight = source.size().height
    let epsilon: CGFloat = 0.5
    
    let rX = (CGFloat(col) * tileSize) / sourceWidth
    let rY = 1 - ((CGFloat(row) * tileSize) + tileSize) / sourceHeight
    let rW = (tileSize - epsilon) / sourceWidth
    let rH = (tileSize - epsilon) / sourceHeight
    
    let rect = CGRect(x: rX, y: rY, width: rW, height: rH)
    let texture = SKTexture(rect: rect, in: source)
    texture.filteringMode = .nearest
    
    tileTextures[key] = texture
    return texture
}

// 使用时直接调用
let snowTile = getTileTexture(col: 0, row: 8, source: source, tileSize: tileSize)

额外注意事项 #

• 确保你的SpriteSheet图片没有额外的空白边距，瓦片之间是紧密排列的，否则坐标计算会出现偏差。
• 如果使用Retina屏幕，确保图片的@2x、@3x版本的瓦片尺寸是精确的（比如32x32的瓦片，@2x图是64x64），避免缩放时出现精度问题。

内容的提问来源于stack exchange，提问作者Sander Frenken