Summer School Q&A feat. notMiceElf – Part 5

It’s that time again! No, it’s not time to change your Habbo babies diapers.  Sheesh.  It’s time for another Summer School Q+A Session with notMiceElf.  We’re still glowing (aha, glow… get it… yeah, you do) from the last Q+A so this one had better draw a smile on our face… and as always, you can submit a question of your own when the question submitting articles appear. So get those questions ready!

How do you make a good GIF? (question posted by shiony)

This question looked so simple at first glance and then I started thinking about how to answer it and spiraled into animation and my brain pretty much flew out of control.  So thanks for giving me a minor headache before my morning coffee could kick in, shiony!  The idea of animation is a bit too meaty for this blog post so I’ll focus more on setting up an animation and then go over a decent way of saving gif files.

First off.  Animation as a process is going to be dependent on the program that you’re using.  Some programs don’t support creating animation so if you’re aim is to animate make sure the program you’re using has support for it!  If you’re just looking to save out a static (non animated) GIF you can skip all the way to the end.  I’ll be using Photoshop but the process is going to be mostly the same from program to program.  I would suggest finding a tutorial that breaks down the specifics for the program you’re actually using though.  General info only gets you so far :p  Ok, on we go…

Animation:

Animation is all fake. Yep.  It’s an Illusion whoooo *waves hands around*.  I’m sure you’ve been told this a thousand and one times already, but, animation is a sequence of static images with slightly different content.  Each one of those static images is called a frame.  When viewed in quick succession we interpret the changes from frame to frame as motion.  The amount of frames we see in a second is called the frames per second (technical, I know) or fps (you gamer types are saying, “hey, that’s the acronym for first person shooter!”, but animators had it first, so there) but you can sort of forget this concept because with gifs the fps is more about setting a delay per frame vs a standard x frames per second.

First thing we need to do is make a new file. The size doesn’t really matter (stop laughing) as long as it fits what you’re animating, but smaller is generally better for pixel animations.  The resolution of your image, on the other hand, is something you’ll have to pay attention to.  Pixel art should be made using a resolution 72 pixels per inch.  Don’t even question it or seek an explanation for why it has to be that number.  It’s law.  Obey.

example_new

 

The next thing we need is an animation timeline.  In Photoshop the timeline can be found under the “Window” menu and then “Timeline”.  In older versions of Photoshop it’s listed as “Animation” instead of “Timeline”.

example_wheretimeline

 

Once the Timeline is opened choose to make your animation frame based.  The frame method is pretty common for other pixel animation programs and is easier to understand for beginners than the newer tween type timelines.  Plus, frame based animation is classic.

example_timelinestart

 

In order to make an animation you’ll first need to draw (or have previously created) some animation frames so that you can string them together.  Every frame of your animation should be a new layer in your layer palette. Whether it’s pixel art or hand drawn the concepts are the same.  You’re aiming to draw images so that when linked together their motion has a good flow and reads clearly.  This explanation is so rudimentary that it’s actually making me cry a little so if you’re at all interested in real animation you should find a good book (or, yah know, youtube it) on the subject.  There’s a set of 12 principles that Disney Animators have based their work on for ages.  Well worth a look.

As a little tip, there’s a simple way to test the movement between frames using a technique called “onion skinning”  which lets you see several frames at once.  Photoshop doesn’t support this outright either. Joy.  In order to get something similar to the onion skin on Photoshop you’ll have to turn down the opacity of the layers under your current drawing so you can see them as you drawn new frames.  In traditional animation animators used a light box to see through their drawings… and this is just an emulation of that technique.

frank_sneeze_onionskin

 

Alright, when you have your drawings ready take a look at your animation timeline.  Clicking the “new frame” icon at the bottom of the animation timeline will make frames for your animation and you’ll need one frame for each of your art layers.  With one of the animation frames selected go to the layers palette and hide all the layers but the ones you want visible for that frame.  In my example you can see that I’ve got a grey background layer and an art layer visible in the first frame.  Hiding layers can be done by clicking small eye icon on the left of the thumbnail.  Do that same process for every frame in your animation.  Nothing like good old repetition to get the blood flowing…right?

example_timeline

 

Modifying the “delay” for an animation frame will change how long, in milliseconds, the frame is shown for before going to the next frame.  You’ll need to find a delay per frame that looks smooth with your animation.  Animations that are too slow will appear less seamless and show individual frames more while those that are too fast don’t have enough emphasis and could suffer from frame skipping.  Browsers will often forgo frame delays under a certain speed too… so it’s a good idea to check your animation on a few different browsers to see that it’s working the way you want it to.

frank_sneeze_slowfrank_sneeze

 

The loop feature will let your animation loop infinitely or by a set amount.  Most gifs you’ll see around the internet are infinitely looping.  And that covers the animation portion. Phew.  Are you still breathing? *poke poke*

Saving Your File:

Something to remember about the GIF format is that it’s only an 8bit format so it has a max of 256 colors.  Pixels either have color or are fully transparent (this counts as a color :p).  GIF’s don’t have the capacity for semi transparent pixels like a 24bit image does.  If you’ve ever tried to save GIF with more colors than the maximum allowed (like a photo) you’ll see a color reduction as the colors get compressed to fit into the 8bit palette.  You’ll need to be considerate of that max color count when you’re making images (this is where dithering and restricted palette pixel art excels!).  Don’t fret though because 256 colors is still pretty high.

example_color

 

