从零开始的8-bit迷宫探险【Level 12】把迷宫涂上喜欢的颜色

刚踏入黑森林的第一步，就吹来一股寒风。
「究竟，这是座什麽样的森林呢？」
「不管了，我想成为第一个站上山顶的人！」山姆喃喃自语地说。

今日目标

绘制图片
将迷宫套上不同的图片

PS. 这里是开发 iOS 手机游戏的系列文，如果还没看过之前剧情文章的朋友，欢迎先点这边回顾唷！

风格与绘图

这次的游戏想做像素风格，让游戏有点怀旧的味道！
笔者选用这款「八位元画家」APP，作画，使用 16x16 的画布尺寸，并汇出成 256x256 px 的图片
觉得好用的功能：

支援透明度
不同尺寸的画布
可以移动、水平翻转、旋转
可以复制画过的图片
汇出图片时可以选择不同图片大小

操作画面：

来源：八位元画家

开始准备素材

依据企划书定的墙壁种类，我们准备以下素材：
其中白色文字的是真实的墙壁，黄色文字是假的墙壁 (能隐身的树)

将迷宫套上图片

先写墙壁的对应表，将字元及代表的图片档名定义好：

GameScene.swift

let wallMapping: [Character: String] = [
    "a": "wall-line-1",
    "b": "wall-line-2",
    "c": "wall-line-3",
    "d": "wall-line-4",
    "e": "wall-line-5",
    "f": "wall-line-6",
    
    "g": "wall-corner-1",
    "h": "wall-corner-2",
    "i": "wall-corner-3",
    "j": "wall-corner-4",
    "k": "wall-corner-5",
    "l": "wall-corner-6",
    "m": "wall-corner-7",
    "n": "wall-corner-8",
    
    "o": "wall-intersection-1",
    "p": "wall-intersection-2",
    
    "q": "wall-end-1",
    "r": "wall-end-2",
    "s": "wall-end-3",
    "t": "wall-end-4",
    "u": "wall-end-5",
    "v": "wall-end-6",
    
    "w": "lake-1",
    "x": "lake-2",
    "y": "lake-3",
    "z": "lake-4",
    
    "1": "tree-green",
    "2": "leaf",
    "3": "wood",
    
    "#": "tree-purple"
]

参考前一天定义的 map 阵列，将墙壁 "w" 调整为想显示的图片的对应字元，命名为另一个绘图的阵列 mapDraw。
目前我们有两个地图阵列：

map：可用来判断是否为墙壁
mapDraw：画迷宫时的依据

let mapDraw = [
    "ccccccccpccccccci",
    "   .....e*......b",
    "aam.1ji.s.11.zy.b",
    "  d.3gh....1.wx.b",
    "jcl.....ji.1....b",
    "d*...11.gh...rt.b",
    "d.11.nm....2....b",
    "d..1.kl.22.1.naah",
    "ot...       .b   ",
    "d..1.jcu vci.b   ",
    "d.12.d     b.kccc",
    "d+...gaaaaah.    ",
    "gaam.       .11.n",
    "   d.rt.1#.q....b",
    "   d....21.e.ji.b",
    "cccl.ji....e.gh.b",
    "    .gh.13.s....b",
    "aaam....1....21.b",
    "   d...23.rt.1..b",
    "   d.1.........3b",
    "jccl.1.rft.3.1.1b",
    "d*.............*b",
    "gaaaaaaaaaaaaaaah",
]

调整前一天绘制迷宫的方法：

将 map 改为 mapDraw，改从绘图的阵列取得资讯
使用 wallMapping.keys 取得墙壁对应表的所有 key
switch case 中，利用 where 来侦测当前的字元是否有被涵盖在 mapKeys 中。如果有则使用 wallMapping 来取得对应的图片名称

func drawMap() {
    for i in 0..<gridYCount {
        let mapRowArr = Array(mapDraw[i]);
        for j in 0..<gridXCount {
            let mapKeys = wallMapping.keys
            switch mapRowArr[j] {
            case _ where mapKeys.contains(mapRowArr[j]):
                let spriteItem = SKSpriteNode(imageNamed: wallMapping[mapRowArr[j]]!);
                spriteItem.anchorPoint = CGPoint(x: 0.5, y: 0.5);
                spriteItem.size.width = CGFloat(gridWH);
                spriteItem.size.height = CGFloat(gridWH);
                spriteItem.position = CGPoint(x: gridWH * j + (gridWH/2), y: -gridWH * i - (gridWH/2));
                self.mapNode!.addChild(spriteItem);
            default:
                break
            }
        }
    }
}

运行後可以看到以下成果：