Pixel artists

[lefnire]

Hey guys, been getting a lot of pixel artist chiming in with desire to contribute (which effing rocks! thanks guys!). I'm trying to figure out a way to process this (or decide on someone?), so I figured I'd start a discussion here.

There will definitely be need for more pixel art. I want it to as closely resemble our current setup (browserquest iconset) as possible. We'll need a female avatar, character customizations (tabards, pets, mounts, etc) that people purchase with tokens, custom weapons / armor, and way later down the pike we'll want custom iconsets for white-label (don't worry about that now).

If you want to contribute, read the bottom of this wiki, reply here with maybe a sample? Just so I know it's the "type" of work Habit wants before sending you on designing a lot of stuff, just to have the pull-request denied. Let's keep the convo rolling, if anyone has other suggestions for going about this.

[Pandoro]

Will try to get it done today :-) On Feb 8, 2013 6:18 AM, "Tyler Renelle" notifications@github.com wrote:

come to think of it, we may want a whole row in the spritesheet for all "drops" (i guess we'll call them) which are scaled down. I tried putting weapons and armor from the css classes into the item store, but they're too big and I can't find a way to resize images from a sprite sheet ( background-resize:50% + new background-position?)

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13277421.

[Orangyfresh]

Started working on making my pixel art easier to integrate. Just one question, would I submit individual items such as a head.png file to public/img/BrowserQuest/habitrpg_mods or full sets?

[Pandoro]

@Shaners urg, I forgot to reply yesterday! The stuff looks really cool! I like happy pig the most, although I think I would make the left most pixel of the eye as dark as all the other "eye pixels"? Btw have you tried a one color border as well? Dark gray as with the character sprites? I'm wondering how that would look.

@lefnire I can look into making smaller sprites for the shop. Considering the pixel count though, I will either have to go with 66% or 33%. If you cannot resize them, then probably it should be a good idea to fix this before hand. Although I can't really imagine that resizing is not possible. (this maybe?).

The alignment makes sense of course. For each item, meaning body armor, helmet, weapon and shield, I will try to make a smaller icon for the shop, center aligned.

@Orangyfresh, if it is okay with you, I will try to get your stuff in there too. I probably will skip the wizard beard for now, but let's see what I can do. For future stuff, you can do that as you like :) If you take the effort of splitting up the stuff, that is great. As I'm on linux most of the time, and thus don't have photoshop, it would be cool if you could either provide it as some image with layers, which I can edit in GIMP, or just provide the head, body, and so forth png files. It is easy to load all of them as layers. So if you don't want to work with GIMP that is completely fine as well :)

@lefnire Furthermore, I would like to make an extra hair option. The pony tail of the girl looks pretty crappy on many helmets. Could it be possible to make a flag per helmet, something like "boolean is_hair_option_on"? This way it could be set to false everywhere the pony tail should be disabled and thus one could load a different sprite for the hair. Also this would help to get the beard for the wizard done. For every helmet where the beard has no space, this is set to false, but if you are wearing the wizard hat, it could appear. Or it could also work like an option. If the user specifically uses the pony tail, then the helmet which supports it is loaded, otherwise the normal helmet is loaded. (Same helmet of course, but with the added extra black border around the tail.) This would really be good to have I think.

[ghost]

Thought you guys might find this useful http://rm2kdev.net/2013/02/08/swatchy-the-ultimate-palette-editor/

[Orangyfresh]

@Pandoro I've got Gimp so I can work with the .xcf file by the way. So instead of splitting them I can just upload them as .xcf files with layers for each item.

[Pandoro]

@Neohuman looks interesting, but I think with the current setup it isn't really needed as we can just exchange one hair color sprite with another hair color sprite. If at some point we want to change color of armor though, this might be cool though, considering the armor is one big piece and this might come in handy!

@Orangyfresh cool :)

