libgdx游戏引擎开发笔记（八）SuperJumper游戏例子的讲解（篇二）---- 游戏界面跳转

   接着上一篇的讲解，今天我们来完成帮助和分数排行榜多界面的跳转，当然不会像是Activity之间跳转，那样会很卡的，具体怎么做我们往下看吧！

1.Help界面的跳转

1.1在上次的代码基础上，我们看到MainMenuScreen中在update()中留有注释的代码：

if (OverlapTester.pointInRectangle(playBounds, touchPoint.x, touchPoint.y)) {
            //播放点击音效
            Assets.playSound(Assets.clickSound);
            //game.setScreen(new GameScreen(game));
             return;
        }
        if (OverlapTester.pointInRectangle(highscoresBounds, touchPoint.x, touchPoint.y)) {
            Assets.playSound(Assets.clickSound);
            //game.setScreen(new HighscoresScreen(game));
            return;
        }
        if (OverlapTester.pointInRectangle(helpBounds, touchPoint.x, touchPoint.y)) {
            Assets.playSound(Assets.clickSound);
            //game.setScreen(new HelpScreen(game));
            return;
        }

   我们将HelpScreen的那行注释去掉，之后我们要完成的事情就是HelpScreen类的编写，显示帮助界面。（ 注：对于切换画面，这里的game被设置在Screen类的成员变量中，而实际的libgdx类库中，Screen 被做成了接口。也就是说，应当把对应的Game类的引用放在具体的Screen接口的实现类中，通过调用Game类的setScreen方法来切换游戏画面。可以看一下http://smallwoniu.blog.51cto.com/3911954/1255187，估计你就用该明白了它的机制了）

1.2HelpScreen类：

package com.zhf.mylibgdx;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.GLCommon;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector3;
/**
 * 帮助界面一
 * @author ZHF
 *
 */
public class HelpScreen implements Screen {
    Game game;
    OrthographicCamera guiCam;  //相机
    SpriteBatch batcher;  //用来绘画界面的
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    Rectangle nextBounds;  //下一个screen
    Vector3 touchPoint;   //按下的触点
    Texture helpImage;   //帮助界面图片
    TextureRegion helpRegion;  //帮助界面区域
    public HelpScreen(Game game) {
        this.game = game;
        //初始化了一个OrthographicCamera(正交相机)，并把宽度和高度设置为320*480，也就是屏幕的大小。随后将OrthographicCamera的位置，也就是position设置在屏幕的中点 (因为此为2D游戏，所以不需要考虑Z轴)
        guiCam = new OrthographicCamera(320, 480);
        guiCam.position.set(320 / 2, 480 / 2, 0);
        nextBounds = new Rectangle(320 - 64, 0, 64, 64);
        touchPoint = new Vector3();
        batcher = new SpriteBatch();
        helpImage = Assets.loadTexture("data/help1.png");  //加载图片资源到内存
        helpRegion = new TextureRegion(helpImage, 0, 0, 320, 480);
    }
    /**刷新**/
    public void update(float deltaTime) {
        //检测捕获到按下位置
        if (Gdx.input.justTouched()) {
            guiCam.unproject(touchPoint.set(Gdx.input.getX(), Gdx.input.getY(),
                    0));
            //点击切换到下一个界面
            if (OverlapTester.pointInRectangle(nextBounds, touchPoint.x,
                    touchPoint.y)) {
                Assets.playSound(Assets.clickSound);
//              game.setScreen(new HelpScreen2(game));  //切换到下一屏
                return;
            }
        }
    }
    public void draw(float deltaTime) {
        GLCommon gl = Gdx.gl;
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);  //清屏
        guiCam.update();
        //设置绘画属性： 因为自定义了OrthographicCamera ，所以要将OrthographicCamera 的 投影矩阵传递给 batcher。在投影矩阵中是把得到的点击坐标弄成touchPoint向量，把得到的点击坐标，由左上为（0，0）的坐标系--》左下为（0，0）的坐标系。
        batcher.setProjectionMatrix(guiCam.combined);
        batcher.disableBlending();
        batcher.begin();
        batcher.draw(helpRegion, 0, 0, 320, 480);
        batcher.end();
        batcher.enableBlending();
        batcher.begin();
        batcher.draw(Assets.arrow, 320, 0, -64, 64);
        batcher.end();
        gl.glDisable(GL10.GL_BLEND);
    }
    /**系统会开启一个线程来不断的调用**/
    @Override
    public void render(float delta) {
        update(delta);
        draw(delta);
    }
    @Override
    public void resize(int width, int height) {
    }
    @Override
    public void show() {
    }
    @Override
    public void hide() {
    }
    @Override
    public void pause() {
        helpImage.dispose();
    }
    @Override
    public void resume() {
    }
    @Override
    public void dispose() {
    }
}

这样，我们的代码还不能运行，因为我们的帮助界面里有下一条的按钮，还需要修改Asset类：

声明：

public static TextureRegion arrow; //帮助下一条按钮区域

实例化：

//下一条按按钮
arrow = new TextureRegion(items, 0, 64, 64, 64);

