35.游戏背景移动（一）_小虎老师丶

http://blog.sina.com.cn/u/2483934474

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

35.游戏背景移动（一）

(2013-08-22 17:14:28)

标签：

android开发

it

分类： libGDX开发教程

本文使用的libgdx是0.98版本，可能和最新版有一些不同地方。全文内容仅供参考。

最近总有一些朋友，在交流群里，或者QQ私密我，希望我能讲解下游戏的背景移动，其实这个游戏背景移动不是什么难的问题，只是需要一些技巧和算法而已，市面上流行的需要移动的背景的游戏，无非就是2种类型，第一种就是我们熟识的“雷电”类游戏，另外一种就是FC中的“超级玛丽”类游戏，目前较为常见，也就是这2种，那么libgdx其实提供了我们实现背景移动的基本工具，我们只要稍微动动脑筋，就可以实现游戏的背景移动，那么今天土豆就给大家讲解下游戏背景移动的实现技巧。

Libgdx游戏引擎(1群)：187378034

Libgdx游戏引擎(2群)：148848483

Libgdx游戏引擎(3群): 79168470

视频教程

1.需求分析

今天我们先来实现下“雷电”类游戏的背景滚动，这个相对来说是最简单的，也方便我们大家入门，本节内容比较简单，适合初学者。

1.游戏需要2个界面，一个是开始界面，另一个是游戏界面。

2.在游戏内实现滚屏。

3.飞机可以随意移动，有简单的音乐播放。

2.游戏素材

（1）游戏背景图片3张。

（开始画面）（第一个背景）（第二个背景）

http://s1/small/940dd50agx6C3zAMHsca0&690 http://s14/small/940dd50agx6C3zASsUZ2d&690 http://s16/small/940dd50agx6C3zAYROvcf&690

（2）游戏飞机图片。

（飞机A）（飞机大战全部素材）
http://s2/mw690/940dd50agx6C3zB1Q4h81&690 http://s12/small/940dd50agx6C3zBDmXh2b&690

PS：由于本节内容只是在实现背景滚动，并没有实际的做这个游戏，所以这里不用第二个飞机素材。

3.算法实现

其实飞机大战这个游戏并不难，这个游戏主要亮度是在画风和设计模式上，同时他嵌在微信上，腾讯这个游戏公司，也是很会运营的，所以在排行榜的诱惑下，飞机大战火了起来。

（1）设计游戏窗口大小。由于这个游戏是一个访飞机大战的，所以平时我们用的480x320的窗口有点不适用，所以我们修改下窗口的大小。

如图：

http://s5/mw690/940dd50agx6C3Ag0L1W74&690

（2）游戏入口MyGame类的实现。

如图：

http://s4/mw690/940dd50agx6C3ApWla3c3&690

（3）开始界面的实现。

a.声明变量。

如图：

http://s3/mw690/940dd50agx6C3AEmWvEa2&690
b.变量的实例化。

如图：

http://s13/mw690/940dd50agx6C3AM6d6Adc&690

c.绘制图形界面

如图：

http://s6/mw690/940dd50agx6C3ARhBZP95&690
d.按钮的设置。这里我使用了一耳光Image控件。

如图：

http://s16/mw690/940dd50agx6C3AZo6Hddf&690

4.滚屏原理

其实滚屏的原理很简单，我们所玩的雷电类游戏，简单的游戏使用1张游戏背景，比较复杂的游戏，就需要使用多张游戏背景，当然也可以使用比较长的游戏背景图片，但是他们的原理是相同的。我们拿本次的例子作为实验讲解。

（1）首先，将第一张背景图片底部平铺到整个屏幕（可以仅是X周铺满，不必缩放）。

（2）其次，将第二章背景图片的底部，紧接在第一张图片上面。

（3）如果直接连接不和谐，可以适当的加点像素（如：+ 111）。

（4）当第一张背景图片的Y坐标超出屏幕并且超出长度和自己高度等高，那么这是立即将该图片的Y坐标设置到第二张图片的上方。

