Advertisement

Looking for feedback on UI components (Video)

Started by October 30, 2013 01:23 AM
50 comments, last by Orymus3 11 years, 2 months ago


I'm not exactly sure what to multiply though, as it feels like the resulting INT may be out of bounds, and the integer value doesn't seem to have an easy way to refer to HSI or RGB?

You can extract RGB values by using bitshifts and bitmasks. You can find find tons of information on how to extract these values and put them together again out there, so that shouldn't pose a problem. However, I don't think you need to go that route. Looking at the StageXL library, you could probably use colorTransform() on a BitmapData object and pass the multipliers I described earlier.

Thanks for pointing this out.

Right now, I'm creating Bitmap class objects by loading the BitmapData, and I use the living resulting bitmap object.

To manipulate the BitmapData with colorTransform, I'd need to refactor this in such a way that, every tick, I destroy the living Bitmap and create a new one, based on the modified BitmapData (at least, that's my assumption).

I'm not fully versed in using BitmapData unfortunately.

I'll look into it though, thanks again!

Advertisement


Right now, I'm creating Bitmap class objects by loading the BitmapData, and I use the living resulting bitmap object.

To manipulate the BitmapData with colorTransform, I'd need to refactor this in such a way that, every tick, I destroy the living Bitmap and create a new one, based on the modified BitmapData (at least, that's my assumption).

I'm not sure if I follow. Can't you access the BitmapData property of a Bitmap?

I dont think theres a getter for that but i can probably make one.


I'm not exactly sure what to multiply though, as it feels like the resulting INT may be out of bounds, and the integer value doesn't seem to have an easy way to refer to HSI or RGB?
? Integer value are trivially converted to RGB... Actually, the only reasonabe way to store RGB is as a 32 bit integer... Ask on the beginners subboard, or just google it.

As for HSI, no, there is no trivial or fast way to do it :) I think :)


create an array (x,y) that contains the integer color value of each pixel.

multiply each (x,y) pixel by a value (red dot with the wanted brightness) and apply that to the array.

Display the array.
Using OpenGL would save you a lot of trouble in the long run. Really, manually setting each separate pixel was outdated 10 years ago :)

Of course finishing the project always take precedence over switching to a better technology... But if you can do it, I highly recommend switching to OpenGL.

Stellar Monarch (4X, turn based, released): GDN forum topic - Twitter - Facebook - YouTube


Using OpenGL would save you a lot of trouble in the long run. Really, manually setting each separate pixel was outdated 10 years ago
Of course finishing the project always take precedence over switching to a better technology... But if you can do it, I highly recommend switching to OpenGL.

I'd be starting from scratch here and wouldn't be able to make the same steady progress.

Remember, I'm not a 'real' programmer. I started in the early 90s to seriously develop anything, and I've had a long hiatus since then. The learning curve could be astronomical.

I'd like to stick to one tech and get things done if at all possible.

Anyway, this thread is deriving from its original goal. I've noted 'multiply blend' as something I'll investigate for feedbacks though.

Thanks!

Advertisement

Well Ignoring the Multiply stuff which I agree will make the red effect look better but comes down to technology challenge with the apis you are using. I have a few more comments and suggestions.

I noticed the shields take time to charge at the start of battle. Is that intentional?

You might want a second overly texture to the shields at the impact when a weapon strikes them to add a little extra eye candy and make them seem more real.

Again with shields up should attacks stop just before hitting the ship?

There seems to be lack of scale and substance. I don't get a feel for why one side completely dominates over the other. Perhaps you could scale the ships? if the ship with average hp is 1 then a ship with max hp of .5 would half the size of that ship, and a ship with three times the max hp would be three times as big.

Also what about an little extra eye candy to background? Take a look at this image I grabbed off the nasa astronomy picture of the data site.

ic1340mrZonalunar950.jpg


I noticed the shields take time to charge at the start of battle. Is that intentional?

Yes, and that's solely to cater to my geeky nature. I almost thought about including voice overs that would say "shields up", but that may be copyright infringement :P


You might want a second overly texture to the shields at the impact when a weapon strikes them to add a little extra eye candy and make them seem more real.

