Smelogs Playground

Fog of War


Hey Unreal Devs,

This week it gets cloudy. We will go into detail about one of the most important features of every real-time strategy game: the Fog of War. We’ll show you how our solution works and why it looks the way it does.

First of all, what is the Fog of War?

The Fog of War is referred to as the area that is covered by fog, which is all areas that the player has no vision over. The player has to explore the area to uncover it and find the enemy or points of interest like choke points.
There are three types of fog density in Smelogs Playground: No Fog, Explored (Semi Fog), and Fog.

This is how the Fog influences the visibility of units and buildings:

:sunny: No Fog

All units and buildings are visible. This is the area your units and buildings have direct sight of.

:sun_behind_large_cloud:Explored | Semi Fog

Enemy buildings and neutral objects are visible, but not units. This is the area you previously explored, but have no direct sight of.

:cloud:Fog

In dense fog, enemy units, buildings, and neutral objects are not visible. This area is unexplored.

:cloud_with_lightning:Special Exception

In Smelogs Playground, the Trap is a hidden building that is only visible when in the direct vision range of a Watchtower.

Visuals & Technical Details

Usually, Fog of War or vision areas are done with a post-process. This often results in a dark gray overlay. In Smelogs Playground, however, we wanted something more appealing that better represents Fog/Clouds. This is why our current solution works with a 3D mesh and a Fog of War density texture that is used for the opacity.

We use the RGB texture channels for the different fog layers:

:red_square:Red 1.0 = No Fog | translucent (1.0)

:green_square:Green 1.0 = Semi Fog | half translucent (0.5)

:blue_square:Blue 0.0 = Fog | no translucency (0.0)

We just update the Red and Green channels to display the different vision areas

Endnotes

We like the current visuals but since the very beginning, we dream of having a dynamic Fog of War that is driven by Unreal Engine’s Niagara system where clouds/fog move out the way. At some point, it would be great to upgrade it. :slightly_smiling_face:

1 Like

Mom, I can’t pause the game! … wait, I can?


Hey Unreal devs,
Today’s Behind the Design will be a short one about the pause function in Smelogs Playground.

First of all: Should a competitive multiplayer game be pausable?

Some are, some aren’t. Dota 2 for example is, whereas League of Legends isn’t (except for professional leagues). But in most real-time strategy games there are pause systems.

We think pausing the game should be possible, but only for a limited amount of time. We don’t want a pause system that can be abused for toxic behavior or to gain an unfair advantage.

What can be done during a pause?

  • Chatting :speech_balloon:
  • Change settings :gear:
  • Surrender :white_flag:

How our Pause works

Any player can pause the game at any time. In the Pause window, the player can toggle if they are ready to continue the game or not.

The game is unpaused when all players are ready, or when a player runs out of pause tokens.

When a player is not ready when the timer hits 0, a Pause token is consumed and the 30-second countdown starts anew. Every player has 3 Pause tokens. This means every player can pause the game for a maximum of 1 minute and 30 seconds.

We might adjust the token amount or countdown timer based on player feedback.

Endnotes

If the Pause system gets abused, we will explore some other options:

  • request Pause (instead of immediate Pause)
  • report Pause abuse which could result in a Pause Ban (so that a player is unable to pause games)

But do you understand?

Hey Unreal Devs,
Today’s Behind the Design is all about Communication.
There are many ways to communicate in Smelogs Playground.
You will be able to use a text chat and a ping system. Let’s go into the details of both! We will also explain why we won’t support voice chat.

Chat

The player can send messages to all players or just his allies.
A message displays the player name which is also colored in the player color, the timestamp at which it was sent, and the message text. The message text is done as Rich Text which means it supports font change, images/emojis, and even animated emojis.

We also added a profanity filter which can be turned off in the settings, and spam protection in addition to being able to mute players entirely.

Voice Commands

Similar to Age of Empires 2, you can trigger voice lines for everyone to hear via a numerical chat message.
Some Examples:
“1” = Yes
“2” = No
“11” = Laughing (Like in AoE2)
“14” = Start the game already.