In Photoshop you’re going to use the “Save for Web” option from the “File” menu and then select the GIF format.  The type of palette mode (Selective, Perceptual, Adaptive, Restrictive)… really doesn’t matter.  Very simply, the palette mode gives preference to certain types of colors over others when reducing the colors to fit into the restricted 8bit palette.  You can test them out and see which you like (we tend to use Selective for any gifs we make). Any kind of automatic dither options should be avoided for pixel art and aren’t all that good anyway.  If you’ve payed attention to your color count while you were drawing you’ll never need this option anyway.  Same can be said for the transparency dither. Ew.  There should be bumper stickers with the phrase “Just say no to transparency dither” inscribed on them.

example_savegif

 

If you’re using a program that forces a gif to save using the windows palette or something other than the four listed above… drop kick that program into the trash bin and get another one.  Programs that do this often auto-dither to try to approximate the look of the original palette.  You’ll get images that have really oddly color pixels in them when saving this way.  It looks horrible.  Really horrible.  As in, my eyes are bleeding horrible.

example_autodither

 

For the color amount, if you didn’t use all 256 colors you’ll only see the amount that you did use up, so don’t freak if you see a lower amount.  The matte option is a color that is added to semi-transparent pixels so that they become fully opaque and is mostly used to match those semi transparent colors to the color of a web page.  For example, if I have a shadow that is a transparent black, a white matte color will make that color a light grey in my final image.  If you choose no matte color the pixels below certain transparency will be removed while those above will be fully opaque.  Realistically though, if you’re making straight pixel art you should never have semi-transparent pixels.

example_nomatte

 

Any option for web snapping means the colors in your palette will be shifted to match the standard web colors from like 1985 (which are pretty ugly).  You can avoid this option like the plague.  Please.

example_websnap

 

And, that’s it!  Not too bad right?  If you’re on another program other than Photoshop you’ll probably have a “Save As” option and a gif file format.  A lot of the features like palette type, colors amount, and dithering are pretty common across many programs so it should still be relevant.  Certainly any pixel specific program will have these options for your GIF needs!  Best of luck GIF-ing around the internet!

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.example_frank

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.

example_slices

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.

example_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.

example_dodge

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.

example_brightness

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.example_newglow

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).

example_fakeglow

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!

Summer School Q&A feat. notMiceElf – Part 3

Another week and another Q+A session!  All right all right all right.  We’re assuming that since you’re reading this now your eyes didn’t spontaneously start bleeding, or have since healed nicely, from the last Q+A which means our legal team can relax a bit (phew).  Remember you can submit your own questions for the summer Q+A sessions with notMiceElf through the articles that appear on the site so get those questions ready!

What programs would you recommend for beginners, and why? (Question posted by Hanna.Yeap)

Thanks for the question Hanna.Yeap. I’ve heard the “what program?!” question a lot over the years and in that time I’ve developed the most succinct and all-encompassing-mostly-perfect answer that you’ll ever hear. Ready? Ok, here goes; It doesn’t really matter.  You can probably imagine the types of responses I get from giving that answer so before the “he doesn’t care” train rolls in let me explain my reasoning.  Oh, and then I’ll give you a list of programs that are pretty decent as starting points for anyone that wants to explore them (see, I do care).

The most important point to remember when making any kind of art (traditional drawing/painting, digital painting, vector, 3D, typography, you name it) is that the tools you’re using to make it are just that; Tools.  A lot of the time beginners think that choosing a really “good” program will make them better faster.  Which, is kind of cute in a naive sort of way.  It’s a bit like thinking that an HB pencil will make you better at drawing versus using a 2B pencil or charcoal.  Tools don’t magically grant you skills or simplify the process all that much.  Ultimately all a tool does is serve you, the artist, and compliment your skills and your knowledge.  If you’re just starting out you won’t have the skills or knowledge to gain any real benefit from a specific program.  So. It really doesn’t matter where you start or which program you start with.  And, just to be clear, the “goodness”  of a program is a relative concept anyway.  It’s kind of sad when someone says a program is “bad” simply because they can’t use it beyond its immediate and obvious limitations… or that it so readily shows them their own limitations.  Lots of beautiful work is created on “bad” programs.  Something to keep in mind.

example_artrant

 

Ok ok, sheesh.  If someone is truly interested in learning pixel art, or digital art in general, here’s what I’d suggest.

Oh, by the way, If you’re only looking to edit existing Habbo graphics (commonly labeled as “alt-ing”) and not really aiming to progress past that then you can probably stop reading and pick any program that edits pixels (go ahead, I won’t be offended, there’s a small list below). That’s not intended to come off as, “omg, notMiceElf hates alt-erzz!1″.  There are a lot of good alt-ers (you probably even know a few) but if you’re really interested in learning you’ll want to make your own creations and not limit yourself to editing the work of others.  So, where to begin?

Picking a program:  A lot of the graphics type programs have the same features and look pretty similar, for the most part.  You can pick any one of them and more-than-likely you’ll get accustomed to using it. Truly. You will. Humans are great that way (yeah, I’m laughing at you kitty.  What yah gonna do?).  But, you could also take a look at how a program’s laid out and pick the one that makes the most sense to you.  If you find that a programs layout makes no sense, pick another.  Also check that it works with your computer… because… that’s kind of important.  Forget about all the stuff that a program can do and focus on its basic toolset.  A program like Photoshop, while really nice, has more than any beginner will ever need for a while.

General free programs:

Gimp – sort of like a free photoshop. sort of . Can do animation, Also good for photos and painting.

Microsoft Paint – On every Windows PC already so you know it works. People complain about this one, but, it was my first program… and lots of awesome pixel art is still made using it. Very simple interface.

Paint.net – a better MSPaint or so I’ve heard.  Simple interface.

Pixel art only free programs:

Aseprite – more for sprites, has animation

GrafX2 – supposed to look really retro… so might be confusing

Graphics Gale – has animation

ProMotion – has animation

Free Trial (and then not free at all):

Photoshop –  good for lots of things: animation, video, painting, photography, and the list goes on for about 4 pages.