Actually, they'll have their own particle effect. I don't see why explosives would explode in a burst of fire when in contact with shields. I thought an electrical-like animation would work best. Currently investigating particleEffects to make it look better. I agree that a different feedback is essential for this (and I don't think it's JUST eye-candy).


Again with shields up should attacks stop just before hitting the ship?

Yes/No.

I'm trying to simulate some form of depth. Assuming the shields are spherical, it would be possible for the projectile to hit at a higher depth, which would appear to hit "in" the shields, but could really just be higher on the z axis.

That being said, battles will be computed backend-side, and pixel-perfect collision would consume too much server CPU. I had started on pixel-perfect collisions, but my partner pointed that fact early enough so that I didn't need to rollback my work on this and I appreciate it. We agreed to K.I.S.S. for server-side reasons.

I could still have the impacts occur at a different distance from the center though, but I'm thinking that the different impact anim should be enough (for now).


There seems to be lack of scale and substance. I don't get a feel for why one side completely dominates over the other.

I think that's one of the reasons why I wanted to make the gauges appear before. They gave an idea of how well-armed the ships were.

The truth is that, at this stage, everything is randomized. In the actual game though, a specific ship image would be associated with a specific ship design, and as a result, players would be able to associate the visual with its relative strength. I think you may be misled by the fact all ships are randomized from a list of 3 visuals, regardless of their current strength. Note that this is for testing purposes mostly (allows me to test various configurations by just refreshing the browser window).

One of the items on top of my todo is to make a "debug input" where ships can be added by clicking a button (instead of starting with a random roster).

What I could do, to suit my needs, would be to do as follows:

(Key press) - (Action)

1: Add a ship of Type 1 to Player 1

2: Add a ship of Type 2 to Player 1

3: Add a ship of Type 3 to Player 1

4: Add a ship of Type 1 to Player 2

5: Add a ship of Type 2 to Player 2

6: Add a ship of Type 3 to Player 2

Then, I could have ships from each type stick to an "archetype" as would be the case in the game. Tentatively:

- Corvette (weak, fast)

- Destroyer (strong firepower, but weak defenses)

- Battleship (tank, possibly a carrier)


Perhaps you could scale the ships? if the ship with average hp is 1 then a ship with max hp of .5 would half the size of that ship, and a ship with three times the max hp would be three times as big.

Unfortunately I can't:

[soiler] The reason for this is that I'm using scaling to differentiate ships from fighters! *epic orchestration* [/spoiler]

I'm hoping that tying relative strength of ships to a visual will be of some help here though.


Also what about an little extra eye candy to background? Take a look at this image I grabbed off the nasa astronomy picture of the data site.

I'm on the fence on this one. I'm trying to keep a pixelated look as much as possible, but I agree that a nebula would be more eye-candy.

When I did attempt to make stellarObjects appear in the background, I was however disappointed with the result because it made the combat readability harder.

There's a bunch of things happening in a fight, projectiles, possibly text boxes and gauges, etc. Adding bright colors in the background will make it harder to "see" what happens, and I'm not sure the extra eye-candy thrumps the need for clarity.

I'll investigate a bit further, and see if I can add anything that doesn't add too much noise.

Thanks for the great feedback!

[media]http:

[/media]

Added the bottom right panel.

Please note all art/placement is placeholder. I'm only doing functionality for now.

Currently, it's possible to roll-over a ship and get information.

(leftside)

green bar is ship hull/life

blue bar is shields

(rightside)

all bars are cooldowns for each of the weapons. I considered to replace blue with red to avoid confusion (in case its necessary).

Any better?

Make hull bar red, not green.

Also, add numbers! Anyone who wants to get details of a ship wants numbers, just a bar is not enough. And other stats (weapons, damage, hit chance, evasion, speed).

Cooldown is not really needed... It's too "temporary" to make that information useful. Maybe just icons of weapons (just next to the description of the weapon's damage and range) that change colours based on how soon they will be ready?

Stellar Monarch (4X, turn based, released): GDN forum topic - Twitter - Facebook - YouTube

This topic is closed to new replies.

Advertisement