Hmmm in order to review the results in a better way, I would like to create a little character viewer. See my mock up. Sadly I have no real idea how. I was thinking about a little python program... but then again I figured it might be easier to just do it in html? But is that possible... I got no idea. But considering it is there already in the code of habitrpg, how hard would it be to extract that part and extend it to such a thing. It would just need to load the css file. From there load the png and all the classes and then cycle through the different parts. It would be really useful to test if a new piece of armor works with all other pieces of equipment! And also some general css sanity checks!

[Orangyfresh]

@Pandoro I know next to nothing in programming, so sadly I don't think I'd be able to help, but its a great idea. However I can help with graphics if it is needed. This could also be used in game when your avatar is clicked to customize between the different pieces of armour and weapons etc. that you own. It depends on what Lefnire wants.

[StanLindsey]

The above code should be fairly simple really and later on migrate to a public customization feature, i've got it down on our agenda.

[lefnire]

@Pandoro here is the logic behind equipment. I can incorporate that flag you mentioned at some point, seems simple enough. Thanks for the shop sprite-sheet too, I'm almost done with the customizations branch and will be will push to a demo site in the next few days for y'all to test. That mockup you posted - I'll change my current modal for customizations to a popover under the user that looks like your mockup, which is better anyway for the app. Then I'll walk you, @Orangyfresh, and @Shaners (a google hangout maybe) through running the website locally so you can start playing with adding new items. It's actually quite easy, since you'll just be running the app and customizing css - but will require a mini tutorial.

@Neohuman - go RM2K, I grew up on that shit!

[Pandoro]

Sounds great :)

I wish I knew all this stuff myself ;) I told a buddy of mine about habitrpg and the first thing he did was run it on his server x)

On Fri, Feb 8, 2013 at 4:56 PM, Tyler Renelle notifications@github.comwrote:

@Pandoro https://github.com/Pandoro here is the logichttps://github.com/lefnire/habitrpg/blob/customizations/src/app/items.coffee#L46behind equipment. I can incorporate that flag you mentioned at some point, seems simple enough. Thanks for the shop sprite-sheet too, I'm almost done with the customizations branch and will be will push to a demo site in the next few days for y'all to test. That mockup you posted - I'll change my current modal http://twitter.github.com/bootstrap/javascript.html#modalsfor customizations to a popover http://twitter.github.com/bootstrap/javascript.html#popoversunder the user that looks like your mockup, which is better anyway for the app. Then I'll walk you, @Orangyfresh https://github.com/Orangyfresh, and @Shaners https://github.com/Shaners (a google hangout maybe) through running the website loc ally so you can start playing with adding new items. It's actually quite easy, since you'll just be running the app and customizing css - but will require a mini tutorial.

@Neohuman https://github.com/Neohuman - go RM2K, I grew up on that shit!

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13296574.

[ghost]

Anybody got any weapon sprites like a portal gun or Samuses gun?

[Shaners]

@Pandoro I did try that grey eye pixel as black but didn't like how it looked. I'm also worried that using the same grey outline on everything reduces depth and aesthetic value BUT if it doesn't mesh well with the BQ stuff that could be just as bad. I'll remake the piggy and post some mock ups here so we can see what they look like.

Are our pixel art priorities still the same?

• mounts
• fancy items (weapons? armour?)
• character customization

I've got the art for large bear (probably a mount), lion cub, tiger cub, polar bear, and polar bear cub worked out just need to put the pixels to page. Also playing around with the idea of a falcon and eagle pet but after that not sure what I could work on, more mounts?

@lefnire neat stuff! My javascript is pretty weak so this will be a good learning experience for me.

[lefnire]

I personally think top priority is the backer only weapon, Armor, mount, pet - which should be top tier stuff, since they're paying for it On Feb 8, 2013 11:57 AM, "Shane Lister" notifications@github.com wrote:

@Pandoro https://github.com/Pandoro I did try that grey eye pixel as black but didn't like how it looked. I'm also worried that using the same grey outline on everything reduces depth and aesthetic value BUT if it doesn't mesh well with the BQ stuff that could be just as bad. I'll remake the piggy and post some mock ups here so we can see what they look like.

Are our pixel art priorities still the same?

• mounts
• fancy items (weapons? armour?)
• character customization