Starting out:  I know you’re interested in Habbo but put that aside for a moment.  Yes, I just said to forget Habbo (blasphemy)!  Take some time to learn the basics and you’ll thank yourself later.  Fundamental concepts (like: volume, color, proportion, perspective) inform everything you’ll ever make or want to make so understanding how and why they work will only benefit your growth.  These concepts aren’t program or style specific either which is nice.  The rules that define a sphere or cube are the same no matter how that object was made, even if it was on paper.  After you’ve spent some time learning fundamentals you can use them for any kind of art you’re interested in too so that’s a nice little bonus.  Find some tutorials on the magical learning device known as youtube and follow along.  Not to pull out the classic “back in my day” spiel but you’re all really lucky to have such an immediate resource at your disposal so take advantage of it.  Back in my day I had to learn by talking to rocks. Which, let me tell you. Is a pretty one way conversation.

example_volume

 

Intermediate:  When you’re comfortable with the fundamentals you can start with simple objects of your own.  Try making a flatly shaded chair.  Take some of the core volumes (sphere, cube, pyramid) and combine them in different more complex ways.  Keep bumping up the complexity as you grow.  You’ll find that most objects are essentially just different configurations of those core volumes.  In fact, when we hire production artists we look more at their understanding of the foundational stuff and not so much the pixel art because it’s just a rendering style which is relatively easy to teach if the art foundation is already there.  So, there’s that to ponder over.

Eventually you’ll get to stuff like grass and foliage which is more of a rendering style/texture applied to a core volume.  Again, you’re stepping up the complexity by adding in a new skill.  You’ll have to think about not only the volume of the whole (a big sphere) but also individual parts (single leaves).  Move the light source around and see how that changes the way you render an object in.  Change the light color.

Advanced:  Pull it all together. Build objects with lots of different parts and textures.  Build scenes that use multiple objects instead of single objects.

It might be time consuming and seem like a whole lot of work but if you’re serious about wanting to learn it you’ll have a lot of fun doing it.  I hope you find that this sets you on the right path!  Hmm.  I don’t think I’ve rambled enough (Actually the following addition directly relates to the question above so I thought I’d answer it too :p)… B-B-B-B-B-BONUS QUESTION!

Are you partial to pixel art, or do you have other artistic interests as well? (Question posted by Wizhared)

Thanks Wizhared!  I’m going to refocus the question off of me and direct it more at our entire team… if you don’t mind.  You’ll find that every single (no joke) production artist we have creates other art on the side.  Pixel art is great, and I’m sure all of our artists would agree with me (right everyone… e_e), but it’s just a small sliver of the art sphere.  For a creative person it’s pretty natural to use different types of art to express oneself.  We have artists that spend their time animating or doing character design, some are traditional painters, and others draw comics. Heck we even have a few musicians!   Point is we look for artists that are well versed in a lot of different areas.  Why?  Well, all those types of art and styles give the artist a wide range of skills to rely on and confidence.  It means they can go from being a fast concept artist to an exceptional animator in the blink of an eye.  We’re a pretty fast paced team so confidence and a strong skill set is key.  Before I ride off in to the sunset I’ll show you some of the teams sketches for the wild west campaign.  I think it’s a pretty good example how the teams foundational knowledge from their other artistic ventures feeds back into their Habbo work (you can also see how, in the sketching phase, individual style is really apparent!).example_sketches

Summer School Q&A feat. notMiceElf – Part 2

We hope you enjoyed last weeks Habbo pixel art Q+A with notMiceElf because we’re continuing this week with another round!  We’ve fueled the guy up on coffee and swedish fish (only the red ones) so we’re hoping to get another gloriously ramble-filled response.  If you’ve got a question you’d like to pose keep an eye out for the poll in game and ask away!  Ok, Q+A time, GO! GO! GO!

How do you begin to transform your vision into pixel art… where do you start first? (question posted by Unposted)

Another great question, thanks Unposted! You’ll be receiving a years supply of marshmallow peeps for your question… huh? Oh. We aren’t giving away peeps. Probably for the better because those things are pretty gross.  Great question regardless.  The process of taking the initial idea to final pixel art can vary a little between artists but we do give gold stars to those that stick to the “certified two step method of furni making”™.  Ok that’s not really the name but the process does consist of two steps.  And it is certified… ok fine it’s not certified!  Sheesh.  Lets just move on shall we?

01_frank

Step One:

Habbo artists royally freak out.  No, just kidding.  Step one starts with sketching out the idea for an item.  We always start with sketches first because they’re typically faster to produce than a full set of pixel art furni but still give us the ability to look at what the full set might look like and make design decisions early on.  This step can either be done on paper (and later scanned), or digitally.  It’s really up to the artist and what they’re most comfortable with.  The sketches are made so that they are around 2x-4x scale and can be easily utilized later in the process.  This example from the mystics line is 2x.

02_sketch

After the sketches are completed all the artists get together and chat about the items and what they’ll do.  At this point one or two of the artist’s color choices and/or design embellishments are selected to carry through the set (this could take us right back into the previous question about consistency! Or a discussion about obsessive compulsive artists…).  The whole sketch step is really exploratory foundation laying and prep work for step two. The pixel part.

Step Two:

The aforementioned “pixel part” can be completed a few different ways but I’ll first go through the way I prefer our artists use and then briefly talk about the other methods.  There’s not a wrong way here, just one that I believe works better for our finished products and timelines.  Plus, I like to see our artists use the same method I use. Because ego.

Alright, with sketch in hand (on… the computer) the artist can start on the outlines which are like the bone structure of a furni.  Yep. Furni has an exoskeleton.  Really though, the outlines help give a kind of rigid structural support to furni so the meaty insides sit nicely and… I can hear Hannibal Lecter licking his lips… moving on.  The sketch is often scaled to the correct furni size which is either to 50% or 25% if the sketch was at 2x or 4x scale.  Once it’s been scaled the sketch can be set to a low opacity and outlines drawn over it on a new layer (we all use Photoshop).

