5. diel - Programujeme Android hru - Základné vstavané triedy druhýkrát

Dobrého dňa vo spolok,

v minulom diele sme si urobili dohodu, ktorú budeme využívať v podstate až do konca seminára. Rozobrali sme si dôležité pojmy Delta a FPS a vytvorili novú triedu GameScreen.java. Dnes sa prostredníctvom vykreslenie základných geometrických útvarov na obrazovku zoznámime s ďalšími základnými vstavanými triedami, ktoré budeme do budúcna potrebovať. Budeme pokračovať v našej triede GameScreen.java, dnes v nej nebudeme nič mazať, budeme len pripisovať. Zatiaľ poznáme vstavané triedy:

• BitmapFont - obsahuje písmo
• SpriteBatch - stará sa o vykreslenie obdĺžnikového grafického elementu

A naučíme sa ďalšie triedy:

• Circle - ako už vyplýva z názvu tejto triedy, tak vďaka nej môžeme podľa našich požiadaviek vytvoriť matematicky opísateľný geometrický útvar kruh. Základnými parametrami inštancie sú samozrejme súradnice stredu a polomer v pixeloch.
• Rectangle - opäť ako z názvu vyplýva, podľa triedy v pamäti vytvoríme inštanciu obdĺžnika (štvorca), jeho parametre sú súradnice ľavého spodného bodu (rohu), jeho šírka a výška (px).
• Vector2 - trieda má vyjadrovať veličinu vektor. To málo, čo viem o vektora, je, že má nielen veľkosť, ale aj smer. Používali sme ho v škole na hodinách fyziky na vyjadrenie sily. Cítim, že na vyjadrenie vektora v kartézské sústave súradníc budem potrebovať buď dva body, ktoré určí počiatok vektora a koncový bod, alebo len začiatok a uhol? Instance vektora obsahuje ale len jeden bod, takže si predstavujem, že ako začiatok vždy slúži bod [0,0]. S vektory môžeme vykonávať matematické operácie napr. Ich spojenia pomocou metódy add (Vector2 v), násobenie pomocou scl (Vector2 v) atď. Sám skôr inštanciu Vectoru2 využívam proste len ako dve čísla, ktorá mi vyjadrujú nejaký bod na obrazovke.
• ShapeRenderer - zase do angličtiny odvodíme: shape - tvar, render - poskytnúť, renderer - poskytovateľ. Trieda sa nám stará o vykresľovanie nejakých tvarov na obrazovku.

Ideme do praxe, spustíme Eclipse, otvoríme našej triedu GameScreen.java a ako ju máme z predchádzajúceho dielu, tak do nej dnes budeme len pridávať. Chceme vykresľovať tvary, takže najskôr musíme vytvoriť inštanciu triedy ShapeRenderer. Pod existujúce premenné si teda pridajme:

private ShapeRenderer shapeRenderer;

V našom kontruktoru public GameScreen () premennú shapeRenderer inicializujeme pridaním pod už existujúce inicializácia:

shapeRenderer = new ShapeRenderer();

Začneme vykreslením kruhu, aby sme toto mohli uskutočniť, potrebujeme najprv určiť stred kruhu, k tomu si vytvoríme inštanciu triedy Vector2. Pod existujúce premenné si pridajme ďalšie premenné:

private Vector2 circleMiddle;
private Circle circle;

V našom konstruktoru opäť premenné inicializujeme:

circleMiddle = new Vector2(600,400);
circle = new Circle(circleMiddle,40);

Pridáme importy, aby nám zmizli chyby. V metóde render (float delta) vo vetve else vykreslenie kruhu obslúžime, na koniec konáre else pripíšeme kód:

shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(1,1,0,1);
shapeRenderer.circle(circle.x,circle.y,circle.radius);
shapeRenderer.end();

Pridáme importy, uložíme a spustíme. Po chvíli by sa vám mal spoločne s deltou ukázať aj kruh ...

Rovnakým spôsobom, akým sme vykreslili kruh si vykreslíme aj štvorec, obdĺžnik a úsečku. Pod existujúce premenné si pridáme (deklarujeme) ďalšie:

private Rectangle rectangle1,rectangle2; //nas ctverec a obdelnik
private Vector2 lineBegin,lineEnd; //bod pocatku a bod konce nasi usecky

