libgdx游戏引擎开发笔记（八）SuperJumper游戏例子的讲解（篇二）---- 游戏界面跳转
接着上一篇的讲解，今天我们来完成帮助和分数排行榜多界面的跳转，当然不会像是Activity之间跳转，那样会很卡的，具体怎么做我们往下看吧！
1.Help界面的跳转
1.1在上次的代码基础上，我们看到MainMenuScreen中在update()中留有注释的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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类：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
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类：
声明：
|
1
|
public
static
TextureRegion arrow;
//帮助下一条按钮区域
|
实例化：
|
1
2
|
//下一条按按钮
arrow =
new
TextureRegion(items,
0
,
64
,
64
,
64
);
|
ok! 在主菜单界面上点击Help已经成功实现跳转，接下来按下右下角的下一条，界面不会发生改变，为什么哪？
因为我们将一行代码注释掉了哦，现在我们取消注释，创建HelpScreen2,代码基本上没有改变，仅仅是在：
|
1
|
helpImage = Assets.loadTexture(
"data/help1.png"
);
//加载图片资源到内存
|
将图片help1改为help2，即可实现跳转。
再在：
|
1
|
game.setScreen(
new
HelpScreen2(game));
//切换到下一屏
|
将HelpScreen2改为HelpScreen3，同理，这样一直下去到HelpScreen5，完成点击下一条切换帮助界面（这里有5张help图片，分别代表5个界面哦）！
1.3.在最后一屏HelpScreen5我们将切换到下一屏的代码改到主菜单界面
|
1
|
game.setScreen(
new
MainMenuScreen(game));
//切换到下一屏
|
效果图：
ok！到此帮助界面的切换我们已经完成！！！
2.排行榜界面的跳转
2.1.同理，首先放开MainMenuScreen中的那行注释：
|
1
|
game.setScreen(
new
HighscoresScreen(game));
|
2.2.HighscoresScreen类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
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中添加几行代码：
声明：
|
1
2
|
public
static
BitmapFont font;
//文字
public
static
TextureRegion highScoresRegion;
//排行榜
|
实例化：
|
1
2
3
4
|
//分数
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中实例化默认分数排行榜的值
|
1
2
|
//默认分数排行榜分数
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来学习。