Golang语言情怀--第139期 Go语言Ebiten引擎全栈游戏开发:第9节：《荒野坦克大战》PC端移植-游客功能UI开发

李海彬

发布于 2024-11-15 10:50:21

5400

代码可运行

文章被收录于专栏：Golang语言社区Golang语言社区

运行总次数：0

代码可运行

Ebiten框架开发《荒野坦克大战》PC版本

PC版本规划如下：

移植移动端所有功能，打通移动和PC端同服。
支持手柄、键盘操作（1.0.0版本只支持手柄）游戏角色。
完善游戏帧同步机制。

本节主要是完成：登录背景、版本号显示

涉及到的知识点，主要是按钮，背景相关。以下代码是个按钮增加图实例，大家可以简单看下代码：

func (g *Game) Draw(screen *ebiten.Image) {

    // 填充背景，暂时不要
    // screen.Fill(color.RGBA{0xeb, 0xeb, 0xeb, 0xff})
    // 增加登录背景
    if bg != nil {
        bg.ObjectDraw(screen) //将背景的Draw方法写在Draw的最上面一行，因为在画图时最上面的代码图象在最里面一层
    }
    // 画按钮
    g.button1.Draw(screen)
    //g.button2.Draw(screen)
    //g.checkBox.Draw(screen)
    //g.textBoxLog.Draw(screen)
    //str := strconv.Itoa(score)
    //text.Draw(screen, "score:"+str, oneFont, 10, 20, color.White)
    // 显示版本号
    //------------------------------------------------------------------------------------------------------------------
    op := &text.DrawOptions{}
    op.GeoM.Translate(float64(1200), float64(700))
    op.ColorScale.ScaleWithColor(color.White)
    op.LineSpacing = lineSpacingInPixels
    op.PrimaryAlign = text.AlignStart
    op.SecondaryAlign = text.AlignCenter
    text.Draw(screen, "ver:"+_config.Version, &text.GoTextFace{
        Source: uiFaceSource,
        Size:   uiFontSize,
    }, op)
    //------------------------------------------------------------------------------------------------------------------
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
    return screenWidth, screenHeight
}

func main() {
    ebiten.SetWindowSize(screenWidth, screenHeight)
    ebiten.SetWindowTitle("荒野坦克大战")
    if err := ebiten.RunGame(NewGame()); err != nil {
        log.Fatal(err)
    }

知识点解析

func (g *Game) Draw(screen *ebiten.Image) {

    // 填充背景，暂时不要
    // screen.Fill(color.RGBA{0xeb, 0xeb, 0xeb, 0xff})
    // 增加登录背景
    if bg != nil {
        bg.ObjectDraw(screen) //将背景的Draw方法写在Draw的最上面一行，因为在画图时最上面的代码图象在最里面一层
    }
    // 画按钮
    g.button1.Draw(screen)
    //g.button2.Draw(screen)
    //g.checkBox.Draw(screen)
    //g.textBoxLog.Draw(screen)
    //str := strconv.Itoa(score)
    //text.Draw(screen, "score:"+str, oneFont, 10, 20, color.White)
    // 显示版本号
    //------------------------------------------------------------------------------------------------------------------
    op := &text.DrawOptions{}
    op.GeoM.Translate(float64(1200), float64(700))
    op.ColorScale.ScaleWithColor(color.White)
    op.LineSpacing = lineSpacingInPixels
    op.PrimaryAlign = text.AlignStart
    op.SecondaryAlign = text.AlignCenter
    text.Draw(screen, "ver:"+_config.Version, &text.GoTextFace{
        Source: uiFaceSource,
        Size:   uiFontSize,
    }, op)
    //------------------------------------------------------------------------------------------------------------------
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
    return screenWidth, screenHeight
}

func main() {
    ebiten.SetWindowSize(screenWidth, screenHeight)
    ebiten.SetWindowTitle("荒野坦克大战")
    if err := ebiten.RunGame(NewGame()); err != nil {
        log.Fatal(err)
    }
}

以上代码中，想快速理解需要知道window系统的窗口概念；在win系统每一个程序展现形式都是窗口，大家想深入理解可以去网上找相关资料，主要想给大家说明一个问题，ebitengine引擎没有场景概念，至少现在还没有封装，所以我们的坦克大战暂时设计就在一个窗口中实现显示登录、选模式、游戏等UI。

或者我们使用2个窗口，一个登录，登录成功后进入游戏大厅；这样感觉有点复杂就暂时使用端游的通用模式，采用一个窗口。

ebitengine引擎目前写来还是比较复杂，例如显示一个版本号，代码：

    // 显示版本号
    //------------------------------------------------------------------------------------------------------------------
    op := &text.DrawOptions{}
    op.GeoM.Translate(float64(1200), float64(700))
    op.ColorScale.ScaleWithColor(color.White)
    op.LineSpacing = lineSpacingInPixels
    op.PrimaryAlign = text.AlignStart
    op.SecondaryAlign = text.AlignCenter
    text.Draw(screen, "ver:"+_config.Version, &text.GoTextFace{
        Source: uiFaceSource,
        Size:   uiFontSize,
    }, op)

效果：