Vykonáme inicializácii v konstruktoru:

rectangle1 = new Rectangle(50,250,50,50);
rectangle2 = new Rectangle(150,250,100,50);
lineBegin = new Vector2(50,200);
lineEnd = new Vector2(750,150);

Opäť všetko vykreslíme v metóde render (float delta), celá vetva else bude vyzerať takto:

else{
batcher.begin();
font.draw(batcher, "Delta: "+ storedDelta/100 ,50,400);
batcher.end();

shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(1,1,0,1);
shapeRenderer.circle(circle.x,circle.y,circle.radius);
shapeRenderer.setColor(1,0,0,1);
shapeRenderer.rect(rectangle1.getX(),rectangle1.getY(),rectangle1.getWidt(),rectangle1.getHeight());
shapeRenderer.setColor(0,0,1,1);
shapeRenderer.rect(rectangle2.getX(),rectangle2.getY(),rectangle2.getWidth(),rectangle2.getHeight());
shapeRenderer.setColor(0,1,0,1);
shapeRenderer.line(lineBegin,lineEnd);
shapeRenderer.end();
}

Pridáme importy, uložíme a spustíme. Po chvíľke by sa vám mal zobraziť výstup:

Pre prehľadnosť a kontrolu je nižšie výpis celej našej triedy GameScreen.java, celý zdrojový kód je samozrejme priložený k stiahnutiu. Nabudúce ahoj.

package com.wackychicken.screens;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.math.Circle;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector2;


public class GameScreen implements Screen{

    private BitmapFont font;
    private SpriteBatch batcher;
    private String ourText;
    private float storedDelta;
    private int counter;

    private ShapeRenderer shapeRenderer;
    private Vector2 circleMiddle;
    private Circle circle;
    private Rectangle rectangle1,rectangle2; //nas ctverec a obdelnik
    private Vector2 lineBegin,lineEnd; //bod pocatku a bod konce usecky

    public GameScreen(){

    font = new BitmapFont();
        batcher = new SpriteBatch();
        ourText = "Toto je nas prvni text, ktery vypiseme na obrazovku.";
        storedDelta=0;
        counter=0;

        shapeRenderer = new ShapeRenderer();
        circleMiddle = new Vector2(600,400);
        circle = new Circle(circleMiddle,40);
        rectangle1 = new Rectangle(50,250,50,50);
        rectangle2 = new Rectangle(150,250,100,50);
        lineBegin = new Vector2(50,200);
        lineEnd = new Vector2(750,150);
    }


    @Override
    public void show() {
        // TODO Auto-generated method stub

    }

    @Override
    public void render(float delta) {

    Gdx.gl.glClearColor(0, 0, 0, 1); // pozadi nastavime na pozadovanou barvu
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    batcher.begin();
    batcher.setColor(1, 1, 1, 1);
    font.draw(batcher, ourText ,50,450);
    batcher.end();

    if(counter<100)
    {
    storedDelta+=delta;
    counter++;
    }

    else
    {
    batcher.begin();
    font.draw(batcher, "Delta: "+ storedDelta/100 ,50,400);
    batcher.end();

    shapeRenderer.begin(ShapeType.Filled);
    shapeRenderer.setColor(1,1,0,1);
    shapeRenderer.circle(circle.x,circle.y,circle.radius);
    shapeRenderer.setColor(1,0,0,1);
    shapeRenderer.rect(rectangle1.getX(),rectangle1.getY(),rectangle1.getWidth(),rectangle1.getHeight());
    shapeRenderer.setColor(0,0,1,1);
    shapeRenderer.rect(rectangle2.getX(),rectangle2.getY(),rectangle2.getWidth(),rectangle2.getHeight());
    shapeRenderer.setColor(0,1,0,1);
    shapeRenderer.line(lineBegin,lineEnd);
    shapeRenderer.end();
        }
    }

    @Override
    public void resize(int width, int height) {
        // TODO Auto-generated method stub

    }

    @Override
    public void pause() {
        // TODO Auto-generated method stub

    }

    @Override
    public void resume() {
        // TODO Auto-generated method stub

    }

    @Override
    public void hide() {
        // TODO Auto-generated method stub

    }

    @Override
    public void dispose() {
        // TODO Auto-generated method stub

    }

}

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.