[libgdx游戏开发教程]使用Libgdx进行游戏开发(9)-场景过渡效果

本章主要讲解场景过渡效果的使用。这里将用到Render to Texture(RTT)技术。

Libgdx提供了一个类,实现了各种常见的插值算法,不仅适合过渡效果,也适合任意特定行为。

在本游戏里面，我们将实现3种转场效果：fade, slide和slice.

和前面提到的多场景管理一样，我们也需要这样的结构来统一管理转场特效：

首先创建接口ScreenTransition：

package com.packtpub.libgdx.canyonbunny.screens.transitions; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; public interface ScreenTransition { public float getDuration(); public void render(SpriteBatch batch, Texture currScreen, Texture nextScreen, float alpha); }

OpenGL有个叫做Framebuffer Objects(FBO)的特性，它允许在内存中把离屏画面渲染到纹理中。

要使用这一特性，实例化Libgdx的Framebuffer类即可，一般的用法是：

// ... Framebuffer fbo; fbo = new Framebuffer(Format.RGB888, width, height, false); fbo.begin(); // set render target to FBO's texture buffer Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // solid black Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); // clear FBO batch. draw(someTextureRegion, 0, 0); // draw (to FBO) fbo.end(); // revert render target back to normal // retrieve result Texture fboTexture = fbo.getColorBufferTexture(); // ...

其实这个特性是OpenGL ES 2.0模式下的，我们假设现在的硬件都支持了。哈哈。

为了让我们的Project支持OpenGL ES 2.0，需要做以下改动：

main方法：cfg.useGL20 = true;

把Android工程里的AndroidManifest.xml增加一行：

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

还有MainActivity里修改cfg.useGL20 = true;

HTML5项目就不用修改了，因为GWT一直就是用的OpenGL ES 2.0模式在渲染。

接下来，我们添加一个新的类DirectedGame来管理场景使用过渡的情况（替换掉Libgdx的Game类）：

