2.5D Tee Renderdamise Efekt LibGDX-is

2.5D efekt loob kolmemõõtmelise sügavuse illusiooni kasutades ainult 2D graafika komponente. See on populaarne tehnika retro-stiilis võidusõidumängudes.

Sissejuhatus

2.5D efekt on visuaalne tehnika, mis simuleerib kolmemõõtmelist perspektiivi kahe-dimensionaalse graafika abil. Selles peatükis õpime looma tee renderdamise efekti, mis tekitab veenva sügavustunde ja perspektiivivaate.

Põhimõtted

Perspektiiv ja skaleerimine

2.5D tee efekti põhiidee tugineb järgmistele visuaalsetele põhimõtetele:

  • Lähedased objektid on suuremad ja asuvad ekraani allosas

  • Kauged objektid on väiksemad ja asuvad ekraani ülaosas

  • Keskkogu tekitab illusiooni, et tee kulgeb sirgelt ette

Matemaatiline alus

Perspektiivi skaala arvutamise valem:

float scale = 0.6f + (float) Math.pow((double) i / numRows, 1.05);

Parameetrite selgitus:

  • 0.6f - minimaalne skaala (kauge vaade)

  • 1.05 - perspektiivi eksponent (mõjutab "kaardumise" tugevust)

  • i / numRows - normaliseeritud kaugus vahemikus 0-1

Eksponendi väärtus mõjutab tugevalt perspektiivi. Väiksemad väärtused annavad leebemat, suuremad järsemat perspektiivi.

Renderer klassi ülesehitus

Klassi struktuur

public class Renderer {
  private Batch batch;
  private Texture roadTexture;
  private float screenWidth;
  private float screenHeight;
}

Konstruktor

public Renderer() {
  batch = new SpriteBatch();
  roadTexture = new Texture(Gdx.files.internal("../assets/road.png"));
  screenWidth = Gdx.graphics.getWidth();
  screenHeight = Gdx.graphics.getHeight();
}

Võtmepunktid:

  • SpriteBatch - LibGDX-i põhiline renderdamise komponent

  • Tee tekstuuri laadimine failist

  • Ekraani mõõtmete salvestamine mugavuse ja loetavuse jaoks

Peamine renderdamise meetod

public void render(Player localPlayer) {
  ScreenUtils.clear(0, 0, 0, 0);
  batch.begin();
  renderRoad(localPlayer);
  batch.end();
}

Tee renderdamine

private void renderRoad(Player localPlayer) {
  int roadWidth = roadTexture.getWidth();
  int roadHeight = roadTexture.getHeight();
  int numRows = (int) screenHeight;
  float scrollOffset = localPlayer.y % roadHeight;

  for (int i = 0; i < numRows; i++) {

    float scale = 0.6f + (float) Math.pow((double) i / numRows, 1.05);

    float y = scrollOffset - i / scale;
    int textureOffset = ((int) y + roadHeight) % roadHeight;

    TextureRegion roadSlice = new TextureRegion(roadTexture, 0, textureOffset, roadWidth, 1);

    float scaledWidth = roadWidth * scale;
    float scaledX = (screenWidth - scaledWidth) / 2;

    batch.draw(roadSlice, scaledX, screenHeight - i, scaledWidth, 1);
  }
}

Võtme kontseptsioonide analüüs

  1. Tekstuuri lõikamine

TextureRegion roadSlice = new TextureRegion(roadTexture, 0, textureOffset, roadWidth, 1);

  1. Perspektiivi skaleerimine

float scaledWidth = roadWidth * scale;
float scaledX = (screenWidth - scaledWidth) / 2;

Iga rida skaleeritakse erinevalt perspektiivi loomiseks. Tee joondatakse alati keskele. Kaugemad read on kitsamad, lähedasemad laiemad.

Tüüpilised probleemid ja lahendused

Probleem 1: Tee liiga kitsas alguses

Sümptom: Tee ülaosa (kaugus) on liiga kitsas

float scale = 0.6f + (float) Math.pow((double) i / numRows, 1.05);

Korrektne:

float scale = 0.8f + (float) Math.pow((double) i / numRows, 1.05);

Probleem 2: Perspektiiv liiga järsk

Sümptom: Tee kahaneb liiga kiiresti

float scale = 0.6f + (float) Math.pow((double) i / numRows, 1.05);

Korrektne:

float scale = 0.6f + (float) Math.pow((double) i / numRows, 0.8);

Probleem 3: Kerimise kiirus ebasobiv

Sümptom: Tee liigub liiga kiiresti või aeglaselt

float scrollOffset = (localPlayer.y * 0.5f) % roadHeight;

Korrektne:

float scrollOffset = (localPlayer.y * 1.5f) % roadHeight;

Täiendused ja edasiarendused

1. Horisontaalne liikumine

float horizontalOffset = (float) Math.sin(scrollOffset * 0.01f) * 50;
float scaledX = ((screenWidth - scaledWidth) / 2) + horizontalOffset * (1.0f - scale);

2. Mitmekihiline tagaplaan

private void renderBackground(Player localPlayer) {
  // Kauged mäed, aeglane parallax
  // Keskmine taust, keskmine parallax
  // Lähedane taust, kiire parallax
}

Kokkuvõte

2.5D tee efekt koosneb järgmistest võtmekomponentidest:

  • Perspektiiv skaleerimine

  • Tekstuuri lõikamine

  • Sujuv kerimine

  • Keskele joondamine

See tehnika on eriti populaarne retro-stiilis võidusõidumängudes ja pakub head jõudlust võrreldes tõelise 3D renderdamisega.

Ressursid ja viited