Libgdx – Kamera i Mapa kafelkowa

Właściwie każda gra wymaga tła. W przypadku prostych produkcji nierzadko możemy zdecydować się na statyczny obraz. Niemniej znacznie częściej potrzebujemy ruchomego obrazu podązajączego za graczem, a nawet edytora poziomów. W tym celu świetnie nadaję się program Tiled Map Editor

Tiled Map Editor jest popularnym rozwiązaniem do tworzenia poziomów w 2D wykorzystując format TMX i jest dostępny pod adresem https://www.mapeditor.org
Obsługa samego programu jest intuicyjna. Tworzymy nowy dokument możemy tu wybrać rodzaj mapy (Izometryczna, Ortagonalna, Heksagonalna) oraz ilość kafelków i ich rozmiar. Będziemy dalej tworzyć klasyczny top down shooter także wybierzmy orientacje Ortagonalną.

W celu stworzenia naszej mapy potrzebujemy odpowiedni zestaw kafelków (Tileset) osobiście skorzystałem z tego httpss://vxresource.files.wordpress.com/2010/03/tilea2.png Wybieramy mapa → nowy zestaw kafelków i źródło obrazka. Sam edytor jest bardzo prosty wybieramy interesujące nasz kafelki i rysujemy je ekranie. Na potrzeby tego instruktażu stworzyłem taką oto mapę jednak z pewnością jesteście w stanie stworzyć coś lepszego.

map
map.tmx

Przejdźmy teraz do kodu zanim zaczniemy animować nasze tło warto wspomnieć tu o kamerze. Kamera pozwala nam na na łatwe zarządzanie aktywnym widokiem jeśli nasza plansza składa się z więcej niż jednego segmentu. Sama jego najprostsza implementacja wygląda następująco:

public class MyGdxGame extends ApplicationAdapter {
	
	private OrthographicCamera camera;
	  private SpriteBatch batch;

	    private Sprite imageSprite;
	
	    @Override
	    public void create () {
	    	
	    	imageSprite = new Sprite(new Texture(Gdx.files.internal("bord.jpg")));
	        imageSprite.setSize(236, 270);   	
	    	
	    	camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
	    	camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
	    	 batch = new SpriteBatch();
	    
	    }

	    @Override
	    public void render () {
	    	camera.update();
	    	batch.setProjectionMatrix(camera.combined);

	        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

	        batch.begin();
	        imageSprite.draw(batch);
	        batch.end();
	    }
}

OrthographicCamera przyjmuję dwa parametry wysokość oraz szerokość określająca szerokość oraz wysokość naszego widoku. Jest to bardzo wygodne przy pracy z różnymi rozdzielcośćiami urządzeń bowiem możemy pod podać interesujący nasz rozmiar kamery, a jego zawartość zostanie odpowiednio przeskalowana przez bibliotekę. camera.position pozwala nam określić położenie środku naszej kamery. Podczas renderowania widoku ciągle dokonujemy jej aktualizaji oraz informujemy nasz sprite batch o wykorzystanej kamerze i tego jak należy wyświetlać obraz poprzez metodę setProjectionMatrix(camera.combined).

Wróćmy do naszego tła zapisany za pomocą programu Tiles. Plik .tcx wrzucamy do foldery assets wraz z tilestem. Stwórzmy dwie klasy jedną z nich będzie klasa Background druga zaś MyGdxGame które przedstawiają się następująco:

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;

public class Background {
	private TiledMap map; 
	private OrthogonalTiledMapRenderer renderer;
	private float scale;
	
	public Background() {

		scale = Gdx.graphics.getWidth()/1280f;
		map = new TmxMapLoader().load("map.tmx");
		renderer = new OrthogonalTiledMapRenderer(map,scale);
	}

	public void update() {
	}

	public void render(OrthographicCamera camera) {
		renderer.setView(camera);
		renderer.render();
	}

	public void dispose() {
		map.dispose();
		renderer.dispose();
	}

	public TiledMap getMap() {
		return map;
	}

	public void setMap(TiledMap map) {
		this.map = map;
	}

	public OrthogonalTiledMapRenderer getRenderer() {
		return renderer;
	}

	public void setRenderer(OrthogonalTiledMapRenderer renderer) {
		this.renderer = renderer;
	}

}
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;

public class MyGdxGame extends ApplicationAdapter {
	
	private OrthographicCamera camera;
	private Background background;
	
	    @Override
	    public void create () {
	    	camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
	    	background = new Background();
	    	camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
	    }

	    @Override
	    public void render () {
	    	Gdx.gl.glClearColor(1, 0, 0, 1);
	        Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
	        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
	        
	        camera.update();
	    	background.render(camera);
	    	camera.translate(0, 25 * Gdx.graphics.getDeltaTime(), 0);
	    }
}

W klasie Background tworzymy trzy zmienne są nimi scale wykorzystywanym do skalowania mapy (1280 to szerokość naszej mapy), obiekt przechowujący naszą mapę oraz OrthogonalTiledMapRenderer który jest odpowiedzialny za rysowanie naszej mapy. Same zaś działanie jest proste bowiem w funkcji renderer wybieramy kamerę na której ma być rysowany obraz i dokonujemy renderowania.

W klasie MyGdxGame podobnie jak wcześniej tworzymy obiekt kamery oraz niedawno napisaną klasę background. W metodzie render dodajemy metodę camera.translate która pozwala na przesunięcie kamery wzdłuż osi x,y,z. Jeśli zastanawiacie się do czego służy metoda Gdx.graphics.getDeltaTime() to jest to metoda zwracająca czas jaki upłynął od ostatniego wygenerowanego obrazu. W przypadku szybkich urządzeń nasz obraz przesuwałby się szybciej i wolniej dla wolniejszych. Dzięki pomnożeniu naszej wartości przez parametr deltaTime możemy spowodować że prędkość ta będzie taka sama na różnych urządzeniach. Ostatecznie wynik powinien być następujący (Jeśli mamy widok horyzontalny sprawdźmy czy w android manifest android:screenOrientation mamy ustawiony na „portrait”).

Jedno przemyślenie nt. „Libgdx – Kamera i Mapa kafelkowa

  1. Hurrah, that’s what I was searching for, what a material! present here at this website, thanks admin of this website.

Dodaj komentarz

WordPress Video Lightbox Plugin