用Go和Korok写一个Flappybird游戏-1

Korok 是一个用 Golang 实现的组件化 2D 游戏引擎，引擎的安装和基本使用见：korok.io. 这一系列教程会教会你创建一个简单的 FlappyBird 游戏（需要一定的游戏基础和Go语言知识），最终的效果如下：

flappybird

本篇为这一系列的第一篇。你会学会：

1. 如何创建一个场景

2. 如何添加精灵

3. 如何制作精灵动画

建立一个 Korok 工程

1. 创建工程, Korok 的工程结构非常简单.

  tmp tree flappybird flappybird├── assets└── main.go

1. 实现一个场景，并且设为默认场景

// main.gotype StartScene struct {}
func (sn *StartScene) OnEnter(g *game.Game) {
}
func (sn *StartScene) Update(dt float32) {  // draw something}
func (sn *StartScene) OnExit() {
}func main() {
  options := korok.Options{
      Title:"Flappy Bird",
      Width:320,
      Height:480,
  }
  korok.Run(&options, &StartScene{})
}

在 main.go 中添加上述代码，StartScene 实现了 Scene 接口，它有三个生 命周期方法，main() 方法是游戏的入口，我们在这里调用了 korok.Run() 并传入了窗口参数和默认的场景。

1. 在当前目录下运行 go run main.go 你会得到下面的窗口.
   

   

   empty

这是一个空白的窗口，因为我们还没有添加任何可视化的元素。

添加精灵 - Flappy Bird

加载素材
首先我们需要一些游戏素材，这些素材我们已经准备好了，你可以在 这里 这里复制一份放到 assets 目录下。接下来我们会在代码中使用这些素材。此时的目录结构如下：

.
├── assets│   ├── fonts│   │   ├── Marker\ Felt.ttf│   │   ├── futura-48.fnt│   │   └── futura-48.png│   ├── images│   │   ├── bird.json│   │   └── bird.png│   └── sound│       ├── collision.ogg│       ├── drop.ogg│       ├── point.ogg│       ├── rise.ogg│       └── swooshing.ogg└── main.go

这里新加了三个目录，分别是字体、纹理和声音素材。目前位置我们只会使用到 images 下面的纹理素材，这是一个纹理图集。我们可以使用 assets 提供的方法把纹理加载到引擎中。首先我们要实现一个 Load 方法：

func (sn *StartScene) Load() {
    asset.Texture.LoadAtlas("images/bird.png", "images/bird.json")
}

Load() 方法实现了 Loader 接口，它适合做一些比较重的资源加载任务。接下来可以在 OnEnter 方法里使用这些已经加载的资源。

注意：asset.Texture.LoadAtlas 方法加载的是一个纹理图集，纹理图集通常是把多张图片打包在一张大的图片中，并通过一个描述文件来描述每个子图片的位置。使用纹理图集可以显著的减少 DrawCall 提高游戏的性能。

添加精灵
在 OnEnter 方法中添加如下代码：

    //  get textue 
    at, _ := asset.Texture.Atlas("images/bird.png")
    bird1, _ := at.GetByName("bird1.png")    
    // setup bird
    bird := korok.Entity.New()
    spr := korok.Sprite.NewCompX(bird, bird1)
    spr.SetSize(48, 32)
    xf := korok.Transform.NewComp(bird)
    xf.SetPosition(f32.Vec2{160, 240})

这段代码分为两部分，前面部分加载了之前的纹理图集，并从中找出了 "bird1.png" 这张图片。接下来新建了一个 Entity，并给它添加了 SpriteComp 和 Transform 组件，Transform 组件赋予了这个 Entity 在游戏世界中的位置，SpriteComp 让这个 Entity 可以绘制出来。

注意：如果不熟悉 Entity/Component 的概念, 务必阅读 Scene、Entity and Component 这篇基础概念的说明文档。

现在我们运行：go run main.go ，如果没有其它错误的话，他会是这样：

a single static bird

接下来我们采用类似的方法，添加其它元素，比如游戏背景和地面。

    at, _ := asset.Texture.Atlas("images/bird.png")
    bg, _ := at.GetByName("background.png")
    tt, _ := at.GetByName("game_name.png")
    ground, _ := at.GetByName("ground.png")    // setup bg
    {
        entity := korok.Entity.New()
        spr := korok.Sprite.NewCompX(entity, bg)
        spr.SetSize(320, 480)
        xf := korok.Transform.NewComp(entity)
        xf.SetPosition( f32.Vec2{160, 240})
        sn.bg = entity
    }    // setup ground {840 281}
    {
        entity := korok.Entity.New()
        spr := korok.Sprite.NewCompX(entity, ground)
        spr.SetSize(420, 140)
        spr.SetGravity(0, 1)
        spr.SetZOrder(1)
        xf := korok.Transform.NewComp(entity)
        xf.SetPosition(f32.Vec2{0, 100})
        sn.ground = entity
    }

需要注意的是，背景是绘制在最后面一层的，地面是绘制在前面一层的，小鸟是最最前面的一层，所以我们需要给他们设置不同的 z-order, z-order 越大越会绘制到前面，需要再设置 spr.SetZOrder(2) 这样让鸟绘制在最前面。

再次运行, 会得到一个接近完成的版本：

bird with background

让鸟动起来

目前为止我们添加的都是静态的元素，为了让小鸟动起来，需要使用精灵动画系统，这个系统简单，只需要几行代码。精灵动画一般是有几帧连续的静态图片组成的，连续播放这组静态图片会产生动画的效果。在纹理图集中，已经准备好了三张静态图片：

sprite animation images

接下来我们要创建一个动画序列，这个动画序列由上面的三张图片组成：

    // flying animation
    bird1, _ := at.GetByName("bird1.png")
    bird2, _ := at.GetByName("bird2.png")
    bird3, _ := at.GetByName("bird3.png")

    frames := []gfx.Tex2D{bird1, bird2, bird3}
    g.AnimationSystem.SpriteEngine.NewAnimation("flying", frames, true)

然后我们需要给当前的 Entity 添加一个 FlipbookComp 组件，这个组件可以让我们的 bird-Entity 不停的播放上面的动画序列以产生动画效果：

    // play animation
    anim := korok.Flipbook.NewComp(sn.bird)
    anim.SetRate(.1)
    anim.Play("flying")

此处添加了一个 FlipbookComp 组件，并设置播放间隔为 0.1 秒，这意味着每过 100ms 会播放一帧动画。然后调用 Play() 方法，传入要播放的动画的名字，再次运行：

final bird

总结

以上就是本篇的内容，我们从创建一个空的工程开始，到实现背景/前景和一个会飞的小鸟。代码我已经传到 GitHub - ntop001/flappybird. 下一篇我们会实现菜单和小鸟的物理模拟。

作者：ntop
链接：https://www.jianshu.com/p/035084f18cec