（5）最后，当第二张背景图片的Y坐标超出屏幕并且超出长度和自己高度等高，那么这是立即将该图片的Y坐标设置到第一张图片的上方。

（6）当然了，我们要使用的背景图片，必须要可以无缝的衔接，否则会影响用户体验。我们使用的2张图片就是无缝连接的，为了方便大家区分，这里i我的2个图片都标记了号码。

5.滚屏实现

滚屏实现，这里主要是使用GameScreen类来实现，那么我们详细讲解下这个DEMO。

1.声明变量。

如图：

http://s4/mw690/940dd50agx6C3CJV84323&690

2.初始化2个背景图片的坐标，这里注意的是第二个图片的坐标，必须要和第一个背景图的坐标有个换算，即在第一个背景图片上面。

如图：

http://s5/mw690/940dd50agx6C3D0O4zqf4&690

3.处理无缝衔接的算法，第一张背景图片的Y坐标超出屏幕并且超出长度和自己高度等高，那么这是立即将该图片的Y坐标设置到第二张图片的上方。第二张同理也是这样。

如图：

http://s1/mw690/940dd50agx6C3DpgkBa40&690

4.处理飞机移动的问题，这个算法由于时间的关系，暂时不写了，下次有机会在完善。

如图：

http://s14/mw690/940dd50agx6C3Dzksih4d&690
5.绘制。

如图：

http://s5/mw690/940dd50agx6C3DBAkte74&690
6.完整代码

（1）MyGame类代码。

package com.potato;

import com.badlogic.gdx.ApplicationListener;

import com.badlogic.gdx.Game;

public class MyGame extends Game {

   public static GameScreen gameScreen;

   public static StartScreen startscreen;

   @Override

   public void create() {

 startscreen = new StartScreen(this);

 gameScreen = new GameScreen(this);

 this.setScreen(startscreen);

   }

}

（2）StartScreen类代码。

package com.potato;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.Screen;

import com.badlogic.gdx.audio.Music;

import com.badlogic.gdx.graphics.GL10;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

import com.badlogic.gdx.graphics.g2d.TextureRegion;

import com.badlogic.gdx.scenes.scene2d.InputEvent;

import com.badlogic.gdx.scenes.scene2d.InputListener;

import com.badlogic.gdx.scenes.scene2d.Stage;

import com.badlogic.gdx.scenes.scene2d.ui.Image;

public class StartScreen implements Screen {

 Texture texture;

 Texture textureBg;

 TextureRegion region;

 Stage stage;

 Image image;

 Music music;

 SpriteBatch batch;

   float width;

   float height;

 MyGame game;

   public StartScreen(MyGame game){

 this.game = game;

   }

   @Override

   public void show() {

 width = Gdx.graphics.getWidth();

 height = Gdx.graphics.getHeight();

 stage = new Stage();

 batch = new SpriteBatch();

 texture = new Texture(Gdx.files.internal("data/logo.png"));

 textureBg = new Texture(Gdx.files.internal("data/background.png"));

 region = new TextureRegion(textureBg, 0, 0, 480, 852);

 // 音乐设置

 music = Gdx.audio.newMusic(Gdx.files.internal("data/plane.ogg"));

 music.play();

 music.setLooping(true);

 music.setVolume(15);

 // 开始图片

 setImage();

 stage.addActor(image);

 Gdx.input.setInputProcessor(stage);

   }

   @Override

   public void render(float delta) {

 Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

 batch.begin();

 batch.draw(region, 0, 0, width, height);

 batch.end();

 stage.act();

 stage.draw();

   }

   @Override

   public void resize(int width, int height) {

 // TODO Auto-generated
method stub

   }

   void setImage() {

 image = new Image(texture);

 image.setScale(0.7f);

 image.setPosition(0, height / 2 - image.getHeight() / 2);

 image.addListener(new InputListener() {

 @Override

 public boolean touchDown(InputEvent event, float x, float y,

 int pointer, int button) {

   game.setScreen(game.gameScreen);

   stage.clear();

   return false;

     }

 });

   }