ok! 在主菜单界面上点击Help已经成功实现跳转，接下来按下右下角的下一条，界面不会发生改变，为什么哪？

因为我们将一行代码注释掉了哦，现在我们取消注释，创建HelpScreen2,代码基本上没有改变，仅仅是在：

helpImage = Assets.loadTexture("data/help1.png");  //加载图片资源到内存

将图片help1改为help2，即可实现跳转。

再在：

game.setScreen(new HelpScreen2(game));  //切换到下一屏

将HelpScreen2改为HelpScreen3，同理，这样一直下去到HelpScreen5，完成点击下一条切换帮助界面（这里有5张help图片，分别代表5个界面哦）！

 1.3.在最后一屏HelpScreen5我们将切换到下一屏的代码改到主菜单界面

game.setScreen(new MainMenuScreen(game));  //切换到下一屏

效果图：

   ok！到此帮助界面的切换我们已经完成！！！

2.排行榜界面的跳转

   2.1.同理，首先放开MainMenuScreen中的那行注释：

game.setScreen(new HighscoresScreen(game));

2.2.HighscoresScreen类

package com.zhf.mylibgdx;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.GLCommon;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector3;
/**
 * 排行榜界面
 * @author ZHF
 *
 */
public class HighscoresScreen implements Screen {
    Game game;
    OrthographicCamera guiCam;
    SpriteBatch batcher;
    Rectangle backBounds;
    Vector3 touchPoint;
                                                                                                                                                                                                                                                                                                 
    String[] highScores;  //高分
    float xOffset = 0;
    public HighscoresScreen(Game game) {
        this.game = game;
        guiCam = new OrthographicCamera(320, 480);
        guiCam.position.set(320 / 2, 480 / 2, 0);
        backBounds = new Rectangle(0, 0, 64, 64);
        touchPoint = new Vector3();
        batcher = new SpriteBatch();
        //实例化分数数组
        highScores = new String[5];
        for (int i = 0; i < 5; i++) {
            highScores[i] = i + 1 + ". " + Settings.highscores[i];
            //显示排行榜文字
            xOffset = Math.max(Assets.font.getBounds(highScores[i]).width,
                    xOffset);
        }
        //分数显示位置
        xOffset = 160 - xOffset / 2 + Assets.font.getSpaceWidth() / 2;
    }
    public void update(float deltaTime) {
        if (Gdx.input.justTouched()) {
            guiCam.unproject(touchPoint.set(Gdx.input.getX(), Gdx.input.getY(),
                    0));
            //返回到主菜单界面
            if (OverlapTester.pointInRectangle(backBounds, touchPoint.x,
                    touchPoint.y)) {
                Assets.playSound(Assets.clickSound);
                game.setScreen(new MainMenuScreen(game));
                return;
            }
        }
    }
    public void draw(float deltaTime) {
        GLCommon gl = Gdx.gl;
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        guiCam.update();
                                                                                                                                                                                                                                                                                                     
        batcher.setProjectionMatrix(guiCam.combined);
        batcher.disableBlending();
        batcher.begin();
        batcher.draw(Assets.backgroundRegion, 0, 0, 320, 480);
        batcher.end();
        batcher.enableBlending();
        batcher.begin();
        //画出排行榜
        batcher.draw(Assets.highScoresRegion, 10, 360 - 16, 300, 33);
        //画出数组中的分数在对应的位置
        float y = 230;
        for (int i = 4; i >= 0; i--) {
            Assets.font.draw(batcher, highScores[i], xOffset, y);
            y += Assets.font.getLineHeight();
        }
        batcher.draw(Assets.arrow, 0, 0, 64, 64);
        batcher.end();
    }
    @Override
    public void render(float delta) {
        update(delta);
        draw(delta);
    }
    @Override
    public void resize(int width, int height) {
    }
    @Override
    public void show() {
    }
    @Override
    public void hide() {
    }
    @Override
    public void pause() {
    }
    @Override
    public void resume() {
    }
    @Override
    public void dispose() {
    }
}

我们还需要在资源加载类Asset中添加几行代码：

声明：

public static BitmapFont font;  //文字
public static TextureRegion highScoresRegion;  //排行榜

实例化：

//分数
font = new BitmapFont(Gdx.files.internal("data/font.fnt"), Gdx.files.internal("data/font.png"), false);
//排行榜
 highScoresRegion = new TextureRegion(Assets.items, 0, 257, 300,110/ 3);

再在Settings中实例化默认分数排行榜的值

//默认分数排行榜分数
public final static int[] highscores = new int[] {100, 80, 50, 30, 10};

注：这里的文字显示原理，清楚的可以看一下http://smallwoniu.blog.51cto.com/blog/3911954/1256054这篇应该就明白了！

   ok! 运行一下试试！发现可以实现跳转了！嘿嘿！

效果图：

源代码下载：http://down.51cto.com/data/893990

  顺便说一下，下一讲我们将接触游戏的主界面，里面包含了碰撞判断和点击区域判断，声音音效控制，游戏的一般框架等等，在这里还强调一下，这个游戏不包括舞台和演员这两个类，还需要通过其他的Demo来学习。