Jump to content
  • Advertisement

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.







Edited by Viir

Share this post

Link to post
Share on other sites

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.


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.


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:


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


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:


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.


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.


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.


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
  • Advertisement
  • Popular Tags

  • Popular Now

  • Advertisement
  • Similar Content

    • By bojanzarnoski@gmx.de
      I want to get into coding again by programming a 2D platformer to get started, but i don't know if i should use Java or C# with the unity engine.
      I am pretty fit with Java, but with c# i have to start from scratch. What do you recommend and why?
    • By 3dmodelerguy
      So I have this code to create a textbox ui element with SDL2 and for the most part it works:
      #include <iostream> #include "TextboxUi.hpp" #include "../Engine/Text.hpp"; #include "../Utility/SdlUtility.hpp"; #include "../Engine/Game.hpp"; TextboxUi::TextboxUi(int x, int y, int width, int height, SDL_Color backgroundColor, SDL_Color textColor) { _background = {x, y, width, height}; _backgroundColor = backgroundColor; _textColor = textColor; } void TextboxUi::setValue(std::string value) { _value = value; } void TextboxUi::handleInput(SDL_Event &event) { switch (event.type) { case SDL_TEXTINPUT: { if (_isActive) { _value += event.text.text; _cursorPosition += 1; } break; } case SDL_TEXTEDITING: { break; } case SDL_KEYUP: { switch (event.key.keysym.sym) { case SDLK_BACKSPACE: if (_value.size() == 0) { break; } _cursorPosition -= 1; _value.erase(_cursorPosition, 1); break; case SDLK_s: { if (!_isActive) { _isActive = true; } break; } case SDLK_LEFT: { if (_cursorPosition == 0) { break; } _cursorPosition -= 1; break; } case SDLK_RIGHT: { if (_cursorPosition == _value.size()) { break; } _cursorPosition += 1; break; } case SDLK_ESCAPE: _isActive = false; _value = ""; break; default: break; } break; } default: break; } } void TextboxUi::enable() { _isActive = true; } void TextboxUi::disable() { _isActive = false; } void TextboxUi::draw(SDL_Renderer* renderer) { SdlUtility::setRenderDrawColor(Game::renderer, _backgroundColor); SDL_RenderFillRect(Game::renderer, &_background); // if there is no text Text would fail to create the surface and texture (not quite sure why) if (_value.size() == 0) { return; } Text text = Text("Assets/Fonts/Vera.ttf", 12, _value, _textColor); text.display(_background.x + 5, _background.y + 2); // @todo implement visual for text cursor } The one last thing I want to do before I call this textbox done for the time being is try to figure out how to simulate a cursor. At this point just getting a solid cursor would be final (though ultimately I would like to have it blinking. I have the cursor position so I know between which characters the cursor should be however I am not sure how to calculate that.
      Is there a way to calculate the width of a given string without actually rendering said sting to the screen with SDL2 / SDL2_ttf?
    • By DevAndroid
      Hello everyone,
      I'm trying to display a 2D texture to screen but the rendering isn't working correctly.
      First of all I did follow this tutorial to be able to render a Text to screen (I adapted it to render with OpenGL ES 2.0) : https://learnopengl.com/code_viewer.php?code=in-practice/text_rendering
      So here is the shader I'm using :
      const char gVertexShader[] = "#version 320 es\n" "layout (location = 0) in vec4 vertex;\n" "out vec2 TexCoords;\n" "uniform mat4 projection;\n" "void main() {\n" " gl_Position = projection * vec4(vertex.xy, 0.0, 1.0);\n" " TexCoords = vertex.zw;\n" "}\n"; const char gFragmentShader[] = "#version 320 es\n" "precision mediump float;\n" "in vec2 TexCoords;\n" "out vec4 color;\n" "uniform sampler2D text;\n" "uniform vec3 textColor;\n" "void main() {\n" " vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, TexCoords).r);\n" " color = vec4(textColor, 1.0) * sampled;\n" "}\n"; The render text works very well so I would like to keep those Shaders program to render a texture loaded from PNG.
      For that I'm using libPNG to load the PNG to a texture, here is my code :
      GLuint Cluster::loadPngFromPath(const char *file_name, int *width, int *height) { png_byte header[8]; FILE *fp = fopen(file_name, "rb"); if (fp == 0) { return 0; } fread(header, 1, 8, fp); if (png_sig_cmp(header, 0, 8)) { fclose(fp); return 0; } png_structp png_ptr = png_create_read_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL); if (!png_ptr) { fclose(fp); return 0; } png_infop info_ptr = png_create_info_struct(png_ptr); if (!info_ptr) { png_destroy_read_struct(&png_ptr, (png_infopp)NULL, (png_infopp)NULL); fclose(fp); return 0; } png_infop end_info = png_create_info_struct(png_ptr); if (!end_info) { png_destroy_read_struct(&png_ptr, &info_ptr, (png_infopp) NULL); fclose(fp); return 0; } if (setjmp(png_jmpbuf(png_ptr))) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); fclose(fp); return 0; } png_init_io(png_ptr, fp); png_set_sig_bytes(png_ptr, 8); png_read_info(png_ptr, info_ptr); int bit_depth, color_type; png_uint_32 temp_width, temp_height; png_get_IHDR(png_ptr, info_ptr, &temp_width, &temp_height, &bit_depth, &color_type, NULL, NULL, NULL); if (width) { *width = temp_width; } if (height) { *height = temp_height; } png_read_update_info(png_ptr, info_ptr); int rowbytes = png_get_rowbytes(png_ptr, info_ptr); rowbytes += 3 - ((rowbytes-1) % 4); png_byte * image_data; image_data = (png_byte *) malloc(rowbytes * temp_height * sizeof(png_byte)+15); if (image_data == NULL) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); fclose(fp); return 0; } png_bytep * row_pointers = (png_bytep *) malloc(temp_height * sizeof(png_bytep)); if (row_pointers == NULL) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); free(image_data); fclose(fp); return 0; } int i; for (i = 0; i < temp_height; i++) { row_pointers[temp_height - 1 - i] = image_data + i * rowbytes; } png_read_image(png_ptr, row_pointers); GLuint texture; glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glTexImage2D(GL_TEXTURE_2D, GL_ZERO, GL_RGB, temp_width, temp_height, GL_ZERO, GL_RGB, GL_UNSIGNED_BYTE, image_data); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE); png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); free(image_data); free(row_pointers); fclose(fp); return texture; } This code just generates the texture and I store the id on memory
      And then I want to display my texture on any position (X, Y) of my screen so I did the following (That's works, at least the positioning).
      //MY TEXTURE IS 32x32 pixels ! void Cluster::printTexture(GLuint idTexture, GLfloat x, GLfloat y) { glActiveTexture(GL_TEXTURE0); glBindVertexArray(VAO); GLfloat vertices[6][4] = { { x, y + 32, 0.0, 0.0 }, { x, y, 0.0, 1.0 }, { x + 32, y, 1.0, 1.0 }, { x, y + 32, 0.0, 0.0 }, { x + 32, y, 1.0, 1.0 }, { x + 32, y + 32, 1.0, 0.0 } }; glBindTexture(GL_TEXTURE_2D, idTexture); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferSubData(GL_ARRAY_BUFFER, GL_ZERO, sizeof(vertices), vertices); glBindBuffer(GL_ARRAY_BUFFER, GL_ZERO); glUniform1i(this->mTextShaderHandle, GL_ZERO); glDrawArrays(GL_TRIANGLE_STRIP, GL_ZERO, 6); } My .png is a blue square.
      The result is that my texture is not loaded correctly. It is not complete and there are many small black spots. I don't know what's going on ? It could be the vertices or the load ? Or maybe I need to add something on the shader. I don't know, I really need help.
      Thanks !
    • By LuigiLuigi
      I've been working on my own Metroidvania via GameMaker Studio for the past few years. You play as a bat named Ralph as he goes on an adventure to obtain 7 Crystal Medallions hidden in dungeons with the help of a cult known as the Crimson Fog. Along the way, there will be quests unlocked in Cedrus Village as you progress through the game. I've managed to complete a demo of the game up to the first dungeon and boss fight.
      I have only a PC build available, and the only gamepads I managed to install were Logitech Precision and Xbox PC gamepads. I had some trouble on gamepad detection though, so they may have connection issues. The desktop controls are similar to Terarria's control scheme if it's too much trouble. I don't have any music at this point, I'll need to get someone else to compose it later on. The music I make isn't bad, but it doesn't fit the aesthetic that well.
      I'm really hoping I can get feedback regarding the general content.
      Crimson Fog.0.2.zip
    • By Alexander Winter
      Jumpaï is a game about creating platformer levels and playing them online with everyone. Will you become the most popular level maker or will you be a speedrunner holding world records on everyone's levels? More into casual play? No problem! You can happily play through the giant level database or chill at people's hub. Meet new people, make new friends, learn to master the game by asking pros or ask for people's favorite tricks on level making. Download here: https://jumpai.itch.io/jumpai Discord: https://discord.gg/dwRTNCG   Trailer:      (The following screenshots are older but still a bit representative)  

      Unlike other games of its genre, Jumpaï is about playing levels with everyone in real time. You have the fun to see how other people are playing and get to realize you are not the only one failing that jump!

      The game is currently into development and still have lots to do. I am looking for people willing to help how they can. Developer? Graphist? Play tester? Sound designer? Game designer? I'm welcoming any talent. The project is so big I have a lot of work to do in all areas. Server backend, UI/UX, Game networking, Gameplay and even the website some day. As you can see from the default buttons, the game has been made with LibGDX. This project is a perfect opportunity for you to get better in various fields as well as showing off your skills.

      If you plan to take an important role into the development of the game, we will discuss how you will get paid once the game generates money. Note that I'm not working on the game full-time. I'm studying full-time and working on it is a hobby. The project has started in november 2016 and experiences heavy progress.

      So, are you interested? If so join me on my discord https://discord.gg/dwRTNCG and I'll answer all your questions.

      Additionnal screenshots:

  • Advertisement

Important Information

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

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!