New HTML5 RTS game ageofsalvation.

[rech]

hi, everyone, I am new to this forum :-)

I wanted to post a topic about my HTML5 game, that needs some feedback and a bit of qa.

The game is called: ageofsalvation.com

Age Of Salvation is a real time browser based, sci-fi themed military strategy game, that allows real time unit deployment and live battles with full units control between multiple opponents.

Its like a combination of "Clash of Clans" with the real time battles with full units control of "Starcraft".

 

I coded everything from scratch including all the AI, server side and game engine.

I had to code everything in webgl myself and not using any other game engine since the performance with other game engine where suck.

Also please note that before I used webgl I had ran into all kind of issues with google chrome, it was a nightmare, every-time google updated their browser I had to adjust and find new tricks to boost the browser performance.

So eventually I wrote everything in webgl from scratch with sprite batches and minimum webgl calls.

The game uses websockets, and 1-3 threads (with webworkers).

 

The game has many features such as:

-Real time battles with full units control

-Multiplayer battles up to 3vs3

-Single player missions

-Deploying troops in enemy bases.

-Creating/joining an alliance.

-Protecting alliance friends in real time

-Building a base.

-Collecting resources.

-Watching/Joining alliance battles in real time.

-Building an army.

-Researching/upgrading units and buildings.

-Sharing replays (no need to register to watch them).

-Advanced commands such as patrol/guard/auto attack/hunt for when you are not online.

 

I also made a map editor to create all kind of advanced missions with different objectives.

And much more...

Here are some screens:

Battle example:

Controlling units.

Attacking:

 

You can also watch and share battle replays, for example:

http://ageofsalvation.com/battle_log?link=MTQ5MGUxZmMzMTJiNTNlMGlJdjNRNUNMTUVZV3liak1DbzRRUUhKRStSZjY5UHkrZlVXWjdLZHA2eUtMQzVLLzYvYXRlbGdFdnZpSFdTMWI=

http://ageofsalvation.com/battle_log?link=MGZhMTY1MDkxMGMzNWZhZEY4MWMwU3VUYm1nbTZHaEdTSTNrcXNvWUtKVHhVRWtueXpSbzMrZDU2TUE9

Or watch the gameplay trailer:

 

You don't need to register to watch them.

Any feedback or bug report is more then welcome.

You can also ask questions and I will be happy to answer :-)

 

Thank you!

 

[rich]

No time to play, but visually it looks superb.

[rech]

Thank you!

You can complete the tutorial in few minutes if you change you mind.

[lightest]

Holy Crap dude! I did watch only replays yet but game looks really awesome! High respect for selfmade engine as well. I'm looking into creating an isometric game myself so here is some questions from my side:

 

1. How long did it took you to build this?

2. Server side is written on nodejs or?

3. Is there any generated graphics or it's all sprites?

 

Thanks in advance!

[AzraelTycka]

Hello,

 

I tried it and I noticed some little things. But firstly, it's a nice game, not my kinda but it's nicely done.

 

Everything below understand in context of game tutorial.

 

1/ The big green arrow which shows you where to click can be very easily displaced when pointing at anything on the map (buildings, units) just zoom in and out a few times and/or pan and zoom and you will see that the green arrow flies to the top left corner area (well far from the corner but still way out of place).

 

2/ I noticed a typo I think (?), when the tutorial first (or second) time mentions Factory I think it says Factry, the rest of the tutorial had Factory spelled correctly, but I'm not entirely sure haven't checked it for the second time.

 

3/ Another one I'm not sure myself, couldn't reproduce this one. But it seemed that during upgrading of command center the cost was 2 diamonds but only 1 diamond was paid. But might have misunderstood the price it could be that the cost was 1 diamond I'm not sure about this one.

 

4/ When building mag tanks, the game asks you to build 3 Mag Tank, I would prefer seeing there 3 Mag Tanks or 3x Mag Tank. Not that I want to be a nitpicker ;-).

 

5/ When scrolling (middle mouse) through buildings to build, I don't know it might be just my preference but I think it's more natural to scroll for more by scrolling down instead of yours scroll up. It's just a feeling I get from websites and othe games. :-)

 

6/ Is there a way how to skip to next instruction in tutorial, because sometimes it feels like I'm kinda waiting until the missy finishes her talk while I have everything ready ;-). For example clicking on the tutorial message window? I found only how to stop the tutorial.

 

