Lekce 5 - Programujeme Android hru - Základní vestavěné třídy podruhé

V minulém díle, Programujeme Android hru - Render, delta a FPS, jsme si udělali dohodu, kterou budeme využívat v podstatě až do konce semináře. Rozebrali jsme si důležité pojmy Delta a FPS a vytvořili novou třídu GameScreen.java.

Dnes se prostřednictvím vykreslení základních geometrických útvarů na obrazovku seznámíme s dalšími základními vestavěnými třídami, které budeme do budoucna potřebovat. Budeme pokračovat v naší třídě GameScreen.java, dnes v ní nebudeme nic mazat, budeme pouze připisovat. Zatím známe vestavěné třídy:

• BitmapFont - obsahuje písmo
• SpriteBatch - stará se o vykreslení obdélníkového grafického elementu

A naučíme se další třídy:

• Circle - jak už vyplývá z názvu této třídy, tak díky ní můžeme dle našich požadavků vytvořit matematicky popsatelný geometrický útvar kruh. Základními parametry instance jsou samozřejmě souřadnice středu a poloměr v pixelech.
• Rectangle - opět jak z názvu vyplývá, dle třídy v paměti vytvoříme instanci obdélníka (čtverce), jeho parametry jsou souřadnice levého spodního bodu (rohu), jeho šířka a výška (px).
• Vector2 - třída má vyjadřovat veličinu vektor. To málo, co vím o vektoru, je, že má nejen velikost, ale i směr. Používali jsme ho ve škole v hodinách fyziky k vyjádření síly. Cítím, že k vyjádření vektoru v kartézské soustavě souřadnic budu potřebovat buď dva body, které určí počátek vektoru a koncový bod, nebo jen počátek a úhel? Instance vektoru obsahuje ale jen jeden bod, takže si představuji, že jako počátek vždy slouží bod [0,0]. S vektory můžeme provádět matematické operace např. jejich sčítání pomocí metody add(Vector2 v), násobení pomocí scl(Vector2 v) atd. Sám spíše instanci Vectoru2 využívám prostě jen jako dvě čísla, která mi vyjadřují nějaký bod na obrazovce.
• ShapeRenderer - zase z angličtiny odvodíme: shape - tvar, render - poskytnout, renderer - poskytovatel. Třída se nám stará o vykreslování nějakých tvarů na obrazovku.

Jdeme do praxe, spustíme Eclipse, otevřeme naší třídu GameScreen.java a jak ji máme z předchozího dílu, tak do ní dnes budeme pouze přidávat. Chceme vykreslovat tvary, takže nejdříve musíme vytvořit instanci třídy ShapeRenderer. Pod stávající proměnné si tedy přidejme:

private ShapeRenderer shapeRenderer;

V našem kontruktoru public GameScreen() proměnnou shapeRenderer inicializujeme přidáním pod již stávající inicializace:

shapeRenderer = new ShapeRenderer();

Začneme vykreslením kruhu, abychom tohle mohli provést, potřebujeme nejdříve určit střed kruhu, k tomu si vytvoříme instanci třídy Vector2. Pod stávající proměnné si přidejme další proměnné:

private Vector2 circleMiddle;
private Circle circle;

V našem konstruktoru opět proměnné inicializujeme:

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

Přidáme importy, aby nám zmizely chyby. V metodě render(float delta) ve větvi else vykreslení kruhu obsloužíme, na konec větve else připíšeme kód:

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

Přidáme importy, uložíme a spustíme. Po chvíli by se vám měl společně s deltou ukázat i kruh...

Stejným způsobem, jakým jsme vykreslili kruh si vykreslíme i čtverec, obdélník a úsečku. Pod stávající proměnné si přidáme (deklarujeme) další:

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

Provedeme inicializaci 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ět vše vykreslíme v metodě render(float delta), celá větev else bude vypadat 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();
}

Přidáme importy, uložíme a spustíme. Po chvilce by se vám měl zobrazit výstup:

Pro přehlednost a kontrolu je níže výpis celé naší třídy GameScreen.java, celý zdrojový kód je samozřejmě přiložen ke stažení. Příště 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

    }

}

V příští lekci, Programujeme Android hru - Úvaha nad obrazovkami, se zamyslíme nad tím, jak vyřešit problém se zobrazením naší aplikace na mnoha různých obrazovkách.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.