DUELYST - Squad-Based Tactical Combat with Ranked Competitive Play

[kiesto88]

Hey all, we developed this game in HTML5 + JS + WebGL.  It'll work seamlessly on any modern browser (Chrome, Firefox) without any plug-ins.  We also just launched our Kickstarter a few days ago!  Our team's been pouring our lives into this for the past year so it's really exciting and meaningful for me to share this.

 

If you like our game, please support our Kickstarter: http://kck.st/NLR937

 

OVERVIEW

Duelyst is a tactical turn-based strategy game with a heavy focus on ranked competitive play, brought to you by veteran developers and creators from Diablo III, Rogue Legacy and the Ratchet & Clank series.  

The focus is on squad-based combat on a tactical map with fast-paced multiplayer 1v1 battles where victory comes from defeating your opponent's General. 

At launch, there will be five unique factions with a roster of 100+ battle units and spells.

 

 

 

BATTLE UNITS

 

 

 

 

CONCEPTS

 

 

 

 

 

[SpriteWrench]

Saw this on kotaku.  Was excited but im a bit gun shy of kickstarter.  Didnt realize that you guys were using html5!!! This may very well change things for me!!! also the game look soooooooo goood.

[kiesto88]

Thank you!  Really appreciate it.  We use only JS + WebGL to do all these FX as well.  Works great on Chrome/Firefox with no plug-ins!

 

Distortion Shield

 

 

Real-Time Lighting + Shadows + Bloom 

 

[SpriteWrench]

At any point are you guys planning to detail how this was done?  I would love to see!

[turnA]

Love that HTML5 games is being pushed further beyond it's usual limit! It's not strange though seeing the developer behind Duelyst
Simply gorgeus and looks interesting to play, can't wait!

 

At any point are you guys planning to detail how this was done?  I would love to see!

 

Yes! I would like to read postmortem about this too!

[Quetzacotl]

Looks great, but I'm curious why you choosed such an art style, I mean pixelated characters. Why not more detailed ones?

[kiesto88]

@Quezacotl: At the beginning of our visual prototype, we started with lo-fi pixel art.  And since Glauber (Lead Artist from Rogue Legacy) was an amazing pixel artist, we pretty much went the pixel art direction. 

 

@turnA: We're going to write a bit about how we implemented all this on the code side.  Very soon!

[snowkie]

I've stalking your works for some time..hahaha.. i was shocked that you guys using html5! Good luck on the kickstarter and hope you would like to share some of the technical stuff with us

[chib]

Wow, looks like the bar was just raised.  Absolutely gorgeous art direction.

[Starboar]

I like the distortion field

[collinhover]

Heyo everyone, I've been working on Duelyst's real time fx, and one thing I've really enjoyed building is our lighting model. Keep in mind I'm learning a lot of the fx stuff as I go (so I may make mistakes), and while I can't give you all a full post mortem, I wanted to share a few thoughts for my fellow devs that are interested.

 

We are using only HTML, CSS, and JS, and our real time fx is really made possible by WebGL. I'm not sure whether I'd call Duelyst 2D or 3D, more like some sort of odd mix. Sure, we're using 2D sprites, and although our viewing angle is similar to how you'd view a board game, most of our sprites all occupy the same xy plane. For all intents, we don't have depth or 3D mesh information to work with, and that makes lighting just a bit tricky when trying to simulate 3D space. What we're using right now is a mix of 2D shadows and 3D lighting. To give you an example of what I mean:

 

 

Anyhow, we ran a lighting experiment some time ago to see whether deferred shading or deferred lighting were viable options. We're all dedicated to making as polished an experience as possible, and lighting is a big part of making an experience believable. Deferred techniques are attractive for performance reasons, relative to the usual forward rendering method where you render lighting for each sprite/mesh as you go, because they only need to calculate light once for each pixel on screen. 

 