03_scaledSketch

Or the sketch is set off to the side and used only as reference as the outlines are drawn from scratch.  You might be shouting at your screen, “Well, notMiceElf, that way sounds retarded!  The sketching phase would be pointless if you’re just going to redraw it anyway!”, but I say to you very loud doubters, “nah”.  The sketch is mostly a loose guide and redrawing gives us a very clean base to work from later.  It also gives the artist a chance to fix oddities present the sketch, so that the design falls more in line with the “Habbo look”, and works better in game. The end result has a similarity to the sketch but can also be drastically different because of the correction process.  Furni that has a lot of bits and trinkets (like a skull, book, and potion thing for example) benefits from being redrawn this way because each part can be drawn separately and then combined later for better control over the shape and readability of a design.  Imagine if you drew a table top with loads of stuff on it all in one layer and then you realize you needed to make it longer. “Oh, SHhhhhaving cream!”, you’d say. But if you have everything as separate parts you just fix the underlying table part and move on. Easy as pie. No, cake. Eh, we’ll stick with pie.04_outlines

The inner rendering for the furni is where the volume and color is added to flesh it out and give it more substance.  Artists select a small set of colors ranging from dark to light which are used to render each element within a furni.  This set of colors is called a color ramp and all those ramps together give us the overall palette.  Pixel artists often employ a technique called “dithering” to bridge multiple colors in their ramp together when they’re dealing with a restricted palette (limited amount of color).  Essentially dithering is a kind of pattern that makes the artwork appear to have more colors than it actually does.  Lots of Habbo furni uses dithering to help render volumes but with newer items we tend to use dithering more for texture rather than bridging colors together.  That’s not to say we use millions of colors per furni though.  Furni is still rendered with a relatively small palette because it’s easier to keep track of what colors are used across a line if it’s a small number.  But you might notice that we’ll opt for adding an extra color or two these days instead of jumping right into dithering.

05_rendered

Items get a final look-over and small edits are made before they’re sliced up (a topic for another time!) for use in the game, but essentially this is the full drawing process!  We’ve reached the end of the amazingly wordy two step process.  Phew.  As I mentioned earlier though, the second step can be done a few different ways, so I’ll briefly lay out the alternatives for you to ponder.  By the way (yes, I fully wrote that out instead of using an acronym), there are furni in the game that were made using both of these alternate methods.  Can you guess which ones?

Variation One:

The first variation starts out the same way as before with scaling the sketched art to size.  From there the artist takes the scaled sketch and uses it as is.  The volumes get cleaned up until it’s all readable and the edges are fixed with black outlines.  This method has a tendency to have random semi transparent pixels and often takes just as long to complete as fully redrawing so it’s not used all that frequently.  In addition the sketch needs to be pretty much perfect for this method to work well so when it is used it’s often used on very simple non-animated items.  You can see from my example that it will take a lot of cleaning up to reach the same level of cleanliness as the examples that used the preferred method.  Interestingly though, this method is how we make the small size furni.  Basically scale the big size, clean up, done!

06_cleanupScaled

Variation Two:

The second variation is a little more extreme and it’s barely ever used in Habbo (but you’ll see it used in some NDS games as well as a few other console titles).  It involves making the item in 3D and then exporting a render at size and cleaning it up *shudders*. The example image is pretty crude, but you get the idea. Definitely more work than is needed for most items we make but it’s a pretty neat process!

07_3d

There’s a pretty interesting (and short) article from SNK about the 3D to 2D process used for the sprites in KOF XII which I fully recommend if you’re interested in that sort of thing.  http://kofaniv.snkplaymore.co.jp/english/info/15th_anniv/2d_dot/creation/index.php

Well, that covers it!  My swedish fish have stopped swimming around my blood stream as has the coffee so I’m calling this one done and done!  I hope you all enjoyed the answer and the small glimpse into the furni production process!  Catch you next week with another mind numbing and most likely overly longwinded Q+A!

Summer School Q&A feat. notMiceElf

Last week for the start of our Summer School Q+A we invited you all to ask one of our resident pixel pushers (that’s a pixel artist for those who didn’t know) anything you’ve ever wanted to know regarding the graphic side of Habbo and we’d force out an answer. Yes, even with red hot iron barbs if necessary and let us tell you, we were itching to use those barbs regardless (moody artsy people pffft, you know you have it coming).  Before we delve into this first Q+A though we wanted to quickly give thanks to all of you for your great questions.  So. Thanks!

Now. Lets get into that delving!  Ah, we should warn you though… this answer is coming directly from the mind of one of those artsy people so we make no claim that it actually makes sense.  Even less so considering it’s coming from notMiceElf.  Good luck dear reader.  Should you make it out consciously intact remember to submit a question of your own for the next round of the Q+A!

How do you go about designing furni so that it is consistent with other Habbo furni?  (question posted by closetspace)

Hi closetspace and thanks for the question.  Actually a pretty cool question if you delve into the historical side of things… which… could be “zzzzz” for some so for those who hate that sort of thing in essence what you’re asking about is the Habbo style and that’s really the tl;dr answer.  So. Yep.  Oh, you actually do want more? Well, grab some popcorn… this could get long winded.

The Habbo style is pretty rooted in isometric game art so the foundation for everything from furni to pets and avatars is going to be based around the rules for that kind of artwork.  For example, check out this screenshot of an old isometric Batman game from the 80s.  Sort of has a hint of Habbo in it doesn’t it? 

example_batman1986