7/ I might have missed it but it didn't seem to me that the game introduced the interface at all. How about starting the tutorial with what is where and what means what?

 

 

Well these are just some of my thoughts, but I really like what you created.

 

Good luck.

[ramspeed]

Wow nice.

[bruno_]

Very nice graphics.

 

It has, however, an error in firefox:

TypeError: browser.is_retina is not a function

 

 

Works fine on Chrome.

[Get_Bentley]

Did not get a chance to play it, but wow it looks gorgeous.

[dimumurray]

Works great on my laptop but I can't get it to run on my mobile device (iPhone 5S which supports WebGL). Is it desktop only?

[rech]

Holy Crap dude! I did watch only replays yet but game looks really awesome! High respect for selfmade engine as well. I'm looking into creating an isometric game myself so here is some questions from my side:

 

1. How long did it took you to build this?

2. Server side is written on nodejs or?

3. Is there any generated graphics or it's all sprites?

 

Thanks in advance!

 

 

1. Most of the code I wrote in the first months, about 60k lines on client side and 50k lines on server.

I spent a lot of time because I redesigned the entire game again, and fired the previous designer

so it took about 18 months, where most of the time I didn't managed to work 9 hours a day. but I code really fast (some days I managed to code 2k lines of code).

 

2. Yea its in node.js.

 

3. its all sprites, I had to write my own sprite editor program for this game, just to make everything easier, I also learned how to use c4d, 3d max and maya just so I will understand what my designer is doing, and I wanted to be able to estimate his work effort in days.

Anyway sprite editor is very recommended, it will allow you to export stuff from a 3d program or after effect and add it to the game in minutes, instead of manually making the sprite in Photoshop.

[rech]

Hello,

 

I tried it and I noticed some little things. But firstly, it's a nice game, not my kinda but it's nicely done.

 

Everything below understand in context of game tutorial.

 

1/ The big green arrow which shows you where to click can be very easily displaced when pointing at anything on the map (buildings, units) just zoom in and out a few times and/or pan and zoom and you will see that the green arrow flies to the top left corner area (well far from the corner but still way out of place).

 

2/ I noticed a typo I think (?), when the tutorial first (or second) time mentions Factory I think it says Factry, the rest of the tutorial had Factory spelled correctly, but I'm not entirely sure haven't checked it for the second time.

 

3/ Another one I'm not sure myself, couldn't reproduce this one. But it seemed that during upgrading of command center the cost was 2 diamonds but only 1 diamond was paid. But might have misunderstood the price it could be that the cost was 1 diamond I'm not sure about this one.

 

4/ When building mag tanks, the game asks you to build 3 Mag Tank, I would prefer seeing there 3 Mag Tanks or 3x Mag Tank. Not that I want to be a nitpicker ;-).

 

5/ When scrolling (middle mouse) through buildings to build, I don't know it might be just my preference but I think it's more natural to scroll for more by scrolling down instead of yours scroll up. It's just a feeling I get from websites and othe games. :-)

 

6/ Is there a way how to skip to next instruction in tutorial, because sometimes it feels like I'm kinda waiting until the missy finishes her talk while I have everything ready ;-). For example clicking on the tutorial message window? I found only how to stop the tutorial.

 

7/ I might have missed it but it didn't seem to me that the game introduced the interface at all. How about starting the tutorial with what is where and what means what?

 

 

Well these are just some of my thoughts, but I really like what you created.

 

Good luck.

 

First of all I want to thank you for the detailed feedback :-)

1. I will check it out.

