第十五讲 ：libgdx游戏引擎教程(十五)在Libgdx中仿微信帮助滑动效果（附源码）

最新推荐文章于 2020-03-06 12:29:22 发布
最新推荐文章于 2020-03-06 12:29:22 发布
阅读量2.8k 收藏
点赞数
分类专栏： libgdx

转自：http://www.apkbus.com/android-60822-1-1.html

 

 

下面提到的可视化版的libgdx图片打包工具：TexturePacker:

TexturePacker.rar(5.71 MB, 下载次数: 163)

2012-7-26 16:52 上传
点击文件名下载附件
下载积分: 下载豆 -2


本讲源代码下载：

edu.nju.wsj.libgdx.rar(4.41 MB, 下载次数: 285)

2012-7-26 16:52 上传
点击文件名下载附件
下载积分: 下载豆 -2




这一讲我们来尝试用Libgdx来实现 实现高仿launcher拖动效果。我们在第一次打开一个程序的时候总是会出现像这样的类似帮助的界面：
1.png
2012-7-26 16:39 上传
下载附件(97.21 KB)


2.png

2012-7-26 16:39 上传
下载附件(82.51 KB)


这样的界面可以用来提供用户操作帮助或者介绍软件新版本特性，现在越来越多的软件都加入了这样的界面。对于我们写游戏用的libgdx，当然我们可以用SDK中的ViewPager并置于一个Activity来实现这一功能（相当于前面我介绍过的AndroidApplication和Activity的混用），但是我在DDMS的内存监控中发现这种方法占用的内存比较多，对于我们游戏这种需要有严格内存管理的程序而言显然是不合算的，而且我前面也和大家提到过,在Libgdx中使用AndroidApplication和Activity混用的切换不是非常流畅，所以我们需要用Screen来实现同样的功能。
本讲的代码在十四讲的基础上进行修改，首先我们需要再添加一个按钮，用于进入我们将要编写的一个仿Launcher的Screen里面。另外我们将这个AndroidApplication在Manifest中从强制横屏改为强制竖屏，方便显示，不过这样的话我们曾经加入的Dialog显示就不太正确了，大家可以自行修改。



 

3.png
2012-7-26 16:39 上传
下载附件(36.67 KB)
画红圈的就是我们新加入的按钮。然后我们新建一个Screen，用来仿launcher滑动的效果，初步工作我就在下面直接贴出来，后面复杂的工作我们再一步步来，重要的地方我都在里面做好了注释。这里使用了TexturePacker工具将几张图片打包然后一次性载入，具体如何使用大家可以查看官方文档或者查看巴士内一篇帖子：


 


我用这个可视化工具打包这次我们要用的图片：

未命名.jpg

2012-7-26 16:51 上传
下载附件(313.65 KB)