The core of these deferred techniques are the multiple render targets, or MRTs, and WebGL does not support them. There is an extension, WEBGL_draw_buffers, that adds support for MRTs, but because we're very interested in bringing Duelyst to as many platforms as possible, I've avoided all use of WebGL extensions. Missing MRTs almost kills the idea entirely =(

 

However, we found that if we're willing to make a small concession in the lighting accuracy, we could do something very similar to deferred lighting using only a single off-screen render target. Long story short, while rendering each sprite we were also rendering the screen space normal and depth of each into the off-screen render target, called the g-buffer. Like I said, we had no depth information, but because our camera is at a fixed angle we can very easily simulate it. For the ground, we can say that the depth increases as it goes from the bottom of the screen to the top, and each unit depth is just where its feet are touching the ground. As for the lights themselves, they're handled the same plus one additional property, the altitude or how high off the ground they are. To give you an example of what this faked depth looks like:

 

 

Normally, you'd pack the depth information into all 4 channels of an RGBA render target, but in the experiment we found that we only needed a single channel for solid results. That left us the other three channels for the sprite's normal, and if we wanted to we could do sprite normal maps for even more believable lighting. This setup was missing some material properties, but that is part of the loss of accuracy I mentioned earlier. Regardless, the results looked neat, lighting is 3D, and we can throw about 2000 lights into our scene before dropping below 60 fps. Here's an older test of explosion lighting in mid-flash:

 

 

Going forward, we're continuing to refine our direction with lighting to get the best combination of visual fidelity and performance, so nothing is final yet =) If you want to read more about deferred lighting, check out Wolfgang Engel's post on light pre-pass rendering: http://diaryofagraphicsprogrammer.blogspot.com/2008/03/light-pre-pass-renderer.html. 

[kiesto88]

Hey guys, Collin just posted an technical overview for parts of our game.  It still needs moderator approval, so it should be appearing on this thread very shortly!

 

In the mean time, we're very close to our Kickstarter funding goal at 97% of target!  Please share this game with like-minded tbs / tactics gamers

http://kck.st/NLR937

 

And we hope you enjoy these captured screenshots of our game!

 

 

[collinhover]

I forgot to mention in my post above, but if there are other fx in the game you guys want to know about, let me know and I'll see what I can do :-)

[LoneWolf]

i love the art direction and effects, GJ!

[kiesto88]

We're also really excited to announced Duelyst just got funded on Kickstarter!!  http://kck.st/NLR937

 

Thank you guys!

[cubiq]

this is amazing. congrats!

[kiesto88]

Many thanks!!!

 

 

such danger.  much intimidating.

[Luis Felipe]

Fantastic work guys! Projects like these truly inspire and ignite passion

 

Really pumped to play and explore such an amazing looking world through the power of HTML5!

 

Did the Duelyst team use a specific framework for development or more of a custom build?

[Funkyy]

This looks really amazing! Good job and good luck guys.

[forwardresent]

The art style is brilliant. Also a big fan of the Assassin carrying a sword bigger than him.

 

Congrats on getting Kickstarted too, will upvote on Greenlight.

[soybean]

Congrats on getting funded on kickstarter!!

The project looks so awesome and gorgeous. Wish best of luck on the project and looking forward for any updates!!!

[kiesto88]

@Luis Felipe: We actually started out trying out impactJS and melonJS but these aren't really production ready.  We moved over to cocos2d-x which has been solid. 

[sarith]

I love everything that I've seen of this project!  Just backed it on Kickstarter 

 

You mentioned that you're using cocos2d-x as the framework.  I'm assuming using you're using the JS bindings for maximum deployment targets.  Out of curiosity – how are you integrating WebGL into the project?  Also, are you having to rewrite all your graphics code for OpenGL ES for iOS and such?  I haven't seen much online about the workflow for truly cross-platform graphics work with cocos2d-x.

 

Any illumination on these concepts would very greatly appreciated!

[kiesto88]

@Sarith: Yeah, we're using JS bindings and node web-kit to port to other platforms + Chromium project.  We haven't ported it to mobile/tablets yet, so we'll have to investigate what you're saying.

 

Incidentally, we just got an official Rogue Legacy crossover for Duelyst (thanks for Cellar Door Games).

 

 

Rogue Legacy Paladin but slightly grown up

[collinhover]

@Sarith Keith summed it up pretty well. We're especially excited about node-webkit as a way to develop only on a single codebase and have integration with things such as Steamworks via node plugins. Our team is small so this is especially important. If, however, it turns out that we can't deploy to mobile using this method, we know some of the awesome guys working on CocoonJS and will discuss the mobile deploy further with them. Worst case, the shader code will be the easiest thing to port, as WebGL is based on the OpenGL ES spec. We're very careful to build everything with the differences in mind, for example as listed in resources like this: https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

At the moment, porting the code itself is the least of our concerns. Making sure the game works solidly in all aspects on different screen sizes and with touch controls will be the bigger concern when we get to that point.