2. Well English is my second language, I hired a guy to make most of the text of the game (he writes short sci-fi stories) but some of the tutorial I did myself :-(

3. I think that the upgrade time went down, so the price dropped from 2 to 1 and the popup box didn't updated.

4. sure...

5. Well I agree, I think that I never noticed that. also please note that if you have touch screen or if you use mobile device you could just use touch event to scroll it.

6. Very good point, in other games they solved it by letting you click on the message box. Unfortunately I can't make it clickable because I don't exactly know the screen size of the user, and I dont want to hide other buttons, so I actually allow mouse events to go through the message box. I tried to find a solution for it with my designer, but I guess that the only valid option is to allow clicks on the message box and then test the tutorial with every screen size and try to move the tutorial accordingly.

7. Could you please explain some more? Which items in the interface you don't understand?

 

Anyway, thanks again for your detailed feedback!

[rech]

Works great on my laptop but I can't get it to run on my mobile device (iPhone 5S which supports WebGL). Is it desktop only?

 

No, it should run on mobiles as well, I don't have iphone so I am testing it on my lg g3. maybe its time to buy iphone...

The main problem on mobiles is the network connection, sometimes if you are not connected to wifi it could be really slow.

You also most have mobile that support webgl.

[AzraelTycka]

@rech

 

add interface, I jsut meant, that I was kinda surprised when the game told me to use diamonds. Like what they are, where is the count, how to mine them? Well I know the mechanic so I expected them to be for real money but it just kinda felt a little bit rushed. Just simply after greeting the game could just tell you oh here is your build panel and commands, here is the minimap and you can do this with it, here is the collectable resources tab for your production, here are the diamonds which are for, etc..

 

It's not that difficult to find out after a while but it would make things easier, it's just that your icons are not the same as a load of other games people play and they don't even know your game's mechanichs, so jsut telling them this basic info will introduce the game pretty well in justa few seconds - everyone will know that you build and upgrade (such as Starcraft games do), that you can do fast builds/upgrades, and so on with just the user interface introduction. Although I'm not saying it's necessary but maybe it would add some clarity and the player can just hop into the game pretty fasti nstead of discovering everything (there are still other ways to discover ;-)).

 

 

There are two more things I noticed after getting into a mission.

1/ Whene there is the map where you select missions (against AI). I would suggest to change slightly how the game highlights the selected map. At least here on my computer, when I clicked on one sector of the map it was selected and it's borders disappeared that makes it visible - perfect - but when I mouseover other sectors to check what they offer their border disappears as well and whe two sectors border there is just a huge hole in the map because neither of them shows it's borders. I hope it's understandable.

(select one sector on the map then mouseover other sectors gives you two sectors without borders it just lessens clarity).

 

2/ In the mission I was attacking enemy (AI) bunker and there was a tank - literally - right next to it but only turret was attacking me. I'm not sure if this is how you decided the AI is going to work but I would add at least some overlay over it (i.e. units pursuing enemies not only when they come into attack range but into some let's call it aggressive radius or something else). The enemy units came after me only when I got into their attack range. In case of the turret and the tank I was just one move from attack range of the tank so it didn't do anything at all after I destroyd the bunker and made one more move (got a tiny bit closer) the tank started attacking. Well perhaps it's this way just because it was the beginning of the game?

 

Otherwise I must say it again, it's really nicely made, there must be a ton of work behind this.

[rech]

@rech

 

add interface, I jsut meant, that I was kinda surprised when the game told me to use diamonds. Like what they are, where is the count, how to mine them? Well I know the mechanic so I expected them to be for real money but it just kinda felt a little bit rushed. Just simply after greeting the game could just tell you oh here is your build panel and commands, here is the minimap and you can do this with it, here is the collectable resources tab for your production, here are the diamonds which are for, etc..

 

It's not that difficult to find out after a while but it would make things easier, it's just that your icons are not the same as a load of other games people play and they don't even know your game's mechanichs, so jsut telling them this basic info will introduce the game pretty well in justa few seconds - everyone will know that you build and upgrade (such as Starcraft games do), that you can do fast builds/upgrades, and so on with just the user interface introduction. Although I'm not saying it's necessary but maybe it would add some clarity and the player can just hop into the game pretty fasti nstead of discovering everything (there are still other ways to discover ;-)).

 

 

There are two more things I noticed after getting into a mission.

1/ Whene there is the map where you select missions (against AI). I would suggest to change slightly how the game highlights the selected map. At least here on my computer, when I clicked on one sector of the map it was selected and it's borders disappeared that makes it visible - perfect - but when I mouseover other sectors to check what they offer their border disappears as well and whe two sectors border there is just a huge hole in the map because neither of them shows it's borders. I hope it's understandable.

(select one sector on the map then mouseover other sectors gives you two sectors without borders it just lessens clarity).

 

2/ In the mission I was attacking enemy (AI) bunker and there was a tank - literally - right next to it but only turret was attacking me. I'm not sure if this is how you decided the AI is going to work but I would add at least some overlay over it (i.e. units pursuing enemies not only when they come into attack range but into some let's call it aggressive radius or something else). The enemy units came after me only when I got into their attack range. In case of the turret and the tank I was just one move from attack range of the tank so it didn't do anything at all after I destroyd the bunker and made one more move (got a tiny bit closer) the tank started attacking. Well perhaps it's this way just because it was the beginning of the game?

 