这里建议大家用可视化版本的，极其方便，我会在附件中上传。
  1. public class PagerScreen implements GestureListener, Screen,InputProcessor{
  2. TextureAtlas pager;
  3. SpriteBatch batch;
  4. //只有在第一次启动的时候需要将资源初始化
  5. boolean hasini;
  6. TextureRegion[] pages;
  7. LibgdxActivity activity;
  8. //用来存储长和宽的值
  9. int min;
  10. int max;
  11. //用来标记第一张图片的位置，可以为负，无法显示的部分就不会被画出
  12. int position;
  13. //循环遍历用
  14. int i;

  16. @Override
  17. public void dispose() {
  18. // TODO Auto-generated method stub

  20. }

  22. @Override
  23. public void hide() {
  24. // TODO Auto-generated method stub

  26. }

  28. @Override
  29. public void pause() {
  30. // TODO Auto-generated method stub

  32. }

  34. @Override
  35. public void render(float arg0) {
  36. // TODO Auto-generated method stub
  37. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  38. Gdx.gl.glClearColor(0f,0f,0f,0f);
  39. batch.begin();
  40. for(i=0;i<pages.length;i++)
  41. batch.draw(pages[i],position+i*min, 0,min,max);
  42. batch.end();
  43. }

  45. @Override
  46. public void resize(int arg0, int arg1) {
  47. // TODO Auto-generated method stub

  49. }

  51. @Override
  52. public void resume() {
  53. // TODO Auto-generated method stub

  55. }

  57. public PagerScreen(LibgdxActivity activity) {
  58. super();
  59. this.activity=activity;
  60. // TODO Auto-generated constructor stub
  61. }

  63. @Override
  64. public void show() {
  65. // TODO Auto-generated method stub
  66. max=Gdx.graphics.getHeight()>Gdx.graphics.getWidth()?Gdx.graphics.getHeight():Gdx.graphics.getWidth();
  67. min=Gdx.graphics.getHeight()<Gdx.graphics.getWidth()?Gdx.graphics.getHeight():Gdx.graphics.getWidth();
  68. if(!hasini){
  69. batch=new SpriteBatch();
  70. //这里使用了TexturePacker工具将几张图片打包然后一次性载入，具体如何使用大家可以查看官方文档。
  71. pages=new TextureRegion[5];
  72. pager=new TextureAtlas(Gdx.files.internal("pack"));
  73. pages[0]=pager.findRegion("1");
  74. pages[1]=pager.findRegion("2");
  75. pages[2]=pager.findRegion("3");
  76. pages[3]=pager.findRegion("4");
  77. pages[4]=pager.findRegion("5");
  78. hasini=true;
  79. }
  80. //将当前Screen加入按键和手势监听队列
  81. InputMultiplexer multiplexer = new InputMultiplexer();
  82. multiplexer.addProcessor(this);
  83. multiplexer.addProcessor(new GestureDetector(this));
  84. Gdx.input.setInputProcessor(multiplexer); }

  86. @Override
  87. public boolean fling(float arg0, float arg1) {
  88. // TODO Auto-generated method stub
  89. return false;
  90. }

  92. @Override
  93. public boolean longPress(int arg0, int arg1) {
  94. // TODO Auto-generated method stub
  95. return false;
  96. }

  98. @Override
  99. public boolean pan(int arg0, int arg1, int arg2, int arg3) {
  100. // TODO Auto-generated method stub
  101. return false;
  102. }

  104. @Override
  105. public boolean pinch(Vector2 arg0, Vector2 arg1, Vector2 arg2, Vector2 arg3) {
  106. // TODO Auto-generated method stub
  107. return false;
  108. }

  110. @Override
  111. public boolean tap(int arg0, int arg1, int arg2) {
  112. // TODO Auto-generated method stub
  113. return false;
  114. }

  116. @Override
  117. public boolean touchDown(int arg0, int arg1, int arg2) {
  118. // TODO Auto-generated method stub
  119. return false;
  120. }

  122. @Override
  123. public boolean zoom(float arg0, float arg1) {
  124. // TODO Auto-generated method stub
  125. return false;
  126. }

  128. @Override
  129. public boolean keyDown(int arg0) {
  130. // TODO Auto-generated method stub
  131. //返回键按下的时候返回上一界面
  132. if(arg0==Input.Keys.BACK)
  133. activity.ag.setScreen(activity.mg);
  134. return false;
  135. }

  137. @Override
  138. public boolean keyTyped(char arg0) {
  139. // TODO Auto-generated method stub
  140. return false;
  141. }

  143. @Override
  144. public boolean keyUp(int arg0) {
  145. // TODO Auto-generated method stub
  146. return false;
  147. }

  149. @Override
  150. public boolean scrolled(int arg0) {
  151. // TODO Auto-generated method stub
  152. return false;
  153. }

  155. @Override
  156. public boolean touchDown(int arg0, int arg1, int arg2, int arg3) {
  157. // TODO Auto-generated method stub
  158. return false;
  159. }

  161. @Override
  162. public boolean touchDragged(int arg0, int arg1, int arg2) {
  163. // TODO Auto-generated method stub
  164. return false;
  165. }

  167. @Override
  168. public boolean touchMoved(int arg0, int arg1) {
  169. // TODO Auto-generated method stub
  170. return false;
  171. }

  173. @Override
  174. public boolean touchUp(int arg0, int arg1, int arg2, int arg3) {
  175. // TODO Auto-generated method stub
  176. return false;
  177. }

  179. }