Those basic isometric rules dictate the point of view for everything within the Habbo rooms.  They’re really a kind of blue print which gives us a running start for keeping things consistent.  From that starting point we delve into the specifics of the Habbo style which is actually the interesting bit.

I think you can look at the Habbo style as if it were divided into three stages.  The first stage is made up of the original Habbo releases where the style was, in a lot of ways, in its infancy.  It’s this stage that gave us the foundational rules for what everything going forward would look like.  Items in this stage were much simpler.  Inner edges (like those on legs of chairs or beds) were often black, most items generally lacked texture, and the colors were also fairly simple.  It’s the kind of stuff, now, that I’d associate with someone who’s just learning the basics.  Ok, don’t misunderstand and start yelling, “You’re dissing oldskool Habbo! FOR SHAME!”, at me.  I’m just digging into the visual history to give a little context!  PUT THE TORCHES AWAY.

example_stage1

As Habbo made more items the pixel prowess of its designers got better (as did our internal tools for making items… thank you dev) and we left stage one and entered stage two.  There’s much better attention being payed to shape, volume and animation in this stage.  You’ll notice that vertical banding on table tops becomes pretty common place in this stage and those inner edges are starting to get color instead of being black.  Additionally the colors being selected are much more interesting from an artistic point of view which just adds to items looking like completed thoughts.  This second stage, for me, is really in full swing by the time we released Alhambra and goes on for about two years or so.

example_stage2

Eventually Habbo switched platforms from shockwave to flash where stage three and the real “modern” style takes over (though admittedly there was some overlap between the second and third stages as we transitioned our tools).  Stage three is characterized, in my mind, by items having more visual impact from better pixel artistry and attention to mood by way of color.  The color ramps (that’s basically a kind of controlled gradient from one color to the next) for drawing are often a bit smoother and don’t seem as abrupt as those in stage one and the first half stage two which adds to items looking a little more 3D and complex.  Items also get a lot more texture and transparency effects (stuff that wasn’t possible before. For example: water patches would never have been able to be made in stage one or two).

example_stage3

It’s a little more apparent if you look at how the rendering of one type of furni has changed throughout each stage.  Like. A bed.  Don’t look at theme so much but how the items are drawn.  The types of textures and complexities given to them.  It’s a pretty cool transition.

example_stageall

Alright. I can tell your eyes are getting droopy and your popcorn has run out which means it’s either time for me to stop with the history or plant some kind of subliminal message.  What we get from all this history though is that the Habbo style is something that’s been in a constant state of change because of individual artists and the platform Habbo was developed for changing.  There’s a core set of “rules” that were formed as we traveled those style stages to this point that we now follow. A few of those rules for example are: black outlines, light goes top left to lower right (this is an odd one… maybe someone will ask about Habbo light sometime), vertical bands for top sheen, small items being slightly larger than real life, ducks are funny.

example_ducks

To a certain degree that long slow change in style and the sheer volume of items (seriously, we have a ton of items) gives us a lot of leeway in keeping things appearing consistent without needing to redraw everything every few years (yeah, I’m looking at you original Area, Iced and Plastic).  In a way it’s like having a bunch of red crayons of slightly varying shades. Chances are that any new red crayon will fit somewhere in the bunch and look like it belongs.  That is, as long as we follow our style rules of course- ie: make a red crayon not a blue one.

So that’s the long way around the Habbo style reason.  But there’s actually a little more to it than “just follow the rules” (see they let me out of my cage, I’ll ramble for as long as I possibly can before I’m pulled back in).  That long history of items I mentioned before also means that, more than likely, we’ve already made something similar and we can go look to it for reference.  The trick there is to copy only what’s needed so items still look fresh.  Sometimes  you’ll see that we take outlines or bits of previous furni and tie it into new furni.  It’s an elegant way to ensure a kind of shared visual communication goes on between furni from past and present (helps keep our crayons red as it were).

example_reuse

So there ya have it.  Our overall Habbo Style and incorporating shared elements between new and old items help keep things looking cohesive.  There’s a whole separate topic concerning keeping items within a line cohesive too but I think I’ve probably bored you enough already :p  Plus I can hear the chains rattling which means it’s time for me to be put back in my art cage. I hope you’ve found the answer as interesting as I do!

The future is here: Habbo for Tablet!

Is it a bird? Is it a plane..?

It’s finally time for us to announce what’s so special about 04/04. We’ve seen your guesses, and you’ve heard the rumours, but now we’re here to tell you that we’re finally ready to make the big announcement… Habbo for tablet!

http://www.youtube.com/watch?v=daEXEHuTne8

The tablet edition of Habbo has been in the works for a while now, developers have been slowly losing their minds, designers scratching their heads and even the marketing guys broke a sweat in the build up to getting this ready you.

So, what can we expect?

Well, the entirety of Habbo for the tablet has been re-designed to make it more touch friendly. There’s a brand new navigator, the catalogue is much more interactive, and how you touch and interact with furniture has been rethought too.

Screenshot 2014-04-04 12.18.00

There’s a few things that have not made it to this initial soft-launch release – whilst you can chat, build and create with your friends, you cannot yet manage your groups, play Habbo stories or chat over IM (You can however manage your friends and even follow them to rooms!). These features are all planned for future updates of the app

Screenshot 2014-04-04 12.18.15

Can I make purchases through my tablet or should I purchase on Habbo first?

You will be able to purchase Habbo credits directly through the tablet, this means that if your tablet has previously made in app purchases, and you have permission from the card holder then you can go-ahead and purchase Habbo credits that way!

 Can I use the furniture I have on my local hotel, or is this separate?

Unlike some games that separate PC and tablet versions, everything you have on the normal Habbo client, will be available on your tablet device! That means all your inventory is available as normal here.

Screenshot 2014-04-04 12.18.08

