This will be a walk-through of my Stalker add-on called Stalker Resource System (SRS), which is a replacement for the standard Stalker resource bar, adding customization and a ton of features.
I will get into some code related things and mention some current minor quirks with the API as well as talk about some practices, but in large part it’s going through the add-on to describe some of the more interesting options and features I’ve added to something as simple as a resource bar, as well as the thoughts behind them.
If we look at the standard resource bar you will find it just above the action bar and health/shield bar – that little red bar with 100% written in it.
My problem with that is that it’s not where I would like it to be, because when I’m in combat I want to have a clear indication of my class resource(s) where I’m looking most of the time: The center of the screen where the action is.
Now it is of course important to note that just because I want it some place specific, it doesn’t mean it should be placed there for everyone. A UI is very much a personal thing and everyone has their own needs and likes/dislikes, which is why I pride myself in making options for people so they can get my add-ons to work for them exactly how they want, despite what I might think is “best” – an important thing to remember when creating add-ons.
Getting the basics out-of-the-way
So the obvious changes I’ve made is that you can move it freely to wherever on the screen you want, as well as size it exactly to your liking. Two basic features that goes a very long way.
Now when doing something like this, meaning creating something that’s moveable and is likely to be placed around the center of your screen/character where a lot of things are happening, you have to consider a few things.
First of all, unless it’s absolutely necessary for what you’re making, make sure your add-on isn’t receiving mouse input. Basically make sure it’s completely transparent to the mouse cursor so it will just click-through it. I’m sure you have tried it yourself: In the heat of battle accidentally had your mouse over a UI element with mouse input active, holding right mouse button down to rotate your camera and then nothing happens – or in worst case you’re now moving this UI element. We don’t want that to happen – especially not with something that is likely to be close to the center.
If your add-on has an information role but also has the option to do something that requires mouse input, then make sure it’s an option that can be disabled, for the reason mentioned above.
Now luckily in WildStar it’s quite easy to deal with the issue of mouse input. Elements can have a style called IgnoreMouse, which does what it says on the tin. Set it to true and the mouse “goes through” the element.
For something like SRS it’s easy to deal with, because all child elements of the main window has this style set to true, as none of them require mouse input, and when the bar needs to be moved I just set IgnoreMouse to false on the main window and because the child elements have IgnoreMouse still set to true, it will bubble down to the first parent which has IgnoreMouse set to false or through to the game world if none found, which in this case means the main window containing all the resource bar elements.
This of course also means that you can only move it when it’s primed for it, which in the case of SRS is whenever the options window is open (the way I do it for most of my add-ons).
However it is important to note that some styles overwrite IgnoreMouse, one which is rather important for moving, which is the Moveable style. If this is set to true it will accept mouse input to allow the element to be moved, no matter the state of IgnoreMouse.
So when I toggle the ability to move the resource bar on/off I set both the Moveable and IgnoreMouse style accordingly.
The reason I set IgnoreMouse as well is because I have a little “hidden” feature on the bar itself. If you hold down Shift and right-click the bar it will center horizontally according to where it is vertically. Just a little feature for those of us OCD people who want to make sure it’s absolutely dead center. 🙂
Another thing to consider is when to show the information. If you have it placed centrally on your screen it’s likely you don’t want to look at it all the time – it would get in the way and be annoying, something we certainly don’t want happening.
For something like SRS I have made it so it shows up whenever you are in combat or you are not at full suit power. When you reach full suit power and aren’t in combat it will fade away. The thought behind it is that you don’t need to be reminded about your suit power when you’re not in combat and it’s full. You know that if it’s not shown it means you’re at full suit power – and more importantly it’s out-of-the-way when you’re doing other things. Of course in SRS you can choose to have it always shown, if you prefer that, as some do.
It still has to look good
Now, for me, functionality always comes first – always. I won’t add all manner of graphical elements if they get in the way of the functionality. That being said we want things to be pretty to look at, and for an add-on that’s pretty much just a bar this means different bar graphics. Currently there’s 26 different ones available in SRS and I’ll likely make more as time goes by (after all I can re-use them in other add-ons).
Shown below are a few of the different options available. The first example is shown in the previous image, which is also the default bar for the add-on.
Basic stuff is taken care of now and a lot of people would probably be happy with the options provided now, but why stop there?
Taking it a step further
Options! I want you to be able to customize the bar to look how you want it to look, because the default settings that I find to look decent might not be what you like.
This shows a section of the options window. It should be noted that these screenshots are from a work-in-progress version. For instance you see the first section is named Size and Anchor but has no anchor options – this will come. 🙂 I’m also not satisfied with the overall arrangement of the options so that’s something I want to improve as well.
At the top you see the basic things that we went over the previous section, with the added option to change the border width (goes to 0 if you don’t want the border).
The Character Positioning section basically allows you to set the resource bar to “follow” your character, like a nameplate. This was requested by another beta tester and it made sense to do, so in it went.
Next up is the Bar Look section which is a bit more interesting.
Opening the bar styles will show a separate window with the different bar graphics in it. I decided against showing them directly in the main options window simply because it would take up too much space, and there’s already enough options to overwhelm people with – no need to make it any worse.
The Test color after the button is a little quality of life thing I added. It basically allows you to real-time change the color of the bars inside the window to show how they will look in different colors. The x2 check box next to it will basically double the color intensity/lightness of the chosen color, this can be useful in some cases, so I have included the option (it’s a feature Carbine has provided – and it’s a bit hard to explain it as well :P).
Master opacity sets the opacity of the whole resource bar, in case you want to make it a bit (or a lot) transparent.
Background bar opacity controls the opacity of the bar graphic right behind the “real” bar. It’s a copy of the graphic you have the actual bar set to and allows you to completely remove it if you don’t want it visible.
Background opacity sets the opacity of the actual background located beneath the background bar. This is just a solid color.
Highlight intensity is an interesting little feature. When I was making SRS I wasn’t happy that I couldn’t get any highlights on the bars, meaning I couldn’t really go into white.
This is due to how coloring of the bars work. The bar graphics are all grayscale images which can then be easily colored to what you want, the problem is just that white equals the color you set. So say you have a gradient or a bevel you can’t really get any sort of white, unless you pick a brighter color than what you really want, which then affects the entire graphic – it just doesn’t work.
As I wanted to have these highlights, because it just looks nicer, I made a secondary bar on top of the actual bar which then uses a separate highlight image. Each bar graphic has its own highlight image tied to it (except for 3 which don’t really have any use for it).
Setting the intensity is basically just setting the opacity of this bar – and can of course be set to 0 if you don’t want the effect.
It’s also worth noting that this setting is also shown inside the bar graphic selection window and will also update in real-time in there if you change it.
To give an example of the highlight effect in action look at the following two screenshots.
The next couple of options are tied to the Flash bar when full feature, which basically makes the bar do a flashing effect when you reach full suit power (and in combat). The thought behind this is of course to maximize your usage of the suit power. If you’re in combat and not really following your resource usage closely this will help you not end up “wasting” suit power by not using it.
Bar flash opacity is to adjust the opacity of the element. I want to say that I am not happy with how it looks because we don’t have the option to use blending modes between elements (something I’ve requested though, but likely aren’t going to see any time soon, if ever). I will however try to improve how it looks based on what can be done now.
Only flash when reaching full is something I put in as an option as the Stalker has an AMP that makes your suit power consumer not use any suit power if used from stealth, which means that if you open up with this it will start flashing the bar (you’re in combat and at full suit power). This might not be what everyone wants so I added the option to only activate the flash if you’re coming from a value less than your max suit power.
A little thing I did add in relation to altering the bar flash settings was that whenever you’re hovering over or have your mouse down to alter the slider for the opacity, you will see the flash bar to let you see the changes you’re making.
The same goes for hovering over the check box for showing it, so you can see what it actually is, and when you have the color window open so you can see the color changes as you make them.
I felt I needed to do this so you can actually see what your changes looked like instead of having to get into combat before you could actually see if it was working like you wanted it to. I could have just made a toggle to show it, but why not just do it properly and seamlessly when I could do so? 🙂 Having it shown constantly when the options window was open was not an option either.
Colors and text, we’re not stopping!
Going further into the options you will find the ability to control how the bar gets colored as well as options for the text shown inside the bar. Right now it can only be shown inside the bar, but I will address that when get to talking about the text.
For coloring of the bar there’s 3 main options available as shown above.
Color mode 1 will set the color of the bar to what you choose and never change.
Color mode 2 is the classic green to red transition as you deplete the bar. Optionally you choose to reduce the Color intensity of this mode, which might be good for certain bar styles.
Color mode 3 will color the bar according to your current stance, where you are free to set the color for each stance as you choose. Basically the Stalker has 3 different stances: One for tanking (Evasive), one for damage (Lethal) and one that focuses one your ability to dodge and move (Agile (it’s been renamed from Standard)).
BG bar color same as main will use the same color for the background bar as the main has, this is in particular useful for color mode 2 as the background bar will then also change color as you deplete your suit power. If you don’t have this enabled you can use the next option to pick the color of the background bar.
The Text options provide pretty much all you need to position the text inside the bar. Because of how the Show() function works (which is the easy way to show/hide elements) there is an issue of you place something outside the bounding box of the parent.
Normally it would get cut off at the edges of the parent, but you can set the style NoClip to true on a child element and it will be shown even if it’s outside the parent’s bounding box. However when you use the Show() function with fading over time it will only shown whatever is outside the parent’s bounding box when at 100% opacity. This means that as soon as you start fading something out it will get hidden when as you reach a value less than 100% opacity, which in turn ruins the effect. There are ways around it but they are not entirely ideal. Hopefully the Show() function will get fixed in this regard (it is for instance not a problem with SetOpacity()) so it won’t be an issue. If not I will probably make my own function to do it, using SetOpacity() and a timer to still fire the events associated with the Show() function.
It’s starting to get silly – but more options!
This is currently the last bit of options available in the add-on as it is now, but does contain some interesting bits.
The Fade Times control the fade in and out of the main resource bar. The Show() function supports this with a 3rd argument that you can pass to it, which is the time it will take to either fade in or out. 1 = 1 second. 0.1 = a tenth of a second.
Show() takes 3 arguments where the second two are optional.
First is a boolean which dictates if it should show or hide. true for show, false for hide.
Second is also a boolean which decides if it’s displayed instantly or fades. Set to true it will not do any fading. If omitted it will assume false and fade.
Third argument is, as mentioned, a number which sets how long the fade in/out will take. If omitted it will use a default value.
Now because it’s so simple to do the fading with the Show() function I decided I might as well just expose it and let people decide what they want the fade times to be.
The Fade-out delay is basically how long it will take for the fade-out to start when you have reached full suit power and is out of combat.
Now the Marker System I will talk about in the next section since it is currently not implemented, so instead let’s quickly jump to Smooth Update.
You can read what it does by looking at the image, since I explain it there so people know what the deal is. I felt it was worth writing inside the add-on because of the issues regarding it, as opposed to just mentioning it on the forum and hope everyone read it.
One thing that’s important to note here is I had to get a precise “timer” going to be able to properly calculate the time between ticks and do a fluid update. The problem is that currently the timer system in the API is not really accurate and only run each frame. This means you can’t have a timer update faster than your current FPS and at the same time, since FPS varies, especially from system to system, you don’t really have an accurate way to do something with a fast update interval.
This of course is a huge problem when I need accuracy; knowing exactly how much time has passed between each tick so I can keep updating the bar.
Luckily there is a way to do it. Using the event NextFrame you are able to have a function called on each frame. The otherwise more normal event used is VarChange_FrameCount but this only updates every 4th frame.
Together with NextFrame you can use Apollo.GetTickCount() to get the time in milliseconds since the client was started. So by mathing this up I can get the time between each frame and through that precisely know where I am “in between ticks”. I know the time it takes between each tick, so using that I can just calculate a percentage of the progress and add that to the bar, which uses the suit power values.
Now as mentioned there is a little problem there because sometimes you get 4 suit power while it’s 3 most of the time. Because I don’t know when this happens the bar will jump on those ticks and because of that it’s an option you can disable if you don’t want it.
Personally I really wanted to add this because if you had a wide bar it would really be some huge chunks that got filled in every half a second – it just didn’t look good.
Updates on ALL the frames!
Talking about the NextFrame event it is important for us add-on developers to take care of what we are doing and how much stuff we are doing each frame. Because obviously this all has an effect on the performance and any good developer will want to keep this in mind.
First you should ask yourself if what you’re doing really needs to be updated each frame or if you can do what you need to do with VarChange_FrameCount (every 4th frame). Maybe what you’re doing could even be done with a much slower timer. Just because you can update each frame it doesn’t mean that you should.
Even in SRS which updates on every frame I have pushed most things into only updating every 4th frame (within the NextFrame event function instead of having VarChange_FrameCount running as well), simply to keep processing down on each frame and because a bunch of things didn’t need this rapid updating anyway, so it made perfect sense.
I assume most developers are like me and already do this, because it should be something natural for a developer to want to make sure everything is optimized and isn’t wasting processing power for no reason. But new people will start making add-ons for WildStar, which is fantastic (!), and they might not think about these things yet because they’re new to programming. So it’s simply a piece of advice to make sure that everyone thinks about the processing they’re doing in their add-ons and keep it to a minimum – it’s just good practice! 🙂
Taking a resource bar to the next level
All you’ve really seen so far is a basic resource bar with a bunch of options, and while that isn’t too bad, there’s so much more that can be done to improve how this add-on can help you during combat.
First of all is the Marker System that I’ve mentioned. The idea behind this is that you can set in markers at specific suit power levels you choose to help you know when you’ve reached them.
Imagine you’ve used your suit power down to 5 and you’re desperately trying to use an ability which costs 35 suit power. Instead of you having to monitor when you get up to enough suit power by having you look at the resource bar, it makes more sense that I just make a feature to tell you when you’ve reached it. This means you don’t have to sit and spam the button for the ability or keep checking your resource bar – instead you can keep your eyes on the action.
As should be evident by now I like to give players options and that will be the case for the Marker System as well. It will be a powerful feature to help you during combat.
Another thing I want to add is stealth indication and I’m still considering how I do this best. The idea is without a doubt to have it built into the resource bar itself, but it has to be a clear indication without at the same time making the resource bar itself harder to read.
This excludes doing things like lowering the opacity when in stealth, masking the bar with a sort of border element or such and what have you. The resource bar doesn’t stop being relevant just because you’re in stealth so I can’t do anything to reduce its visibility.
An option for having the resource bar vertical instead of horizontal is also something that is planned, but isn’t super high on the list at this point – I want to get some of the other things in first.
The last thing I currently have planned is making a secondary bar that will track the suit power ticks – basically a bar that fills up in between ticks to let you know when the next tick is coming. I see it as a thin horizontal bar placed above or below the resource bar itself or a vertical bar on the left or right side. That being said there will of course be all the options needed to customize it so you can have it the way you like it (or turn it off completely).
The madness ends
We finally come to the end… I know this isn’t really a guide or tutorial, but the other two convinced me to post it here regardless. It was initially meant to just go up on my own blog for the sake of talking a bit about the add-on as people were interested in it (after having seen it shown on a few streams), but then got changed into going up here on NASA.
It’s meant as an insight into an add-on and what has gone into making a simple resource bar something more, showing the possibilities and ways to take things further to improve the functionality with a purpose.