读 Beginning Android Games 2nd Edition (十七) 分数榜类

前面的文章还有一个玩家分数榜类,里面的分数肯定不能用固定的图片来做,那么一个数字就由一组图片来组合而成,需要的是0-9的图片

每个图片之间还有适当的间隔

package com.badlogic.androidgames.mrnom;

import java.util.List;

import com.badlogic.androidgames.framework.Game;
import com.badlogic.androidgames.framework.Graphics;
import com.badlogic.androidgames.framework.Screen;
import com.badlogic.androidgames.framework.Input.TouchEvent;

public class HighscoreScreen extends Screen {
    String lines[] = new String[5];

    public HighscoreScreen(Game game) {
        super(game);

        for (int i = 0; i < 5; i++) {
            lines[i] = "" + (i + 1) + ". " + Settings.highscores[i];
        }
    }

    @Override
    public void update(float deltaTime) {
        List<TouchEvent> touchEvents = game.getInput().getTouchEvents();
        game.getInput().getKeyEvents();

        int len = touchEvents.size();
        for (int i = 0; i < len; i++) {
            TouchEvent event = touchEvents.get(i);
            if (event.type == TouchEvent.TOUCH_UP) {
                if (event.x < 64 && event.y > 416) {
                    if(Settings.soundEnabled)
                        Assets.click.play(1);
                    game.setScreen(new MainMenuScreen(game));
                    return;
                }
            }
        }
    }

    @Override
    public void present(float deltaTime) {
        Graphics g = game.getGraphics();

        g.drawPixmap(Assets.background, 0, 0);
        g.drawPixmap(Assets.mainMenu, 64, 20, 0, 42, 196, 42);

        int y = 100;
        for (int i = 0; i < 5; i++) {
            drawText(g, lines[i], 20, y);
            y += 50;
        }

        g.drawPixmap(Assets.buttons, 0, 416, 64, 64, 64, 64);
    }

    public void drawText(Graphics g, String line, int x, int y) {
        int len = line.length();
        for (int i = 0; i < len; i++) {
            char character = line.charAt(i);
    
            if (character == ' ') {
                x += 20;
                continue;
            }
    
            int srcX = 0;
            int srcWidth = 0;
            if (character == '.') {
                srcX = 200;
                srcWidth = 10;
            } else {
                srcX = (character - '0') * 20;
                srcWidth = 20;
            }
    
            g.drawPixmap(Assets.numbers, x, y, srcX, 0, srcWidth, 32);
            x += srcWidth;
        }
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void dispose() {

    }
}

首先看这段代码

    public HighscoreScreen(Game game) {
        super(game);

        for (int i = 0; i < 5; i++) {
            lines[i] = "" + (i + 1) + ". " + Settings.highscores[i];
        }
    }

这里生成的是分数前的序号

1.xxxxx

2.xxxxx

......

由于是循环5次,所以是分数的前5名.

这段代码意图也很明显了,是屏幕左下方的按钮,用来返回到主菜单,并播放按钮音效

    public void update(float deltaTime) {
        List<TouchEvent> touchEvents = game.getInput().getTouchEvents();
        game.getInput().getKeyEvents();

        int len = touchEvents.size();
        for (int i = 0; i < len; i++) {
            TouchEvent event = touchEvents.get(i);
            if (event.type == TouchEvent.TOUCH_UP) {
                if (event.x < 64 && event.y > 416) {
                    if(Settings.soundEnabled)
                        Assets.click.play(1);
                    game.setScreen(new MainMenuScreen(game));
                    return;
                }
            }
        }
    }

这段用来画出游戏背景,按钮等,和前几篇一样

    public void present(float deltaTime) {
        Graphics g = game.getGraphics();

        g.drawPixmap(Assets.background, 0, 0);
        g.drawPixmap(Assets.mainMenu, 64, 20, 0, 42, 196, 42);

        int y = 100;
        for (int i = 0; i < 5; i++) {
            drawText(g, lines[i], 20, y);
            y += 50;
        }

        g.drawPixmap(Assets.buttons, 0, 416, 64, 64, 64, 64);
    }

注意这一段

        for (int i = 0; i < 5; i++) {
            drawText(g, lines[i], 20, y);
            y += 50;
        }

drawText这个方法就是用来使用0-9的图片,最终拼成我们想要的数字的,lines[i]中放的就是我们想要绘制的数字,y+= 50的意思就是每行分数之间有50的行距.

Assets.numbers里面实际放的是一张图片,每次根据坐标来截取不同数字或小数点,最终得到我们要的一组完整数字,每个数字是20X32的像素,小数点为10X32的像素,

数字为升序排列

看看这段就会明白

    public void drawText(Graphics g, String line, int x, int y) {
        int len = line.length();
        for (int i = 0; i < len; i++) {
            char character = line.charAt(i);
    
            if (character == ' ') {
                x += 20;
                continue;
            }
    
            int srcX = 0;
            int srcWidth = 0;
            if (character == '.') {
                srcX = 200;
                srcWidth = 10;
            } else {
                srcX = (character - '0') * 20;
                srcWidth = 20;
            }
    
            g.drawPixmap(Assets.numbers, x, y, srcX, 0, srcWidth, 32);
            x += srcWidth;
        }
    }

每行数字开头都有个序号,上面已经举过例(1. xxxx),如果排名第一的分数为100,显示起来应该是这个样子 1. 100

如果我们想把这个分数排名从坐标(20,100)开始显示呢?

调用方法如下

game.getGraphics().drawPixmap(Assets.numbers, 20, 100, 20, 0, 20, 32);

我们知道,每一个数的宽度是20像素,那么下一个数字我们需要在坐标(20+20,100)绘制,而1. 100中有一个点(.),它的宽度为10像素,因此这样调用

game.getGraphics().drawPixmap(Assets.numbers, 40, 100, 200, 0, 10, 32);

点之后的数字坐标应该是这样 (20 + 20 + 10,100),那个字符是一个空格,我们不需要把它画出来,所以我们要做只是把x轴坐标再加上20个像素的偏移,使它看起来就像一个空格一样,下一个要显示的数字是1,因此坐标应该是(20  + 20 + 10 + 20,100).从这里,我们已经可以看出这个规律,每个数字就是把x轴递增20,小数点就是10

这段代码正好可以说明问题

                srcX = (character - '0') * 20;
                srcWidth = 20;

有几位数,x轴坐标就要递增多少个20