The chat voice lines can also be muted in the settings.

Pings

The ping system is heavily inspired by the League of Legends ping system. No need to reinvent the ping wheel when there is already a good one in place. Pings are also shown on the Minimap as you would expect. We added spam protection here as well and the option to mute pings from players. Of course, if you play standard 1v1 you won’t need pings, but in our other team-based game modes it’s a fast and easy way to communicate without a language barrier.

Left = Missing
Right = Move
Top = Danger
Bottom = Help
Center = Neutral Ping

Voice

As mentioned at the start we will not support Voice Chat. At least not for the initial release. If it gets highly requested and we have the resources to add it, we will do so. As of right now, the disadvantages outweigh the advantages from a development view. Voice chat often gets misused for insults and toxic behavior. Right now we want to focus our limited resources on more important tasks and aspects of the game than Voice Chat.

1 Like

Smelogs Playground for the win :trophy:

Hey Unreal Devs

What kind of Win Conditions do other RTS games have and what makes a good Win Condition?

We think a good Win Condition should see the better player win, but it should also be possible to have a comeback by making some bold moves. The gameplay should be exciting and focus on tasks until the end.

Common win conditions in real-time strategy games are …

:triangular_flag_on_post: Capture points

The player captures areas to gain points over time until a threshold is reached and a player wins. The problem with this Win Condition is that it becomes clear who the winner is going to be minutes before the game ends.

:skull: Elimination

Either all buildings or all unit production buildings of the enemy have to be destroyed to defeat them.

:timer_clock: Time

The game ends after a set time has elapsed.

… what we decided on:

We don’t want to have time constraints and end the game after a certain time. We went with an Elimination Win Condition where all Menhirs of a player have to be destroyed to eliminate them.

:balance_scale: Draw

We were considering draws and mechanics to allow a draw to happen but decided against it since it would feel very artificial and forced and rob the game of its excitement.

Endnotes

New game modes and other Win Conditions may be an option later on, depending on player feedback.

3 Likes

Profile Pictures :framed_picture:

Hey Unreal Devs :slightly_smiling_face:

With the Profile Picture, players can showcase their achievements and customize their appearance. The Profile Picture consists of three parts: the avatar image, a border, and a title. All of these can be chosen by the player and combined however they like.

Avatar Image

The avatar image is on a 0.8 render scaling.

  • Texture size: 256x256
  • No transparency
  • Can be animated with flipbook material (Spritesheet texture)
    • Animated Texture: maximum 2048x2048 (8x8 64 frames)

Border

It’s called border but it’s an overlay that doesn’t have to be just a border image.

It’s above the Avatar and Title layer.

  • Texture size: 256x256
  • Transparency allowed
  • Can be animated with flipbook material (Spritesheet texture)
    • Animated Texture: maximum 2048x2048 (8x8 64 frames)

Title

Is done with Rich Text which allows for color and font change. Titles will be translated into different languages.

Profile Picture can be unlocked via the Battlepass, Challenges, or with Fractures, which is one of the currencies in Smelogs Playground. More on that in next week’s Behind the Design.

Endnotes

As of right now we mainly do static avatar images and borders as well as plain text for titles but we would like to add animated images and text for special rewards/achievements.

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_forward: Smelogs Playground

3 Likes

Seems like you guys are closing in on the finish line with this update. Congrats.
The defeat animation is also incredible. I can’t wait for a gameplay trailer to see more! :heartpulse:

1 Like

It’s raining money!

Hey Unreal devs,

Today’s Behind the Design is about the currencies we have in Smelogs Playground, what they can be used for and how the player can get them.

Currencies

The currencies listed below are not relevant for the gameplay. They are used for in-app purchases and to unlock cosmetic items.

Nifty Coins

This is the main currency of Smelogs Playground and allows the player to purchase cosmetic items. Competitive integrity is super important to us, that’s why we won’t sell items that give the Player a benefit (no pay-to-win).

There are four different ways to obtain Nifty Coins: as a level reward in the Battlepass, as a loyalty reward for consecutive logins, as a reward for winning a game, or by purchasing them in the shop.

Fractures