复制代码
设置MyGame.java中新加入的按钮被按下时启动这个 Screen，具体代码稍作修改大家可以看源码:
  1. toPager = new Button( new ButtonStyle(n1, n2, n3, 0f, 0f, 0f, 0f), "Start");
  2. toPager.setClickListener(new ClickListener() {

  4. @Override
  5. public void click(Actor arg0, float arg1, float arg2) {
  6. // TODO Auto-generated method stub
  7. activity.ag.setScreen(activity.ps);
  8. }
  9. });
  10. toPager.x=Gdx.graphics.getWidth()/3;
  11. toPager.y=Gdx.graphics.getWidth()/3;
  12. stage.addActor(toPager);
复制代码
运行一下，并按下刚才我们加入的那个按钮，看看效果：


4.png

2012-7-26 16:39 上传
下载附件(155.93 KB)




这时候我们还是不能翻动。我们这个Screen还实现了GestureListener这个接口，我们在pan()函数中监听手势翻动作用，并且做出相应的处理.我们考虑一下极端情况，用于标记第一张图片位置的变量position最大值无非就是0，显示后面的图片的时候，这张图片的位置左移，其值一定小于0，但是又不能小于一定值，position的最小值对应于最后一张图片在最右侧并且无法继续右移。下面要用到这个范围，不然会出很严重的问题。



 

再介绍一下pan()这个回调函数中的四个参数：
  1. public boolean pan(int arg0, int arg1, int arg2, int arg3);
复制代码
前两个参数指的是当前触摸点的x,y值，后两个标记当前用户手指的分别在x,y方向的移动速度。这里我们只用第一个参数x。简单的原理如下：用户的每次手势都会触发touchDown()方法，我们在touchDown()中存储当前按下的位置的x值,然后滑动手势开始后我们不停更新前一个位置，并且将position的大小做出相应的改变，改变量为当前位置的x值减去前一个位置的x值。我们先在PageScreen.java中添加相应的标记当前触摸点和上一个触摸点的x值的变量。
  1. float prex;
  2. float currentx;
复制代码
在touchDown()函数中标记currentx:
  1. currentx=arg0;
复制代码
在pan()函数中做出相应的处理，当然首先应该满足我们上面提到过的,postion有最大值和最小值，不可能超过这个范围，这一点非常重要。
  1. @Override
  2. public boolean pan(int arg0, int arg1, int arg2, int arg3) {
  3. // TODO Auto-generated method stub
  4. //position应该有一定的范围
  5. System.out.println(position);
  6. if(position<=0&&position>=-(pages.length-1)*min){
  7. prex=currentx;
  8. currentx=arg0;
  9. if(position+currentx-prex<=0&&position+currentx-prex>=-(pages.length-1)*min)
  10. position+=currentx-prex;
  11. else{
  12. if(position+currentx-prex>0)
  13. position=0;
  14. if(position+currentx-prex<-(pages.length-1)*min)
  15. position=-(pages.length-1)*min;

  17. }
  18. }
  19. return false;
  20. }

复制代码
运行一下，看看效果 :


5.png

2012-7-26 16:39 上传
下载附件(144.18 KB)



我们发现，完全可以正常滑动了，不过还有一个小问题，整个页面的显示完全依赖我们的滑动，而不是像我们需要仿的Launcher滑动有个自动吸附的功能，也就是当滑动到一定程度的时候会自动跳转到下一个页面。因此我们还需要做进一步的处理 。这里我们认为一张图片翻过一半的时候就应该跳转到下一张图片。我们在render()函数中实现这个效果，在手指按下的时候不回弹，手指松开后进行回弹的动作。我们需要在PageScreen.java中添加一个变量，用于回弹的标记：
  1. float targetposition;