I've got the art for large bear (probably a mount), lion cub, tiger cub, polar bear, and polar bear cub worked out just need to put the pixels to page. Also playing around with the idea of a falcon and eagle pet but after that not sure what I could work on, more mounts?

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13299744.

[StanLindsey]

@Shaners & @Orangyfresh - could you send me an email each so we can help organise your work in a more official capacity =D

[lefnire]

[edit]: customizations are live, habitrpg.com

Alright my friends, customizations testing time!

Log into your accounts (also try new accounts), click your avatar, customize. Remember, this data will be deleted later - so don't get too cozy :) There's a $$ cheat button bottom right. Someone familiar with game mechanics may want to modify the description, labels, gp costs, % modifiers in the code here and hit me with a pull request. Also, my CSS is just horrible - any CSS ninjas, fix a brother up?

Also, I'll be using @Pandoro's customization mockup eventually. This was easier temporarily because I can set variables by string-value data-value="orc" instead of having to do index lookups.

[ghost]

It is working great, emulate next day still causes a reload and disconnect of page though. Male or female setting not available.

[lefnire]

man, that button. can never get it working lol.

On Fri, Feb 8, 2013 at 2:09 PM, Wesley Pennock notifications@github.comwrote:

It is working great, emulate next day still causes a reload and disconnect of page though.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13306034..

[ghost]

I hate it too Tyler I really do oh and I can move dailies fine checked or unchecked. On Feb 8, 2013 1:12 PM, "Tyler Renelle" notifications@github.com wrote:

man, that button. can never get it working lol.

On Fri, Feb 8, 2013 at 2:09 PM, Wesley Pennock notifications@github.comwrote:

It is working great, emulate next day still causes a reload and disconnect of page though.

— Reply to this email directly or view it on GitHub< https://github.com/lefnire/habitrpg/issues/107#issuecomment-13306034>..

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13306153..

[Shaners]

This is what the Lion, Tiger, and Panda mounts could look like implemented: I think it works, a panda mount would be pretty slow but he'd be hell against a thicket of bamboo! Might have to move the level icon to the side or just move everything up. Another concern could be how much of the armour and weapons are covered by by the mounts.

[lefnire]

I like the level float top left too, makes room for a pet. This is coming together my friends :)

[ghost]

The character is not covered too much and the level thingy too the left is a nice touch. That seems exactly where you would put it in an actual rpg. On Feb 8, 2013 1:23 PM, "Tyler Renelle" notifications@github.com wrote:

I like the level float top left too, makes room for a pet. This is coming together my friends :)

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13306738..

[StanLindsey]

Plus it leaves room to have icons underneath, e.g. inventory button etc

[ghost]

Like a scroll down sort of thing? On Feb 8, 2013 1:28 PM, "Stan Lindsey" notifications@github.com wrote:

Plus it leaves room to have icons underneath, e.g. inventory button etc

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13306972..

[StanLindsey]

Something along these lines i guess - dependent on future features etc

(Note, this was 2mins)

[StanLindsey]

[lefnire]

Would it be cleaner to hide action icons (inventory, customize, etc) within a popover on avatar-click? That could give some consistency too by allowing you to click a party member and see their inventory too, while cutting down on too much interface clutter

[ghost]

@lefnire that would make a great deal of sense so lets go with that

[wc8]

What if, instead of the turquoise level label, you show small Level Badge or Coat of Arms on the other side of the HP meter? Beginning levels could be a simple shield. Underneath the level, you might be able to show coins.

[wc8]

Kickstarter supporters could get fancy coats of arms.

[lefnire]

Ok, the test site now has a clone of the production database. Test with y'all's primary accounts (it wont effect the production site), and if we don't hit any issues I'll deploy this soon with a PR blast.

[wc8]

HP 155/50 on clicking negative habit?

[StanLindsey]

@lefnire I've got a similar UI idea to what you stated above but one that also incorporates other future potential features.

[ghost]

@lefnire OMG the emulate next day bug is gone and everything else is fine at least for me

[lefnire]

@wc8 ah, modifiers are helping the user too much lol. Fixing.

