top of page

Pixel Art RTS

Pixel Art, RTS, Top Down, Procedural Map

Overview

Players control their own kingdom, gathering resources to make more workers/fighters and expand their kingdom, whilst fighting against abnormally sized insects that roams the map.

Background

Personal Project

This is a very short lived project as I was getting into RTS games and wanted to try making one myself. Throughout this project, I was able to encounter and solve interesting problems that was both challenging and educational.

Tools & Skills

Tools Used:

  • Unity

  • Visual Studio Editor (C#)

  • Aseprite

  • Commercial free fonts sites

  • Unity Asset Store

Skills Applied:

  • C#

  • HLSL

  • Procedural Map

  • Unity Engine Proficiency

  • Shader Graphs

  • Game Design

  • Asset Making

  • UI/UX Design

Goals

Goals:

The focus of this project is primarily learning how to implement an RTS game. This project is my first encounter with path finding agents and the "A*" Algorithm. The project also provided opportunities to implement a different type of game mechanics as oppose to a typical "WASD" game. Finally, to solve an interesting problem of "Fog of War". 

Map Generation

Overview

Every map is procedurally generated. This method uses 2 Perlin Noise map with different scale to generated water tiles and tree tiles.

​

This map generation is performed over multiple frames, and is looped in Unity's Coroutine system. This way, I was able to hook this to a loading screen.

​

After the map generation finishes, it continues to perform the "Game Start" sequence.

Building

Overview

This uses a grid system to handle building. Each building has a width and height, and that is translated onto the grid based on the building's pivot.

​

Before building is placed, a transparent building preview will follow the cursor and snap to grid, and can be placed when mouse is clicked.

Unit Spawning

Each building if intended, can spawn any units. The units choices are customizable through the inspector.

​

The building system also allows queuing of multiple units at once.

​

Buildings also support spawn waypoint, where units automatically travels to the chosen destination on spawn. Units will organize themselves to be in formation, although sometimes they do overlap.

Building Preview

To position a building to a desired spot, I implemented a building preview object. This building preview object detects invalid placements, additionally changes the color of the outline to red.

Game Controls

Overview

This RTS game is somewhat inspired by other successful RTS games such as, StarCraft II and Age of Empire I - IV.

Following the footsteps of these games, the game controls were also made to be similar to these big game titles.

Single and Group Select

Single left click select singular unit. Double clicking a unit will select every unit of the same type that is also within the current viewport.

Box Select

You can also hold on left mouse and move to create a box, any unit within the box will be selected.

Attack and Move

When units are selected, pressing will toggle attack mode, if left clicked while attack mode is on, units will attack any enemies it detects whilst running to their destination.

​

Normal right click will move the units to the position. When a building is selected, right clicking sets a waypoint.

Control Groups

Following the convention of most RTS games, pressing 'Ctrl + Num' will set the current selected units/buildings to that control group number. Pressing the number without 'Ctrl' will automatically select all units within that control group.

AI

Overview

Characters in game uses A* Algorithm to path find. Agent's AI logic is based on invisible collisions to detect nearby targets. Units, when idling, will automatically seek and attack enemies if one is nearby.

​​

Pathfinding

For this project, I downloaded an asset from "Unity Asset Store", named: AStar Pathfinding Project, which helps deal with pathfinding on a 2D grid.​​

AStarAsset.png

I used the free version instead of the pro version.

Unit Formation

When choosing destinations, units will go into formation in a radial manner. This is similar to how most RTS games support formations when commanding more than 1 unts

RTS_FormationCode.png

This is the calculation of formation positions. Currently, it is capped at a certain units until it loops back to the first position in the circle. However, for the purpose of this project, that will not pose a problem.

Combat

Overview

Combat is very simple, currently, there is one enemy that can attack, die, and patrol.​​

Units that are idling automatically attack enemies if they are too close.

Fog of War

Overview

Fog of war was difficult to implement. Implementing this requires knowledge on textures, and shaders which I lacked when making this project.

How?

1.

A shader that takes two textures as input. One for unexplored region, another for occupied region. Additionally, a color channel that changes the shroud color.

RTS_FOW_Shader.png

2.

To update the texture, we need two Cameras that writes to the textures.

ExploredArea_Camera.png

Writes to the occupy texture. Where it represents the areas currently occupied by the player. The color of pixels inside the area is red.

This camera writes to the "Explored" texture which remembers areas that had been explored already.

UnexploredArea_Camera.png

Finally

Create a "Raw Image" on a Canvas, then give it the material with the shader we made earlier.

​

And this is the result

bottom of page