复制代码
修改后的render()函数如下，复杂的地方下面都做了注释：
  1. @Override
  2. public void render(float arg0) {
  3. // TODO Auto-generated method stub
  4. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  5. Gdx.gl.glClearColor(0f,0f,0f,0f);
  6. batch.begin();
  7. for(i=0;i<pages.length;i++)
  8. batch.draw(pages[i],position+i*min, 0,min,max);
  9. batch.end();
  10. //用户放手时才进行回弹
  11. if(!Gdx.input.isTouched()){
  12. //巧妙的用一个取整数的函数来表示一张图片翻过一半的时候就应该跳转到下一张图片的效果
  13. targetposition=(int)((position-0.5f*min)/min)*min;
  14. if(targetposition<position){
  15. //注意不能越界，min/480f是一个因子，用于分辨率适配，让回弹速度和分辨率搭配得协调一些
  16. if(position-20*min/480f<targetposition)
  17. position=targetposition;
  18. else
  19. position-=20*min/480f;
  20. }
  21. if(targetposition>position)
  22. //注意不能越界
  23. if(position+20*min/480f>targetposition)
  24. position=targetposition;
  25. else
  26. position+=20*min/480f;
  27. }
  28. }
复制代码
运行一下：


6.png

2012-7-26 16:39 上传
下载附件(143.67 KB)




功能完全正常效果也不错，而且由于使用了Screen实现，在切换界面的时候非常流畅，我们可以用它来实现libgdx游戏中的帮助效果。

 