   @Override

   public void hide() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void pause() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void resume() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void dispose() {

 // TODO Auto-generated
method stub

   }

}

（3）GameScreen类代码。

package com.potato;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.InputProcessor;

import com.badlogic.gdx.Screen;

import com.badlogic.gdx.graphics.GL10;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class GameScreen implements Screen {

 MyGame game;

 Texture textureBg1;

 Texture textureBg2;

 Texture planeTexture;

 TextureRegion region1;

 TextureRegion region2;

 SpriteBatch batch;

   float width;

   float height;

   int bg1x, bg1y, bg2x, bg2y;

   float touch_X;

   float touch_Y;

   float touchBaseX;

   float touchBaseY;

   boolean isTouching;

   float dis_X;

   float dis_Y;

   public GameScreen(MyGame game) {

 this.game = game;

   }

   @Override

   public void show() {

 width = Gdx.graphics.getWidth();

 height = Gdx.graphics.getHeight();

 batch = new SpriteBatch();

 textureBg1 = new Texture(Gdx.files.internal("data/background1.png"));

 textureBg2 = new Texture(Gdx.files.internal("data/background2.png"));

 planeTexture = new Texture(Gdx.files.internal("data/plane.png"));

 region1 = new TextureRegion(textureBg1, 0, 0, 480, 852);

 region2 = new TextureRegion(textureBg2, 0, 0, 480, 852);

 bg1x = bg2x = 0;

 bg1y = 0;

 bg2y = bg1y + region1.getRegionHeight();

   }

   void logic() {

 bg1y -= 3;

 bg2y -= 3;

 float RH1;

 float RH2;

 RH1 = region1.getRegionHeight();

 RH2 = region2.getRegionHeight();

 if (bg1y < -RH1) {

 bg1y = bg2y + region1.getRegionHeight();

 }

 if (bg2y < -RH2) {

 bg2y = bg1y + region2.getRegionHeight();

 }

   }

   void touch() {

 // justTouched
是开始按下手指的第一个点。

 if (Gdx.input.justTouched()) {

 touchBaseX = Gdx.input.getX(0);

 touchBaseY = Gdx.input.getY(0);

 } // isTouched
是结束时，手指按下的点。

 else if (Gdx.input.isTouched(0)) {

 touch_X = Gdx.input.getX(0);

 touch_Y = Gdx.input.getY(0);

 }

 dis_X = touch_X - touchBaseX;

 dis_Y = -(touch_Y - touchBaseY);

   }

   @Override

   public void render(float delta) {

 Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

 touch();

 this.logic();

 batch.begin();

 batch.draw(region1, bg1x, bg1y, 320, 852);

 batch.draw(region2, bg2x, bg2y, 320, 852);

 batch.draw(planeTexture, 120 + dis_X, dis_Y, 80, 80);

 batch.end();

   }

   @Override

   public void resize(int width, int height) {

 // TODO Auto-generated
method stub

   }

   @Override

   public void hide() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void pause() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void resume() {

 // TODO Auto-generated
method stub

   }

   @Override

   public void dispose() {

 // TODO Auto-generated
method stub

   }

}

效果图：

点击播放

源码下载：http://pan.baidu.com/share/link?shareid=3350286063&uk=3456175979

写在最后,关于libgdx中地图的背景图片滚动，就暂时给大家介绍到这里，希望对大家有所帮助，下一篇是是关于libgdx框架中《游戏背景移动（二）》的博文，我会继续介绍TiledMap中如何移动游戏背景。如果大家有什么问题可以加我QQ：316344618，一起讨论下。PS:请大家多多留言交流，大家的评论土豆都会看的，也欢迎大家来libgdx的中文论坛来发帖交流，土豆也是会给大家及时解答的。

------------奋斗小土豆丶

2013 年 8 月 22 日

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：libgdx 按电源键返回后白屏问题的解决办法

后一篇：36.游戏背景移动（二）

新浪BLOG意见反馈留言板　欢迎批评指正