With Fractures, the player can unlock items to customize their profile, which we talked about in our last post. Fractures also allow the player to unlock Battlepass rewards faster.

Fractures are given as a Battlepass level reward and as a loyalty reward.

Endnotes

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_forward: Smelogs Playground

1 Like

Shop_CloseUp

Hey Unreal Devs,
Let’s have a first look at the shop in Smelogs Playground.
So what can you buy and how? The shop has two sections: Items and Nifty Coins.

Nifty Coins

Some items can only be bought with Nifty Coins, which can be purchased with real money. We will offer five bundles – the bigger the bundle, the more coins you get.

Cosmetic Items

Competitive integrity is super important to us, that’s why we won’t sell items that give the Player a benefit (no pay-to-win).

:crossed_swords: Battlepass

A 50 level Battlepass that contains profile cosmetic items as well as some Nifty Coins and Fractures.
You’ll learn more about the Battlepass, what it contains exactly, the leveling system, and how long it should take to unlock the whole Battlepass in a later Behind the Design post.

:fleur_de_lis: Skinset

The Skinset will contain a themed skin for all units and buildings.
How about a spooky skin for Halloween, or a cute one for Valentine’s day?

:microphone: Announcer Voice Pack

You can change the voice that warns and informs you about events in the game. The Announcer will also do the chat voice commands that all players will hear when triggered.

We plan to collaborate with content creators and integrate them as voice packs into the game.

:notes: Theme Music

The music track (~3min) that plays in the Main Menu.

Which Theme Music tracks get played, can be selected in the inventory.

:musical_note: Gameplay Music

The music track (~3min) that plays during a match.

Which Gameplay Music tracks get played, can be selected in the inventory.

:computer_mouse: Cursor

You can buy different skins for your cursor to make it blend in with the Aztec style of Smleogs Playground.

Endnotes

We’ll explain how the inventory works in a future Behind the Design post!

There are more to come so make sure to stay tuned we are also interested in what you would like to see to be added to the game.

A useful tool for devs and players

Input_DevTool

Hey Unreal Devs,
In today’s Behind the Design, we’ll talk about a small feature that started out as a dev tool and turned into an optional setting for players: the input display.

Our designers often receive videos from our programmers showing features that are still work in progress. But even though they may look good in a video, inputs, and behaviors don’t always work as intended by the designers. And they are hard to showcase, especially in the early stage of newly developed features since audiovisual feedback may not be in place yet. Communicating the design can be hard with a multilingual team.

Example:
To give movement orders the radial menu can be used or a hotkey (input) that has priority. And see if the correct behavior is executed by the units and no additional inputs are pressed to perform the order. And especially useful for actions that require multiple inputs with a modus like shift+key or ctrl+key.

So we created an input display system. It’s not perfect by any means but works very well in most cases and could be further improved. The currently pressed keys are displayed in the top left. You may have seen it in some videos or gifs we posted before. With the input display, our designers can early on spot differences whether the feature is implemented as intended.

Players can turn it on/off in the settings. We think it’s a nice feature, for example for content creators.

Endnotes

We may post about some more dev tools we created in the future.
If you have any questions or are interested in the game, let us know on our Discord about what we should post next.
:arrow_forward: Smelogs Playground

The game looks beautiful and fun! Have you considered a different name? “Smelogs” to me sounds like smelly kelloggs. Just a bit of feedback.

How we created the Tutorial

Hey Unreal devs,

A good Tutorial is very important for players and for the success of a game. Today we show you how we handle the Tutorial for Smelogs Playground. We decided to deactivate abilities and inputs that the player hasn’t learned yet or that would interfere with the Tutorial’s flow. New elements of the user interface (UI) get revealed one by one and explained to the player. This way, the player can ease into the gameplay and isn’t overwhelmed.

We control the Tutorial with a script (Data Table). This allows us to easily edit the Tutorial and enter new text dialog. The Data Table also lets us perform events or actions and check the player’s progress.

Actions

We can perform Actions via the tutorial script (Data Table).

:speech_balloon: Text

We work with Rich Text so that we’re able to highlight text and display input keys as images.

