Game Dev: Изучаем Scene2d и делаем полноценное меню

Содержание:
Пора доделать меню и для этого мы будем использовать пакет Scene2d - местный аналог стандартных графических пакетов AWT/Swing.
Я мог бы начать с теории и основ на примере класса Actor, но нет, эта статья про использование уже созданных компонентов. Теорию читайте в оффициальных статьях.
Скажу лишь, что есть класс Stage (а-ля фреймворк), связывающий и обрабатывающий графические объекты, которые являются наследниками Actor.

Ставим Skin

Scene2d имеет некоторые отличительные особенности, например, графический вид зависит от класса Skin, объект которого необходимо давать каждому графическому компоненту. Этот Skin по сути - набор из TextureRegion, т.е. графической части компонентов. Есть регион кнопки, есть регион ползунка, регион чекбокса и т.д..
Для этой статьи взят стандартный uiskin, который вы также можете скачать в конце статьи с родного хгм.
Скачанные файлы необходимо кинуть в папку assets, а в главном классе игры нужно создать глобальную переменную.
	public Skin skin;
А затем - загрузить в неё скин. Разумеется, перед выбором активного окна.
	skin = new Skin(Gdx.files.internal("uiskin.json"));

Создаём Stage

Открываем MainMenuScreen и создаём переменную
	private Stage ui;
и инициализируем
	ui = new Stage(new ScreenViewport(), game.batch);
	Gdx.input.setInputProcessor(ui);
Благодаря ScreenViewport интерфейс игры будет занимать весь экран и иметь то же разрешение, что и окно приложения. Вторая строка включает управление графическими компонентами объекта Stage.
А теперь включаем в работу.
	public void render(float delta) {
		Gdx.gl.glClearColor(0, 0, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        ui.act(delta);
	    ui.draw();
	}
Методе act(delta) вызывает обновление состояния компонентов, а draw() - их отрисовку.
Как вы видите, были убраны отрисовка текста и отлов клика. Мы заменим их текстовой меткой и кнопкой.

Текстовая метка

Начинаем, разумеется, с создания переменной. Не забудьте, что компоненты мы берём из пакета "com.badlogic.gdx.scenes.scene2d.ui"
	private Label l;
После инициализации мы можем её создать и задать координаты.
	public MainMenuScreen(Drop game){
		...
		
		l = new Label("Droprain", game.skin);
		l.setPosition(Gdx.graphics.getWidth()/2-l.getWidth()/2, Gdx.graphics.getHeight()-100);
		ui.addActor(l);
	}
Конструктор принимает в качестве аргументов строку, которую будет писать, и скин, которым будет рисовать. Центрируем метку в верхней части экрана и добавляем в список компонентов нашего Stage.

Кнопки

Осталось лишь сделать 2 кнопки: старт и выход. Делаются они аналогичным способом:
	private TextButton start;
	private TextButton exit;
	start = new TextButton("Play", game.skin);
	start.setPosition(Gdx.graphics.getWidth()/2-start.getWidth()/2, Gdx.graphics.getHeight()-200);
	ui.addActor(start);
	
	exit = new TextButton("Exit", game.skin);
	exit.setPosition(Gdx.graphics.getWidth()/2-exit.getWidth()/2, Gdx.graphics.getHeight()-300);
	ui.addActor(exit);
Всё, что осталось - повесить действия на эти кнопки. Вы ведь знаете, как это делается в стандартных библиотеках Java?
	start.addListener(new ClickListener(){
		public void clicked(InputEvent event, float x, float y){
			game.setScreen(new GameScreen(game));
			dispose();
		}
	});
	
	exit.addListener(new ClickListener(){
		public void clicked(InputEvent event, float x, float y){
			Gdx.app.exit();
			dispose();
		}
	});
Вот и всё - двухкнопочное меню готово. Если хотите увидеть и другие компоненты в деле - смотрите наздоровье.


Views: 2 585

Комментарии пока отсутcтвуют.