gf771115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Libgdx游戏引擎之ScrollPane组件
码龙008
12-14 3379
1、运行界面 这是一个不显示滚动条的水平ScrollPanel，通过手势控制ScrollPanel水平移动 2、示例代码 import com.badlogic.gdx.graphics.Color; import com.badlogic.gdx.scenes.scene2d.Actor; import com.badlogic.gdx.scenes.scene2d.I
libgdx:LibGDX教程
05-11
这个“libgdx:LibGDX教程”显然是为了帮助开发者理解和掌握LibGDX框架的使用。 LibGDX的核心特性包括： 1. **图形渲染**：LibGDX提供了一个基于OpenGL的2D和3D渲染引擎，使得开发者可以轻松地创建各种视觉效果。它...
libgdx学习ActorGestureListener点击滑动等动作监听
weixin_42353399的博客
03-06 624
libgdx学习ActorGestureListener点击滑动等动作监听介绍libgdx文档翻译点击libgdx文档翻译演示代码touchDowntouchUptap 介绍 ActorGestureListener用于游戏中的手势识别一般。 演示中的所有函数主函数都为MyGdxGame函数。 libgdx文档翻译 Detects tap, long press, fling, pan, zoom...
libgdx, 手势
06-06 487
tap，pan，fling，zoom，pinch；
Libgdx学习笔记：可垂直滚动的文本组件CHScrollLabel
weixin_34124651的博客
02-02 198
2019独角兽企业重金招聘Python工程师标准>>> ...
Libgdx中ScrollPane和Actor事件冲突问题的解决方案
zxm317122667的专栏
07-27 1146
在Libgdx的使用过程中，经常会用到ScrollPane这个widget，来实现滑动效果， 如下所示： 但是如果想在上面的效果上添加一点扩展，比如ScrollPane中的Actor可以从ScrollPane中移出来，并添加到Stage中，则需要添加额外的逻辑具体代码参考如下：/** * Created by Danny.姜 on 17/7/26. */public class TestAda
libgdx-boilerplate:LibGDX 游戏的通用代码
07-03
1. **游戏框架**：LibGDX 提供了一个跨平台的游戏循环，包括创建窗口、初始化资源、更新游戏状态、绘制画面和处理用户输入等基本流程。在boilerplate中，这部分代码会帮助开发者快速设置好游戏运行的基本环境。 2. ...
超级玛丽java游戏源码-libgdx-mario:libgdx中的超级马里奥克隆
06-06
超级玛丽java游戏源码Libgdx-超级马里奥游戏 我们中的许多人都是在玩游戏行业最著名的游戏之一《超级马里奥兄弟》(Super Mario Brothers) 的游戏中长大的。 这个游戏是任天堂著名的超级马里奥兄弟的安卓克隆。 这款...
gdx-gamesvcs:在libGDX游戏中轻松集成游戏服务
05-23
通过此扩展，您可以轻松地在libGDX游戏中集成一个或多个游戏服务。 您可以在Launcher类中动态选择所需的Game Service客户端。 支持的游戏服务 （Android，台式机，HTML5） （iOS RoboVM） （所有平台） ...
rorty:libGDX卡纸游戏
05-01
10. **渲染循环**：libGDX中的LwjglApplication或GwtApplication负责游戏的渲染循环，不断地更新游戏状态并绘制到屏幕上。 通过研究"rorty-master"项目，开发者不仅能了解libGDX的基本用法，还能学习到如何设计和...
libgdx 学习笔记（三）四个方向键控制物体移动
Ada的专栏
09-06 1457
libgda入口类：Cuboc  public class Cuboc extends AndroidApplication { /** Called when the activity is first created. */ @Override public void onCreate (Bundle savedInstanceState) { super.onCreate(sa
libGDX中AssetManager加载不到资源的解决办法
battle_steed权威文章
06-08 880
今天快疯了，本来libGDX的资料就少，又
libgdx 识别png图片轮廓，得到多边形数组，生成刚体
爱去玩的专栏
08-03 682
private Array makePoly(Texture texture, int d, int angle) { Array points = new Array(); int w = texture.getWidth(); int h = texture.getHeight(); texture.getTextureData
Libgdx专题系列：对象篇 纹理的旋转，放缩，位移
站在巨人的肩膀上
11-23 4562
下面我们将重点介绍操作纹理。大部分情况下是这种情况， 不是使用整张图片而是部分区域，这个需要怎么操作呢？看下面的代码。 下面的代码实现了纹理部分区域的旋转，放缩，和位移操作 public class FirstGame implements ApplicationListener { private Pixmap mPixmap; private Texture m
Libgdx 实现技能冷却效果
u011570106的专栏
08-06 232
原理是用多个多边形组成类圆形的Mesh，再用一个圆形黑色半透明的图片生成Texture，调用bind（）方法，最后渲染mesh。 texture.bind(); mesh.render(GL10.GL_TRIANGLE_FAN); 看代码： public class ProgressTimer {   public static final int DIRECT
[libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-屏幕布局的最佳实践
weixin_30624825的博客
10-27 223
管理多个屏幕 我们的菜单屏有2个按钮，一个play一个option。option里就是一些开关的设置，比如音乐音效等。这些设置将会保存到Preferences中。 多屏幕切换是游戏的基本机制，Libgdx提供了一个叫Game的类已经具有了这样的功能。 为了适应多屏幕的功能，我们的类图需要做一些修改： 改动在：CanyonBunnyMain不再实现ApplicationListener接...
libgdx游戏引擎教程(六)多游戏界面的实现（二）附源码
Gabriel的专栏
03-11 3742
转自：http://www.apkbus.com/android-57991-1-1.html   今天是#Testin杯#Mkey libgdx教程的第六讲，在第二讲我就曾经对大家承诺过写一个关于Libgdx内多屏幕显示的内容，可是我脑子一时糊涂竟然忘了这事，这里向大家道歉，从第五到第七讲我们就来八一八libgdx中的多游戏容器的实现。我在我的Libgdx教程中尽量给大家介绍一些实用的功能，
图片的拖动与释放
黄俊东的专栏
09-20 1540
原理图： 1) 2) 代码如下： 1、在drawable目录下导入要演示的图片 2、main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android
libgdx API之viewport：再也不用担心画面适配
幺鸡报晓的博客
08-29 2119
一般来说世界尺寸是唯一的，用来确定游戏元素的大小和相对位置，由游戏开发确定。但实际运行的设备屏幕尺寸不一。一套又好又简单的适配方案从libgdx1.0版本开始com.badlogic.gdx.utils.Viewport 目前有5种适配方式供选择，你也可以扩展Viewport实现自己的方式。 FitViewport：按比例缩放世界直到有一个方向（上下或左右）达到屏幕尺寸，世界居
Libgdx游戏引擎开发全方位指南
在Libgdx游戏引擎开发教程中，我们将深入理解这个强大的框架。首先，Libgdx的核心特性是其跨平台能力，它允许开发者使用一套代码在不同操作系统上运行游戏，简化了开发和调试流程。尽管如此，由于硬件性能的差异，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值