Nupu loomine¶

Vaatleme, kuidas luua nuppe libGDX-is.

Nupud on UI jaoks vajalikud elemendid.

Lihtsustatult öeldes toimib nupp libGDX-is näitlejana (Actor).

Näitleja renderdamine hõlmab selle paigutamist lavale (Stage) koos teiste ekraani elementidega. Stage kutsub seejärel iga kaadri ajal näitlejate act() meetodit (oleku uuendamine) ja draw() meetodit (ekraani joonistamine).”

Vaatame, kuidas luua erinevaid nuppe libGDX-is, sealhulgas TextButton, ImageButton ja ImageTextButton.

Kuidas alustada nupu loomisega?¶

Seadistage lava (Stage), mis vastutab UI elementide kuvamise ja sisendi töötlemise eest.

public class MyGame extends ApplicationAdapter{

    private Stage stage;

    @Override

    public void create() {

        stage = new Stage(new ScreenViewport());

        Gdx.input.setInputProcessor(stage);

    }

    @Override

    public void render() {

        // Clear the screen

        Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);

        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        // Update and render the stage

        stage.act(Gdx.graphics.getDeltaTime());

        stage.draw();

    }

}

Skin ja Font¶

Enne nupu loomist on vaja kahte olulist ressurssi: Skin ja Font. Need määravad, kuidas teie nupud ja muud UI elemendid välja näevad.

Skin on libGDX-is konteiner, mis hoiab endas kõiki kasutajaliidese jaoks vajalikke ressursse. See hõlmab pilte (drawables), fonte, värve ja stiile. Skin võimaldab hallata kõiki UI ressursse ühest kohast, muutes stiilide taaskasutamise lihtsaks. Tavaliselt laetakse Skin JSON-failist, mis kirjeldab kõiki elemente.

Näiteks skin.getDrawable("button-up") otsib Skin-ist ressurssi nimega "button-up", mis on defineeritud kui pilt nupu tavalise oleku jaoks.

Teksti kuvamiseks on vaja fonti. LibGDX kasutab BitmapFont klassi.

Fondi saab luua mitmel viisil, kuid levinud meetod on kasutada FreeTypeFontGenerator-it, mis võimaldab luua BitmapFont-i otse .ttf või .otf fondifailidest.

// Loo Skin ja Font
skin = new Skin();

// Lae tekstuurid nuppude jaoks
buttonUpTexture = new Texture(Gdx.files.internal("button-up.png"));
buttonDownTexture = new Texture(Gdx.files.internal("button-down.png"));


// Lisa tekstuurid Skin-i, et saaksime neile nimega viidata
skin.add("button-up", new TextureRegionDrawable(new TextureRegion(buttonUpTexture)), Drawable.class);
skin.add("button-down", new TextureRegionDrawable(new TextureRegion(buttonDownTexture)), Drawable.class);


// Loo generaator fondifailist
FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/myfont.ttf"));

FreeTypeFontParameter parameter = new FreeTypeFontParameter();

// Määra fondi suurus
parameter.size = 24;

// Genereeri BitmapFont ja salvesta see muutujasse
BitmapFont font = generator.generateFont(parameter);

// Vabasta generaatori ressursid, kui seda enam ei vajata
generator.dispose();

TextButton¶

TextButton on lihtne nupp, millel on tekst.

TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();

textButtonStyle.font = font;

textButtonStyle.up = skin.getDrawable("button-up");

textButtonStyle.down = skin.getDrawable("button-down");

TextButton textButton = new TextButton("Click me", textButtonStyle);

textButton.setPosition(100, 100);

textButton.addListener(new ChangeListener() {

    @Override

    public void changed(ChangeEvent event, Actor actor) {

        // Action to perform when button is clicked

    }

});

stage.addActor(textButton);

Seletus koodi kohta:

TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();

Loob TextButtonStyle'i eksemplari (Instance). See klass määrab TextButtoni välimuse, sealhulgas selle fondi ja taustapildid erinevate olekute jaoks (nt normal, pressed, disabled).

textButtonStyle.font = font;

Määrab nupu stiilile fondi (mis on juba loodud ja salvestatud muutujasse font).

textButtonStyle.up = skin.getDrawable("button-up");

