java - LibGDX: Colas personalizadas de Skin+dibujan incorrectamente

coordinates scene2d

Question

Estoy usando libgdx para hacer un juego simple y quiero usar scene2Dui y un escenario y máscara para simplificar mucho mi código de posicionamiento / tamaño.

Para simplificar aún más el posicionamiento de todo, también quiero definir un sistema de coordenadas personalizado para que, independientemente del tamaño de la pantalla en píxeles, el código creará automáticamente una superposición de cuadrícula y posicionará / dimensionará todos mis elementos correctamente.

El problema que estoy teniendo se relaciona con este nuevo sistema de coordenadas y cómo funciona con la piel. Básicamente, creo un botón basado en el estilo de la máscara y lo pongo en una tabla para que se ajuste según mis coordenadas. También creo una imagen, pero esta vez cargo la región directamente y la coloco yo mismo.

Las líneas de depuración muestran que el botón funciona bien y se comporta como se esperaba con respecto a los clics; si hago clic fuera de la tabla, no hay reacción a pesar del hecho de que la imagen está volada. Cambiar el tamaño de la ventana también se comporta como se esperaba.

En algún lugar, el escenario debe preguntarle a la piel qué tan grande es la imagen del botón y está respondiendo en píxeles donde debería estar respondiendo en mis coordenadas. ¿Hay alguna manera de escalar el revestimiento hasta mis coordenadas y actualizarlo cuando se cambia el tamaño de una ventana?

Aquí está el código relevante:

// *** Layout Coordinates ***//
// Use the pixels per unit to define a grid and orient
// all the elements of the screen based on that grid.
private static final float CAMERA_WIDTH = 5f; // how many boxes wide the screen is
private static final float CAMERA_HEIGHT = 8f; // how many boxes high the screen is
// Button in the table, all in my coordinate system
private static final float BUTTON_HEIGHT = 1.0f;
private static final float BUTTON_WIDTH = 3.0f;
private static final float TABLE_PADDING_LEFT = 1.0f;
private static final float TABLE_PADDING_TOP = 1.0f;
// Floating image, all in my coordinate system
private static final float IMAGE_HEIGHT = 4.0f;
private static final float IMAGE_WIDTH = 3.0f;
private static final float IMAGE_ORIGIN_X = 1.0f;
private static final float IMAGE_ORIGIN_Y = 1.0f;
private TextButton myButton;
private Image myImage;
private final Stage myStage;
private final Skin mySkin;
private int width;
private int height;
public LayoutTestScreen() {
width = Gdx.graphics.getWidth();
height = Gdx.graphics.getHeight();
Gdx.app.log("SIZE_DEBUG", "Constructing to "+ width + "x" + height);
myStage = new Stage(width, height, true, game.getSpriteBatch());
mySkin = new Skin(Gdx.files.internal("uiskin.json"));
}
@Override
public void resize(int width, int height) {
Gdx.app.log("SIZE_DEBUG", "Resizing to "+ width + "x" + height);
this.width = width;
this.height = height;
myStage.setViewport(CAMERA_WIDTH, CAMERA_HEIGHT, false, 0, 0, this.width, this.height);
scaleSkinToMatchScreen();
}
@Override
public void show() {
super.show();
scaleSkinToMatchScreen();
buildButtonTable();
buildImage();
Gdx.input.setInputProcessor(myStage);
}
public void scaleSkinToMatchScreen(){
//TODO: Use CAMERA_HEIGHT / this.height and CAMERA_WIDTH / this.width to scale
//the skin''s images down (or up!) to match our coordinate system.
}
private void buildButtonTable() {
// Adds a table of action buttons in the top-left corner of the screen
Table buttonTable = new Table(mySkin);
//Set cell defaults and position the table
buttonTable.defaults().width(BUTTON_WIDTH);
buttonTable.defaults().height(BUTTON_HEIGHT);
buttonTable.top().left();
buttonTable.padLeft(TABLE_PADDING_LEFT).padTop(TABLE_PADDING_TOP);
//Add a TextButton to the table
myButton = new TextButton("button", mySkin);
myButton.setColor(Color.RED);
myButton.addListener(new ChangeListener() {
@Override
public void changed(ChangeEvent event, Actor actor) {
Gdx.app.log("BUTTON","Button pressed!");
}
});
buttonTable.add(myButton);
buttonTable.row();
//Add the table to the stage
buttonTable.setFillParent(true);
buttonTable.debug();
myStage.addActor(buttonTable);
}
private void buildImage(){
// Create a new image, size and position it, and then put it in the stage.
myImage = new Image();
myImage.setX(IMAGE_ORIGIN_X);
myImage.setY(IMAGE_ORIGIN_Y);
myImage.setWidth(IMAGE_WIDTH);
myImage.setHeight(IMAGE_HEIGHT);
myImage.setDrawable(new TextureRegionDrawable(new TextureAtlas("images/cards/CardImages.pack").findRegion("b1fv")));
myStage.addActor(myImage);
}
@Override
public void render(float delta) {
super.render(delta);
myStage.draw();
myStage.act(delta);
Table.drawDebug(myStage);
}

Y esto es lo que parece

¿Qué pongo en scaleSkinToMatchScreen () para escalar todas las imágenes de la piel a mis coordenadas?

Answer 1

Sí, el botón usa un parche nueve. Puede configurarlo definiendo el estilo (incluidas las fuentes) específicamente en el JSON y haciendo referencia a un archivo de paquete de un atlas de texturas. Las bibliotecas scene2d ui son meticulosas en el mejor de los casos, por lo que va a ser necesario jugar un poco para que las cosas funcionen correctamente. También recomendaría usar el intercambio de código caliente para obtener su posición y tal hecho correctamente. Es mucho más rápido que reiniciar su aplicación para cada cambio.

Cambio de código caliente (suponiendo que está usando eclipse, no puede hablar en nombre de otros IDE):

1. Ejecute su programa en modo de depuración.
2. Haga cambios en el editor de código IDE
3. Guarde sus cambios
4. Los cambios se intercambian y deben aparecer en su aplicación.

También puedes usar esta herramienta:

https://github.com/cobolfoo/gdx-skineditor

Es muy temprano, en términos de su desarrollo, pero funciona bastante bien una vez que solucionas los errores y la rareza.

También es evidente que su libGDX debe actualizarse a la última versión. Es de código abierto, y los errores aparecen de vez en cuando.