Achievement Popup Component

Page Navigation

Jump to a section or return to Achievement Summary here!

• Summary
• Testing
• Technical

Summary

The purpose of the AchievementPopupComponent is to provide feedback when a player makes an achievement during game play. The popup briefly appears on the screen on top centre where the player can see it and disappears after 5 seconds.

Technical

UML

Astah - Fig. 1

Design

It's coupled to InputComponent as we wanted to be able to toggle the VFX on or off depending on a key press. The key in question is the period key. When pressed it will toggle the effect on or off. This feature is useful for those that wish to inspect the visuals of their designs without the shader in the way.

Although not shown in the UML. The RenderService.java uses the class to apply the shader. Internally the class sets the correct shade colour and the intensity corresponding with that part of the day which it receives through the event handler. The justification for coupling it with RenderService is due to the fact that that's where rendering takes place and it seems like the right place to apply the shader. Furthermore, in the future the render service could be used to hold different sprite batches for different renderables and use those batches instead to avoid shading.

Implementation

DayNightCycleComponent is used inside RenderService it's applied to the batch only for none UI elements as shown below:

  public void render(SpriteBatch batch) {
    for (Array<Renderable> layer : renderables) {
      // Sort into rendering order
      layer.sort();

      for (Renderable renderable : layer) {
        if (dayNightCycleComponent != null) {
          if (AtlantisSinks.gameRunning) {
            dayNightCycleComponent.render(batch);
          }
        }
        renderable.render(batch);
      }
    }
  }

Shading was achieved through 2 OPenGL Shader Language files. One file known as base.vert chooses which parts of the pixels to be shaded while the fragmentation bit sits on top of it. These files are then compiled by ligGDX ShaderProgram and then applied to sprite batches.

./core/assets/shaders
├── base.vert
└── light.frag

        ShaderProgram.pedantic = false;
        var vertexShader = Gdx.files.internal("shaders/base.vert");
        var lightShader=  Gdx.files.internal("shaders/light.frag");
        this.dayNightCycleShader = new ShaderProgram(vertexShader, lightShader); // --> ready to use shader

For more technical details about implementation please see the JavaDoc.

Challenges

One of the challenges faced while coming up with this component was how to get other UI elements not to be shaded. For instance the terrain (map) was not correctly shaded - or to be more precise, not shaded at all. Several hours of debugging revealed that TiledMapRenderer used in TerrainComponent.java, used it's own internal sprite batch. So to overcome this, the internal sprite batch was modified to use the custom shader:

  if (renderer != null) {
      try {
        this.batchedMapTileSpriteBatch = (SpriteBatch) ((BatchTiledMapRenderer) renderer).getBatch();
      } catch(ClassCastException e) {
        // issue caused when being mocked
        this.batchedMapTileSpriteBatch = null;
      }

Then the shader was modified in draw()

  @Override
  public void draw(SpriteBatch batch) {
    tiledMapRenderer.setView(camera);
    // render night affect (using tiledmapRenderer batch)
    if (dayNightCycleComponent != null && batchedMapTileSpriteBatch != null) {
      dayNightCycleComponent.render(batchedMapTileSpriteBatch);
    }
    tiledMapRenderer.render();
  }

What was learned from this challenge was useful. It showed that if you didn't want the shader applied to some elements you can use a different sprite batch that hasn't got the shader set - or in other words, that uses the default shader.

Testing

Game play testing popup notification. The notifcation includes a title,description and badge of the achievement made.

Back to Achievement Summary