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


     本文转自zhf651555765 51CTO博客,原文链接:http://blog.51cto.com/smallwoniu/1262699,如需转载请自行联系原作者


相关文章
|
6月前
|
图形学
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏7(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏7(附带项目源码)
78 1
|
5月前
Libgdx游戏开发(7)——开始游戏界面实现
使用上的注意事项 1. 切换到一个新的Screen的时候,如果之前的Screen不再使用,需要手动调用Screen.dispose方法,进行资源的释放 2. 给Game对象设置Screen的时候,设置的新的那个Screen会调用onShow()方法,而之前的Screen会调用onHide()方法 3. 如果有需要的话,一般在onShow()方法,给当前Screen设置一个输入监听器 优化尝试 - 全局game对象
48 0
|
6月前
|
图形学
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏5(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏5(附带项目源码)
63 0
|
6月前
|
缓存 图形学
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏8(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏8(附带项目源码)
40 0
|
6月前
|
图形学
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏1(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏1(附带项目源码)
75 0
|
6月前
|
人工智能 定位技术 图形学
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏6(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游戏6(附带项目源码)
40 0
|
图形学
Unity 3D游戏-塔防类游戏源码:重要方法和功能的实现
Unity-塔防游戏源码 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) ...
1920 0