Määrab nupu välimuse, kui see on tavalises (normal) olekus, hankides joonistatava kujutise nimega button-up.

textButtonStyle.down = skin.getDrawable("button-down");

Määrab nupu välimuse, kui see on vajutatud (pressed) olekus, hankides joonistatava kujutise nimega button-down.

TextButton textButton = new TextButton("Click me", textButtonStyle);

Loob TextButtoni textButtonStyle abil. Nupule kuvatakse tekst Click me. Stiil tagab selle olekute jaoks sobiva välimuse.

textButton.setPosition(100, 100);

Määrab nupu asukoha laval (Stage), kusjuures nupu vasak alumine nurk on ekraani koordinaatides (x, y).

textButton.addListener(new ChangeListener() { ... });

Lisab nupule kuulaja (Listener). See kuulaja tuvastab nupu oleku muutused, näiteks selle klõpsamise.

Järgnevad nupud töötavad sarnase loogika põhjal.

Näide (example-game)

Lisaks eeltoodule võib nuppu luua modulaarsema ja korduskasutatavama lahendusega, nagu on tehtud example-game projektis. Seal kasutatakse spetsiaalset ButtonComponents klassi, et luua nuppe koos klikikuulajatega:

public static TextButton getButton(int fontSize, String text, OnClickHandler onClickHandler) {
    TextButtonStyle style = createButtonStyle(fontSize);
    TextButton button = createButtonWithPadding(text, style);

    ClickListener clickListener = new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
            onClickHandler.handleClick();
            super.clicked(event, x, y);
        }
    };
    button.addListener(clickListener);
    return button;
}

See meetod võimaldab luua TextButton -i, andes kaasa teksti, fondi suuruse ja funktsiooni (lambda või method reference), mida käivitada, kui nuppu klikitakse. See muudab nupu loomise korduvkasutatavaks, sest kõik stiilid ja loogika on keskendatud ühte kohta.

ImageButton¶

ImageButton kuvab teksti asemel pildi.

ImageButton.ImageButtonStyle imageButtonStyle = new ImageButton.ImageButtonStyle();

imageButtonStyle.imageUp = skin.getDrawable("button-image-up");

imageButtonStyle.imageDown = skin.getDrawable("button-image-down");

ImageButton imageButton = new ImageButton(imageButtonStyle);

imageButton.setPosition(200, 200);

imageButton.addListener(new ChangeListener() {

    @Override

    public void changed(ChangeEvent event, Actor actor) {

        // Action to perform when button is clicked

    }

});

stage.addActor(imageButton);

ImageButtoni loomine sarnaneb TextButtoni omaga, kuid stiili (ImageButtonStyle) puhul kasutatakse imageUp ja imageDown atribuute, et määrata pildid nupu erinevatele olekutele. Erinevalt TextButton-ist ei vaja see fonti, kuna kuvab ainult pilti.

Projekti (example-game) näites kasutatakse samuti tekstuuripõhiseid Drawable-objekte nuppude loomisel:

private static TextButtonStyle createButtonStyle(int fontSize) {
    TextButtonStyle style = new TextButton.TextButtonStyle();
    style.fontColor = BLACK;
    style.font = getPixelFont(fontSize);
    style.up = new TextureRegionDrawable(new TextureRegion(new Texture("button/up.png")));
    style.over = new TextureRegionDrawable(new TextureRegion(new Texture("button/down.png")));
    return style;
}

Siin luuakse TextButtonStyle, kus taustpildid (up ja over) määratakse TextureRegionDrawable abil konkreetsetest pildifailidest. See võimaldab kasutada kohandatud graafikat ilma skin-failita.

ImageTextButton¶

ImageTextButton ühendab pildi ja teksti.

ImageTextButton.ImageTextButtonStyle imageTextButtonStyle = new ImageTextButton.ImageTextButtonStyle();

imageTextButtonStyle.imageUp = skin.getDrawable("button-image-up");

imageTextButtonStyle.imageDown = skin.getDrawable("button-image-down");

imageTextButtonStyle.font = font;

ImageTextButton imageTextButton = new ImageTextButton("Click me", imageTextButtonStyle);

imageTextButton.setPosition(300, 300);

imageTextButton.addListener(new ChangeListener() {

    @Override

    public void changed(ChangeEvent event, Actor actor) {

        // Action to perform when button is clicked

    }

});

