(libgdx小结)背景移动(1)_朋友圈背景图拖不到最上面-优快云博客

本文详细介绍了游戏开发中背景滚动的实现原理及应用实例，包括如何使用多张背景图片无缝连接并实现平移效果，以及通过代码示例展示整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚屏原理

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

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

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

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

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

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

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

二、应用举例

MyGame

package com.example.groupactiontest;

import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;

public class MyGame extends Game {

	Music music;
	StartScreen startScreen;
	GameScreen gameScreen;
	
	@Override
	public void create() {
		startScreen = new StartScreen(this);
		gameScreen = new GameScreen(this);
		
		music = Gdx.audio.newMusic(Gdx.files.internal("plane.ogg"));
		music.play();
		music.setLooping(true);
		music.setVolume(15f);
		
		this.setScreen(startScreen);
		
	}

}

StartScreen

package com.example.groupactiontest;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.Texture;
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 {

	MyGame game;
	
    Image logoImage;
    Image bgImage;
    
    Stage stage;
    
	public StartScreen(MyGame game) {
		this.game = game;
	}
	
	
	@Override
	public void dispose() {
		// 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 render(float arg0) {
		Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
		
		stage.act();
		stage.draw();
	}

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

	}

	@Override
	public void resume() {
		// TODO Auto-generated method stub

	}

	@Override
	public void show() {
		stage = new Stage();
		
		Texture logoTexture = new Texture(Gdx.files.internal("logo.png"));
	    Texture bgTexture = new Texture(Gdx.files.internal("background.png"));
	    
	    logoImage = new Image(logoTexture);
	    logoImage.setPosition(240-(logoTexture.getWidth()/2), 400);
	    
	    bgImage = new Image(bgTexture);
	    bgImage.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
	    
	    logoImage.addListener(new InputListener(){
	    	@Override
	    	public boolean touchDown(InputEvent event, float x, float y,
	    			int pointer, int button) {
	    		
	    		game.setScreen(game.gameScreen);
	    		
	    		stage.clear();
	    		
	    		return true;
	    	}
	    });
	    
	    stage.addActor(bgImage);
	    stage.addActor(logoImage);
	    
	    
	    Gdx.input.setInputProcessor(stage);
	    
	   
	}

}

GameScreen

package com.example.groupactiontest;

import com.badlogic.gdx.Gdx;
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 bgTexture1;
	Texture bgTexture2;
	
	TextureRegion bgTextureRegion1;
	TextureRegion bgTextureRegion2;
	
	
	SpriteBatch batch;
	
	float bg1x,bg1y,bg2x,bg2y;
	
	//以下逻辑用来处理飞机移动逻辑
	float beginTouchedX,beginTouchedY,endTouchedX,endTouchedY;
	Texture planeTexture;
	float touchedX,touchedY;
	
	public GameScreen(MyGame game) {
		this.game = game;
	}
	
	@Override
	public void dispose() {
		// 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 render(float arg0) {
		Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
		
		logic();
		
		touch();
		
		batch.begin();
		
		//其实这个时候bg1x和bg2x一直都为0
		batch.draw(bgTextureRegion1, bg1x, bg1y, 480, 852);
		batch.draw(bgTextureRegion2, bg2x, bg2y, 480, 852);
		
		batch.draw(planeTexture, 120 + touchedX, touchedY,120,120);//touchedX之所以要加120是为了矫正位置
//		batch.draw(planeTexture, beginTouchedX, beginTouchedY,120,120);
		batch.end();
	}

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

	}

	@Override
	public void resume() {
		// TODO Auto-generated method stub

	}

	@Override
	public void show() {
		batch = new SpriteBatch();
		
		bgTexture1 = new Texture(Gdx.files.internal("background1.png"));
		bgTexture2 = new Texture(Gdx.files.internal("background2.png"));
		
		bgTextureRegion1 = new TextureRegion(bgTexture1,0,0,480,852);
		bgTextureRegion2 = new TextureRegion(bgTexture2,0,0,480,852);
	    
		bg1x = bg2x = 0;
		bg1y = 0;
		bg2y = bg1y + bgTextureRegion1.getRegionHeight();
		
		
		planeTexture = new Texture(Gdx.files.internal("plane.png"));
		
	}
	
	/**
	 * 背景移动
	 */
	public void logic(){
		bg1y -= 3;
		bg2y -= 3;
		
		float RH1 = bgTextureRegion1.getRegionHeight();
		float RH2 = bgTextureRegion2.getRegionHeight();
		
		if(bg1y < -RH1){
			bg1y = bg2y + bgTextureRegion2.getRegionHeight();
		}
		
		if(bg2y < -RH2){
			bg2y = bg1y + bgTextureRegion1.getRegionHeight();
		}
	}

	
	/**
	 * 移动飞机
	 */
	public void touch(){
		
		if(Gdx.input.justTouched()){
			beginTouchedX = Gdx.input.getX(0);
			beginTouchedY = Gdx.input.getY(0);
		}
		
		if(Gdx.input.isTouched()){
			endTouchedX = Gdx.input.getX(0);
			endTouchedY = Gdx.input.getY(0);
		}
		
		touchedX = endTouchedX - beginTouchedX;
		touchedY = -(endTouchedY - beginTouchedY);//这里要取反。否则上下划的时候运动会相反
	}
}

三、效果图