android - escalado del botón scene2d con libgdx

button scaling

Question

No sé si solo soy yo, pero los drawables me confunden. ¿Están destinados a mantener el tamaño que se les da, o hay una forma de escalar la imagen dentro de ellos? Entiendo que pueden usar nueve parche para llenar ciertas áreas estirando una imagen, pero quiero escalar la imagen que se estira. Estoy usando un botón de texto para mis botones de menú, pero son demasiado grandes, y me encantaría saber cómo escalarlos. Estoy recuperando la piel de un atlas, que tiene nueve imágenes de parche. Aquí está la pantalla de configuraciones: Aquí están las imágenes en el paquete que estoy usando: Aquí está la inicialización de TextureAtlas, y Skin:

buttonAtlas = new TextureAtlas(Gdx.files.internal("buttons/buttons.pack"));
buttonSkin = new Skin(buttonAtlas); 

Aquí está la inicialización de ese botón de menú.

TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.up = Assets.buttonSkin.getDrawable("bluebutton");
textButtonStyle.down = Assets.buttonSkin.getDrawable("redbutton");
textButtonStyle.font = font;

buttonMenu = new TextButton("Menu", textButtonStyle);
buttonMenu.pad(20.0f);
buttonMenu.addListener(new ClickListener() {
    @Override
    public void clicked(InputEvent event, float x, float y) {
        game.fade.startFadeOut();
        super.clicked(event, x, y);
    }
});

Y tal vez podría cambiar cómo lo puse en la mesa, o cómo puse la mesa en el escenario?

table.add(buttonMenu).width(Gdx.graphics.getWidth()/4);
stage.addActor(table);

Como último recurso, supongo que podría intentar crear mi propio actor de botón de texto que pudiera escalar, gracias por su tiempo.

Answer 1

Antes que nada, si sabes que tus imágenes son demasiado grandes: lo mejor sería escalar las imágenes a un tamaño más pequeño y luego usar TexturePacker para generar un nuevo TextureAtlas que contenga las imágenes más pequeñas.

De todos modos, puedes escalar el botón de imagen con TableLayout si realmente quieres, ve un ejemplo:

table.add(buttonMenu).width(100).height(100);

Answer 2

La respuesta anterior no funcionó para mí, pero tengo una solución.

Puedes hacer una cámara secundaria y adjuntarla a tu escenario. Para escalar la tabla solo escala el tamaño de la ventana de la cámara secundaria

Un ejemplo sería:

//Heres where you set the scale of your buttons and your table
Camera secondaryCamera = new Camera(Gdx.graphics.getWidth() * scale, 
                                    Gdx.graphics.getHeight() * scale); 


Stage stage = new Stage();
Table table = new Table();
ImageButton button = new ImageButton(drawableUp, drawableDown, drawableChecked);
table.setFillParent(true);

stage.getViewport().setCamera(secondaryCamera);

table.add(ImageButton);
stage.addActor(table);

Esto funciona muy bien cuando lo usas para controles táctiles. Puedes usar una tabla para toda la interfaz de usuario y escalarla a tu gusto independientemente de tus otros elementos del juego;

Answer 3

table.add(buttonMenu).width(100).height(100); debería funcionar, y solo necesita ajustar los parámetros de width y height a su gusto, o puede usar el método setBounds . Aquí hay un ejemplo:

    TextButton myButton = new TextButton("Press Me", style);
    myButton.setBounds(xCoordinate, yCoordinate, width, height);

Answer 4

Puede establecer el tamaño de Drawable en ButtonStyle para cambiar el tamaño de su Button :

float scale = 0.5f;
float currentHeight = textButtonStyle.up.getMinHeight();
textButtonStyle.up.setMinHeight(currentHeight * scale);

Para obtener más información, consulte el documento oficial para el diseño :

Los widgets de UI no configuran su propio tamaño y posición. En cambio, el widget padre establece el tamaño y la posición de cada hijo. Los widgets proporcionan un tamaño mínimo, preferido y máximo que el padre puede usar como sugerencias. Algunos widgets principales, como Table and Container, pueden tener restricciones sobre cómo dimensionar y ubicar los elementos secundarios. Para dar a un widget un tamaño específico en un diseño, el tamaño mínimo, preferido y máximo del widget se dejan solos y las restricciones de tamaño se establecen en el elemento principal.

Y puede encontrar la implementación de Button.getPrefHeight() en el código fuente :

public float getPrefHeight () {
    float height = super.getPrefHeight();
    if (style.up != null) height = Math.max(height, style.up.getMinHeight());
    if (style.down != null) height = Math.max(height, style.down.getMinHeight());
    if (style.checked != null) height = Math.max(height, style.checked.getMinHeight());
    return height;
}