Android应用libGDX引擎系列(一)-Android FrameWork 基于libGDX实现高性能动画特效(粒子特效/烟花效果篇)

by AlexQ (email alexq_andr@163.com

工程托管在此:GitHub

What's libGDX?
libGDX is a cross-platform Java game development framework based on OpenGL (ES) that works on Windows, Linux, Mac OS X, Android, your WebGL enabled browser and iOS.

Gif较大,可能需要较长时间加载,或者直接查看视频效果

image
image

导语 libGDX

libGDX是一个小有名气的跨平台游戏开发引擎,文章中我们会介绍如下几点:
1. 我们为什么选择libGDX开发Android FrameWork的粒子特效(为什么不选择cocoa2d);
2. 我们如何将一个游戏开发引擎毫无违和感的引入到我们原生的Android App中呢;
3. 引入中我们遇到哪些问题,如何解决它们的;
4. 有没有什么副作用呢,我们该如何看待;
5. 推荐
6. 下一步
image
image

选择libGDX

结识libGDX

工作原因最早想做一个烟花绽放的特效,最初方案是播放Gif或者自己绘制帧动画,但是这种方案的弊端在于动画效果死板,播放元素无法更换,而且资源对于空间的占用恐怕也是日后的一大隐患。之后便考虑到粒子效果代码来实现,粒子效果比较容易找到的是一些java层实现的案例或框架,但对于计算密度如此之大的粒子效果来说,效果惨不忍睹,差一些的机器(CPU性能)上面那特效还不如没有。随后便要寻找一个高性能(so层实现,直接用OpenGL之类的绘制)的平台,游戏界这种粒子特效稀松平常了,发射子弹、喷射火焰、云层浮动统统都是粒子效果的体现。那么问题来了...

选择libGDX

当前主流的2D游戏开发引擎当属Cocoa2D了,但是看看眼下我们需要什么,它能帮我们实现吗?
我们需要在一个Android APP应用的FrameWork层中显示一个粒子特效,Cocoa2D做不到,他只能将所有UI以及一切一切实现在自己的生态圈中,说白了,他跟android开发关系不大了。从表现上就是,我们要向启动一个游戏一样,一个黑黑的界面,再继续之后的所有UI、交互操作的工作,妈呀,根本没用啊(不过这个不怪Cocoa了,人家不是用来做这个的)。

众里寻她,我们找到了libGDX(有没有其他实现方式这个我没太想到,有想法的邮件咱们热烈讨论一下,趟出新路子)

插曲:libGDX学习

这里插入一小段内容,我们怎么学习libGDX?成本高吗?怎么入手呢?
首先libGDX是一个完整的游戏开发引擎,可想而知代码还是很庞大的,GitHub地址https://github.com/libgdx/libgdx.git 上面大概接近180M,长长的wiki文档也至少有百十个知识点,对于做过游戏开发的人(不管用过什么平台、什么引擎的),很多概念应该很熟悉,但对于只有移动应用开发经验的我们,其实很多知识点是不必深挖的,全文最下面推荐中的书以及视频教程都是全中文的,对于要全面了解、挖掘libGDX用途的朋友可以仔细品味,我当时零基础大概用了3周左右的空闲时间大致掌握了书中和视频教程中的知识点,我觉得作为一个开发者,找到一个高性能的、难以替代的技术,这点付出还是划算的吧。
libGDX粗览可以看一下我另外一篇简短的文章libGDX入门精要

性能

libGDX实现粒子效果,无论是计算(运行在C上)还是绘制(OpenGL),都是极其高效的。

我们以小米Note上,运行示例代码中的CrazyMode为例:

Memery表现:

图片名称

CPU表现:

图片名称

再以Nexus5上运行示例代码中的CrazyMode为例:

Memery表现:

图片名称

CPU表现:

图片名称
核心知识点

如果你只是对本文中的事例以及技术点感兴趣,那么相对简单很多,首先请认真看看视频教程中的内容尤其是演员类、舞台类、资源加载器、音效、Action类、粒子编辑这几个部分,对整体有个了解,另外要仔细阅读掌握wiki上面的几个关键的知识点:

*The application framework

*2d particle effects

*2D Particle Editor

主角来了libGDX

libGDX能给我们想要的吗?能。
抛开长长的wiki、api、javadoc,libGDX提供了两个类(AndroidApplication & AndroidFragmentApplication),让我们看看

public class AndroidApplication extends Activity implements         AndroidApplicationBase {
...
}
public class AndroidFragmentApplication extends Fragment implements AndroidApplicationBase {
...
}

ok,看到他们的基类了吧(Activity&Fragment),这个就是我们Android FrameWork与libGDX世界穿梭的大门。

  • AndroidApplication可以建立一个独立的Activity,发挥想象你能拿他做什么,我猜可以做个炫酷的启屏页面,这个可以是常见的视差动画、视频等等的一个强大补充,为什么?代码控制、千变万化啊。
  • AndroidFragmentApplication可以建立一个fragment,可以拿他做特效层,将libGDX的UI layer融入到Android App中。

引入到APP中实现特效

'主角来了libGDX'中最后一小段是一个小小的引子,仅仅继承他们就想毫无违和的融入?

so young so simple.


图片名称

那么该有哪些工作要做呢?让我们翻看一下伪代码,快速浏览一下,了解代码的大致结构。

由于忽略了大量业务代码、非核心代码,可能造成阅读此处代码不畅,和demo中也不完全一致,快速浏览一下,了解代码的大致结构即可

public class GiftParticleFragment extends AndroidFragmentApplication implements InputProcessor {
//hide bussiness logic code
... 

//libGDX绘制层
private GiftParticleEffectView particleEffectView;
//libGDX绘制层容器
private LinearLayout mContainer;
//销毁中标志位
private boolean isDestorying  = false;
        
/*fragment层在onPause时整个内部libGDX绘制会被中断
,那么我们手动的在OnPause时恢复*/
@Override
public void onPause() {
    super.onPause();
    if (!isDestorying)
    super.onResume();
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

  m_view = inflater.inflate(R.layout.lf_layout_giftparticle, null);

//这个步骤就是将libGDX绘制层与android framework层关联了起来
  particleEffectView = new GiftParticleEffectView();
  View effectview = CreateGLAlpha(particleEffectView);
  mContainer = (LinearLayout) m_view.findViewById(R.id.container);
  mContainer.addView(effectview);
//设置输入以及手机back键监听
  Gdx.input.setInputProcessor(this);
  Gdx.input.setCatchBackKey(true);

  return m_view;
}

/*GL层绘制相关设置*/
private View CreateGLAlpha(ApplicationListener application) {
  //        GLSurfaceView透明相关
  AndroidApplicationConfiguration cfg = new AndroidApplicationConfiguration();
  cfg.r = cfg.g = cfg.b = cfg.a = 8;

  //通过libGDX提供的initializeForView方法得到android framework层上的绘制层view
  View view = initializeForView(application, cfg);
  //绘制置顶、透明设置
  if (view instanceof SurfaceView) {
    GLSurfaceView glView = (GLSurfaceView) graphics.getView();
    glView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
    glView.setZOrderMediaOverlay(true);
    glView.setZOrderOnTop(true);
  }

  return view;
}
}
    xml配置超简单
    <?xml version="1.0" encoding="utf-8"?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"> 
              
              <LinearLayout
                android:id="@+id/container"
                android:layout_margin="0dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                 ></LinearLayout>
    </LinearLayout>
/*以下为伪代码*/
public class GiftParticleEffectView implements ApplicationListener {
    //libGDX绘制精灵
    SpriteBatch mBatch;
    //Asset资源加载管理
    AssetManager mAssetManager = new AssetManager();
    //粒子效果发生器 
    ParticleEffect mParticle;
    

    @Override
    public void create() {

        mBatch = new SpriteBatch();

        mParticle = new ParticleEffect();

        ...
    }
    
    //绘制函数,帧数调用都被libGDX平面控制,不由开发者调用
    //这里我们render主要用来绘制带有礼物盒子的每一帧盒子的动画
    @Override
    public void render() {
        //清空画板,等待下一步绘制,
        Gdx.gl.glClearColor(0, 0, 0, 0);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
        
        //开始绘制
        TextureRegion currentTextureR = particleInfo.beginAnimation.getKeyFrame(particleInfo.stateTime, false);
        mBatch.begin();
        mBatch.draw(currentTextureR, xpos, yPos, mWidth, mWidth);
        mBatch.end();
        
        //这里要集成很多结合我们自己动画的逻辑
        ...
    }
    
    //播放粒子效果
    private void playParticle(...){
        //创建粒子系统
        if (Gdx.files.internal(particleFileName).exists()) {
            if (Gdx.files.external(extentPath).exists())
                mParticle.load(Gdx.files.internal(particleFileName), Gdx.files.external(extentPath));
        } else
            Log.e(TAG, "storePath is not exists:" + extentPath);
    }
    
    //这里我们加载资源
    private void initResource(ParticleInfo particleInfo) {
        
    }
}

以上伪代码,删除了大量或者抽象了大量的代码, 目前在你没有仔细了解‘libGDX’时,浅尝辄止即可,因为我的目的是帮你解决android framework结合libGDX实现特效,而不是给你讲清楚每一个libGDX知识点,这个可能还是要靠你自己了解一下。那么我们再回头,把那些需要填满的坑填上(也是关键的知识点,libGDX官方没有也无意解决的问题)。

图片名称

引入libGDX到application Framework中遇到的问题

1. AndroidFragmentApplication子类 中的 CreateGLAlpha,连接两个世界

CreateGLAplha函数两个作用:

        private View CreateGLAlpha(ApplicationListener application) {
        //      GLSurfaceView透明相关
        AndroidApplicationConfiguration cfg = new AndroidApplicationConfiguration();
        cfg.r = cfg.g = cfg.b = cfg.a = 8;
        View view = initializeForView(application, cfg);
        if (view instanceof SurfaceView) {
            GLSurfaceView glView = (GLSurfaceView) graphics.getView();
            glView.getHolder().setFormat(PixelFormat.TRANSLUCENT);
            glView.setZOrderMediaOverlay(true);
            glView.setZOrderOnTop(true);
        }
        return view;
        }
  1. 连接两个世界

    输入参数ApplicationListener,可以理解为真正的libGDX的绘制操作layer,而我们在android中要的是Framework的View,那么核心的核心就是initializeForView方法,给他一个libGDX的layer,返回一个view

  2. 设置透明以及层级(层级问题已解决,再次划掉相关内容)

    libGDX的绘制都是直接发生在OpenGL上面的,从当前继承自AndroidFragmentApplication的fragment中取出GLSurfaceView实例,将它的显示设置到最顶层,并设置透明。这样我们的粒子特效看起来会和原生app,完美的混合在一起。那为什么要设置 setZOrderMediaOverlay glView.setZOrderOnTop 这两个方法呢,先告诉你作用,就是确保无论这个fragment上面的层级有什么view,我们都可以看到此fragment中的例子效果,这个请了解一下GLSurfaceView,至于为什么这么做请看下一条。

####2. xml中的AndroidFragmentApplication子类Fragment要放在最底层(此问题最难解决)

图片名称

ok,事情至此,回顾一下,我们解决了什么问题?我们达到了touch事件可以被framework上层的view处理,而且,无论这个特效层fragment上面有什么,都能保证特效层render中绘制的东西可以被看到。~~

核心的操作以下两点:

  • 布局中(xml配置或代码设置)将此fragment放在最下层;
  • 从当前继承自AndroidFragmentApplication的fragment中取出GLSurfaceView实例,将它设置到最顶层,并设置透明;

3. 继承自AndroidFragmentApplication的子类中onPause处理,手动调用super.onResume,在我应该并能够看到特效的情况下,让动画别被frozen,连续的播放下去

    @Override
    public void onPause() {
        Log.d(TAG, "onPause");
        super.onPause();
        if (!m_isDestorying && !isScreenLock())
            super.onResume();
    }

如果在播放粒子特效时,突然由于用户点击,弹出一个dialog或者dialogstyle样式的avtivity(无论是半窗还是有透明度),我们此时一定是希望用户看到弹窗的同时,下面的粒子特效继续播放,这样的用户体验是连续的,视觉上也不是唐突的而是连贯的。那么如果我们不处理onPause的话,现象上会出现,粒子特效暂停了,frozen了,看一下libGDX中代码便知晓了,他在onPause时调用了this.graphics.pause();从而引起frozen了,只需要强制在此之后调用onResume即可,视觉效果上连续不间断,达到了我们的要求。

4.继承自AndroidFragmentApplication的子类中onStop处理,手动调用删除view,重新构建,在我不应该也不能够看到特效的情况下,让动画别关闭掉吧

    @Override
    public void onStop() {
        Log.d(TAG, "onStop");
        m_isStoping = true;
        if (!isScreenLock()) {
            mContainer.removeAllViews();
            m_isNeedBuild = true;
        }
        else
        {
            m_isNeedBuild = false;
        }
        super.onStop();
    }

如果在播放粒子特效时,突然由于用户点击,弹出了一个activity,覆盖了整个屏幕,那么我们不希望“动画在继续播放“”了。以上操作,清空了view重新构建,就是为了达到这个目的。

5.使用新版本libGDX,我之前走过的弯路

其实,这个粒子特效我大概半年之前就实现了,但是我之前使用的libGDX并没有提供AndroidFragmentApplication类,而是仅仅提供了,我们之前提到过一小下的那个继承子Activity的AndroidApplication,迫不得已,我当时的做法是,将粒子特效做在了一个继承自AndroidApplication的activity上面,这个activity是个dialog风格的,完全透明。很不完美的实现了需求,为什么不完美呢?

图片名称

大致以下几点:

  1. 首先他是个activity,他上面附着的粒子特效层肯定是在最上面喽,视觉上他会覆盖一切。
  2. 业务逻辑的交互(被此activity 覆盖的view&activity上的手势逻辑)要和activity进行,那真是代码写的自己看的都古怪,send intent,receive broadcastreceiver。
  3. 如果正在播放粒子特效,也就是说这个实现特效的activity显示中,用户要退出A这个acitivity,我们怎么办呢?首先要finish掉B,再finish掉A,android中的finish方法到OnDestory可是异步的,这么做,会有一定几率引起A退出了,B还活着,这个就麻烦了,可能引起黑屏(OpenGL问题)等等一系列问题的。
不再纠结、移除心病

有一天发现libGDX更新了,支持了这个fragment,猜测问题可以解决了,经过尝试,果然,规避掉了activity带来的诸多不利。
快速的实现了,经过这么多周折,也是想写这篇文章的一个起因吧。我平时不太喜欢听到“IOS人家可以做到,android这个做不了那个做不到”,或许我们付出的不够,或许我们的知识还有局限,别局限了技术更别局限自己,敢想才有敢干。

那么回头想想不得不走过的弯路,其实仔细品味,如果现在实现一个特效启屏页面,或者某些需求却是可以独立在activity中,那么弯路就不是弯路了,而且学习libGDX过程中,掌握了一些游戏开发的基本思想对我做android开发以及学习其他知识都有帮助,例如:分离舞台、演员这种纯粹绘制的概念,高度抽象来提高代码复用性;render机制和我们win32以及android中的draw有什么不同,等等,其实每一次学习,都有收获。


副作用

经过activity到fragment的改进,规避了结构上的所有问题,目前你使用libGDX展示粒子效果,就像使用原生的fragment一样简单。如果你要使用libGDX的粒子效果,需要引入一个v7的so,两个jar包,他们会使得你的apk大概会增加1.8M的空间,我想这个也算是使用此引擎的一个副作用吧。


推荐

  1. 书目
    libGDX游戏开发入门指南


    image
  2. 网址
    libGDX官网

  3. 视频教程
    libGDX开发教程-奋斗小土豆


下一步

我之前在jbox2d包基础上实现过一个碰撞的特效。
效果演示
由于绘制以及碰撞计算(java层)效率都不高,造成不能过多物体同时出现,大约20个物体碰撞就是上线了,否则cpu消耗过大,那么libGDX既然也理所当然的提供了box2d,我将在此基础上实现此特效。同样也会发布出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容