:sparkles: Spawning

We can spawn units and buildings for any team at specific locations. If needed, we can also highlight them.

:running_man: Movement Orders

These are used to make moveable units move in order to make the Tutorial more dynamic and resemble actual gameplay.

:movie_camera: Camera

A camera blend to highlight or show important locations to the player.

:construction: Block Inputs

These allow us to block or unblock inputs from UI buttons or input keys.

:radio_button: UI

We can show or hide UI components and play animations to highlight certain areas or buttons.

:thinking: Choice PopUp

These let the player choose how the Tutorial should continue.

Checks

We can do Checks via the tutorial script (Data Table). Multiple Checks can be active at once.

:ballot_box_with_check: Selected Units

We can check for the specific number of selected units or even for a specific unit type.

:white_check_mark: Input Check

We can check for specific UI or key inputs. We also added that the input we check for automatically unblocks. This allows us to have fewer script lines and avoid errors.

:round_pushpin: Location Reached

There might be a certain location the player has to reach before we continue the Tutorial. This way we make sure that the player has understood the navigation and control of units and is in the right place.

:skull: Actor Destroyed

This is similar to the location check. It ensures that the player has understood the combat mechanics.

:timer_clock: Delay and Wait for Completion

We can delay the next script line that gets executed. This is useful because some events take time to unfold. We mainly work with two options: A “delay” for a specific amount of seconds, or a “wait for completion”. The latter is mainly used to make sure all the text gets displayed before new Actions get executed.

Endnotes

We split the Tutorial into categories and allow players to skip or revisit these categories.

The first version of the Tutorial is still a work in progress.

By the way: Feel free to join our Discord server, we will soon start to look for playtesters to test the Tutorial and the game :slight_smile:

:arrow_right: Smelogs Playground

Unit Production

Hey Unreal Devs,
Unit Production is a classic gameplay mechanic in the real-time strategy genre - and we’ve chosen the classic approach. To produce a unit, energy and free commando points are required. It takes time to produce the unit, then it spawns on the playground.

As of now, only the Menhir can produce units in Smelogs Playground. And the only unit that can be produced is the Base Smelogs which can turn into any other unit through upgrading.

We can enable the ability to produce units for any Smelog, no matter if it’s a building or a moveable unit. We can also define what should be produced and where. So there are a lot of things we can experiment with, like units that produce buildings or units and buildings that duplicate themselves.

:raised_hand_with_fingers_splayed: Multi-queue

One way to produce units is by multi-queue. This spreads your unit production evenly across the Menhirs that are selected when you queue units. This makes it easier for players to be time-efficient.

:arrow_double_up: Queue for All

It’s also possible to queue units in all selected Menhirs at once. This means if you have three Menhirs selected, it will add one more unit to the production queue in each of them.

:robot: Auto queue

Additionally, the player has the possibility to toggle “auto queue”. This means, new units are created as long as possible or until auto-queue gets turned off. This is another small feature to make macro-management easier for the player. This could be especially useful for the early and late-game stages of a match.

Endnotes

As of now, there is no queue limit. This is something we might change in the future. A limit would make sure a player’s energy isn’t blocked in a production queue when it could be used for something else.

If you have any questions or are interested in the game, let us know.

Tower rush?

Hey Unreal devs,

The focus of today’s Behind the Design lies on the Watchtower in Smelogs Playground.

Some units and buildings in the game have abilities and modes. Like most real-time strategy games, Smelogs Playground also has a static defensive structure: the Watchtower. It provides vision over a great area and reveals invisible units and buildings.

Towers like these often get used for cheesy strategies like tower rushes. A tower rush is a strategy where a player attacks the opponent as quickly as possible by placing towers that can attack in the enemy base. It’s a very aggressive and annoying strategy where players sacrifice their economy and base building for a potential quick win.

Players will be able to do this in Smelogs Playground but it comes at a cost since the Watchtower does not use its combat capability by default. The Watchtower has two modes.

:zap: Economy Mode

This is the default mode the Watchtower is in when created.