You said I can create.. Can I build rooms on the tablet?

Yes! You can build rooms just as you would on the web version of Habbo. It may take a little getting used to if you’ve been building on Habbo for years, but we’re sure you’ll be building masterpieces through your tablet in no time.

Screenshot 2014-04-04 12.18.23

Where can I download it?

This release of tablet Habbo should really be considered a late closed beta, at the moment it’s being released only in Canada, this means that if you live somewhere like Australia or the UK you’re going to have to wait a few weeks first.

Those that are in Canada, the app will be available on the iPad 2 or newer, it will not be available on iPad 1 as of yet.

Updates, updates, updates!

So many new things!

Welcome back to another issue of behind the pixels! Today we have loads of new things to tell you about – From New public rooms, furniture and clothes, to general Habbo features. We’ve been very busy!

So sit back, put on your reading glasses and prepare to be blown away…

  • Brand new clothes! – That’s right. We have hoards of brand new clothes for all you guys, after weeks of work we’re now ready to get them in to the Hotel for you. We’ve got lots of things for both boys and girls, including hair pieces, backpacks and every a ponytail! We have even created a few special accessories for those role players out there. So chose your best outfit and get ready to strut down world wide catwalks during Habbo fashion week.
  • Builders at work – We recently started a new initiative for those of you with a special building flare! Each hotel is soon going to have a group of builders that will be hard at work creating awesome new room designs for all us not-so-great builders to enjoy. Each local Building team is comprised of 1 main leader and a small selection of other Building savvy Habbos, who will work together on various Building projects.  The teams will be rotated frequently, so don’t worry if you didn’t get in this time – there’ll be plenty of opportunities for you to get yourself in there! Get your hard hats ready for some nail biting room building…
  • HC Update – We are bringing you one of the biggest and best(est) HC update yet! New commands, new floor maps, new clothes, a bigger ducket limit, new HC public room and much much more. We can’t wait to see the great new rooms and outfits you guys put together once this update hits the hotels!
  • Custom room filters – Soon to be the newest feature in the hotel is the ability for the room owner to implement a custom filter. No longer will you be plagued with unwanted language in your room… instead you will be able to filter it out yourself! There is no set date for this feature launch yet, but there’s no reason you couldn’t start preparing a list of those words that don’t really tickle your fancy!

These are just some of the awesome things you have coming to improve your overall Habbo expericen. We hope you enjoy and would love to hear your feedback!

Let’s talk updates!

In the last post, we had a look at the ‘Day in a life of a Developer’. We hope you guys enjoyed!  This time we’re going to be looking into some of the updates and improvements that have been made since then…

The most prominent new feature at least for you guys is that you now get to highlight specific lines of chat you would like the moderator to see. This has been a much-needed feature, which we hope will aid success of moderation process overall. Now when you report, these chosen lines of chat are highlighted so that a moderator can easily spot them. You can see an example of what a moderator will see, below.

Moderator Tool

Did you send a Valentine’s cards?

This year for Valentine’s Day the Habbo Stories team created some really neat valentines cards for you to send to your friends. They’re a really cool way to interact with your friends, and there were some free options too!

If you haven’t already sent one, pop on over to Habbo Stories and check it out! It’s always really nice to receive some special gift from a friend…

Habbo Stories Card

Is it a bird? Is it a plane? No, it’s HabboTalk!

We’re very happy to announce the introduction of HabboTalk to the Hotel. What is ‘HabboTalk’, you ask? To put simply: It’s the re-invention of group forums. We’ve spent a lot of time working on this, taking feedback from users and it is almost ready to let you start using!

There are a few slight differences, that old school Habbos might remember. For instance, HabboTalk will be completely accessible inside of the client – no need to leave the hotel! How cool is that?

Below are some mock designs of how the feature will look, but remember it may be a little different by the time it hits the hotels. We are hoping to have this out for testing within the week, however as this is a pretty big update this could change.

If you would like to be a beta tester for ‘HabboTalk’ and you are in the .COM hotel, send an email to habbocompetitions@sulake.com with your Group name and Habbo name. Make the subject “I want to be a betatester for HabboTalk”.

A Day in the Life of a Habbo Developer

Since the first post on this blog we’ve had lots of requests for there to be some kind of ‘A day in the life of’ blog, discussing some of the steps and stages of development here at Habbo. So today I will be walking you through my average day! We’ll be looking at a small – but mighty – feature that went live last week; When a user reports another Habbo, the reported Habbo will be automatically muted.

Screen Shot 2014-02-11 at 10.37.32 AM

So what’s first?

After walking into the office, helping ourselves to a cup of java goodness, and pondering about the exciting things ahead, we sit down and check our emails! Basic, but important. We need to know what’s been happening in all the different Sulake departments before we have a daily dev (development shortname) meeting. At this meeting we discuss any new problems or issues that might be occurring, as well as keep each other updated on our other projects progress.

Once the meeting is over, we can move on to the more interesting stuff! We log into some of back systems, check on how the hotels are doing. We typically tend to check on what’s been deployed recently, what’s still being worked on, and if they’re any new bugs that have been reported.

Below is a little graph showing the number of issues reported in 30 days vs the number of issues fixed in 30 days. Those with a eagle eye will notice there are more resolved than created, this is because we also fixed issues reported more than 30 days ago within these 30 days!

Screen Shot 2014-02-11 at 10.49.50 AM

Great.. but I haven’t seen any coding

Before we can start coding we actually need to put in a lot of preparation into a plan for the feature. Even something as seemingly small as automatically muting a user after you report them takes a large amount of pre-planning.

For instance, for this particular feature we first had the user care team contact us and say “Hey guys, we’ve got this idea for an amazing new feature.” Once we have that initial concept, we have a lot more questions to answer before we can proceed; How long will it take? Is it actually possible? Does the feature exist already? Is there a better alternative? Who is going to work on it? …and much much more!

