Particle Effects

Today's topic is particle effects. This is a topic that somehow always fascinated me and at the same time something I had some problems with in the past. For this game I'm using a quite novel idea, nothing very fancy and nothing that hasn't been done before, but still something novel.

 Instead of creating and animating particles on the CPU, I'm using a set of 3 texture buffers that I rotate around in the fashion not dissimilar to the way triple buffering works. Each pixel in these buffers represent a single particle or to be more precise its location in world space and a life counter. I don't need to store the velocity of particles as I always have the position of them in the last two frames. With some shader magic and a few extra textures as input I can do all the physic simulation needed to animate the particles in the fragment shader - and it's a pretty simple fragment shader (computation wise).

For this particular project I will need about 40 000 particles at most, because I don't want too many flashing, disorienting fountains of colour all over the place as in some other game, and the particles will only be used for fire effects and some other generic magic spells. I can squeeze all the particles I need into a 256x256 texture (well textures and most of them 16 or 32 bit float) and still have over 25k particles to spare.

If at some point ovedraw will be a problem I can render the particles to a half size buffer before composing them with the rest of the scene (and that's the default for lower graphic settings).

Because I'm using deferred shading it would be a sin not to render the particles as soft particles, I got the depth buffer anyway... but there is also a downside. The original implementation of the particle system was made to render some of the particles using additive blending and some using alpha testing, but since I'm composing the particles and the rest of the scene  at different times it's kind of hard to use both additive and alpha blend ... so I got rid of the alpha testing and just add all of them in the same way. I won't be able to render black smoke or blood splatters but I didn't want them anyway.

Making all the textures and emitter properties will most likely take me a week or two, so have a early proof of concept render of some fire:

  

GUI, GUI never changes...

...unless you resize the window

Anyone that knows me, knows how I love making any sort of user interface. I just loathe it. When I started the project I knew I would be using the build-in Panda3D DirectGui, it's not perfect, it's not that easy to use but it is integrated with the scene graph that p3d provides. Moving, scaling, rotating parenting one element to another just works. Unfortunately not  always. From the wide array of widgets provided by DirectGui I ended up using just few and all of them hacked one way or another. Recently I had to give up on the DirectScrolledFrame  and roll my own using two clip planes and a scroll bar. That took me a day, but now 90% of the GUI is done. The remaining 10% is just connecting buttons with functions but I can do that only when I actually write the functions.

I've also made some visual changes and arranged some widgets in other ways. All buttons got a extra decoration, a pixel of width added here and a pixel of width removed somewhere else. The font got a bit bigger. The health and cooldown bars have been moved from the top left corner to the bottom right corner, not that I think it's better this way, the top left would be the better place but I'm lacking vertical space. I may yet move it back and maybe switch the inventory and character screens, but I'm not sure what's best. On a big display it's not a problem, but it's a different story if there are only 600 pixels of height. I also had to drop official support for 800x600 resolution, there's no way I can fit both the character screen and inventory in 800 pixels, the minimum  is 896. Even if I remove the frame and just draw a 1 pixel border I'm 16 pixels short of 800. It's just not worth it, and I think that any machine that is limited to a 800x600 display won't be able to run the game anyway. If someone really needs to run on a tiny display, the window can still be resized, but at some point the widgets will overlap (if both inventory and character screen are opened at the same time).

Currently the GUI looks like this, some minor things may change, but it won't change much.

EDIT: Yeah, I did the change, here's the new look:

Design of the GUI

 Many games are guilty of very bad UI, sometimes it's obviously crippled design (like in Dragons' Dogma), sometimes looks are more important then ergonomics (most Asian MMOs ), sometimes it's the amount of buttons, icons and hotbars that's the problem (WoW) and sometimes it's not obvious at all that something is wrong with the GUI (like Diablo). 

For some unknown reason almost all cRPG developers make their inventory screen some variation on the Diablo design. There's a silhouette ('paper doll') with slots for equipped items and a grid of slots for other items all shown as icons. It's half bad if all items in the game have unique icons, but if the icons are reused - it turns into a nightmare. The only way to know the properties of an item is to hover the mouse over an icon and wait for a pop-up with more info. Sometimes there's info about more then one item so a player can compare items, but still it's done one by one. Doing anything with a inventory like this takes ages.

I decided to go a different rout, my inventory screen works like the detail folder view. The overall idea is similar to the Sky UI mod for Skyrim, only taking it a step further - all properties are visible at a glance and it's all text not icons. All items are show in a wide column with all the properties of the items show. Items can be sorted by all the possible properties both in descending and  ascending order. Equipped items are show with a different font colour. There are no cryptic icons, as long as you can read you will always know what you are looking at. There's no need for drag and drop, to equip an item click on it, to un-equip an item click on it. If you want to drop some items, you click on the 'drop items' button and a panel identical to what you see when looting containers appears - clicking an item now will move it from your inventory to this container, clicking items in the container will move them back to your inventory. Also using the inventory isn't a mode, the game is not paused, all keys still work, you can move, fight and cast spells with the inventory open. 

Maybe it's not the most beautiful GUI ever made, but it's functional and a lot more thought went into it then the look may suggest. I hope people like... if not it's easy to re-skin (just one image), the layout is a JSON file and the python code driving it will also be available as plain text - you can mod the hell out of it.