stage.addActor(imageTextButton);

ImageTextButton on hübriid, mis kombineerib ImageButton-i ja TextButton-i omadusi. Selle stiil (ImageTextButtonStyle) vajab nii piltide (imageUp, imageDown) kui ka fondi (font) määramist, et kuvada korraga nii pilti kui ka teksti.

Nupule funktsionaalsuse lisamine¶

Määra ChangeListener-i changed meetodi sees tegevused, mida teha, kui nuppu vajutatakse.

Teisele ekraanile või stseenile lülitumine¶

Kui soovite nuppu vajutades lülituda teisele ekraanile või stseenile, saate kasutada libGDX-i Screen klassi.

Esiteks veenduge, et olete oma mängu ekraanid(Screen) korralikult seadistanud.

Seejärel, changed meetodi sees, kutsuge ekraani vahetamise meetod.

@Override

public void changed(ChangeEvent event, Actor actor) {

    game.setScreen(new NextScreen(game)); // Assuming 'game' is your Game object

}

Helide mängimine¶

Helide mängimiseks võite kasutada libGDX-i Sound klassi.

Esiteks laadige helifail ja seejärel, changed meetodi sees, mängige heli.

Sound buttonClickSound = Gdx.audio.newSound(Gdx.files.internal("button_click.wav"));

@Override

public void changed(ChangeEvent event, Actor actor) {

    buttonClickSound.play();

}

Konkreetsete mängusündmuste käivitamine¶

Kui soovite nupu vajutamisel käivitada konkreetseid mängusündmusi, võite otse kutsuda vastavaid meetodeid changed meetodi sees.

@Override

public void changed(ChangeEvent event, Actor actor) {

    gameManager.triggerEvent(); // Call your game manager's method to trigger an event

}

Kohandatud toimingute määratlemine¶

Samuti saate määratleda kohandatud toimingud, mida tuleb changed meetodi sees teha.

Näiteks võite soovida liigutada tegelast, luua objekti või kuvada sõnumit.

@Override

public void changed(ChangeEvent event, Actor actor) {

    player.moveRight();

    gameManager.spawnEnemy();

    showMessage("Button clicked!");

}

Näide (example-game)

Projekti example-game ButtonComponents klassis kasutatakse eraldatud OnClickHandler liidest, et anda igale nupule oma tegevus, ilma et oleks vaja igal pool ChangeListener-objekte kirjutada:

Nuppu luues saab funktsiooni lihtsalt kaasa anda:

Selline lähenemine võimaldab hoida funktsionaalsust kergesti muudetavana.

Teised UI elemendid¶

Nupud on vaid üks osa scene2d.ui teegist. Selleks, et oma teadmisi laiendada, on siin loetelu teistest olulistest elementidest. Igaüks neist pakub erinevat funktsionaalsust kasutajaliidese loomiseks.

Label: Lihtne tekstisilt, mida kasutatakse info kuvamiseks.
TextField: Sisestusväli, kuhu kasutaja saab teksti kirjutada.
Slider: Liugur, mis võimaldab kasutajal valida väärtust teatud vahemikus.
CheckBox: Märkeruut, mida saab sisse või välja lülitada.
ScrollPane: Keritav ala, mis võimaldab kuvada sisu, mis ei mahu ekraanile.
Window: Aken, mida saab liigutada ja sulgeda ning mis võib sisaldada teisi UI elemente.

Täieliku nimekirja ja üksikasjalikud juhised leiate ametlikult LibGDX Wiki lehelt: (Scene2d.ui.)

Lõpetuseks¶

LibGDX kasutab ressursse (nagu tekstuurid, helid, fondid), mis asuvad sageli väljaspool Java virtuaalmasina (JVM) mäluhaldust, näiteks graafikakaardi (GPU) mälus. Java prügikoristaja (Garbage Collector) ei oska neid ressursse automaatselt vabastada. Seetõttu tuleb need käsitsi vabastada, kasutades dispose() meetodit.

Veenduge, et rakenduse sulgemisel hävitate kõik hävitatavad ressursid, nagu tekstuurid ja fondid.

@Override

public void dispose() {

    stage.dispose();

    skin.dispose();

    font.dispose();

}