Once we answer all of those, then someone on the Development team starts working on it. S/he develops it locally on their machine – this is where coding gets involved! Then once they are happy with the feature, they test it and then publish the feature on one of our testing hotels. Only Sulake staff have access to these not-so-top-secret testing hotels. Once the feature is live on the test hotels, a number of different staff from different departments will test the feature. We wouldn’t want to publish something that wasn’t the best it could be!

So when does it get onto Habbo?

Well that’s a good question. After a large amount of testing has been done, and any required localizations have been completed, we start preparing the live hotels for the new feature. Typically, this is when a number of different fansites start to pick-up on the new features and will comment and report on them.

Is that it?

Well, not exactly…. There are many smaller stages involved, such as code reviews and documentation, but for the most part this is it! We hope this brief overview will give you a good idea of how feature development work happens in Habbo!

State of the Habbo Economy

Hello! My name is CrazyAceOne and I’m one of many people working behind the scenes to bring you new furni and fun campaigns. I’m going to try something that’s never been done by Habbo before (at least I don’t think it has). I’m going to share some marketplace stats and insider information to help all my trader friends out there to make better choices.

As you may know, the trade value of items are closely linked to the supply and demand of that item in the hotel. For that reason we are careful about the frequency in which we sell items in the catalog. Here are the guidelines we use to help us decide how things should be rotated into the catalog:

  • Catalogue Furni – These items are always on sale. We refer to these as permanent lines, but we’ve also heard Habbos call them “Norms”. The purpose of these items is to make sure there is an infinite supply of basic building blocks to make cool rooms. Builders club is based on a similar concept, but with a greater feeling of being limitless. We really want our builders to have the tools they need to make cool rooms!
  • Seasonal Campaign Furni – These items enter the shop, typically for a 2 or 3 weeks at a time. Once the campaign has ended we avoid selling them again for 4-12 months in order to leave window for the trade shops and marketplace to build businesses around them. The purpose of these items is mainly to fuel our creative builders with unique stuff and reward those who participate in the festivities. These are also a good opportunity for traders because the supply is somewhat limited. The semi-limited supply allows for some “treasure hunt” style fun for our builder Habbos to find those bits and pieces to perfect a room design.
  • Rare Furni – There are many types of rares such as Rare Prizes, Bonus Rares, Campaign Rares and Loyalty Rares. These furni are only available for a limited time and will not be re-released. These are mainly for the collectors and traders out there. Rares are a good opportunity for traders since the supply will not go up and in many cases will go down or consolidate as users collect or use them in designs.
  • LTD Rare Furni – A special type of rare, which comes in a limited quantity. We couldn’t exceed the quantity limit if we wanted to! There is also an item number on each LTD making them truly unique.
  • Rare Credit Furni – An interesting class of rare. These have an exchange value for credits which make the trading values stable, but since they are sold in limited quantities they are also rare and over time become more rare as some supply is converted back to credits.
  • Bonus Rare – A relatively new rare to the Habbo Marketplace, Bonus Rares are acquired for every 120c a Habbo purchases. Bonus Rares are released twice monthly, typically on the 1st and the 15th, and, as with other rares, will never rereleased.

We know furni values are very important to Habbos and so we do our best to maintain a healthy economy. We do this by limiting how often items are available in the catalogue in order to give our traders the opportunity to run shops and use the marketplace. That said, an economy with over 250k Habbos trading every month is clearly not possible to control entirely. Even if we could completely manage all the values, I’m not sure you’d want us to. Its much more fun if things stay market driven.For example, when re-selling a campaign line, we often see comments in forums such as “why are these back on sale, are no prices safe?”. The truth is that there is an item with a very safe and stable trade value – credit furni. The safe and stable price of credit furni allows it to function well as a unit of exchange, but it doesn’t leave much opportunity for profit and that’s not fun. The fluctuating aftermarket values actually allow for opportunities to trade and profit and the market driven forces ensure that those values are relevant to the demand in your local hotel.

As promised, here are some Marketplace Stats you might find interesting…

In 2013 over 1.2 million items were traded in the marketplace with a total trade value of 13 million credits! The amount of items traded in rooms is many times more than this. Below you’ll find the top 10 items traded in marketplace by value (price * quantity) and number of trades.

Habboconomy

Tell us what you think. Did you enjoy this post? If you’d like to see more posts and stats like this in the future, please share your comments.

Thanks!

Au revoir game center!

By now you’ve probably read your local article discussing the game center leaving Habbo. We opened the game center in October 2012 for game developers, and boy did we have a big amount of interest!

Shut down!

Regular Habbos and up-and-coming game studios started working hard to polish their games and have them published onto the game center for all you Habbos to play. We’d like to thank all those who took the opportunity to create a game for our Habbos.

This decision has come because ultimately we want to improve our user experience. Plus the graphics of some of the games simply did not fit with Habbo. We want to provide the best service to you guys and we know that keeping in tone with Habbos pixelated graphic style is important, so we’re going to stick to what we know best!

The game center will continue to be operational until March 31st, so if you have credits left to spend in a game, make sure you do before that date. Of course, Habbo Stories will continue to be available after this date. (We’ve got some exciting campaigns coming soon from Habbo Stories!)

So, what’s this number verification thing?

Habbo

A few of you investigative types have delved into the client, found references to a new number verification feature, and have concerns about the security of your number should you opt to provide it. I’m here to put those concerns to bed.

If a player gives us their number through this service, an SMS containing a verification code will be sent to their phone, then they simply enter this code into the client window. Afterwards we store the number in such a way that means even we don’t know what it is, similar to how passwords are stored.

