You forgot explosions, you've got explosions now! Great progress . I personally like vanilla the most.

I put it on my DevLog ;) but I wanted to keep the notes here consistent with the OP, which stated UI elements.

Otherwise, you could say I've added pathfinding AI (though it doesn't show in the provided example). ;)

Explosions really helped feedback though, hence why I went with vanilla, I felt that numbers were no longer necessary, but I wasn't sure if it was clear enough.

What about using a multiply blend? Multiply the green and blue color component with health ratio.

Can't say I'm familiar with that just yet, but I've been hitting a few limitations in regards to alpha in DartLang, so I'm not sure if I'll be able to do anything more complex.

I tried the following:

Layer 1 (Top) - Shield. Starts opaque. As it takes damage, transparency increases (this is still the case in the provided video)

Layer 2 - Red Mask. Starts Transparent. As the ship takes damage, it decreases transparency to show on top of ship.

Layer 3 (Bottom) - Ship. Always opaque.

Turns out layer 2 would show as opaque for as long as layer 1 existed. As soon as layer 1 became entirely opaque, layer two would reveal its true transparency.

For a time, I thought I was at fault, as I could've mistakenly made them children of the same parent, and the alpha channel would've considered all of what it had to render, but it wasn't the case.

It seems like Dart cares only for the topmost layer's alpha, which greatly limits what one can do.

My "solution" to circumvent that issue was to do as follows:

Layer 1 (Top) - Shield. Starts opaque. As it takes damage, transparency increases

Layer 2 - Ship. As the ship takes damage, its transparency increases, revealing the red mask underneath.

Layer 3 (Bottom) - Red Mask. Always opaque.

Issues I'm aware of:

- Layer 3 must be PERFECT, otherwise, there will be some red "bleed" on the sides of the ship even when its full (I fixed my masks to account for that, as, originally, I had changed all pixels to red, whereas some of them had some alpha, and would show through the ship).

- If the ship is damaged, but the shields "resurrect", all "damage" (red mask) may be hidden until shields are depleted again.

Can't say I'm familiar with that just yet, but I've been hitting a few limitations in regards to alpha in DartLang, so I'm not sure if I'll be able to do anything more complex.

I have no experience with DartLang, but a quick search got me this: https://github.com/dart-lang/dart-samples/tree/master/web/html5/canvas/imagefilters

You could modify the grayscale sample to get the multiply blend effect.

This is straight DartLang, whereas I'm using StageXL which handles the stage and allows me to process it as though I was using AS3. Not sure how much control I can have over it without "hacking" the lib altogether. Besides, StageXL has allowed me to progress faster this far, so I'm not sure I want to go to low-level.

That said, my limitation with multiply blend isn't the actual implementation/syntax, but I'm unfamiliar with the concept. A quick lookout on wikipedia didn't reveal much. Do you have an example of application?

I'm guessing I need to do maths on specific pixels (the one on top and the one underneath?).

That said, my limitation with multiply blend isn't the actual implementation/syntax, but I'm unfamiliar with the concept. A quick lookout on wikipedia didn't reveal much. Do you have an example of application?

Sure. Going from left to right, the opacity of the redness is 100%, 50% and 25%. As you can see(or might not) the 25% isn't that visible so you might want to scale from a 100 to 25% or not linearly at all.

[attachment=18637:multiply.jpg]

I'm guessing I need to do maths on specific pixels (the one on top and the one underneath?).

You can simply multiply the green and blue value of each pixel in the ship by it's health ratio. I'm not sure if you can manipulate the rendered pixels or have to create a new image from the original.

What about the earlier suggestin to make it a tug-of-war bar? (aka, there's no grey area, only a continuum from green to red, and as red decreases, green increases and vice versa)?

That was my first thought, but I discarded it due to less information. Such shared bar would not show casualities.

Again, quite accurate. I simply took the "255" of R and B to return the color integer, and the actual colors don't look great. I'd need to increase G to get more vibrant (and closer to white) colors.

As a fellow programmer I need to say, stop thinking in terms of RGB, think in HSI instead. Increasing "R" will *not* make it more red :) It will just make havock in hue, saturation and intensity values (in a semi random way). On the other hand if you use HSI, you would select hue (red), then set saturation as all other colours (consistency) and then increase intensity to make it more red :)

Also, a tip I learned from artists, don't go for too high saturation (that's the mistake we coders (and noob artists) make).

That said, my limitation with multiply blend isn't the actual implementation/syntax, but I'm unfamiliar with the concept. A quick lookout on wikipedia didn't reveal much. Do you have an example of application?

Sure. Going from left to right, the opacity of the redness is 100%, 50% and 25%. As you can see(or might not) the 25% isn't that visible so you might want to scale from a 100 to 25% or not linearly at all.

multiply.jpg

I'm guessing I need to do maths on specific pixels (the one on top and the one underneath?).

You can simply multiply the green and blue value of each pixel in the ship by it's health ratio. I'm not sure if you can manipulate the rendered pixels or have to create a new image from the original.

I might be able to do that using getPixel and setPixel from BitmapData, but I'm not too familiar with that.

Currently, the red mask is a standalone visual I'm using. Agreed, its not optimal though.

HSI

Do you have something that converts this reasoning into an integer? I'm afraid there's no easy conversion in DartLang.

Acharis, on 05 Nov 2013 - 8:54 PM, said:


HSI

Do you have something that converts this reasoning into an integer? I'm afraid there's no easy conversion in DartLang.

http://www.had2know.com/technology/hsi-rgb-color-converter-equations.html (haven't tried it)

But really, use some MS Paint or something to manually select these (any paint programm will give you both HSI and RGB values) . You don't need it inside the game...

New Video!

Assessed a couple of things here.

1 - Reduced the Red Masks so that alpha doesn't reach full.
2 - Lighter shield alpha.
3 - Added an 'animation' to the shield instead, so that its easier to identify without hiding the ship altogether.
4 - Added placeholder 'greybox' UI (please disregard).

New Video!

Assessed a couple of things here.

1 - Reduced the Red Masks so that alpha doesn't reach full.
2 - Lighter shield alpha.
3 - Added an 'animation' to the shield instead, so that its easier to identify without hiding the ship altogether.
4 - Added placeholder 'greybox' UI (please disregard).

Looks much better, aesthetics over info. This seems to meet any need for the player to understand what happened.

But I have some artistic criticism. The normal combination lowers your contrast and bleeds over the black details. If you can combine the red mask layer through multiply it will not affect pixels brightness.

Oh you've already talked about this. Here are some more comparisons.

Aight... so DartLang isn't giving me much tools to work with to do this.

My assumption would be as follows:

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.

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?

Any pointers would help here.

(BTW, I agree, the output looks fantastic, and I want to be able to do this!).