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来学习。