Generates Energy slowly. Energy can be used for different actions in the game. For a more detailed explanation, see our Behind the Design post about Resources.

:crossed_swords: Combat Mode

This mode allows the Watchtower to attack, but it will stop generating energy and consume some instead. So keeping the tower in combat mode longer than needed will be bad for the player’s economy.

Energy is faster consumed in this mode than it’s produced in Economy Mode.

With this mechanic, we want to ensure that the Watchtower is a defensive support structure. Its application is more efficient to defend against raids and it can be quickly put back into Economy Mode.

Endnotes

Towers in other real-time strategy games sometimes have the ability to be occupied by units. We have decided against this for the watchtower but this is something we could explore in the future. We have a occupy ability for a different structure and we could add this ability to the Watchtower too.

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_forward: Smelogs Playground

1 Like

Where did those units come from?

Hey Unreal devs,

Today we’ll talk about an ability that is quite common in real-time strategy games.

In Smelogs Playground there’s an occupy ability similar to the “StarCraft II” Nydus Worm or the tunnels that the dwarfs and orcs use in "LOTR: Battle for Middle-Earth II. This game mechanic allows units to enter a structure (e.g. a tunnel, a teleporter) and travel to another spot on the map, where they then exit.

Such a structure, for example, a cave system, is a great tool for players to quickly reinforce troops or retreat in battles since it allows units to quickly teleport from one position to another.

In Smelogs Playground, the Cave System holds 12 slots, so 12 units can enter it before it’s full.

It also allows for something that’s called the “Extractor Trick” in “StarCraft II”. You can build units over your unit cap. This is something we could change/fix, but we think it’s a nice little detail that good/experienced players could use to their benefit. It gives depth to the game without ruining it for genre newcomers or inexperienced players.

Endnotes

We could, later on, implement a modified version of this feature/ability to create something similar to the towers in “Age of Empires”. In that game, you can occupy/garrison units into towers to increase the building’s damage or heal the units in the building. Like our Cave System, those towers also provide shelter so vulnerable units can be saved from raids.

If you have any questions or are interested in the game, let us know.

In need of an Assistant?

Hey Unreal devs,
The Playground can be hectic with a lot of actions that happen simultaneously. That’s why we implemented what we call an “Assistant”. Through the notification buttons in the bottom right corner, it highlights issues that might need the player’s attention. This helps to keep track of all important things that are going on and to inform the player when something needs their attention.

:rocket: Quick Access

Pressing an Assistant Button allows the player to quickly get access to the unit or location that needs their attention. It can also trigger an action directly.

Assistants_BTD

:warning: Assistant Button

  1. Combat Location: displays the number of combat locations. New combat locations are automatically removed from the Assistant after some time.
    Pressing this button will show you the latest combat location.

  2. Idle Menhir: displays the number of Menhirs that don’t produce any units at the moment.
    Pressing this button will add a unit to the production queue.

  3. Unit blocked: displays the number of units that are currently blocked.
    Pressing this button will show the next unit that is blocked.

  4. Units in the Cave System: Displays the number of units in the cave system.
    Pressing this button will show the next cave and highlight it.

  5. Watchtowers in combat mode: shows the number of watchtowers that are in combat mode.
    Pressing this button will show the next watchtower that’s currently in combat mode and highlight it.

Endnotes

We may add more assistant Buttons in the future. Players also have the option to disable the Assistant altogether.

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_forward: Smelogs Playground

Crystal Codex - ancient magic

Hey Unreal Devs,
The Crystal Codex allows the player to learn and perform spells.

The spells have a charge time after which they can be reused and in Smelogs Playground some spells are stackable which means you can save up and execute one spell multiple times without waiting for a new charge.

The Crystal Codex spells are a great tool for quick actions and reactions. They give players room for some errors in regards to army positioning. This makes Smelogs Playground more forgiving than other real-time strategy games where once your army is out of position a game can be over or you’ll need time to recover.

The spells basically make the game a bit more beginner-friendly and allow for good players to push the boundaries of what is possible.

Spells can only be executed in the area where the player currently has sight. There are two spells that don’t have this restriction, both of which give the player vision and clear the Fog of War. (Scan and Final Spell)