package com.packtpub.libgdx.canyonbunny.screens; import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.Pixmap.Format; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.glutils.FrameBuffer; import com.packtpub.libgdx.canyonbunny.screens.transitions.ScreenTransition; public abstract class DirectedGame implements ApplicationListener { private boolean init; private AbstractGameScreen currScreen; private AbstractGameScreen nextScreen; private FrameBuffer currFbo; private FrameBuffer nextFbo; private SpriteBatch batch; private float t; private ScreenTransition screenTransition; public void setScreen(AbstractGameScreen screen) { setScreen(screen, null); } public void setScreen(AbstractGameScreen screen, ScreenTransition screenTransition) { int w = Gdx.graphics.getWidth(); int h = Gdx.graphics.getHeight(); if (!init) { currFbo = new FrameBuffer(Format.RGB888, w, h, false); nextFbo = new FrameBuffer(Format.RGB888, w, h, false); batch = new SpriteBatch(); init = true; } // start new transition nextScreen = screen; nextScreen.show(); // activate next screen nextScreen.resize(w, h); nextScreen.render(0); // let screen update() once if (currScreen != null) currScreen.pause(); nextScreen.pause(); Gdx.input.setInputProcessor(null); // disable input this.screenTransition = screenTransition; t = 0; } }

重写ApplicationListener接口的方法：

@Override public void render() { // get delta time and ensure an upper limit of one 60th second float deltaTime = Math.min(Gdx.graphics.getDeltaTime(), 1.0f / 60.0f); if (nextScreen == null) { // no ongoing transition if (currScreen != null) currScreen.render(deltaTime); } else { // ongoing transition float duration = 0; if (screenTransition != null) duration = screenTransition.getDuration(); // update progress of ongoing transition t = Math.min(t + deltaTime, duration); if (screenTransition == null || t >= duration) { // no transition effect set or transition has just finished if (currScreen != null) currScreen.hide(); nextScreen.resume(); // enable input for next screen Gdx.input.setInputProcessor(nextScreen.getInputProcessor()); // switch screens currScreen = nextScreen; nextScreen = null; screenTransition = null; } else { // render screens to FBOs currFbo.begin(); if (currScreen != null) currScreen.render(deltaTime); currFbo.end(); nextFbo.begin(); nextScreen.render(deltaTime); nextFbo.end(); // render transition effect to screen float alpha = t / duration; screenTransition.render(batch, currFbo.getColorBufferTexture(), nextFbo.getColorBufferTexture(), alpha); } } } @Override public void resize(int width, int height) { if (currScreen != null) currScreen.resize(width, height); if (nextScreen != null) nextScreen.resize(width, height); } @Override public void pause() { if (currScreen != null) currScreen.pause(); } @Override public void resume() { if (currScreen != null) currScreen.resume(); } @Override public void dispose() { if (currScreen != null) currScreen.hide(); if (nextScreen != null) nextScreen.hide(); if (init) { currFbo.dispose(); currScreen = null; nextFbo.dispose(); nextScreen = null; batch.dispose(); init = false; } }

最后，我们要把先前用的Game类的地方，替换成DirectedGame.

首先修改AbstractGameScreen：

protected DirectedGame game;

public AbstractGameScreen(DirectedGame game) { this.game = game; } public abstract InputProcessor getInputProcessor();

然后修改CanyonBunnyMain然它继承DirectedGame。

还有MenuScreen的构造函数改成public MenuScreen (DirectedGame game)，同时添加：

    @Override

public void show() { stage = new Stage(); rebuildStage(); } @Override public InputProcessor getInputProcessor() { return stage; }

同样，GameScreen相应修改构造函数参数类型Game为DirectedGame，还有添加：

@Override public InputProcessor getInputProcessor() { return worldController; }

最后，修改worldcontroller里的game为DirectedGame，移除init中的InputProcessor：

private void init () { cameraHelper = new CameraHelper(); lives = Constants.LIVES_START; livesVisual = lives; timeLeftGameOverDelay = 0; initLevel(); }

应用的代码已经修改完成了，但是我们的转场特效现在还是空的，接下来一步步实现它。

这里有必要普及一下理论知识，转场特效的核心就是插值算法，Libgdx已经实现了很多线性和非线性的插值算法，我们来看看这些算法图：

通俗的讲，这些图就相当于每一个供查询的表，用户提供一个阿尔法值(x轴)，通过表就得到一个结果值(y轴)。

在其他的游戏引擎中，比如Cocos2D引擎，已经封装了很多转场效果供开发者调用，比如Cocos里的FadeIn和FadeOut，就是对应于fade图的阿尔法的取值范围0-0.5 和 0.5-1。

在Libgdx中，这些特效都是不固定的，开发者可以自由组合。通常用法是这样的：

float alpha = 0.25f; float interpolatedValue = Interpolation.elastic.apply(alpha);

这里的阿尔法除了可以理解为参数以外，还可以理解为是整个动作进行的百分比。

下面我们来创建fade, slide 和 slice效果。

fade就是当前场景从不透明到完全透明，同时新场景从透明到完全不透明。

创建类ScreenTransitionFade：

package com.packtpub.libgdx.canyonbunny.screens.transitions; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.GL10; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.math.Interpolation; public class ScreenTransitionFade implements ScreenTransition { private static final ScreenTransitionFade instance = new ScreenTransitionFade(); private float duration; public static ScreenTransitionFade init(float duration) { instance.duration = duration; return instance; } @Override public float getDuration() { return duration; } @Override public void render(SpriteBatch batch, Texture currScreen, Texture nextScreen, float alpha) { float w = currScreen.getWidth(); float h = currScreen.getHeight(); alpha = Interpolation.fade.apply(alpha); Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); batch.begin(); batch.setColor(1, 1, 1, 1); batch.draw(currScreen, 0, 0, 0, 0, w, h, 1, 1, 0, 0, 0, currScreen.getWidth(), currScreen.getHeight(), false, true); batch.setColor(1, 1, 1, alpha); batch.draw(nextScreen, 0, 0, 0, 0, w, h, 1, 1, 0, 0, 0, nextScreen.getWidth(), nextScreen.getHeight(), false, true); batch.end(); } }

现在，我们把play按钮的clicked代码修改一下，用上fade的效果：

ScreenTransition transition = ScreenTransitionFade.init(0.75f); game.setScreen(new GameScreen(game), transition);

创建类ScreenTransitionSlide：

package com.packtpub.libgdx.canyonbunny.screens.transitions; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.GL10; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.math.Interpolation; public class ScreenTransitionSlide implements ScreenTransition { public static final int LEFT = 1; public static final int RIGHT = 2; public static final int UP = 3; public static final int DOWN = 4; private static final ScreenTransitionSlide instance = new ScreenTransitionSlide(); private float duration; private int direction; private boolean slideOut; private Interpolation easing; public static ScreenTransitionSlide init(float duration, int direction, boolean slideOut, Interpolation easing) { instance.duration = duration; instance.direction = direction; instance.slideOut = slideOut; instance.easing = easing; return instance; } @Override public float getDuration() { return duration; } @Override public void render(SpriteBatch batch, Texture currScreen, Texture nextScreen, float alpha) { float w = currScreen.getWidth(); float h = currScreen.getHeight(); float x = 0; float y = 0; if (easing != null) alpha = easing.apply(alpha); // calculate position offset switch (direction) { case LEFT: x = -w * alpha; if (!slideOut) x += w; break; case RIGHT: x = w * alpha; if (!slideOut) x -= w; break; case UP: y = h * alpha; if (!slideOut) y -= h; break; case DOWN: y = -h * alpha; if (!slideOut) y += h; break; } // drawing order depends on slide type ('in' or 'out') Texture texBottom = slideOut ? nextScreen : currScreen; Texture texTop = slideOut ? currScreen : nextScreen; // finally, draw both screens Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); batch.begin(); batch.draw(texBottom, 0, 0, 0, 0, w, h, 1, 1, 0, 0, 0, currScreen.getWidth(), currScreen.getHeight(), false, true); batch.draw(texTop, x, y, 0, 0, w, h, 1, 1, 0, 0, 0, nextScreen.getWidth(), nextScreen.getHeight(), false, true); batch.end(); } }

然后在worldcontroller的backmenu里使用这个效果：

private void backToMenu() { // switch to menu screen ScreenTransition transition = ScreenTransitionSlide.init(0.75f, ScreenTransitionSlide.DOWN, false, Interpolation.bounceOut); game.setScreen(new MenuScreen(game), transition); }

创建类ScreenTransitionSlice：

package com.packtpub.libgdx.canyonbunny.screens.transitions; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.GL10; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.math.Interpolation; import com.badlogic.gdx.utils.Array; public class ScreenTransitionSlice implements ScreenTransition { public static final int UP = 1; public static final int DOWN = 2; public static final int UP_DOWN = 3; private static final ScreenTransitionSlice instance = new ScreenTransitionSlice(); private float duration; private int direction; private Interpolation easing; private Array<Integer> sliceIndex = new Array<Integer>(); public static ScreenTransitionSlice init(float duration, int direction, int numSlices, Interpolation easing) { instance.duration = duration; instance.direction = direction; instance.easing = easing; // create shuffled list of slice indices which determines // the order of slice animation instance.sliceIndex.clear(); for (int i = 0; i < numSlices; i++) instance.sliceIndex.add(i); instance.sliceIndex.shuffle(); return instance; } @Override public float getDuration() { return duration; } @Override public void render(SpriteBatch batch, Texture currScreen, Texture nextScreen, float alpha) { float w = currScreen.getWidth(); float h = currScreen.getHeight(); float x = 0; float y = 0; int sliceWidth = (int) (w / sliceIndex.size); Gdx.gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); batch.begin(); batch.draw(currScreen, 0, 0, 0, 0, w, h, 1, 1, 0, 0, 0, currScreen.getWidth(), currScreen.getHeight(), false, true); if (easing != null) alpha = easing.apply(alpha); for (int i = 0; i < sliceIndex.size; i++) { // current slice/column x = i * sliceWidth; // vertical displacement using randomized // list of slice indices float offsetY = h * (1 + sliceIndex.get(i) / (float) sliceIndex.size); switch (direction) { case UP: y = -offsetY + offsetY * alpha; break; case DOWN: y = offsetY - offsetY * alpha; break; case UP_DOWN: if (i % 2 == 0) { y = -offsetY + offsetY * alpha; } else { y = offsetY - offsetY * alpha; } break; } batch.draw(nextScreen, x, y, 0, 0, sliceWidth, h, 1, 1, 0, i * sliceWidth, 0, sliceWidth, nextScreen.getHeight(), false, true); } batch.end(); } }

在CanyonBunnyMain中使用这个特效：

@Override public void create () { // Set Libgdx log level Gdx.app.setLogLevel(Application.LOG_DEBUG); // Load assets Assets.instance.init(new AssetManager()); // Start game at menu screen ScreenTransition transition = ScreenTransitionSlice.init(2, ScreenTransitionSlice.UP_DOWN, 10, Interpolation.pow5Out); setScreen(new MenuScreen(this), transition); }

ok，增加了转场效果之后，游戏是不是漂亮了许多？

在下一章，我们将添加音乐和音效。