Go+ SPX保姆级入门教程-2021版

上一篇我写的 Go+ 入门教程 发完之后没多久老许就来留言说要 go+ spx 引擎才好玩，于是今天 SPX 的第一篇保姆级入门教程就来了。

不得不说 Go+ 和 SPX 都太新了，未来真的很可期。

从那天开始我就在留意 SPX，拉了 demo 工程回来看，能跑起来，但对于从没写过动画的我来说，

为啥就起来了？是真没搞明白。

直到昨晚官方的公开课里，提了下他的运行逻辑，才算是搞明白，算入了个门。

下面正文开始！

依赖库

我们新建一个工程，初始化 go mod 之后，就要考虑这个工程依赖什么库。

这里如果你安装好了 Go+，我们就只需要一个依赖库：

go get github.com/goplus/spx

给干到工程里面就好了。

我还是继续使用 vscode 作为开发 IDE 工具。

一些基础概念

在开始写代码之前，我们需要了解一些概念。

个人的理解哈，游戏和电影很像，来看下面这个画面：

我们可以笼统的把这个画面拆分为背景和人物，

再来看这个很远古的游戏画面：

是不是很类似，也是背景和人物。

这两个概念我称为，地图（场景）和精灵。

精灵

首先来看精灵，比如这个小猴子。

在程序里面其实就是一个类啦，就像电影画面里面的人物一样。

大部分我们都是在对这个精灵进行操作。

比如：移动，比如放大缩小等。

地图 | 场景

一个游戏画面里面如果只有精灵肯定不行，那会非常单调。

就比如我们待会儿写的入门 Demo 那也得搞一个深色的背景哇。

开始上代码

资源包

我们在工程下面新建一个文件夹，名为 res 。

你暂时可以理解成，这个模块的工程包。

随后新建一个 index.json 的配置文件，开始编写我们的这个模块配置。

首先来定义场景：

{
 "costumes": [
      {
          "bitmapResolution": 1,
          "name": "backdrop1",
          "path": "./img/lake.jpg",
          "x": 240,
          "y": 180
      }
  ],
  "currentCostumeIndex": 0
}

costumes 为一个数组，因为里面可能会有很多不同的场景，这里我们只定义了一个场景。

currentCostumeIndex 为当前场景的 Index。

细心的你会发现，这里有个 path 变量，好像指向的是某张图片，没错，这就是场景的背景图片。

所以你需要把背景图，放到这个资源包的 img 文件夹下。

光有了场景，还得安排精灵入场吧，是的。

也是这个配置文件，接着加入配置信息：

{
    "costumes": [
        {
            "bitmapResolution": 1,
            "name": "backdrop1",
            "path": "./img/lake.jpg",
            "x": 240,
            "y": 180
        }
    ],
    "currentCostumeIndex": 0,
    "zorder": [
        {
            "type": "sprite",
            "target": "Monkey",
            "x": 0,
            "y": 50
        }
    ]
}

zorder 里面就是配置我们的精灵地方。

这里面有个 target 配置，就是我们的精灵类型了，这个我们还没写我们的精灵，接下来开始编写。

精灵

在我们 res 目录下我们新建一个目录，名为 sprite，我就在这里编写我们的精灵。

新建一个 Monkey 目录，这就和刚才 target 里面的 Monkey 对上了。

然后在里面建一个 index.json 用来写精灵的配置信息：

{
  "costumeSet": {
    "bitmapResolution": 1,
    "faceRight": 180,
    "path": "../../img/monkey.png",
    "nx": 96
  },
  "currentCostumeIndex": 0,
  "heading": 90,
  "isDraggable": false,
  "rotationStyle": "normal",
  "size": 1,
  "visible": true,
  "x": 100,
  "y": 50
}

这里面，你只需要关注 path 的配置就好，这里是配置我们精灵图片的地方，其他配置，暂时不做理会。

最后我们的 res 目录结构应该就是这样的：

入口文件

我们的资源文件编写好之后，接下来就是编写我们启动文件了，也就是入口文件。

在 res 同一级目录下面新建一个 index.gmx 文件，这个文件就是我们的入口文件。

写入下面的内容：

var (
    Monkey Monkey
)

run "res", {Title: "Hello world (by Go+ spx engine)"}

这段代码，我们引入了一个 Monkey 变量，然后告诉了程序从 res 资源包开始运行。

问题来了，这个 Monkey 变量我们还没去实现，res 里面只是对我们的 Monkey 精灵进行配置。

但是我们并没地方去编写他的点击事件呀这些。

所以我们还得在同一级目录下新建一个文件 Monkey.spx 来对精灵进行配置，写入：

onStart => {
 say "嗨，我是小锟"
}

onClick => {
 say "扒拉我干啥"
}

onStart 是当精灵开始启动时做的事。

onClick 是当精灵被点击时做的事。

到此时，我们的整个入门程序就写好了，直接在命令行运行：

gop run .

稍等片刻，即可看到下面的效果：