The spells are tile grid-based to match the Playground. The player gets a preview of the area that will be affected and gets shown whether a spell is executable.

We also added some “quality of life” checks to ensure that some spells aren’t used accidentally, not affecting anything. (Heal, Overcharge and Teleport)

Points

To learn a spell, you need Crystal Codex points which are generated over time. We might change this in the future to be either based on damage dealt or on destroyed enemies to reward a proactive playstyle.

Spell Tree

There are three branches of spells that meet up in the middle for the most powerful spell.
To be able to learn a spell, the previous spells have to be learned.

Utility Branch

  1. Trap: allows the player to spawn a trap. | Up to 3 Stacks
  2. Scan: allows the player to scan an area. | Up to 2 Stacks
  3. Teleport: allows the player to teleport a 3 by 3 area | Up to 1 Stack

Combat Branch

  1. Melee Smelog: allows the player to spawn a Melee Smelog. | Up to 3 Stacks
  2. Fire: allows the player to spawn a fire that deals damage over time in a 2 by 2 area. | Up to 2 Stacks
  3. Comets: allows the player to spawn a comet shower that deals damage over time in a 3 by 3 area. | Up to 1 Stack

Economy Branch

  1. Tog: allows the player to spawn a Tog. | Up to 3 Stacks
  2. Overcharge: allows the player to overcharge buildings in a 2 by 2 area so they generate much more energy for a certain duration of time. | Up to 2 Stacks
  3. Heal: allows the player to heal all units and buildings in a 3 by 3 area. | Up to 1 Stack

Final Spell

Spawn a big explosion that deals a lot of damage in one instant, heals own and allied units and buildings while also providing vision over the spell 5 by 5 area. | Up to 1 Stack

Upgrade Helper


Hey Unreal devs,

In today’s short Behind the Design we’ll show you how little details can improve game flow and player experience.

During one of our playtesting sessions with players that had never seen the game before, we noticed that new players often had to check the Technology Tree. This takes some clicks and a bit of time.

So we came up with the Upgrade Helper:

  1. It shows all the upgrade and downgrade options

  2. It shows the result of each upgrade

  3. And it also offers some other information that might be of interest.

This is mainly a tool for players that are new to the game. It can be collapsed when it’s not needed anymore.

To look at all the details and get an overview, the Technology Tree is good. But we don’t want new players to use pauses (which are limited to 3 x 30sec) just to get the information they are looking for.

Endnotes

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_right: Smelogs Playground

1 Like

Two new ways to navigate the camera

Hey Unreal devs,

In today’s Behind the Design we’ll explain why we added alternative navigation options.
Our goal is to be the most accessible Real-Time Strategy Game.
So it’s super important that players can navigate the playground as easily as possible in a way they are either familiar with or enjoy.
This is why we added the two navigation options “Camera Panning” and “Camera Drag” on top of the base method, “Border Scroll”. ( Camera and Navigation post)

:compass:Camera Panning

We technically already implemented Camera Panning: when using one of the arrow keys, the camera will move in that direction. During a playtest, players expressed that they would like to use WASD keys instead which is possible by changing the hotkeys. But we thought since WASD is used for movement and combat order hotkeys, there might be a better way we could fulfill this wish. So we added Panning similar to the Mouse Panning when you press the Middle Mouse Button in documents or on a webpage.

Easy to understand since it’s already common practice, and – even better – also easy to add to the game.

:pinching_hand:Camera Drag

During playtesting with genre newcomers, we noticed that this was the first way they tried to move the camera/playground. So we decided to add Camera Drag as an option. It makes sense that this would feel natural since it’s the closest to how smartphones are navigated. Some programs have this behavior too and often show a hand as a cursor while the drag is active.

When pressing the Drag Key, the player can Drag & Drop the playground to change the camera’s position.

Endnotes

We might have to adjust the cursor when those navigation methods are being used for better identification.

If you have any questions or are interested in the game, let us know on our Discord about what we should post next.

:arrow_forward: Smelogs Playground

2 Likes