[wc8]

Able to drag-and-drop but the results after refresh are not saved; either reverting to original position or creating a new order.

[lefnire]

that's a bug with the current site, in a separate ticket - still trying to fix that.

[wc8]

Leveling up on buying rewards. Interesting. That likely only relates to use of the Cheat button. So, not likely important. Emulate gives me HP if I don't have dailys done, probably related to habit situation.

[lefnire]

alright, new push with less drastic modifiers - try now

[Badriel]

Someone suggested me to write here, so I do. Here's my proposition. It's not pixel art, but it works as a sprite and thanks to the deformed style, it doesn't lose details at low resolutions. It'd consist of multiple layers, so changing face shape, skin color, hairstyles, expressions or eyes wouldn't be a problem. Same goes for clothing.

[wc8]

The HP issue is fixed.

[Shaners]

Here are two mock ups of how the flying pig might might look like implemented: I think both work, making the grey eye pixel like the others and making the outline grey wasn't as bad as I was thinking. I still prefer the first version for the depth but I'll update the pig sprite tonight based what other people think of this comparison.

[Pandoro]

Well what the hell! @Shaners When you said, "I'm going to put the avatar on top of the mount, I thought "PLEASE DON'T DO THAT!" But it looks really cool! Also regarding the border... I'd say we have to go with the community there. Let's make some examples, then do a poll. It should be easy enough to create a black border later on, so for now, by all means, continue the colored border :)

@Badriel, on an artistic level, this is far beyond any of my skill and I have deep respect for that. Regarding habitrpg, I really like the low resolution graphics though :x This is not my thing to decide though and since there have been outcries for different graphics before, I say let the community vote on this :)

Everything else I missed right now... sorry for that, I will be back soon to take a closer look at everything :)

[Shaners]

Tiger Cub, Panda Cub, and Lion Cub. Will make a pull request tonight!

Edit: What if some pets grew into mounts? Based on amount of exp you got or something similar

[Orangyfresh]

Wow I've missed quite a bit! Everything looks great. The mounts and the customisation option looks really cool.

@lefnire Playing around with adding stuff on a local website sounds good, as long as I'm told how it works :) I could work on some backer only weapons and armor as it seems like that's one of the top priorities for customisation. Do you have any ideas of how some will look or should I make a few that you can decide from?

[lefnire]

And we're live my friends!

Yeah, I'm very excited about the mounts & pets. Those will be token-purchasable, time to start monetizing!

@Orangyfresh I'm not quite sure, I must say I've lost some of my creative edge just trying to keep on top of all this crazyness. I'm going to leave that to you artists (@Shaners, @Orangyfresh, @Pandoro). As it stands, @Pandoro is the "director" on the art side of Habit, so he'll be calling the shots for the most part - we're going to be having a chat tomorrow to sort some of this stuff out, more soon.

[Orangyfresh]

@lefnire Ok, cool. I'll see what ideas I can think of.

[ghost]

I know I am beating the metaphorical dead horse here but maybe fairies or even little gnomes? Like as guides throughout the whole rpg? On Feb 8, 2013 6:59 PM, "Orangyfresh" notifications@github.com wrote:

@lefnire https://github.com/lefnire Ok, cool. I'll see what ideas I can think of.

— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13323104..

[lefnire]

@Neohuman as separate entities, or as pets?

[ghost]

@lefnire as a guide I assume they would be separate entities but if not a guide pets. Depends on their functionality really.

[caycefischer]

Hey pixel artists! I'm working on some new layout & styles for the customization window (and eventually other parts of the ui) and I want to get up to speed on how character spriting works throughout the app.

From what I can tell, the character box is a set 90px/90px square? All the pieces of equipment, hair, skin, bodies etcetera are placed appropriately somewhere inside that 90px/90px bounding box—is that the gist of it? I just don't want to miss something and bork it up unknowingly when I start changing css.

I'm looking in male_sprites.styl & female_sprites.styl, and I see you've classed out each piece of the sprite, so an element with any given class name will display that bit of art. That's about it eh?