Tag 5 – Schrift

veröffentlicht am: 5. Dezember 2012

Heute wollen wir etwas Schrift auf den Bildschirm bringen. Dafür müssen wir unsere Schrift erstmal als BitmapFont generieren. libgdx hat dafür das coole Tool hiero. Es ist per JavaWebStart unter dieser URL verfügbar: http://wiki.libgdx.googlecode.com/git/jws/hiero.jnlp
Mit diesem Tool muss man einfach mal ein bisschen rumspielen, bis man eine Schrift gefunden hat, die einem einigermaßen gefällt.
Dann speichert man diese im assets-Ordner ab. (ggf. in einen Unterordner fonts)
File -> Save BMFont (text) …
Hierbei wird eine .fnt und eine .png Datei gespeichert.

Nun kann man die Schrift ganz einfach laden

font=new BitmapFont(Gdx.files.internal("font/test.fnt"), false);

In der render()-Methode können wir jetzt fast genauso einfach mit der Schrift etwas malen. Die Stage hat ihren eigenen SpriteBatch, deswegen nehmen wir einfach den um die Schrift zu malen.

// draw the stage
stage.draw();

// draw some text :)
stage.getSpriteBatch().begin();
font.draw(stage.getSpriteBatch(), "mega-awesome font :D", 50,80);
stage.getSpriteBatch().end();

Etwas weiteres nützliches, was man für ein echtes Spiel umbedingt braucht, ist mehr Struktur in seinem Sourcecode. Dies erreichen wir nun durch Screens.
Wir unterteilen unser Spiel nun in logische „Bildschirme“, z.B. Splashscreen, Menü, Spielbildschirm.

Die Hauptklasse TestGame implementiert jetzt nicht mehr den ApplicationListener, sondern extended Game:

public class TestGame extends Game{
	@Override
	public void create() {
		setScreen(new SplashScreen());
	}
}

Das einzige, wofür diese Klasse jetzt noch gut ist ist das wechseln der Screens.

Die Screens an sich implementieren das Interface Screen. Um auf das TestGame zugreiffen zu können, wenn ich den Screen wechseln will, gebe ich dieses im Konstruktor mit.

public class SplashScreen implements Screen{

	Texture tree;
	TextureRegion christmasTree;
	Texture ball;
	Texture snow;
	Stage stage;
	BitmapFont font;
	
	TestGame game;
	public SplashScreen(TestGame pGame){
		game=pGame;
		
		tree=new Texture(Gdx.files.internal("graphics/tree.png"));
		christmasTree=new TextureRegion(tree, 0, 0, 450,730);
		ball=new Texture(Gdx.files.internal("graphics/ball.png"));
		snow=new Texture(Gdx.files.internal("graphics/snow.png"));
		
		font=new BitmapFont(Gdx.files.internal("ui/test.fnt"), false);
		
		stage=new Stage();
		

		// our christmas tree
		Image ctree=new Image(christmasTree);
		ctree.setSize(296, 480); // scale the tree to the right size
		ctree.setPosition(-300,0);
		ctree.addAction(moveTo(400-148, 0,1f));
		ctree.setZIndex(0);
		stage.addActor(ctree);
		
		Image ballImage=new Image(ball);
		ballImage.setPosition(400 - 148+60, 170);
		
		ballImage.setOrigin(32,32);
		ballImage.setColor(1,1,1,0);
		ballImage.addAction(sequence(delay(1),parallel(fadeIn(1),rotateBy(360,1)),delay(2f),
				new Action() { // custom action to switch to the menu screen
					@Override
					public boolean act(float delta) {
						game.setScreen(new MenuScreen(game));
						return false;
					}
				}));
	
		
		stage.addActor(ballImage);
		
		// create the snowflakes
		for(int i=0;i<10;i++){
			spawnSnowflake();
		}
	}
	
	@Override
	public void render(float delta) {
		// clear the screen
		Gdx.gl.glClearColor(1,1,1, 1);
		Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
		
		// let the stage act and draw
		stage.act(delta);
		stage.draw();
		stage.setViewport(800,480,false);
		
		// draw our text
		stage.getSpriteBatch().begin();
		font.draw(stage.getSpriteBatch(), "mega awesome-game starts...", 50,80);
		stage.getSpriteBatch().end();
	}

	
	public void spawnSnowflake(){
		final Image snowflake=new Image(snow);
		snowflake.setOrigin(64,64);
		int x=(int) (Math.random()*800);
		snowflake.setPosition(x,480);
		snowflake.setScale((float) (Math.random()*0.8f+0.2f));
		snowflake.addAction(parallel(
				forever(rotateBy(360,(float) (Math.random()*6))),
				sequence(moveTo(x,0,(float) (Math.random()*15)),fadeOut((float) (Math.random()*1)),
					new Action() { // we can define custom actions :)
					
					@Override
					public boolean act(float delta) {
						snowflake.remove(); // delete this snowflake
						spawnSnowflake(); // spawn a new snowflake
						return false;
					}
				}
				)));
		stage.addActor(snowflake);
	}
	
	@Override
	public void resize(int width, int height) {		
	}


	@Override
	public void show() {
	}

	@Override
	public void hide() {
	}

	@Override
	public void pause() {
	}

	@Override
	public void resume() {
	}

	@Override
	public void dispose() {
		tree.dispose();
		ball.dispose();
		snow.dispose();
		
		stage.dispose();
	}
}

Ich hab dabei allerdings gerade noch ein paar coole Dinge gelernt:
Wenn man

import static com.badlogic.gdx.scenes.scene2d.actions.Actions.*;

zu den anderen Imports schreibt, muss man bei Aktionen statt

Actions.moveTo()

nur noch

moveTo()

schreiben.

Auch kann man mit Stages statt einer Kamera zu verwenden, direkt

stage.setViewport(800,480,false);

schreiben.

Der Menü-Screen ist momentan genauso aufgebaut. Morgen werden wir dann schauen, wie wir ein paar coole ui-Elemente da rein kriegen.

geposted in libgdx

Eine Antwort zu “Tag 5 – Schrift”

  1. JohnLocke94 sagt:

    Hey,

    dein Link zum Programm „Hiero“ funktioniert zwar, das Programm selber startet (zumindest bei mir) nicht ohne weiteres Zutun. Ich habe mal nach der direkten *.jar-Datei gesucht und hier gefunden, falls jemand das gleiche Problem haben sollte: http://libgdx.badlogicgames.com/downloads/hiero.jar
    Vielen Dank für das Tutorial!!

    Gruß,

    JohnLocke94

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.