Jump to content
  • Advertisement
Viir

HTML5 [WIP] DRTS - Distilled Real-Time Strategy

Recommended Posts

I am working on a multiplayer real-time strategy game.

This game focuses on the core of real-time strategy, forgoing resource gathering, base building, and unit types.
Play against bots or meet other people online to play a match.

You can play it in your web browser on https://play.drtsgame.com

Note that the camera controls are not yet explained in the tutorial. Here is how to control the camera:
Camera panning: Hold down right mouse button and drag to move the camera
Camera Zoom: Use the mouse wheel to zoom.

 

2017-11-24.DRTS.at-6ce22a41-tutorial-stage-split-complete.png

 

2017-12-18.DRTS.play-with-bot.png

 

2018-04-27.DRTS.conversation-in-lobby.png

Edited by Viir

Share this post


Link to post
Share on other sites
Advertisement

DRTS Update - Improving tutorial and playing with bots

Today I released a new version of DRTS. You can play it now at https://distilledgames.itch.io/distilled-rts

The changes made since the last release are primarily about the tutorial and playing with bots.

Tutorial

Hugo Blanco recently helped me test the game. He patiently worked through the tutorial and so I learned about stumbling blocks in there. Based on these observations, I compiled a list of planned changes to improve the tutorial and UI

Selecting The Split Ratio

When testing the tutorial, we found a problem in the stage which instructs the player to split his unit. In the step to select the split ratio, there was insufficient guidance on how to proceed. I implemented several changes to improve this and also make the UI for this easier to use in general:

  • In the tutorial step, visually point out a location the player can click on to complete the step. This is done by displaying an arrow pointing to the slider control.
  • Make the slider control react to moving the mouse over it, to help understand that we can interact with this thing.
  • Make the slider control work the same way with all mouse buttons.

The video below shows how this part of the tutorial looks like now: 2017-12-28.DRTS.select-split-ratio.gif

Some other improvements made in the tutorial:

  • Enable the player to complete the tutorial without relying on external instructions about camera controls: In the tutorial, the camera automatically follows the action to make sure the player can always see everything of interest.
  • The visuals to draw attention to objects to interact with now also indicate if the player should use a specific mouse button.

Playing with Bots

There are now more maps to play on. You will find a new map each time you start a game. I expanded the map generation function to create symmetric maps. With this release, you will automatically get a symmetric map when starting a game.

Since the last release, several bugs have been fixed:

  • Fix a distracting visual glitch discovered by Hugo: Avoid splitting a unit when the resulting units are going to be merged in the next progress step anyway.
  • Game World Movement: Opponents units block each others movement on opposite edges.
  • Game World Movement: Opponents unit blocks movement from node to edge.
  • Game World Combat: Make unit attack the unit blocking its movement with the highest priority.

Share this post


Link to post
Share on other sites

DRTS Update - Camera Controls And Picking Maps

Just released another version of DRTS.

You can play it at https://distilledgames.itch.io/distilled-rts 

Picking Maps

I improved the UI to preview maps before starting to play with bots. Now it is easier to find a map you like and see what you are getting into before starting the game.

2018-01-30.DRTS.map-preview

Camera Controls

In addition to earlier input methods, you now can control the camera also via keyboard: To pan, use arrow keys, for zoom plus and minus. To improve onboarding, I added buttons for controlling the camera. This visual addition to the UI should help new players notice that the field of view can be changed.

Under The Hood

  • To prepare for competitive games, the map generator was improved for exact symmetry of edges in generated maps.
  • Pathfinding now yields optimal paths in more cases.

Share this post


Link to post
Share on other sites

DRTS Web App - Play With Other People

The first implementation of DRTS came in form of a windows application. While the windows app did its job, I felt uncomfortable with the bottleneck resulting from depending on windows as a platform. To lower this barrier, I started developing a version to run in web-browsers. The web app has come a long way since then, offering an interactive tutorial and playing with bots.

The update released today expands the web app by support for playing with other people online.

To play the game, head over to play.drtsgame.com

Starting today, the web app there also offers to join another player for a game.

The video below demonstrates the new feature, using two different web-browsers:

2018-02-23.DRTS.web-app-play-with-other-people

Under The Hood - Rendering Efficiency And Visibility Changes

Also with this update, visibility of the game world is changed in several ways:

  • The computation of visibility is reimplemented using a new algorithm to be more efficient in common scenarios. This change drastically improved frame rates in Firefox, Edge, and Chrome.
  • Symmetry for view propagation along edges: With the new algorithm, visibility is changed for symmetry between pairs of nodes. This means that viewing along an edge always works in both directions, regardless of the travel direction of the edge.
  • When the game is over, the complete game world is revealed to all players.

Share this post


Link to post
Share on other sites

DRTS April Release - Supporting Exchange Between Players

Hi fellow strategy gamers, the April release of DRTS game is now live at https://play.drtsgame.com

Conversations

After adding support for playing with other people in the last release, this one adds support for communication between players. You can now exchange text messages with other people using the DRTS web app. The screenshot below shows how this looks like in the app:

2018-04-27.DRTS.conversation-in-lobby.pn

When you have joined a game, you can add messages to be seen by other people in the same game. In this case, the color of the participant's units is indicated along with the message.

2018-04-27.DRTS.conversation-in-game.png

User Accounts

Joining online games now requires signing in to your player account. When attempting to join a game for the first time, you will be redirected to a page where you can sign in or create a new account. Playing with bots is not affected by this and works as before.

Share this post


Link to post
Share on other sites

DRTS May Update - Touch Screen Support And Sound Effects

This update of DRTS brings several improvements to the in-game interface.

You can play the newest version at https://play.drtsgame.com

Simpler Controls And Touch Screen Support

Controlling the game using a mouse does not anymore require using different mouse buttons. You can select and send units, and scroll the camera using any mouse button. As before, zooming works with the mouse wheel and keyboard. This update introduces support for touchscreens. You can zoom in and out using two fingers.

Sound Effects

I added sound effects to help keep track of in-game events. You can hear, for example, when you captured a node or a unit is defeated.

Rendering

To avoid choppy movements on the screen, I made some improvements to rendering. The units locations are animated using client-side prediction and easing. Easing is also applied to camera movements.

2018-05-11.DRTS.easier-on-the-eyes.gif

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!