Map Overview
The map is a visual aspect that allows the player to be immersed deeper in the game. It creates an environment that allows the user to link the story of the game with the visuals.
The map was created using a software known as Tiled Map Editor. This allows us to generate a completely custom map exactly how we envision it to be. It enables us to import a variety of .png files to create custom tiles.
The above was the tileset that was selected for use for the Earth Game Areas, as it was felt that it best represented visually what the story was trying to present (this tile set was provided with the download of the Tiled Map Editor software).
As seen in the screenshot above, the map was manually created. An essential aspect of designing the map was the use of different layers as seen below.
The layers will be very important when implementing the code for adding collisions to the environmental obstacles. We created a specific layer that the obstacles were placed on, and this specific layer was later retrieved when coding and used to add collisions.
When designing the map in the Tiled Map Editor, a collision box can be defined for a particular tile texture. This information will be stored in the .tsx file by using getObjects() on a tile. The particular information we use is the relative X and Y coordinates of the box from the top left corner of the tile and the width and height of the collision box.
Once the values of the collision box have been retrieved, the ObstacleFactory creates an Entity on the OBSTACLE PhysicsLayer and then modifies the default collision box using the retrieved values. As the default tile size in LibGDX is 32x32, the width and height of the collision box defined in the .tsx file are divided by 32 so that a full tile collision box (16x16) will have a scale of 0.5 and take up the correct space. The relative X and Y coordinates are also modified to account for the engine using the centre of the box as the reference point while Tiled uses the top left corner.
Once the collision box has been defined and modified, the entity is then spawned at the correct position.
private void spawnEnvironment() {
TiledMapTileLayer collisionLayer = (TiledMapTileLayer) terrain.getMap().getLayers().get("Tree Base");
Entity environment;
for (int y = 0; y < collisionLayer.getHeight(); y++) {
for (int x = 0; x < collisionLayer.getWidth(); x++) {
TiledMapTileLayer.Cell cell = collisionLayer.getCell(x, collisionLayer.getHeight() - 1 - y);
if (cell != null) {
MapObjects objects = cell.getTile().getObjects();
GridPoint2 tilePosition = new GridPoint2(x, collisionLayer.getHeight() - 1 - y);
if (objects.getCount() >= 1) {
RectangleMapObject object = (RectangleMapObject) objects.get(0);
Rectangle collisionBox = object.getRectangle();
float collisionX = 0.5f-collisionBox.x / 16;
float collisionY = 0.5f-collisionBox.y / 16;
float collisionWidth = collisionBox.width / 32;
float collisionHeight = collisionBox.height / 32;
environment = ObstacleFactory.createEnvironment(collisionWidth, collisionHeight, collisionX, collisionY);
}
else {
environment = ObstacleFactory.createEnvironment();
}
spawnEntityAt(environment, tilePosition, false, false);
}
}
}
}
The camera tracking was added as a component of the main game screen itself. It gets a player entity from the currently loaded game area and sets the camera to track this player.
player = earthGameArea.getPlayer();
private void followPlayer() { renderer.getCamera().getEntity().setPosition(player.getPosition()); }
Our method can easily be extended to follow different entities, or dynamically assigned and manipulated as needed. All we need is an entity that reports its position.
The camera limiting code in the ensures that the camera doesn't move beyond specific boundaries, keeping the player's view within the playable area.
// Get the player's position
float playerX = player.getPosition().x;
float playerY = player.getPosition().y;
// Calculate half of the camera's viewport dimensions
float halfViewportWidth = renderer.getCamera().getCamera().viewportWidth * 0.5f;
float halfViewportHeight = renderer.getCamera().getCamera().viewportHeight * 0.5f;
// Define camera position limits based on map boundaries (assuming a square map of 60 units)
float minX = halfViewportWidth;
float maxX = 60 * 0.5f - halfViewportWidth;
float minY = halfViewportHeight;
float maxY = 60 * 0.5f - halfViewportHeight;
// Calculate new camera position within limits
float cameraX = Math.min(maxX, Math.max(minX, playerX));
float cameraY = Math.min(maxY, Math.max(minY, playerY));In the above code snippet, we ensure that the camera's position remains within the boundaries of the game map. The steps are as follows: Get Player Position: Obtain the player's current X and Y coordinates in the game world. Calculate Half Viewport Dimensions: Determine half of the camera's viewport dimensions for positioning calculations. Define Camera Limits: Set boundaries for the camera's position based on the map dimensions (assuming a 60-unit square map). Limit Camera Position: Use Math.min and Math.max to constrain the calculated camera position within the defined limits.
if (Gdx.input.isKeyPressed(Input.Keys.PLUS) || Gdx.input.isKeyPressed(Input.Keys.EQUALS)) {
// Zoom in when "+" key is pressed
fixZoom(-zoomSpeed);
}
if (Gdx.input.isKeyPressed(Input.Keys.MINUS)) {
// Zoom out when "-" key is pressed
fixZoom(zoomSpeed);
}Camera Component Enhancement: We extended the existing CameraComponent.update function to include zoom functionality.
private void fixZoom(float x) {
float currentZoom = camera.viewportWidth + x;
// Ensure zoom stays within a valid range
if (currentZoom < minimumZoom) {
currentZoom = minimumZoom;
}
if (currentZoom > maximumZoom) {
currentZoom = maximumZoom;
}
//maintaining the screen ratio post zooming
float screenratio = (float) Gdx.graphics.getHeight() / Gdx.graphics.getWidth();
camera.viewportWidth = currentZoom;
camera.viewportHeight = currentZoom * screenratio;
camera.update();
}Zoom Adjustment: We added a method fixZoom(float x) to the CameraComponent class. This method takes a zoomAmount parameter that determines how much to zoom in or out. Positive values zoom out, while negative values zoom in. Zoom Limiting: We ensured that the zoom level doesn't go beyond certain bounds. The zoom factor is limited to prevent extreme zooming, which could lead to unwanted behavior. User Input: We integrated user input handling to trigger the zoom adjustment. For example, we mapped the "+" and "-" keys to zoom in and out respectively.
As you can see in the image below, the UML diagram for the feature/map branch shows all the classes which were modified by the team members of the map team. The UML diagram also shows the new functions that were added in their respective classes keeping in mind the visibility status they have. Some of the functions in the classes were also modified a little but did not reflect in the actual code as such.
