[COM] Summer School Q&A feat. notMiceElf – Part 4

Welcome dear reader to another insightful installment of “that guy who writes too much” otherwise know as the Q+A sessions with notMiceElf.  We’ve posted some pretty interesting responses so far and this weeks is bound to be another nail biter.  Nail biter, as in, you’ll probably get tired of reading and stop to chew your nails (which is a bad habit, you should stop).  Steel your resolve… here we go!
How do you make items that glow transparently? (question posted by mohawkdude17)

Thanks for the question mohawkdude17!  Ah glows.  The one element in Habbo where it’s always always always ok to use smooth gradients… and… not pixel art.  I’ll let that sink in for a second so that the wide eyed stares of horror can dissipate.  It’s alright, take a deep breath, you’ll be ok that it’s not pixel art.  Ready to move on now? OK good.  This explanation is going focus less on “how to draw a glow” and more on “how a glow is made” so could be a little more technical than some might find interesting.  But it will hopefully give you a never-before-seen look under the hood of Habbo!  That is until I’m told to stop because I’m telling you too much.

Have you ever seen the medical book illustrations that show the different systems in the human body on different transparent sheets of plastic?  Well, you can think of Habbo furni in a very similar fashion.  No, furni doesn’t have a circulatory system, don’t be silly.  Furni does, however, have different layers (we call them slices) that make up its whole and each layer is stacked on top of the other in our rendering system, much like pages in a book.  Most of the time these layers are used to control where different parts of an item reside in the game space in relation to an avatar (or other item) within the same tile (tiles by the way are, non technically, those squares on the floor that let you walk around and place items in).  For example, the arm of a chair needs to be in-front of a seated avatar so gets sliced out of the main chair graphic, and placed above the space a seated avatar resides in.

Going back to the book analogy, it’s like saying page nine is on top of page ten which is on top of page eleven. Having the ability to layer is important because it means a glow can be drawn independently of the furni pixel art and added as an overlay later.  To get the layer to look like it’s glowing we change it’s blend mode.  A blend mode?  That’s just a fancy way of saying how two graphic layers are mixed together.  You might not know that you’re already familiar with the most common blend mode, normal, where no mixing occurs.  The top layer simply covers over the bottom layer.  It’s what you’d expect when stacking objects… so it’s pretty aptly named as normal.

The blend mode Habbo uses for glows is called Linear Dodge (or sometimes Add) where layers get summed (aaaaah maths) together to increase the brightness of the underlying layers.  With this blend mode, blending with white will produce white, blending with black causes no change and blending with the shades between white and black will add degrees of luminance and hue to the base layer.  I’m sure that made so much sense that you don’t need an example… but I’ll give you a one anyway.

See how the bottom set in the example causes Frank to gain brightness and a blue tint across his chest when the gradient graphic is applied?  Pretty cool.  The layer with the Linear Dodge blend mode gets applied to whatever is directly under it; be it floor, wall, another furni, or avatar.  Since whatever is under the glow graphic will be brightened it makes it appear as though the object has a glow to it.  Sometimes the glow is made using pixel art for things like trophies where the glow is very confined, but more commonly it’s used as a light source and is therefor a gradient and not pixel art.  The aim with these types of glows is to make the brightness subtle and not wash out the underlying graphics.  You’ll notice in the next example that if a glow is too bright it becomes overpowering.  The closer a color gets to white the more brightness it adds to the graphic under it until it becomes white (which is too much brightness).  You’d think that we could adjust the opacity of a glow graphic if it were too bright but … nope.  Looking at the example again you can see that while we can reach the same level of brightness as the normal version, all the warmth and saturation has been lost.  We’re left with something that’s pretty gross looking.

There’s another glow style (more of a fake glow) that’s not used as often as the blend mode type but does get used for certain types of items.  What’s a fake glow?  Well, a fake glow doesn’t directly change the brightness of a graphic that’s under it because they’re just tinting through opacity.  To make a glow in this style our production artists will use a feathered gradient and collapse it directly onto the pixel art making a single layered graphic.  It will look like it’s glowing, but it’s really just a visual trick.  You’ll notice in the example that this style isn’t as bright as the blend mode style and some of the warmth is gone.

These types of graphics with fading transparency weren’t usable in our old Shockwave client and so are only seen in modern items.  The benefit of this glow is that we can apply it to things where the original glow style isn’t supported. Hand items for example.  Items like the crackable eggs or piñatas also use this method for explosions because the simplification of many layers into one helps maintain the relative sanity of our production artists (lots of animation layers can be little overwhelming to keep track of ;P).

And that’s all there is to know about glows.  Some programs like Gimp and Photoshop have the blend modes that were mentioned built in so you could try your had at creating your own glows using them.  Good luck!  Remember you can submit your own questions for the Q+A sessions when the articles appear on the site so keep on the look out and your questions ready!

Davvero molto interessante! Specialmente le immagini