This new feature comes hand in hand with some upcoming changes we’re making to new user registration – we’re not going to force anybody to give us their number and we’re certainly not looking to spam your phones! After the SMS verification, you won’t receive another SMS from us.

On the plus side, being able to verify numbers is a good thing! If we can verify that an account is authentic, then we can offer that account better prices and exclusive deals! There’s even something for you old schoolers.. what was that thing’s name.. the R-O-M?

Meet the designers…

This year at Sulake, we have decided to take a slightly different approach to the digital design and production for Habbo. We have a growing team of designers and we have chosen to split them into 2 teams; Team Serenity and Team Savant. Both teams have a balance of newer, and older, designers and will alternate campaign design throughout this year.

We hope you enjoy getting to know our designers – Make sure to keep your eyes peeled for regular ‘Designer’ blog posts, that will include updates about upcoming campaigns and awesome sneak previews and polls!

Team Serenity

Screen Shot 2014-01-27 at 1.39.17 PMHiyas! My name’s Jenny and I go by the name ‘Kuyit’ in the hotel. I’m one of the many designers at Sulake and I’m part of the Serenity design team. I love all things geeky and cute, and sometimes that reflects into my work when I go into creative mode. I hope to do my very best to bring you new and exciting designs! :) – Kuyit

Sparkaro

Hello! I’m Caroline (AKA Sparkaro in the hotels) and I’m a graphic designer for Habbo/Sulake. I’ve always loved to draw, and in recent years have become very interested in creating digital art – including, of course, pixel art! I also like to create 2D animations. Apart from the arty stuff, I enjoy watching movies and TV shows, (mostly of the science fiction & fantasy genre) reading and listening to music :) – Sparkaro

MrCroissant

Hi! My name is James aka MrCroissant and I’m a designer. My hobbies and interests include sketching, pixel art, digital painting, illustration, collecting vinyl, video games and going on nights out with friends. I’m always open for feedback and ideas from Habbos. See you around the Hotel! ~ MrCroissant

Team Savant

Elementary_Kage

Greetings to all! My name is Kelly and I’m a graphic designer for Habbo. I’ve drawn since I could hold a pencil and I’ve never wanted to do anything else. I am an animator and comic designer at heart but pixel’s are super fun to work with and I’ve enjoyed the challenge of making cool stuff for you all. I also love gaming. Whether it’s retro style arcade games or your modern day rpg shoot-em-up with rocket launchers, I love them all. Story is what drives me and I hope to bring all of these things I love to Habbo! – Elementary_Kage

HungrySparrow

Hi my name is Patrick, I have been working for Habbo Hotel since November last year. My background is in freelance illustration and animation. My preferred art software is Photoshop. I have been interested in pixel art since I was a lad – when all the best games were made with pixels.” – HungrySparrow

Read the rest of this entry

New Year, New Blog!

Happy New Year from Habbo!

A New Year, brings a new blog! We decided to kick off 2014 by bringing this blog back to life to give you a look ‘Behind the Pixels’. We’re not going to be talking about local Habbo events or updates, instead we’ll be trying to focus on updates that are global and relevant to all of our users! Excitied? You should be. You can expect a bi-weekly update related to game development, frequent campaign updates from our designers, as well as a monthly update discussing the Habbo Economy.

A look at least year…

Pocket Habbo

As many of you know, 2013 was a pretty busy year for us. We had an overhaul of our entire client interface, based on user feedback. We also introduced Builders Club, Free Flow Chat,

Walking 2.0, and lots of new features to Pocket Habbo. In addition we created a whopping 549 pieces of furniture and 922 new badges – which now means there are over 8000 badges in Habbo.

We know there have been a few hiccups with these updates and changes, but it is because of your continued feedback that we’re able to react and make positive changes to your Habbo experience – Keep it coming!

Upcoming plans

Over the next few weeks, we have some pretty awesome stuff coming to you guys. On top of the exciting quests and events that your local managers are coordinating, we’ve got a brand new range of furni coming. This new furni is something that will finally give room builders the tools they need to make the most of their rooms.

Builders Club

We ran a poll at the beginning of the New Year asking you various questions, focusing around the different categories you all would like added to Builders Club. We received huge number of responses, and here are the global results of that poll. Interesting, hey?

biggerPie

This will be talked about in more detail in the monthly economy update, but we have to be very careful with what we put into the Builders Club Warehouse. We know trading is an important part of Habbo for many of you and we don’t want to ruin that. We currently have over 650 furni in there, but we certainly can see where everyone agree on what they would like to see more of, and will be looking into which of those furni could be added to the warehouse. In  addition to the furni updates for Builders Club, we are working hard on adding alternative payment options and are happy to announce that we will soon be releasing an SMS option for Builders Club!

User Interface

The UI has some more exiting changes coming its way too. Those of you with eagle eyes will have noticed the little changes that were made between different hotel builds, but we’re not done just yet! We’re hoping to have the final changes done soon, things like the navigation and friends toolbar is coming close to the final stages. Here’s what we think the final product is going to look like…what do you think?

friendsbar_final

Next Issue: In the next issue, we’ll also be discussing the upcoming number verification feature, how and why your data is safe and the upcoming Valentines Campaign!

About the Author

Dom the Developer!Hi, My names Dom and I am developer here at Sulake! You’ll often find me wandering the hotels on the avatar ‘Macklebee’. Every few weeks I will be posting a new ‘Behind the Pixels’ post, talking to you about what’s up and all the exciting stuff coming in the hotel…We will be sharing more than ever before, so make sure to tune in. This is really important to me – I hope you enjoy! I feel strongly that Habbo is a place where creativity can bloom and I really want you to feel as though you’re a part of it.

Follow

Get every new post delivered to your Inbox.

Join 601 other followers