Otherwise I must say it again, it's really nicely made, there must be a ton of work behind this.

 

Very good feedback about the tutorial, I will do that.

 

I think that the border issue with the map is a bug, because when you select a map section the border color should highlight and not disappear, can you tell me which browser you use?

 

About the tank sight range, I tried to solve it in many ways, I even added a "group" feature that made units behave like a group and take decisions as one, or move in specific structure, but I had to remove it from the game.

I do want to allow more control on your units for when you are not online, like guard specific areas or add alert mode where units will help specific units in some area. The easy part is to code it, the hard part is to make it easy to understand, and make an easy and simple UI for it.

 

The easiest solution would probably to simply add a "help" radius where units will help other friendly units that are under attack in some radius.

Maybe I should add another command that will say something like: "Custom" and when you click on it it will; open new popup with multiple advance commands that you can give to the units.

 

Anyway thanks again :-)

[AzraelTycka]

@rech

I use mozilla Firefox, latest version, win 10 (hw drivers all up to date as well).

 

Help radius sounds ok. No reason to let one unit to be attacked and others not to react cosidering it's one side, they would probably know, I'm sure they can use radio waves ;-).

 

Good luck with the game and hope to get a bit more into it to see some large battles.

 

Happy new year by the way,

[rech]

Thank you, I will test it in firefox, Happy new year to you too :-)

[rech]

Since its an html5 forum, I think that I should post about the firefox bug.

I have svg filter that I apply to each map section on mouse hover/active, the filter creates shadow inset which cannot be achieved using normal filter shadow. But on firefox the filter doesn't work, it causes the svg element to disappear.

I found this firefox bug (stack overflow link), and since I am using svg with external css file with filter that points to svg filter inside the document firefox can't find it.

And even if it does find it (using inline css or using the solution in stackoverflow) the filter will only apply to the border of the svg and not the image fill 

So I had no choice but to disable the css filter for firefox only. 

So I used http://browserhacks.com/ to target firefox browser only using this selector: 

_:-moz-tree-row(hover), .selector {}

and simply disable the filter for the desired element.

 

P.S on chrome it looks much better, it will also animate the filter effect which will make it look even better.

 

I will upload this fix later on...

[WitheringTreant]

This game looks really nice. Its polished and pleasant. 

The only problem for me was that I got bored before the tutorial ended. Might wanna make it a bit faster.

[rech]

This game looks really nice. Its polished and pleasant. 

The only problem for me was that I got bored before the tutorial ended. Might wanna make it a bit faster.

Thanks, 

A possible solution would be to make the tutorial message box clickable like "AzraelTycka" suggested, do you think that it would work for you?

[rech]

p.s I fixed the firefox bug.

[marcgfx]

looks great. I especially love the explosions. what tools were used?

[AzraelTycka]

A few days already went by so I'd like to ask, how have you advertise your game so far and how many players have you got? I'm just curious how the numbers per some period look and what are your goals in this aspect? Well if it's not secret ;-).

[WitheringTreant]

Thanks, 

A possible solution would be to make the tutorial message box clickable like "AzraelTycka" suggested, do you think that it would work for you?

 

I think I just got quite bored building this and that mine and warehouse etc. Maybe a prebuilt base which you can arrange into your liking by moving structures?

 

Maybe i was just tired and the game requires no changes. :9

[rech]

I think I just got quite bored building this and that mine and warehouse etc. Maybe a prebuilt base which you can arrange into your liking by moving structures?

 

Maybe i was just tired and the game requires no changes. :9

 

Well I should use more user testing to get better understanding. But thank you for your feedback!

 

 

A few days already went by so I'd like to ask, how have you advertise your game so far and how many players have you got? I'm just curious how the numbers per some period look and what are your goals in this aspect? Well if it's not secret ;-).

 

I haven't started to advertise it yet...

I have only 370 registered...

I might start to advertise this week, if you have any suggestions for advertising I would be happy to hear it :-)

 

looks great. I especially love the explosions. what tools were used?

 

I used freelancers for the explosions, If I am not mistaken they used 3d max, took ages to make them...

For the models, they used Maya and c4d.

[staff0rd]

Is it possible to play without sign-up?