Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Pixel artists #107

Closed
lefnire opened this Issue · 545 comments
@lefnire
Owner

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.

@ghost
@lefnire
Owner
@ghost
@acsargent

Here's an example of a sprite I just finished for a current game project. I think the style matches nicely, and I can definitely make a lot more.
knight

@racuna

Sweet!!! good job @acsargent. I would love a great animation of me (my avatar) killing an orc when i level up. :D

@lefnire
Owner
@acsargent
@racuna

LOL (or kissing a hot lady elf too) just saying

@sigboe

Oh, I'm no artist, at least not a good one, at least not pixel art.
But might I just add my opinion, I like pixel art, but lending effects from other types of graphical arts makes it more awesome.
Look at this effect for lighting, from the game Radiant
s5
I alos like pixel art which handles dept like PaperMario
468px-Paper-Mario-Sticker-Star-Toad
Also I cant find a picture of it, but Ive seen pixels spinn with their sprites in modern pixel art games, that is a nice effect.

What Im saying really is that I personally would not mind if you had the chance to use effects such as this in HabitRPG
Think, torches with light, or animations with depth and spins and such.

@acsargent

Finished that orc I mentioned. Have a look!
orc

(some white detail in the helmet may be lost in the white background)

@lefnire
Owner

I love these small ones, because they can fit the task divs as boss battles. i'm gonna be off the grid for a bit fixing the server, i'll check back again here in the future

@racuna

Well done @acsargent

@hookang

@acsargent very nice indeed. It'll be great to see these being implemented in the future.

@lefnire
Owner

Also, full-disclosure guys - my goal is to exhaust the BrowserQuest icon-set of anything we can use in our app before moving to new art - this will make a cohesive feel really easy from the get-go. There's not a whole lot in there we can use that we haven't already, there is one female avatar, a few more items, and a bunch of mobs for when boss-battles come. But we'll still be needing a whole lot beyond that, like character modifications. See the bottom of the FAQ for my reasoning on this.

@racuna

Yeah, I like the SNES look. And share my avatar on Facebook or G+ everytime I level up would be amazing too.

This was referenced
@superlikelikes

this is an idea: what if this could be a place where pixel artists just upload their own pixels and/or pick from submitted pixel characters, items, etc. You could even rip them right from the games we love and played!

"Spriters Resource" is a great place to chop up some pixels.
I'm actually a 'depixelizer artist'... www.superlikelikes.com...

But I have experience with how to set up small pixels to become large pixels.
With these being used as an avatar thing, I don't think there would be any legal issue.

I don't know where to apply, but I'd be happy to rip/cut you up some PNG files with a clear background for any game you wanted to include the characters and icons for here.

I've always wanted to do something like this, but I'm not a code person.
So far your idea is very good. I checked out "Super Better" before and your idea is much better than that already.
Keep it customizable! Good Luck!

-Kari
PS i donated 5 bucks.

@hookang

I'm going to leave this open because its a beast on its own.

@hookang

I went over the weekend and beat Browser Quest - where all of the current creative assets for HabitRPG are coming from. There's a ton of assets we still can use that we have yet to use.

http://browserquest.mozilla.org/

We just need to implement them eventually.

@Pandoro

I really suck at this, but I though the girl in the BQ set looks pretty hideous and not really anything like an adventurer. So I created this. If you like it feel free to use it. It created it based on the BQ set.

girl

If you REALLY like it, I might take the time to give the armor sets a try as well ;)

@lefnire
Owner

nice! i don't see why it sucks in any way, and we need something to get started - so until further notice, that's our girl

@superlikelikes
@ghost
@Pandoro

Thank you for the nice comments ;) But this was my first try at pixel art ever :x People like acsargent will probably be by far better at creating new content. I just figured I could give it a try and see where it goes. This is pretty much just the head of the guy and the legs of the guy sticked to the girl with a pony tail. If you are serious about integrating the gender into the game though, I am willing to give the armor sets a shot, but please by no means consider me as the pixel artist ;)

@Pandoro

If desired also available without the flower. I did it like this to somehow distinguish the female from the male character with this armor.
girl_armor0

Should I continue ^^; ?

@lefnire
Owner

:+1:

@Pandoro

Buuuuh done for today, I hope I can finish the last one tomorrow. Sorry for spamming this thread :-/ Maybe I should fine somewhere else to post this stuff.
girl_armor1_v1 girl_armor1_v2
girl_armor2_v1 girl_armor2_v2
girl_armor3_v2 girl_armor3_v1

Since I found these to look way too much like the male character, I decided to try some stuff to get them to look a little more like females. That's why there are always two of them. Pick whichever you like most!

@ghost
@lefnire
Owner
@lefnire
Owner

that is amazing. we have our female avatars now, haha - that just happened!

@lefnire
Owner

I like left - left - right, respectively - what do y'all think?

@ghost
@Pandoro

girl_armor4_v2 girl_armor4_v1

So here is the last one. This one... was the hardest to do in my opinion. The problem was that somehow the damn thing kept looking like a male character. I hope you like it, if you have any feedback though on what would be a good addition let me know! The pony tail sadly had to go because the should armor was too dominant.

@ghost

@Pandoro that is awesome

@superlikelikes
@lefnire
Owner
@hookang

@pandoro awesome!

@lefnire
Owner

@Pandoro, can you commit those images to the repo? Just dump them in public/img/BrowserQuest/habitrpg_mods, and shoot me a pull request. I'm using PRs to help keep track a la biz model. I'll slice / move / rename as necessary.

@lefnire
Owner

female avatars are in, thanks @Pandoro! user -> settings -> gender

@SlappyBag

Just changed it for my GF and she was like "Whoop". Goodjobs!

@SlappyBag SlappyBag closed this
@Shaners

Is there a priority list of additional art assets Habit RPG is looking for?

Or is it just:

  • tabards
  • pets
  • mounts
@lefnire
Owner
@Pandoro

@Shaners As @lefnire said I'm working on spliting the general avatar into shield, head and body. I kept to the general representation of the BQ pixel art, meaning avatars are something like 60x48 pixels, but each pixel is represented by 3 subpixels, so in fact it is just 20x16, sometimes a little bigger sometimes a little smaller.

Considering the general plan is sticking with the BQ content where possible, I think it would be good to keep to these sizes of avatars. So if you are a real pixel artist, unlike me, knock yourself out and create whatever you want :D

I hope to be finished with the splitting soon, so that everyone can pitch in and create new pixel art with the same size. This way @lefnire can at some point fix up the code without needing to resize and crop the images.

@Shaners

Threw this together over my lunch break today then refined it a little just now.
Pet-Wolf

Supposed to be a pet wolf (looks more like a husky) and I imagine it'd be something like this implemented:
Pet-Wolf_Mockup

@Pandoro

@Shaners , I really like it! We should discuss though what to do about black contours. So far 99% of the stuff in the pixel art we have is surrounded by black contours. It would thus probably fit a little better into the general style if we can also make the pets with black contours. Maybe you could try to put a black border around it, considering you designed it? I will also give it a try later on. Then we can see if it looks better or not.

@lefnire
Owner

@Shaners I love the wolf! Let's get that committed to the repository, we can add a border in version two and second commit.

@Pandoro

@Shaners, I took the liberty of adding a black border, I was afraid it would seriously screw up your great work, but I think it still looks awesome and now it will fit perfectly into the style.

What do you guys think? Which do you prefer?
wolf_border

Furthermore, and you will need to zoom a little for this one, here is the result of about two days of work. Do you see the possibilities :D ?
css_sprite

@Shaners

@Pandoro in general I prefer non-border pixel art but I really like your version! I also think it fits with the rest of the Browser Quest art better.

@lefnire I think Pandoro's version fits much better so perhaps they should submit it to the repository? If I come up with more stuff should just submit it or post it here first?

It looks like the items and player customization are coming along great :D ! I think I'll play around with more ideas for pets unless there is greater demand for something else?

@Pandoro

@Shaners, I'm glad you like it. I too have come to the conclusion that borderless can look nicer in some cases and it saves a little space. However it indeed fits better to the BQ content. Considering we can stlll salvage a lot from there, saving us all the work, I think we should stick to that for now and thus try to create content with borders :)

I'm not completely sure about @lefnire 's agenda, but from what I know pets are the main next thing, although fancy items and armors will probably be required at some stage as well.

@lefnire
Owner
@Pandoro Pandoro referenced this issue from a commit in Pandoro/habitrpg
Alex As discussed in #107 I added the following:
* The full gimp file, containing all the current character pixel art for both male and female, now with different hair color and skin color.
* A CSS sprite of the above
* I took the liberty to also add @Shaners wolf, with and without black border.
474ca94
@Pandoro Pandoro referenced this issue
Merged

New pixel art #294

@Pandoro

Hmmm :-/ I probably should have commited this directly to the repo instead of onto my fork? Let me know if I messed up, I'll try to fix it then and do better next time ^^;

As mentioned in the commit, I took the liberty to also add your wolf @Shaners. This way we have it in there and you don't need to fork etc.

@SlappyBag

I've forked my own versions of HabitRPG only so lefnire can see directly what I'm adding through the pull requests. So I think you're fine.

@Shaners

Submitted these variations a little bit ago, hope I did it right!
Pet-Wolf-Variations
From left to right: Base, White Wolf, Desert Wolf, Red Wolf, Shade Wolf, Skeleton Wolf, Zombie Wolf, Happy Golden Wolf, and Veteran Wolf.

@Pandoro
@SlappyBag

Fantastic job Shaners!

@Shaners

@SlappyBag Thank you!

@Pandoro Thanks! Not sure what you mean by line of wolves? Like one sprint sheet image file for for the wolf pet and the variations in colour? I'm not too familiar with the mechanics calling and splitting the image but I can definitely put them (and future pets) into one png to be accessed. Is that method already setup with the player customization image and css file? About publicity, feel free to put them on any page!

@Pandoro
@lefnire
Owner
@ghost
@Shaners

I think variants can work for all pet types but that is mostly just my opinion! The way I saw it was that the base models (base and desert wolf) would be more common but the others would increase in rarity, red, white, shade, gold being rarest. This would work with a random loot drop system or if the player really wanted a rare variant they could use a token or two. Maybe the zombie and skeleton variants could be exclusive to a future necromancer class, maybe the base wolf would grow up into a veteran wolf after completing a certain amount of tasks or having been signed up with habitRPG for a certain amount of time. Variants I feel enrich the pool to pull from and you don't necessarily have to release them all at once or in the same way. Or you could just not have the rare breeds available for a certain pet types and keep the base models as common.

@Pandoro
@SlappyBag

It would be better to have separate images for each char/wolf/etc as not all will be displayed at once, requiring a larger file be downloaded with no difference in visuals.

Also, all the variations!

@Pandoro
@lefnire
Owner

yeah, i'm trying to figure this out now that stan mentions it. One large sprite-sheet is faster when you're going to use many of the sprites on the site, but stan has a point that we're only going to be using one sprite of each category at a time (1 weapon, 1 armor, 1 pet, etc). Might not be so though, as far as character customizations go we'll want to show all options to the user at once. Come to think of it, while the user will only have one of each sprite at a time, many wil be displayed in the app: stores, customization screens, party avatar customizations, etc. I think sprite-sheets is the way to go;.

@Pandoro
@Pandoro

sheep

Not one of my best, but I guess it might serve as a possible pet, for the sheep lovers amongst us :p

@SlappyBag

@lefnire - True, as we progress the full sprite sheet will be used more, might as well build to that infrastructure earlier.

Plus with @Pandoro doing the actual maths you can't go wrong!

@Orangyfresh

Pixel Art Mage
Pixel Art Rogue

I'm completely new to pixel art, but I'm willing to help with any art if needed.
These are some rough class based armour designs for a rogue/thief and a mage. I was thinking that if stats such as strength, intelligence and agility were implemented, once they reach a certain stat level specific armour sets could become available. For example if agility reached 5 the rogue armour would become available and like wise for the mage if intelligence reached 5.
Feel free to suggest any modifications and what-not.
I am aware that there is a red wizard sprite from BQ, but I feel that it doesn't fit the overall style of the character armours that well.

@Pandoro
@Pandoro
@Orangyfresh

Thanks for the feedback :) Yes I am aware of the problem regarding the beard, especially more so after looking at the css_sprite.png. An option to turn it on and off would be great, but until then it can just be removed or edited to fit with the constraints. My main question is how do I add new pixel art to the system that is being used, as this is all quite new to me.

@Pandoro
@Orangyfresh

Ok, nice. I understand, thanks! Yeah I'll have a go at it when I've next got some time on my hands.

@lemoness
Collaborator

When do you think different skin colors and hair colors will be available? That seems like it should be a priority for the sprites.

@Shaners

Made a few more pets:
Pet-Fox-BearCub-Dragon-Lion
I'll submit the pull request tonight when I get home. From left to right: Fox, Bear Cub, Dragon (or Dino), and Lion. I'm working on a tiger, larger bear, panda, and flying pig plus variants.

@Pandoro
@lefnire
Owner
@wc8
wc8 commented

A lion followed you home... and you had a sudden urge (verging on panic) to finish your daily tasks. :-)

@Pandoro

@lemoness The actual pixel art is done, we just need to add some code, which shouldn't be all that much work, however currently the party system still has the higher priority. If everything goes well though, and of course if Tyler finds the time to do the coding, it shouldn't take all that long any more :)

@wc8 Panic indeed :p I think I would run for miles before stopping ;) Exercise, :negative_squared_cross_mark:

@lefnire
Owner
@Pandoro

new

Feedback :) ?

@ghost
@lefnire
Owner
@Pandoro

Mainly that is BQ content though :p soooo Only the spear and the hair is really mine ;) But you saw the hair already sooo here is the spear :p

@Pandoro

Oooh and @Neohuman GIMP ;)

@lemoness
Collaborator

Yay, I'm excited for it! Mostly I just want my brown skin and hair :) Also, I can't wait to see what fun paid customization options you'll come up with!

Also I LOVE THOSE PETS!!

@Pandoro

new2

Helmet: BQ content
Weapon: own creation

@Pandoro

Hmmm somehow github is buggy :-/

Here is the animated version
scythe

@ghost

@Pandoro you art is beautiful & @Shaners

@lefnire
Owner

@Shaners now too, you've both been doing an excellent job. @Shaners, [mailto:email me] sometime - would love to get in touch with you.

@lefnire
Owner

The Tard-meister is getting some limelight in the world outside GH :)

@Orangyfresh

Pixel Art Iron Armour
Pixel Art Rogue 2
Pixel Art Red Robes

Top one is just a variant on a previous armour set and the second is an improvement on the thief I posted previously. Lastly some robes for a wizard character. Am I doing it right? :P

@Pandoro
@Orangyfresh

Thanks, as long as they can be integrated I'm happy. I'll most likely modify my grey wizard so it fits the system and probably make some more tomorrow. If there's anything I can do to make them easier to be implemented, let me know :)

@Pandoro
@Orangyfresh

Haha sure :) I haven't actually been able to check out the full.xcf as Gimp was playing up, I've been using Photoshop so far with the css_sprite.png for reference because it can't open the full.xcf file. But I'll get onto it sometime soon. Would I just replace the full.xcf file in the pull request once I've added more art?

@Pandoro
@Orangyfresh

Ok, seperate .xcf files with layers it is then. I'll get round to changing my sprites to this and adding them later.

@Shaners

@lefnire @Pandoro @Neohuman thank you!

Another day, another set of critters:
Pet-Tiger-Panda-FlyPig
From left to right: Tiger, Panda, Flying Pig.

The pig is happy because he can fly but if you prefer there is also blank and angry flying pig:
Pet-FlyingPig-Emote

Will submit a pull request again when I get home tonight. Still working on: large bear, lion cub, tiger cub, panda cub, and a polar bear plus variants.

@Pandoro I was mulling over how mounts might work pixel art-wise previously, maybe the lion, tiger, and panda are too big and may work better as mounts. I'll make some mock ups to explore how that might look and post them in this thread.

@lefnire
Owner

@Pandoro I've been working on the customizations branch to add hair, gender, skin, armorSet, armor, shield, helm. If you click the avatar you get a customizations modal, and you select preferences. Very simple, we'll clean up later.

Two things - in the previous incarnation, armor was represented in the item store as a helmet object. I'll use those for representing helmets in the item store now, but the chest pieces look pretty funky in the item store. We may want to add a version of the chest pieces which are "closed" so they don't have loose ends and transparency, if you know what I mean. Also, any chance you could throw the old helm objects (which are currently representing armor in the item store) into the sprite sheet? They are item-leatherarmor.png item-mailarmor.png, etc

PS, this stuff is looking awesome. your css is marvelous, and everything worked wonderfully.

@Orangyfresh I can't wait to be your rogue :) I'm gonna game the class system just to be him

@lefnire
Owner

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?). Full disclosure (@SlappyBag caught this earlier), I pretty much suck at css

@Pandoro
@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.

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

@SlappyBag

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
Owner

@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
@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
Owner
@SlappyBag

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

@lefnire
Owner

[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
Owner
@ghost
@Shaners

This is what the Lion, Tiger, and Panda mounts could look like implemented:
Mount-Lion_MockupMount-Tiger_MockupMount-Panda_Mockup
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
Owner

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

@ghost
@SlappyBag

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

@ghost
@SlappyBag

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

icons

(Note, this was 2mins)

@lefnire
Owner

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
wc8 commented

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
wc8 commented

Kickstarter supporters could get fancy coats of arms.

@lefnire
Owner

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
wc8 commented

HP 155/50 on clicking negative habit?

@SlappyBag

@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
Owner

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

@wc8
wc8 commented

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

@lefnire
Owner

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

@wc8
wc8 commented

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
Owner

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.
041f

@wc8
wc8 commented

The HP issue is fixed.

@Shaners

Here are two mock ups of how the flying pig might might look like implemented:
Pet-FlyingPig-MockUp001Pet-FlyingPig-MockUp002
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

Pet-TigerCub-PandaCub-LionCub
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
Owner

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
@lefnire
Owner

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

@zakkain

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?

@Pandoro

@zakkain, I´m not really sure how it looks on the code part, but from sprite point of view that is correct. The body is split up into skin, hear, head, helmet, body, shield and sword. These are then put into one big css sprite and the parts that are needed are taken from there. So you pretty much got it right I guess :)

@lefnire
Owner

@Pandoro will be coordinating with y'all sometime soon regarding who wants to do what, but for end-game weapons and armor - just for some inspiration check out the "Nexus Kingdom of Winds" library. It's not quite as low-rez as our game, but almost - and will give some end-game item inspiration. Here are the links, just click through the categories at the top (axes, bows, etc) to browse:

@lefnire
Owner

Pets in the works! Screenshot, branch

@lefnire
Owner

Our most recent push is a @Shaners release, congratz my friend - your content is live! (And awesome!). Thanks so much for those pets, they're incredible. I granted you a bazillion tokens to test it out (level 4, and assuming you're "Shaners" in HabitRPG). Hit me up if anyone experiences issues.

My next steps are

  • Get that lamb in
  • Still pending notice on Grumpy Cat
  • Get the mounts in (which may be difficult? Do we need new avatar body sprites on mounts, or can we do this with CSS?)
@Pandoro
@zakkain

As far as the CSS aspect of this goes, I think we should offer the option to hide/show the mount in the main avatar "view". That way, we don't necessarily clutter up the header with complicated art, if the user wants to keep it simple. Eventually we can implement a proper "Profile" page, where you can see your full character and their mount, pet(s), etcetera in their "home base"

@SlappyBag

Yeah, profiles are a confirmed thing we will work on eventually and so having the option to tweak your header image is a good one.

@lefnire
Owner

Good advice guys. Toggleable it is then, Zack & Stan. @Pandoro anything immediate you'd like me to do? The "back left" position does kinda muck up the weapon, and cover the pet - any stop-gap position fix y'all can think of?

@Pandoro
@lefnire
Owner

Not a problem, we'll figure stuff out when you're less busy, we're in a decent spot right now :)

@Pandoro
@lefnire
Owner

Our own @Pandoro has developed some guidelines for submitting Pixel Art, check it out!

@ghost

@Pandoro that is awesome

@Shaners

Made some more variants plus 2 additional colours for the wolf , cotton candy pink and blue. Will submit a pull some time this week but busy with studying for a mid term and very important design meeting.
Pet-WolfFoxBearDrake-Variations
Also tooling with ideas for a backer only mount, Ethereal Lion, and backer only pet, Dawn Phoenix.

@lefnire
Owner
@Infusions

Hey guys. I've been keeping tabs on this project and when I saw this post, I thought I'd like to contribute somehow. So, here's something I whipped up:

I'm no professional but I think it turned out... unique.
man

@lefnire
Owner

Also, some free-to-use item icons we may find beneficial: http://www.pixeljoint.com/pixelart/44976.htm

@Shaners

@lefnire those are awesome, but too high res?

@lefnire
Owner

Yep, you're right. I started to write up a long comment about whether we ever anticipate high rez in the future, but I think the answer has been decidedly "no", esp. as per Alex's design spec

@Pandoro
@Shaners

@lefnire @Pandoro what if I, or someone else, created an HD branch of Habit RPG? Could experiment with 2x the pixels or even vector based sprites then evaluated how much the users enjoyed that look. Based on those results it could then be merged with the main branch and added an option under settings to switch HD on. That way the project retains the original nostalgic feel it's already created but also gives the option for users who would prefer a different style.

The problems I see with this idea are:

  • We don't know how many users actually want it
  • It might ruin the cohesiveness and feel of the project
  • It's a lot of work, everything will need to be remade
  • Might be spreading resources too thin, making it less likely either goal will be met
  • It might be harder work, less pixels = less choices to make = faster (though where they should go can often be very hard to decide!)
  • Might make it less likely the community can contribute

Bottom line is I think it first needs to be discovered, either through a survey on the site or poll, what percentage of users actually want the higher res feature.

@Infusions I like it, it looks nice!

@Pandoro I was thinking independent pets like the wolves already are implemented. There might be better ways to go about it though. Maybe only have the standard colours available to purchase with tokens and the rarer colours pop up as random encounters when the user completes a task and they must use an item (whip, cage, cookie, bait etc.) that they have previously purchased with tokens to 'capture' that rare pet? That would involve a new feature and coding though. Maybe one of the purchasable pet items is tagged with 'random colour' property and upon purchasing the user has a chance for a rarer colour? Just some ideas!

@lefnire @Pandoro as for mounts it may be as simple as splitting the mount into a head element and body element. The head would be layered on top, covering the player including their right (our left) leg, while the body placed in a layer behind the player to be covered up by it. If the mount's head always covers the players right leg there shouldn't be a need for altering the player sprite (besides maybe elevating it.) Not knowing how things are currently implemented it may not be "as simple as" that though.

@zakkain
@lefnire
Owner

I'm gonna wait to hear Alex's call on those thoughts Shane. I think it would be a no-go for the first iteration, because as you say it will spread resources thin and we might not make those KS pledge promises. It might be we have to go all low-rez until Habit starts making money, then we hire on a full-timer (maybe one of you) to do a full 2x migration. More I think on it, I think that's likely the way we should go.

As far as z-index-layered mount-head -> avatar -> mount-body, that sounds like a brilliant idea to me! Zack & Alex?

@zakkain

That's really clever!

@Pandoro

@Infusions Sorry I missed this. These look cool :) They just don't really work out with the current general setup :x Great use of shading though! Let's see if we can use these at some point :) How did you do the motion animations? Just trial and error?

@Shaners I have always said that I don't have the artistic skills or time to go to a higher resolution, but also that I don't want to be the limiting factor here. So if anyone wants to give that a shot, I'm fine with that. I just think that it should be either A or B. Making low and high res doesn't make sense to me at all. It will be nice while changing to it, but something which works out in high res, will probably look crappy in low res, or something in low res will take a lot of time to reproduce in high res without it looking too dull. So that would in the end limit is to make something in low res -> create a cooler version in high res, as doing in the other way around will be impossible in many cases. For example think about glasses. Right now glasses are hard to realize, thus if we easily create glasses in a higher resolution, what to do in the lower resolution? So for the general creative side, the high resolution part has no big benefit, as long as a low res model needs to be made at the same time.

I for one have always liked the way stuff looks now and don't really feel for changing to a higher resolution that much. Although 2x will probably still keep the general feeling there is right now. I haven't seen that many people asking for different graphics yet, those that did asked for very different stuff, but I guess the only real way to find out is to do a little mock up and ask people for their opinion in a poll.

@zakkain I must admit that I don't really get what you are saying regarding the retina display? On any display you can simply upscale the sprites and you are done. There is nothing about looking decent or not. These sprites have fixed borders, aligned with pixels, so as long as you multiply the size with an integer, you will get crisp graphics on whatever screen you desire them to be crisp. So maybe I am getting something wrong here ^^; ? Please enlighten me :)

Regarding the pets. the layered approach also came to my mind. I don't think that it will be all that hard to realize, but as Shaners also says, the left leg has to be covered, always. My main argument against placing the avatars on top of the mount is that most of the weapon and a large part of the body will be covered. This is a taste question though :) Technically I think there is no argument against not placing them on top of the mounts. Although this does require the head of the mount to have a certain size, so for example a unicorn with a slimmer face and a longer neck might be harder to realize. But I think when cutting the neck/head at the right pixels it should be doable.

Regarding something completely different: The black borders. Shaners pet sprites got me thinking. Especially for the weapons, a two pixel black border around a sword or spear makes everything look rather black :-/ That is why this morning I thought we should go away from black borders and move to dark colored borders. I made a quick and dirty mock up of one example and I would like some feedback from you. The main pros of this are that in some cases it looks REALLY better and it gives a higher flexibility regarding what can be done and what not. For example no black border for the pony tail is needed any more, as the pony tail will take care of that itself. (meaning we can easily extend the hair cuts for characters.) This mock up isn't that great, the colors should be tuned a little, but if everyone, or at least if most people like the idea. I would change the general setup to support this system asap!

border

@zakkain
@Pandoro

Yes this is true, but if that is what you are worried about, then we can simply create the bigger pixel assets by upscaling before hand. I know this works. In fact the images are 30x30 pixels. Meaning each "pixel" in the character are 9 real image pixels (3x3). I guess the BQ artists saved them in a 90x90 format because of the exact reason you mentioned. But going for 180x180 or whatever actual size of the character is fine as long as you can divide it by 30x30, as this is the real minimum size.

Too be honest I don't get why you cannot tell the browser to NOT blur the borders while scaling :-/ this would save me a lot of rescaling all the time and furthermore we could reduce the file size a little further.

@zakkain
@Shaners

edit: already explained! @zakkain I don't think retina displays would much of an issue quality-wise, besides the fact that users might be expecting higher resolution assets, since things are already zoomed in for the web / monitor version and that zooming in is actually responsible for the style. Currently the pixel art is built pixel by pixel but when displayed it is zoomed in 3x. This means 1 pixel actually represents a 3x3 pixel grid for the web / monitor version and it's simply a matter of altering this zoom based on device PPI and resolution. So for retina displays since they have more PPI you might use 4x (something the iPad can do natively I believe) which would essentially look the same as other versions but represent 1 pixel with a 4x4 pixel grid.

@lefnire yea I see no issues with sticking with the way things currently are for the time being. If anything the current style is drawing people in!

@Pandoro

@Shaners btw I like the idea with the pets. I still didn't reach level 4 :p So I'm not sure what is out there and what is not, but buying one and then completing certain quests or goal to get different variations, or buying a random variation really sounds cool :)

@Shaners

@Pandoro great points! What happens with higher res assets that are impossible at the lower res? Why do the extra work adding a 2x res setting if it's going to be so similar and create twice as much work? The idea is probably best tabled until there is an outcry by users for it or the art reaches a point where the things that need to be done just become impossible at the current resolution <-- far from that point I believe.

As to the coloured outlines, I'm biased so I'll leave my opinion out!

@Pandoro
@lefnire
Owner

I like the idea of a mechanic for exposing / unlocking pets, let's do that. I just wanted to get them in like they are as MVP release. @Pandoro: screenshot.

So yeah, let's stick to the current rez. It's like using bootstrap - will get us as far as possible, and if it every breaks down because we can't work with detailed items in the current rez, well - hopefully we'll have enough money then to cross that bridge :)

@Pandoro
@Pandoro

Okay... so I started working on the new borders. I think it proves kind of harder than first expected. The system still works the same as it did earlier with the layers. But I'm not really sure which version I like better. What do you guys think? The one on the right most definitely has more options as this strict black border policy is not in effect. However it also looks different than it used to look :x

preview

@Infusions

@Shaners Thanks :)

@Pandoro Ahh, well what exactly is the general setup? Did you mean this, with the layering and all? Or did you just mean the style in general? Thanks by the way. :)

Also, it was trial and error for the movement. I tested out the animation and it looks alright I think!

MAN2

@Pandoro

Well that does get close to it, but the problem is that we cannot take a piece of your pixel art and put it in as a part of the current setup. This will work for the sword and shield, but not for the body, head and skin.

I tried to describe the current general setup in this tutorial but considering more and more people are chiming in here, who knows how it will look in a few days :p Furthermore I am currently working on maybe removing the dark gray borders. This will in the long run give a higher degree of flexibility when it comes to drawing certain things, but it has yet to be shown if people like it or not.

@Infusions

@Pandoro OH no no no... I had figured that habitrpg was eventually going to shift to it's own original style that still kept the old formatting, so I came up with one in my spare time yesterday... which is this. It's not meant to just be bits and pieces.

I think I might have jumped the gun here though. Sorry!

@Shaners

Sorry I don't really have time for a proper explanation but as to the coloured lines:
Render-example
a) How BQ is setup, 3 shades and 1 outline colour
b) Getting a little too light for the outline colour in my opinion, silhouette doesn't read as well
c) In between a and b but more towards a, our grey outline has some hue in it that matches our object
d) A transition in the outline from b on the lightest side of the object to c mid object to a on the darkest side of the object

@Pandoro

@Infusions Hmmm :) Well it might be the case at some point, I guess we should really take a poll for where HabitRPG should head regarding pixel art. I think sticking to the BQ content causes the least of work right now though. There are still a whole set of things we can get from there and use for HabitRPG. And this is the simple problem, I don't want to keep you from drawing a new set. I just cannot support it actively either. Right now we need to get stuff out there regarding the KS promises and we feel that this will be achieved with the least effort by utilizing the BQ content. Because of that, at least for now we will stick to this, feel free to get a new look going though. If the community likes it and you can manage to draw up the same "amount" of armors and items we have right now, we can at some point replace it if the community likes it better :) Otherwise it might be a cool idea for you to also migrate to the current system. You clearly can draw some cool stuff, so you can also contribute by making cool new armor which works with what we have now :)

@Shaners Well what I tried to do was to go from A to c, while trying to make it look a little more like b than like A. Because that looked too much like b though, I tried adding shading like in d, which failed in most cases x) I still need to put more work into this. What are you using to draw the stuff? And how do you get such nice shadings? I find it quite tedious to select color by color and drawing each pixel on it's own.
Furthermore one of the problems that I encountered is that it is not always so nice and clear where to apply the "dark side" as in d. Sometimes it is on top, sometimes on the bottom. And sometimes the amount of pixels which needs to be surrounded is so small, that it is hard to make a smooth transition. Especially with the hands and rather small feet I find this hard to realize. I will definitely need to work more on this stuff. I must say after seeing it on my phone and on another screen, it looks more like b, so I need to go more towards c and d if this should work at any point :x

@OldSchoolRPGs

I love the sprite look and all, but it does seem disproportional in some areas that maybe it shouldn't. And personally, I think making the graphics a bit more like 16-bit SNES graphics or higher would be better than the 8-bit look. You could add a bit more detail and still keep a black border.

Here's an example of some armor and a sword I did for an old MMO to illustrate the look I'm thinking of:
BETAsetpreview
batmanadamwest
ALitempreview
SpellbookNew

(Pictures just for a reference. I don't sprite anymore.)

I know it would be a lot of work to change everything, but I think the look can be improved.

@Pandoro

@OldSchoolRPGs well,.. :p See the discussion above. If someone would come and provide cool sprites, I doubt @lefnire would be against using them. I would even like to give extending a higher resolution set myself. However to keep the general style of the game the same as it is now, as I think this is really a feature of the game, we shouldn't go over twice the current resolution. So while 60x60 pixels is still very manageable, right now we lack the people who really want to do it.

@lefnire
Owner

@Pandoro I prefer A with the two female options, personally. The one on the right kinda fade into the background, along the linde of @Shaners' B. What are the flexibilities borderless affords? Maybe if we moved more towards C / D?

@Pandoro

@lefnire, I totally agree with you. It didn't come out as I saw the stuff yesterday night;) Probably I picked one of the worst to show on here x) Some of the other armors looked better. But the borders in general should be darker. More like C.

The main benefit of being B or D as much as possible is that you simply have more pixels to draw thin things. As I mentioned somewhere, I was thinking of making a lightning bolt weapon. And I thought that a lightning bolt should be rather thin -> 2 pixels maybe, but that does not work, so 1 pixel color, 2 pixels border. So that gave me the idea that if you also color the border, like @Shaners does in many good examples, it could work out better.

But a quick mock-up (This is no serious attempt at making a new weapon sooo ;) bear with me ) shows that it isn't so much better. At least not with my drawing skills right now ^^;
border2

I think this might again fuse with the background. The exact same thing the borders prevented. In fact after thinking about it, there is no extreme benefit regarding the hair either, I can rearrange some stuff and the old setup can deal perfectly fine with the pony tail and other hair options. The hair should just take care of the black border itself, instead of having the helmet layers put a border around it.

I will see if I can make it a little more like D after all and get it too look better. But probably we should just forget about it and think about something else. The idea sounded nice and for some parts it definitely looks better in my opinion! For example I like the hair better, but if it brakes the overall system, we shouldn't waste time on it.

@lefnire lefnire referenced this issue
Closed

Suddenly died #398

@Shaners

Just a little preview of something I've been working on. Please note, the body is missing because this is a work in progress.
ELion-Anim
Edit: here it is with a body, not the final colours but gives it more context.
ELion-Anim002

@lefnire
Owner

Yeaaaah, backer mount! And the beginnings of head-to-body separation, so we can start experimenting with this one. Thanks @Shaners

Alright everyone, more people are chiming in with pixel art talent than any other area of the app. @Pandoro and @Shaners, what do you think? Create a separate Trello board for the art department? We need a way to somehow triage tasks, manage info, and direct contributors. My only qualm with Trello is it's private-ish

@Shaners

I guess semi big update, all pet colour variations plus a polar bear pet and mount.
Pet-Variations
Not really planning on making anymore pets going forward, except for the backer-only pet (Dawn Phoenix if that pans out.) May return to them at some point since I had a few more ideas I wanted to try out and I think others did too.

So what I'll be working on now:

  • Backer only mount (Ethereal Lion - if pans out)
  • Backer only pet (Dawn Phoenix - if pans out)
  • Backer only weapons / armor

For the backer-only armor I am thinking either something dark inspired by this:
https://f.cloud.github.com/assets/2374703/164653/548cab2c-78d1-11e2-88e1-2ee716d769eb.jpg
and this:
https://f.cloud.github.com/assets/2374703/164654/5d28088a-78d1-11e2-8a17-1cbc6689d856.jpg
or something translucent and crystalline inspired by this:
https://f.cloud.github.com/assets/2374703/164656/7ff7cab2-78d1-11e2-84d2-92e062f6037b.jpg
Since the amount of pixels there are to work with are very limited, I'm worried that the concepts will just fall flat though. Will post progress!

@lefnire not really familiar with Trello so can't comment on if that would be a good idea or not. As far as managing and encouraging artistic contributions I think 2 things would really help: a solid design doc (that covered artistic direction and technical restrictions), and a live priority list of assets that needed to be done. With these, contributors could easily get some direction and also have a source that they could quickly check in on to know what was needed the most. Though you wouldn't want to be too strict since a lot of people are doing it for fun.

@lemoness
Collaborator
@superbiasedman

Hey guys. I'm an animator, so I wouldn't be that great about creating new pixel art but I could add animations to existing ones.
A few things like maybe having the character react to taking damage, successful habits/tasks and leveling up etc.
Just wondering, what's the best system to do this in to fit with how it's coded? A spritesheet of the separate images from the animations, each animation compiled into a single gif or something else?

EDIT: I found the guide for creating sprites, so I'll do up a couple test gifs later to show what I mean.

@Pandoro

@lefnire A seperate trello board might be good, but honestly there are only a few discussions going on.
Animations.
Higher resolution or not
??? So a trello board might be a bit overkill. If we really want to get some more people to vote on this, it might be good to post some poll on the KS while it is still live. We should be able to get a good feedback there.

@Shaners Great stuff man! (Are you a final fantasy player by any chance ;) ?) I will take the pets and combine them to a CSS file if that is okay with you. I think this will in general work out better in the long run. I will try to align them a little, as for example the pig should be on a different place than other pets.
I really like the sparkling animation. I'm just not completely sure where it is going? Will it be the ethereal lion? Because in that case I must be honest that I find it a bit hard to see the lion in there, and it seems a bit small for a mount maybe? I might be wrong regarding the last point. I really like the idea regarding the backers only armor. I also thought about some purpleish looking armor. Considering you are good at "border-less" stuff, I would suggest that you can give that a try? I don't see why we should exclude it from being possible, just because the other items have dark gray borders.
Regarding the guideline, a rough version can be seen in the document Tyler mentioned earlier. This will change a little regarding the hair of the female, but apart from that I think it might serve the purpose you pointed out? There isn't a lot of artistic guidance in there yet, but having the technical restrictions seems good enough for me. Anything else people can get out there would probably be great already. If you have any corrections or suggestions for this, feel free to let me know. I honestly think you are the by far more skilled artist than me, so if you have valuable input into a tutorial I would love to get some stuff in there!

@lemoness This will all depend a little on how the class system will be implemented. Although there have been sugggestions, discussions and ideas, it is not a fixed thing yet. But the items will then be used accordingly. Most likely they will be available alongside the other items. I'm not sure though if you can buy a mage hat as a warrior? Maybe that might be the case though, so that can't really be answered yet. And of course, everyone who wants to work on them is welcome to join in and give it a shot :D @Orangyfresh has made a nice start for them. They just haven't shown up in the game yet because there is no class system yet :x

@superbiasedman This sounds great :) I would suggest making them as gif files. Currently we are using CSS spritesheets to get all the possible armors out there in an easy way. This can easily be extended to gif files and then taking the different animations from 1 sprite. The problem is a little that if you start making animation spritesheets, that means we will have to handle the timing in code and furthermore we will have to keep track of animation spritesheets together with CSS spritesheets. So it would probably be easier to have it in a gif file, that we use in combination with the CSS spritesheets. Considering we have many possible combinations of skin colors etc, it would be cool if you also animate all these parts seperatly? That way we would again overlay the different gif files, so that you could take one gif file for the hair, one for the body and so forth. The only thing I am afraid of regarding this is that the timing of the different gif files might be screwed up :x We will have to play around with this a little I guess! :)

@SlappyBag

I think the goal of the Trello board was to organise tasks. E.g. - Backer Set, backer NPCS, weapons, armor etc

Not that you aren't doing great work here! =D

@lefnire
Owner

I'll chime in soon with thoughts, I really like the way this discussion is going and you guys have been such amazing help.

But I just had to comment on that Skeleton Cactus. That's definitely going to be my pet. Looks like a tamagotchi :)

@superbiasedman

development

Here's what I got for a very quick test to give a basic idea of what could be done. (I set it not to loop, so if it's not playing open it in a new window/refresh)

I kept the actual number of different frames low, it's literally just the basic standing frame and then 3 new ones. It's not going to be terribly smooth because of the very pixelly look so I think it'd look better to be a bit more jumpy like this anyway. I could still add some more frames to the motion while keeping that look, but that depends on if it's really wanted or would it just cause file size problems with the number of objects having those frames?

For the sake of timing I duplicated frames rather than editing the timing of each individual frame. Again, not sure what works better for the site. Would it be better to save on space by controlling timing with code or would duplicating frames for timing make more sense?

EDIT: Hmm, that last gif seems problematic so I tried making one that loops forever for the sake of previewing:

Test Animation

@zakkain

On the subject of animations, let me say there's no need to make gifs out of them! I've done a CSS animation technique that uses sprites (moving the background position of the sprite at fixed sub-second intervals)—which means all you need to do is put each frame of the animation in a sprite and the code will do all the work!

That'll cut down on file sizes a lot, not to mention that it uses sexy PNG-24s, not GIFS, and will gracefully fall back to the first frame of the animation in old browsers (<IE8) instead of borking. It also means we can play animations based on user input, say when they level up or complete a task, or even hover over their avatar. THINK OF THE POSSIBILITIES

(recent article on the technique here: http://davidwalsh.name/street-fighter)

edit: it also means that we can construct animations 100% in code using different sprites (like the armor, weapons, etc—so you artists don't have to duplicate all your work for each variation of a character animation (same animation for 5 different colors of skin, for example).

@Orangyfresh

Sorry I haven't been very active recently, been caught up with my studies.

Firstly, I'm for the higher resolution pixel art as it would allow for more concepts. The removal of the black borders and shading would work much better with this, as that idea doesn't work too well with the current resolution. However I'm fine with what we're doing now, its easier and less time consuming.

Animations would be really cool. They fit the style of the art and add more interaction between your character. It all depends on our priorities at the moment.

@Shaners, your pets are awesome as ever. In the free time that I've got I'll continue thinking of some backer only armour / weapons and most likely post some ideas by the weekend.

@Shaners

Yea I would avoid GIFs anywhere possible and stick to PNG sprite sheets for animations. GIFs are going to be a bad time. See @zakkain 's link and here: http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail

@Shaners

@lemoness thank you!

@pandoro How'd you guess! I am but haven't lately had the time to play many games. Really love the concept art from the games. Speaking of FF a mandragora pet would be neat mandragoras I haven't yet found a way to make it my own and build it from the ground up.

Feel free to go ahead with the CSS. I was thinking about it before and was wondering if for pets it would be worth it since users won't be looking at more than one pet at a time unless they were shopping for one. So for pets you'd only need one http request most of the time. I'm not too familiar with this type of thing though so i could be really off base. And to counter my own argument: one png and the css is a lot easier to manage and it looks like it's a lot easier to manage things like the position of the flying pig.

The more i look at the etheral lion the less i like it. May just start from scratch again. The sparkling is supposed to be energy just falling off and away from him. Having to explain means it isn't reading very well though. He actually is the same size as the lion mount which is one of the bigger ones.

@Pandoro

Okay, I must apologize for my newbie comment on the animations. I leaned all of this by doing, so at some point I had to go completely wrong :p What my fear regarding png sprites was and still kind of is, is that the way I currently handle the characters is in a big gimp file. Each item has one layer, which I toggle to edit. Eventually I can easily export 1 big CSS file. I have noticed though that these files very soon become hard to handle. So say we make something like 3 animations, that means an additional 3*(animation frame count) layers per item in order to keep exporting them easily. I would love to stick to gimp, as it is a full fledged editor you can get for free, but if there are any other tools that work better I'd definitely be willing to switch. Alternatively, we can also make the animations in separate files, however then we will get separate files for the animations. It would be cool if we could merge those CSS spritesheets automatically. Doing this by hand is really ... :-/ @zakkain you are one of the coding gurus here :p do you think you could make some kind of script to take a bunch of CSS files and pngs and merge them together into 1 big CSS and png? Alternatively we could keep 1 file for all the items, which contains all the animations. Then we would need CSS spritesheets for each item though. Aaaah wild thoughts again...! I just want to keep the art managable, if there is some nice way to do this, I would rather go with pngs than with gifs as well (semi transparent, easier to create).

@Shaners I guessed because out of nowhere there was a familiar cactus face staring at me and I really knew I was killed by one of those big purple things in the past ;) So now with the mandragora, I'm guessing you played FFXI :D ? I thought about chobobos and moogles as well. Who knows what is possible ^^; But for now we should really maybe focus a little on the armors. Pets have gotten sooo much love from your side!

I'm not sure if one CSS file will REALLY be better, but with a lot of similar colors, I think it will not make this huge size difference whether we have 10 or 100 pets in the spritesheet. I'm also not sure if this stuff is cached? If it is, then you just download it once and you are done for a while?

Regarding the lion I was afraid that my "size" argument would actually be wrong, so I am guessing that based on the color it simply looks smaller? I really do like the sparkles, but the face somehow feels a little flatter than the yellow/brown lion. That way the face kind of reminds me more of a pacman ghost than it does of a lions face. A little more contrast, or shadow beneath the nose might already do the trick? (It always feels so bad to tell you what I don't like x( but please don't get me wrong, I think constructive criticism is most important here and I hope we can all get honest feedback on our stuff in this thread!)

@Orangyfresh don't worry about it too much :) Right now we are still a bit away from a real class system, so a real complete set of armors is not the top priority.

For everyone, I went ahead and created a little google doc with a list of current todos regarding pixel art. I still think a complete trello board is a little overkill, so for now lets try this maybe? It isn't changeable by everyone, so if you want to add something, post it here or let me know, I can add the stuff, or add you as someone who can edit it. I just don't want to make it open to everyone, with you know... the internet and all :x

@zakkain

No worries, @Pandoro, we're all learning! But you're in luck—I do know of a few methods for automatically generating a sprite sheet from a bunch of different image files! Compass has a utility to do it from the command line (which isn't ideal since HabitRPG doesn't use the Sass CSS preprocessor), but there are a few web tools out there I know of that auto-stitch together sprites.

So, I think if assets are created and saved out as single files, properly named, then we'll be fine.

I'm not sure what the best way to organize the sprites is (all items on one sheet, one sheet per item, etc), we'll have to figure that part out.

@Pandoro
@zakkain

This generator has quite a few options, including one to preserve the original image dimensions :)

@Pandoro
@lefnire
Owner

@Shaners no, don't get rid of the ethereal lion! It's great! Even if it's not your final decision for the backer-onlies, we definitely need to keep it around

@Pandoro
@Shaners

Demon Skin Armor, possible back-only armor. Has a pulsing animation currently:
DemonSkin-Mock-Anim001
I'd alter the animation timing (i.e. pause on the first frame a lot longer) for production but it's just easier for you to see it with this current timing. Too dark of a thank you for backers?

@lefnire
Owner
@Pandoro
@busterroni

I'm just wondering, where can I find the .png files for all of the images (body, hair, weapons, etc.)? I've looked through all of the files here: https://github.com/lefnire/habitrpg/tree/master/public/img/BrowserQuest
The ont image I can find of the default player is here: https://github.com/lefnire/habitrpg/blob/master/public/img/BrowserQuest/spritesheet.png

I know I sound a bit nooby but :P

Thanks!,
busterroni

Edit: Found it!: https://github.com/lefnire/habitrpg/tree/master/public/img/BrowserQuest/habitrpg_mods

@busterroni

If nobody's done a ghost pet yet, I'd be happy to make one tomorrow. Or if anyone wants me to try something else, just write it on here :)

@Shaners

Never been called a wizard champion ninja robot before, thank you!

Going to be working on:

  • Backer only weapon / shield
  • Backer only pet (Dawn phoenix)
  • Backer only mount (Ethereal Lion)

@busterroni feel free to create whatever you'd like. I think there was a person requesting an atomic rooster, bee or a hare. A bee might be too small to work though. I also started roughing out a falcon, eagle, jelly / slime, monkey, and turtle and may return to them in the future but feel free to use those ideas. Basically just work on whatever you'd have fun doing!

@busterroni

@Shaners A turtle seems like something I'd like to do as long as you haven't already done too much work on one, I don't want to waste your work :P

@busterroni

My turtle:
turtle copy
I like it but I think it needs more work. It seems really small... I did 30 pixels*30 pixels, is that correct?

Edit: Just made a bird, I think it needs a lot of work. I'm thinking about making it 3D, and I think the color is more neon than yellow. Here it is by itself:
 bird-owl copy
Here it is on the player, I think I need to fit it better:
bird-on-player

I just don't understand; the turtle and bird are both 30 pixels but they don't look big like everyone elses...

Edit: I didn't know what to do, so I thought an eyepatch could be added to the player for a pirate theme, thoughts?
Eyepatch on player:
Eyepatch-with-Player
Eyepatch alone:
Eyepatch

Edit: Great, I figured it out :) I still think the bird needs a lot of work.
Banner

Edit: (Again :P) I've redone the bird from scratch, I think it looks a lot better now, I just need to add shading.
Banner
And a close up:
birdv2Zoomed
Edit: Fail I forgot the wings xD Adding them now...
Wings and small shading added:
birdv2Zoomed

@lemoness
Collaborator

I have made some wizard hats, because I thought the one provided seemed a little thick.

Here are the lower-level hats (just some random colors)
habitrpghat1blue
habitrpghat1darkblue
habitrpghat1starry

And I thought that the brims could get bigger as you leveled up?

habitrpghat2blue

The colors were made very quickly, so I could make many other shades and patterns if you guys like them :)

@busterroni

Those hats look really cool :)

@Pandoro

@busterroni I hate to break it to you, but the pixel art you made doesn't really fit the habitrpg style :x As you can see your "pixels" in the image, are by far smaller than the pixels in the character sprites. Currently and until further discussion, we are sticking to this style. You would thus have to redraw your stuff in a lower resolution. You can also look at my tutorial for general guidance, but I didn't write all that much about pets. The size of the pixels should never change though.

@lemoness I like the idea with the growing brims :) In general these look cool, I was pretty afraid that with higher "levels" of gear the mage stuff would just change color, but you have already shown that that does not need to be the case :)

@busterroni

@Pandoro I'm not sure how to fix what I'm currently doing, I've chosen a 30x30 pixel image and a 72 DPI resolution. What can I do to fix it so it's the correct size?

@Pandoro

@busterroni Hmmmm well typically a full character fits into a 30x30 pixel image, with additional space left. For a pet I think it shouldn't be bigger than 20x20, but a little smaller would probably not hurt. But that also depends on what you are trying to draw. A bird that sits on a shoulder will probably be too small, but you can make a bird in such an image, to sit next to the character. This will be probably be going a little towards a funny style, but that isn't really a problem I think. How to fix it, I don't really know though :x downscaling this kind of stuff is in general not an option. So probably you would have to start out from a smaller canvas and see what you can do.

@lefnire speaking about too big pets... I just checked grumpy cat is by far too big :-/ So it might be some fun thing, but it cannot be used as an actual pet. And reducing the size by a factor of 1.5-2 will not be possible in that case :( Sorry I didn't catch this earlier... Somehow I drew that for fun and never bothered to check the size :-/

@lefnire
Owner
@lemoness
Collaborator

@Pandoro Yeah, while I imagined that mage hats would also mostly get color upgraded, that didn't seem fair.... We can also add adornments like buckles, feathers, maybe even longer tails... also, guys, please feel free to mess with the hats and improve them and make new styles. My skills as a pixel artist are super limited.

Also, could somebody check them on a character to see if they look good on somebody's head? That would be great, since even after reading the document I couldn't figure out how to do that. (I use photoshop, not gimp, so I couldn't download the files.)

@busterroni Also, have you tried making your individual pixels 3x3, not 1x1? Not sure if that will help, but you can give it a try.Also, maybe try making the sprites have more of a profile? If you look at Shaners' pets, you'll see that mostly they are not entirely straight-on. Good luck!!

@busterroni

@lemoness I'm not sure what you mean. Should my brush be three pixels rather than one? That's what I'm doing currently. I use Photoshop CS3 by the way.

@lemoness
Collaborator

@busterroni Yes that's what I meant!

I've scribbled up some other hat designs, so I'll try to pixel a couple more tonight if I can... can anyone try checking the ones I currently have on a sprite?

@busterroni

@lemoness Thanks, I'll try that out. On a 30x30 pixel transparent layer, right? Also I'm not sure how to test sprites and stuff so I probably can't help there :P

@lemoness
Collaborator

WOW OKAY HERE COME A LOT OF HAT OPTIONS! Say what you like/don't like.

Basic green hat, regular and flipped:

habitrpghat2green
habitrpghat2greenFLIP

Lemoness tries to do a feather and tears her hair out for an hour, coming up with the following options for voting:

habitrpghat2featherA
habitrpghat2featherB
habitrpghat2featherC
habitrpghat2featherD
habitrpghat2featherE

@lemoness
Collaborator

SECOND PART!!

Advanced hat with crest:

habitrpghat2black crest
habitrpghat2red crest
habitrpghat2silver crest

Advanced hat with wings:

habitrpghat2silver wings
habitrpghat2red wings
habitrpghat2black wings

PHEW that's all for now. Tell me which ones you like, if any. (Worried that the silver hats may blend with the silver hair, so that needs to be double-checked. I tried to darken the borders but we'll see.)

@lemoness
Collaborator

LAST UPDATE:

Here is a quickly-edited sample of what you would look like if you bought the basic leather armor and a shield, and then spent ALL THE REST OF YOUR MONEY ON A RED-WINGED MAGE HAT (aka this was the first basic sprite I found to edit):

habitrpg girl sample HAT

Found out that some of my outlines were a little too dark, so I fixed it for the example and I'll fix it on the hats some other time that isn't right now.

@lefnire
Owner
@Orangyfresh

Sorry I haven't been that active lately. I hope these armor designs make up for it :)

A rogue armor set
Demon Hunter Armor

With an alternate color scheme
Demon Hunter Armor Navy

Ninja inspired armor set (possible backer only armor)
Ninja Armor

With an alternate color scheme
Ninja Armor purple

Ninja Armor steel

Horned armor set
Horned Armor Set

Possible mage/rogue armor set
Cultist Robes

Remake of my old grey mage armor. The beard is part of the hat so hopefully it works better than my previous design.
Grey Mage

These armor sets don't necessarily have to be restricted to classes as I am quite eager to see them in-game.

It would be great if you could tell me your thoughts and feel free to tell me of any changes that would make them look better :)

@lemoness, I really like your wizard hats, they give a lot of options for customisation. For the regular hats with tips leaning to the side, my personal preference is the ones leaning to the right, but that could just be because I am right handed. Perhaps your hats could be used instead of the grey hat for my mage as they look much better.

@lemoness
Collaborator

@Orangyfresh - THOSE ROGUE ARMOR SETS! Amazing. And those ninja armors are completely fantastic. If they're backer-only they'll be the subject of awe and awesome, and if not they will be the subject of a lot of desire! (Maybe consider making them token armor?)

My first response to the horned armor was "IT'S SO CUTE!" Definitely a good thing, I promise. Almost makes me wish I were a warrior ;p

I really like your mage robes, so I am going to try combining them with some of my hats. Let's see!

OKAY here they are! I had to modify the shoulders of your awesome x armor, but it was so cool that I was desperate to include it. Hopefully you won't mind.

habitrpgmage robes sample
habitrpgmage robes xred
habitrpgmage robes basicgrey
habitrpgmage robes basicgreen

Also, is everyone in agreement that tips to the right looks better? I'm pretty neutral!!

@lemoness
Collaborator

ALSO on a different note...
This has been bugging me for a while - I think that the pets should be moved down and to the side. My poor fox is completely bisected by my beautiful glowing blue sword. I want to be able to see its endearing face...

@Pandoro
@Orangyfresh

@lemoness - Holy crap, those look awesome! Team work FTW!

@Pandoro - Let me know what might not work and I'll fix them up and then make a pull request for them in Gimp files or whatever would be easiest.

@lemoness
Collaborator

@Orangyfresh - Yay!! I'm thrilled that you like them. Team Citrus Fruits for the win! ;p

@Pandoro - Ditto to Orangyfresh! Although since I don't have Gimp, it would be better to just send me a message, heh.

I will try to fix the color of the hat outlines today so that you can input them. Once you confirm that the basic hats work, let me know, and I will make some more.

Also, could people tell me which feather version they like best? I was undecided. I think I am going to go ahead and put most of the hat flips to the right. If this destroys anyone's world, please let me know ASAP.

ALSO - I'm looking at the layout, and I think these hats and the backer-only demon armor are going to require us to move down the sprite slightly in the status bar and/or rearrange it, like with the mounts. Is that a problem? I really like their current height and slope, (and the demon armor is awesome).

@Pandoro

@busterroni I think only using a 3x3 brush will not fix the problem, as this still does not work for the alignment. What you will need is a 20x20 pixel image and use a single pixel brush. But keep in mind a bird will be huge if you fill up the whole 20x20 pixels with that. For a bird you should probably aim by far smaller.

@lemoness
In general I find it hard to judge, as these are "bare" images of the hat. Seeing it work with a full character makes it look by far better and easier to judge :) I think overall the stuff looks pretty cool, although I am wondering a little if the feathers and wings (?) are a little bulky :x I know it is hard to make smaller stuff, but this would be a huge feather if you compare it to the head etc. If smaller is possible, I would really be interested to see that as well, but I think it can work out as this as well. I would go for feather on the right as well. I like the ones better where the feather has a darker border, which makes it clearer where the hat end and the feather starts :) (e.g. version 1 of the red hat and version 2/3 of the green hat.)

@Orangyfresh what worries me a little about the first two rogue sets is that the hat is pretty big and I don't know how this would look if you recombine it with the other armors. However if I recall correctly you did use gimp when you uploaded the other sets right? So maybe you can see if the hats also work with the other stuff.

@ruddfawcett I will reply here, since other people might chime in as well. I'm not sure how much time I will have in the near future, but I am curious about what you would need for an iPhone app from a pixel artist ^^;

@jjjjesse

Hi, I'm interested into contributing as much as I can to this project as a pixel artist.

I just have a few questions.
What is the process towards submitting art?
Is their any kind of "weight" pixel art has as far as the royalty process?
Is there any area where you lack that I can fill in?

Thanks, I'm pretty keen to get involved. :)

@horusofoz

@jjjjesse You could take a look at Pandoro's AWESOME tutorial.

@jjjjesse

@horusofoz I've had a look at that, nothing new, I'm more curious about the scale of the images, though I seem to get the impression it's 300% from observation and the submission process, (do I just drop files here?)

@horusofoz
@jjjjesse

@horusofoz sorry for harassing you, I'm just trying to get a proper understanding of everything... How does that work as far as contributions?

@horusofoz
@jjjjesse

Here's my first contribution, a gladiator with a trident, complete with a net. (I'd assume it would take the 'shield' slot)

gladiator_armor
gladiator_full
gladiator_helm
gladiator_net
gladiator_trident

@horusofoz
@jjjjesse

Next we have the robed samurai.

robed-samurai_armor
robed-samurai_full
robed-samurai_hat
robed-samurai_sword

@tmas

Wow, that samurai is really nice. I wonder how shields would fit with it though...

@jjjjesse

I may have been a little ambitious with this one, armored samurai:

armored-samurai_helm
armored-samurai_weapon
armored-samurai_full
armored-samurai_armor

@tmas Good point! I'll have to consider making something that fits with the set.

@lemoness
Collaborator

@jjjjesse - WOW, EXCELLENT! Original and fantastically done!

@Pandoro - noted - I'm trying out some new stuff now, and I will try to put the hats on figures in the future :)

@Orangyfresh

@jjjjesse - Those are great man! I love your style. Because they are look so cool and individual from the other stuff they could easily be used as backer-only armor.

@Pandoro - Yes I have Gimp and that's what I use to make my files compatible. I always check that my heads are compatible with the skins and hairs and that they do not exceed the dimensions we use. As the head layers are above the armor layers in the files I've been referring to guide me, I gathered that heads are allowed to overlap the armor. If this is incorrect than let me know and I'll adjust the heads appropriately. I've checked the rogue head/hat against the default armor sets from BQ and it overlaps a little at the bottom, but apart from that they work. Obviously though, the hat doesn't suit every armor set in regards to looks.

@lefnire
Owner

@jjjjesse this is awesome stuff! Keep it coming, these could provide great variations when we introduce class specializations. I especially love the armored samurai! Stoked to put those sets in the game, thanks.

Re: backer-only armor, we're gonna use @Shaners contribution because it's class-ambiguous.

@Shaners

Great stuff everyone, things are looking awesome!

Quick one, dark souls blade:
anim-darksoul-blade
Possible backer-only weapon. Animation is looping fast just for viewing, will be tweaked before final.

@lefnire
Owner
@Shaners

@lefnire Vancouver Canada, including flight would be an expensive drink!

One more for today, crystal armor set:
CrystalArmor-Mock-Anim
Possible backer-only armor (maybe if they don't like dark stuff?) or just another tier of armor. Planning to tweak the shine animation on the body a bit for the final.

What's next:

  • Backer pet (phoenix)
  • Backer mount (revised ethereal lion)
  • Misc tweaks
  • Backer shield
  • Crystal sword / shield??
  • Boss art (been playing with a few ideas in my head)
@horusofoz

Re-opening as with all the activity and great artwork, it should be open for more people to see.

@horusofoz horusofoz reopened this
@jjjjesse

I'm not too sure how receptive you guys will be to this one, I've created a very quirky, floating NPC. I suppose you could call him a misdirected mystic. I'm not sure if it has a place but I had fun with it anyway.

ForrestNPC

@jjjjesse

Here's another fun one, I call it "The Bride".

the-bride_full
the-bride_jumpsuit
the-bride_sword

@horusofoz

Could some of you awesome peeps take a peek at our "New Adventurer (Avatar), Inventory, Achievement And Profile Screen Concepts"?

We want to introduce these ideas but know they need an artist's touch. If even a fifth of the awesomeishness witnessed in this thread can be applied to these concept pieces, these should be ready in no time.

@jjjjesse
@busterroni

Since @Shaners made an ice armor set I decided to make a fire armor set. Mine doesn't even compare to how good his looks but I thought I'd try it anyway. I also hope I did it correctly this time :/
 gickr com _5ccd3bd6-ffdf-0444-cdbb-1b14e19605df

@wc8 wc8 referenced this issue
Closed

Ruby Gem? #520

@lefnire
Owner

@jjjjesse you are exceptionally good at this!

All, here's are my current thoughts, tell me what you think:

  1. We have Backer custom-item requests coming in. We can retrofit some requests (eg, "Dragon Staff of Power" to @jjjjesse's armored samurai spear). For the new items, I think @Shaners @jjjjesse @lemoness @Orangyfresh would be excellent fits. I'll post them here as they come in and see what everyone comes up with.
  2. We have Backer profile pics coming in. Based on @jjjjesse's floating NPC and The Bride, I think you'd be very good at designing NPCs for the various roles. Eg, designing a Backer's face in 8-bit, and superimposing that on a NPC outfit (beast-master outfit, town crier outfit, etc). Would you be up for the challenge? If so, email me and I'll start sending them your way.
  3. We'll use @Shaners backer gear (the dark set) and backer mount. I think the only thing left now is pet?
  4. We could possibly use @jjjjesse's specialized class sets for token-purchased armor / weapon enchantments on class-specific final gear.
  5. @Pandoro has been super busy, he'll probably jump in later - but he's being doing mostly design spec and standardization, etc.
  6. Holy shit you guys are amazing.
@Shaners

@busterroni good start. 2d fire is hard to animate, add in abstracting it down to this pixel resolution level and it gets even harder. One thing to keep in mind is that fire or flames are not solid objects but are a gaseous vapour swirling around, usually fairly fast, and disappearing and reappearing constantly.
Here is what I think as a particularly good example of animated flame (even seems a bit stylized)
https://f.cloud.github.com/assets/2374703/197859/629925ba-8047-11e2-8a00-23320c5d4a0c.gif

Check here for a bit of an insight to the artist's thinking: http://img225.imageshack.us/img225/2059/firedesign.jpg
You can see more of his stuff here: http://luckeffects.blogspot.ca/

@lefnire Revised to do:

  • Backer-only pet (phoenix has been particularly hard but I've made progress)
  • Custom requests
  • Revisions / tweaks
  • Demon / dark shield
@Shaners

Still far from done but here is a preview of the backer-only phoenix pet.
anim-phoenix
It came out pretty big but funny enough this was the smallest iteration that actually worked.

@busterroni

@Shaners I've worked on making a better flaming effect, how would I go about compiling the multiple .psd files (or I can change to a different file type) to make an animation? For the first one I used something online but with the newer one it's been acting very strangely, constantly zooming in and out. It didn't take too long, I'll try to redo it tomorrow. Any ideas on what might've happened to prevent this from happening in the future? Nice phoenix by the way! :D

@jjjjesse

@lefnire, you mentioned someone requesting a 'Dragon Staff of Power', but I thought I'd up one better.
Here's the 'Dragon Hunter':

dragon-hunter_full

dragon-hunter_skull
dragon-hunter_amor
dragon-hunter_staff

As far as the background, I thought it could go in a miscellaneous item slot, the item itself being a 'Dragon Heart':

dragon-heart
flame-background

Also @Shaners, that phoenix is brilliant... Just sucks how big it is! Maybe it can be used for something else, not a pet?

@jjjjesse

I also started working on this, I'm not sure what I think of it so far... Thoughts/critique? Should I continue or ditch it?

Dragon

@busterroni

@jjjjesse Those both look sick! I love the flame in the first one, I think I need to do something like that for my fire armor. Would you mind if I used your fire as an inspiration :)? The dragon also looks amazing! Definitely continue it. It could be a boss or something :]

Here's what I've done so far, I still don't really like it though :/
http___makeagif com_media_2-27-2013__gl4uv
It says makeagif.com because I combined all my photos there. I still need to make them .png files.

I used @jjjjesse 's fire idea and I think it turned out a lot better. Opinions?
http___makeagif com_media_2-27-2013_eZlsrG

@wc8

There's a Phoenix Quest idea out there that has some popularity. I wonder if it [Shaners' phoenix] could be used in the dialog page announcing the Phoenix Quest, similar to Death in the Game Over dialog. Backers could still be the only ones allowed to keep that phoenix as a pet.

@lefnire
Owner

@jjjjesse where did you come from, lol! For the token-store we have planned gear enchantments, pet food (which evolves the pet), etc - so that "misc slot" item is perfect, thanks for providing that along with.

As long as your sprites fit @Pandoro's spec, we should start getting them committed to the repository sometime in the near future

@lemoness
Collaborator

@jjjjesse WOW awesome stuff as always! Personally, I really like the dragon. Regarding the Kill Bill Bride, though - we'd have to be careful about copyrights if we were going to use that :/ Just a thought. I'm incredibly excited to see your backer NPCs!

@Shaners - I also love the phoenix. I don't see the problem with a backer pet being enormous, since they're supposed to be impressive - and wow, is that ever impressive!

Some more hat edits will be up soon. And @lefnire, I would be happy to try making the weapons! Just let me know.

@Shaners

Yea unfortunately this doesn't work as a pet so I'll have to scrap it. Maybe can use it for something else in the future.
anim-phoenix-mount (animation half done)

Does anyone have any neat ideas for a backer-only pet? Or want to try their hand at it? Maybe I'll try out a puppy Cerberus.

@busterroni I'm guessing you're working in PS if you are using .psd files. What you can do is make each frame a layer in one psd file then open the animation window and create the amount of frames that match the number of layers you have. From there you'd show and hide various layers corresponding to which frame you wanted them to show up in and then it's a simple save for web > gif export. And yes your flame is looking a lot better! I would consider altering your colours though since you seem to be using some pretty saturated colours at the moment. If you haven't already I'd start looking into the aspect of colour theory and colour harmony.

@jjjjesse great stuff I really like it! if you are having fun with the dragon I'd say definitely go for it. Boss fights are something that look like will be added eventually and this would be perfect for that. As far as critiques, most of this may just be personal opinion, I think you could add some hue variations to the purplely bits ( pale whiteish horns, pale yellow (or turquoise) belly ), extend the belly scales all the way up to the head, extend the wing membranes and make them more concave, play with adding scale like texture to the body, add some perspective ( we should be in 3/4s top down but this is debatable) by making the closer foot lower, adding some dynamic shape to the tail instead of laying flat, feature the claws more somehow by pushing them out (this usually done with contrast), and play with the neck and haunches a bit to make them look more natural. This is your baby though, don't do anything that doesn't feel right!

@lemoness
Collaborator

@Shaners Any way you can make that a mount? Hm.

OKAY as per feedback, I've made a slightly smaller hat. This is for the level 1 hat. Here is a comparison:

magecomparison

Just tell me which version you guys like better, and I will roll out a TON OF HATS AND ROBES based on that. :D

@lemoness
Collaborator

Trouble editing, so double-post - here is a three-hat comparison! Again, tell me which size you like best, and I will base all future hats around that size.
comparison3

@lefnire
Owner
@lefnire
Owner

Got a change for y'all - all custom sprites now stored in /public/img/sprites. I deleted /public/img/BrowserQuest (including ./habitrpg_mods) since we now have /public/vendor/BrowserQuest as a git submodule. So this thread will now take place in /public/img/sprites. See e7ddfb8

Also, in the future all sprites (as well as algorithms) will be in an entirely different repository called habitrpg-shared, which will be submoduled between both the website and mobile app. But don't worry about that for now, just heads up.

@Pandoro

Sadly I don't have time to read all of this, but a lot of this stuff looks really AWESOME! I will hopefully at some point get to merge some of this stuff into sprites, but if anyone else wants to do this, in order to speed up the integration process, feel free ;)

@Shaners <3 baby Cerberus :D

I pretty much realized I will not have a lot of time in the next time, so I want to tell you guys some of the ideas I had so that if anyone has no idea what to do, they can pick up some of the ideas ;)

  • Creating some cool icon for the tokens. I was thinking some kind of red or green fancy looking crystal. For this resolution will not be the most critical part, so probably you can go for something like 30x30 pixels, as the coins have a similar pixel count.
  • A unicorn mount, because.... don't we all need a unicorn mount :p
  • A "chocobo" pet, let's not infringe on this, but something similar would be cool. This would also fit the whole color scheme Shaners has been setting up. Also.. a "moogle" like something?
  • A little ghost pet, something like the packman ghosts, floating next to you?
  • I was thinking of a kind of BIG blade, similar to that what @Shaners did, but also without the "dark" theme with a simple blade color. (Yes yes... I admit I was thinking of FF7...)
  • Maybe bow and arrows, but I think this might be hard to realize.
  • Thor's hammer, Zeus' thunder bolt and Poseidons Pitchfork.
  • I really like the idea of @jjjjesse "dragon heart aura". If @lefnire liks this as well, and of course the community, I think a miscellaneous slot would be really cool to have, also for monetization. This could also take beards into account.
  • We should not forget about the backers only items created for them personally. I'm not sure how the data acquisition is coming along, but if I recall right, there are about 8 items and we need something like 5 NPCs.

But yea... great work guys! You are doing awesome! (:-/ This totally sounds like I am judging your work, which I shouldn't considering you are better at this anyways :p )

@lemoness
Collaborator

I really really like the miscellaneous slot, which allows for a lot of creativity! Since I am still waiting on hat confirmation and weapon requests, here is my personal contribution for the token store ;)

sample kitty costume purple
kittyears purple5
kittytail purple1

Tail is for the miscellaneous slot, of course!

@Shaners

@Pandoro Ah yea Mjolnir! I forgot I wanted to work on that! If you doubt my enthusiasm check out the hammer I made for Halloween last year!
https://f.cloud.github.com/assets/2374703/206391/fc028796-81cd-11e2-8a8b-fab6ffbbd4e0.jpg

@Pandoro
@lemoness
Collaborator

@Pandoro Sorry, I'm not quite sure what you mean - what lady costume? My red wizard robes? The kitty costume is definitely intended to be for the token store, if that's that what you mean. The hats are all intended to be normally for the mage class, though.

Here's the first image again, hopefully it will work this time!
sample kitty costume purple

@Pandoro

@lemoness I'm sorry... I messed up. I mixed it up with jjjjesse's thing, which wasn't called lady, but it was called "The bride". I should shut up unless I read more carefully x)

Still not working btw :(

The wizard stuff should of course be in the normal store as you also say, at least most of them, maybe some of them are fancy enough to be token bought also, but let's see how many hats we can get together and how many we really need in the end.

@Shaners

Here is a list of suggestions for pixel art assets if anyone else is looking for ideas:

Pets

  • Chocobo-like
  • Moogle-like
  • Red Panda
  • Turtle
  • Ghost
  • Monkey
  • Ethereal Wolf Cub
  • Spider
  • Falcon
  • Eagle
  • Honey Badger
  • Jelly / Slime
  • Bee (would be too big?)
  • Rabbit / Bunny
  • Atomic Rooster (green rooster??)
  • Chicken (Zelda-like?)
  • Armoured Koala
  • Peacock
  • Kitty Cat

Mounts

  • Unicorn
  • Wolf
  • Armoured Kangaroo
  • Dire Peacock
  • Horse
  • Peagsus

Icons

  • Token (gem like)
  • Fitness or Strength (for tagging tasks??)
  • Intelligence or Mind
  • Soul or Spirit

Weapons

  • Buster Sword-like
  • Bow and Arrow (multi-tiered, wood, bamboo, ebony, rose wood, golden etc.)
  • Mjolnir (Thor's Hammer)
  • Poseidon's Trident
  • Zeus' Thunderbolt
  • Staffs (multi-tiered, for mage class only?)
  • Lances (Ice,steel, fire, coral etc.
  • Fire / Ice / Lightning Axes (Maybe there are the result of purchased enchantment?)
  • Fire / Ice / Lightning Swords
  • Magic Rod
  • Spears
  • Great Axes (enough room?)
  • Great Swords
  • Claws

Armors

  • Holy Armor (for a Paladin class?)
  • Silver Armor
  • Mithril Armor
  • Monk Robes
  • Bronze Armor
  • Bandana
  • Warrior's Shield
  • Magic Shield
  • Aegis
  • Ancient Armor
  • Viking Hood
  • Cursed Gear
  • Circlets
  • Crowns
  • Tiaras

Bosses

  • Dragon (in progress)
  • Lizard King
  • Demon Lord
  • Lava Giant

Character Details

  • New Hairstyles
@Shaners

Possible backer-only pet, Baby Cerberus:
Baby-Cerberus
Planning to animate it and play with adding a spiked collar / chains, tweak tail more (make it a spike?) I might make the chest a bit bigger too.

@wildcate

I second the unicorn as mount, and I'd love to see a peacock (either as pet or, in a giant dire peacock version, as mount). And a normal cat as a pet. And sheep. Sheep are nice! Everyone should have the chance to have a sheep! And is there going to be a normal horse as well? And if a unicorn and a horse are made anyway, then a pegasus could be possible as well with not too much additional work... I'll stop now before I double the list sizes.

@horusofoz

Special Request: Armoured Kangaroo or Koala ;)

@Pandoro

@Shaners very nice! Was it intended that the two outer heads look a little more "insecure"? Maybe it would be an option to have the one in the middle look bad ass, the one on the left look rather insecure and the one on the right have another expression? I am not really sure how easy that would be. But it looks very cool already :D It is of course a little bigger than other pets, but I guess for a backers only pet this is very much okay! :)

Another request from a different thread, would be different hairstyles.

@Shaners

Updated previous post to include more suggestions.

@wildcate there is a sheep already! Scroll up to check it out. Not sure when it will be available though.

@Pandoro yep different expressions were the intention. I figured it would look pretty boring if they all had an angry face so I didn't even try that way. The expressions are also going to be related to the animations I am will apply, kind of related it each head's 'personality'. Hoping this will be more evident after the animation is done but I may play with the facial colours to help this read easier.

@Pandoro
@Pandoro

Hmmm well, it MIGHT work, but it is pretty big, opinions?
sheep

@wildcate

How on earth did I miss the sheep? It's lovely! And there are sheep that are pretty big in real life, it might just be one of those!

By the way, would whip and cat-o'-nine-tails work as weapons as well? And halberds could be used as a lance/staff variation...

@Pandoro

@wildcate I guess these weapons would probably be doable yes :)

Does anyone recognize this guy?
guy

@cleave29

@Pandoro The Goon?

@Shaners

@Pandoro no keep making suggestions! Even if is something I've already thought of it lets me know that it's probably a good idea that I should keep pursuing.

@lemoness
Collaborator

@Pandoro Ahhhh, okay. In agreement about the hats. I'm pretty eager to get started on the different varieties of those, but I have to wait until the size is confirmed by you guys. If you could choose your favorite of the three sizes and ensure that it works with the specs, that would be awesome! The sooner that happens, the sooner we'll have hats :)

Here is the picture of hat sizes again:
comparison3

Tyler liked the first one, if it fits specs.

@Pandoro

@cleave29 No it is not the goon :p

Man :-/ I figured I didn't nail it, but I really expected people to recognize him :( I wonder if it is so bad :O

@Shaners will do :)

@lemoness Sorry about this long wait. I also like the first the best. Regarding the size, as you can see it is a little bigger than what we can currently handle, but when you look at #314 most likely the whole thing will get a major overhaul soon... sooo I can just make the avatar images 100x100, giving more space for the hats and more space for the weapons.
test

@Shaners

Ok this one was mostly just for fun and won't make it in:
Adventure-Set
Some may get the reference. Lets call it the 'adventure' set.

Edit another one just for fun. 'Legend' set:
Legend-set

@zakkain
@horusofoz

Zelda looking character definitely rocks. Should be considered for an NPC.

@cleave29

@Pandoro It's not the Goon, it's TYLER!!!!!!!!!!!!!

@zakkain
@Pandoro

Nice stuff @Shaners , I must admit I don't know the first two characters, but I do recognize the right one from some internet pictures, very nice resemblance!

I'm happy some people recognize Tyler ^^; We discussed a little and probably the smoke should be animated, people seemed to mistake it with a sword :o

@lefnire
Owner

waahooo!

@cleave29

The fact that this is the first RL character threw me off.

@Pandoro
@lemoness
Collaborator

@Pandoro Awesome! Then I'll just go with the first one. Hats coming soon (although now it is the work week, so it could take a bit). I'll try to make some robe edits to match them, too.

@Pandoro
@zakkain

@Shaners my girlfriend loves little Finn & Jake – they're amazing

I agree with @Pandoro, I think colour iterations could come later (or even possibly be generated!)

@Pandoro

@Shaners I am just working on getting a unified pet sprite out there, how would you feel about moving the pet to the right and mirroring it once? Probably the shield will not be soooo big and if we disregard the mount for now, it would be a quick fix to stop the weapons from covering most of the pets?

This is of course also a question to everyone else ;)

@zakkain
@Pandoro

@zakkain First of all, larger will be necessary soon as some of the stuff does not fit any longer ;)

Moving it more to the left is a problem though. If you move it far away so the gold sword does not cover the eyes, it seems like a far away pet for the guy with the little dagger. As the shield does not vary sooo much, having the pet at the right is not such a changing thing.

Also I moved it down already, simply to show more of the best :)

@lefnire
Owner

This may have been mentioned before, sorry if so (I mentioned this on call with Alex last night):

What about switching sword & shield hands? Pets & mounts face left presently, we can css-reverse the weapon & move it to the left hand. Pull shield in close to body if we find it obstructive (which doesn't seem to be a problem with any of the current shields).

@Pandoro
@zakkain

@Pandoro good point
@lefnire Even though I'm left-handed, years of RPGing have conditioned me to expect the sword to be on stage left and the shield on stage right. Flipping it would be weird, at least to me ;)

@wildcate

How would it look to place the pet to the left and in front of the character? After all, actual pets also have the tendency to sit before one's feet, just in the way ; ) and that would make the pet completely visible as well as take it out of the weapon's way.

I agree with @zakkain regarding the flipping, btw: it would look weird for most people. (Though having a left-handed avatar as an option would also be really cool...)

@Shaners

Created a little mock up of how things could be revised:
RevisionMock100
And here is a zoomed in version with more of an explanation:
RevisionMock200
The stuff under the player's level are just some buff icons (say if they found and consumed a special item) not really the point of the mock but I decided to try them out. Could also be icons for player status ailments, a button to access one's inventory, an icon to show that one is on a quest, or nothing at all.

Planning to make 2 more mock ups sans mount and sans pet.

@wildcate

I played with the mockup - is that a mockup mockup now? ;)

Pet as above, but flipped (it looked a bit like it walking away, to me, in @Shaners version)

pet_flipped

and, just to try out how it looks, the pet below on the left

pet_left_below

@Pandoro

@Shaners your second mockup reminds me of the terminator analytic kind of view x)

The stuff looks very cool, although I still think we should do something regarding the sword/shield switch and the pet. I feel as if the weapon would be more important than the shield. Especially if at some point we might get two handed weapons?
The two icons look really great, but I wonder if the high-res style conlicts the low-res style of the pet/player directly next to it? Have you tried a lower-res version of these as well? Otherwise we could maybe move them a little away, so that the contrast isn't so obvious ?

@wildcate I do agree with what you say regarding the walking away, but in your version, it looks a little too "we are all looking to the left"-ish. Maybe we could try the last mockup, with the pet mirrored and placed a little higher. Meaning the pet would be facing toward the mount+player?

@wildcate

@Pandoro Like so? I like that - now it looks as if they are all focusing on the same thing - probably on some very red item on the to-do list!

whats-that-there

@Pandoro

Yes I like this, although I think I would place the pet a little higher, to make it look as if it is not the leader of the group. But in general I think this works out a little better than all looking to the left/right. Just my taste though ;)

@wildcate

The pet a bit higher...

pet-left-high

@Pandoro
@zakkain
@Shaners

Yea I think I like that one or this one:
c72c539c-84a9-11e2-83dd-3a096d433d75 1
Maybe a setting to choose which side you want your pet on?

@Pandoro not completely sure what you mean by "do something regarding the sword/shield switch and the pet." Do you mean we should test out a mock up of the sword and shield hands reversed?

I think I agree with you on the res of those icons. I just grabbed them from http://www.pixeljoint.com/pixelart/44976.htm and put them in to test out how they might look. I believe it is planned to use the egg and meat assets from that set but those will be probably be displayed in a pop up window and thus not contrast as much against the player.

@zakkain algebraic!

If everyone likes this method it would mean the new system would:

  • Have 3 columns A, B, C
  • Column A would be the level box constrained to 50 pixels wide and variable height
  • Status indicators / inventory Icons 33 x 33 max ( if implemented ) @ 300% zoom
  • Column B would be player and mount box constrained to 100 pixels wide and variable height
  • Column B dictates how tall other columns are, if mounted height = 125 otherwise height 100
  • Player sprites are now 99h x 99w (has to be divisible by 3) room here for discussion maybe we want 105h x 90w?
  • Column C would be the pet box constrained to 60 wide and variable height
  • Column C only exists if player current has a pet and has it displayed
  • Pets restricted to 60 x 66 ( bottom 9 pixels usually empty, so actually 60 x 57??)

Still to mock pet-less and mount-less version using this same system.

@Pandoro
@lemoness
Collaborator

I really lke @wildcate's last mockup, with the slightly higher pet to the left.
Is it just me, or is the outline around the pets darker than the outline around the human?

I've sketched up eight potential mage armor levels; do you think that will work for now, or is that too many/too few?

@Pandoro
@Shaners

@Pandoro I think I agree on this point as well but when I offered to make an egg it seemed like Tyler was set on using those higher res assets. Maybe you can charm him??? Really a mock of that system would give us a better idea but I have no clue as to what it'll look like so can't really make one. Guessing it will be in a pop up window like the death screen??

105h x 99w gives us an extra 5 pixels to work with height-wise and 3 width-wise (@300% zoom) do we know if that will accommodate things? Will that work with the wizard hats? Do we have any larger assets at the moment?

@Pandoro
@lefnire
Owner

Not set on high-res or pixeljoint, sorry for the confusion - i just use those as placeholders if / when we lack any particular icons. I like y'alls stuff better

@Shaners

Guess I was mistaken. Here is a wolf egg!
Wolf-Egg
Here it is in the stages of opening / cracking:
Wolf-Egg-Stages
Here is an animation of it cracking (way too much fun than it should have been!)
Wolf-Hatching

These are over the 30x30 limit though.

@lemoness
Collaborator

Oh my GOD those eggs! And the animation with the wolf....Hope you can fix the size limit conflict.

@Pandoro
@lefnire
Owner

You know, someone mentioned to me in an email she cried when she got her pet. Said "literally". That egg, man, you're going to destroy people

@Pandoro

@Shaners This is a 15x17 image! You can go bigger if you want to :p

But uuhm yea.. I am in awe! Great job!

@zakkain
@zakkain
@Shaners

Glad you guys like it!

@Pandoro my mistake I was thinking 30x30 at 3x zoom, it is under that at 1x.

@zakkain I think I was a little quick to discount the animated gif option so quickly. Apparently if a pixel doesn't change value between frames in an animated gif it doesn't get updated so the value doesn't change. If we went css and png sprite sheet we wouldn't see that benefit.That being said I still think we should go for css and png sheets because for one; the performance and storage difference is going to be negligible considering the assets we are using (no proof that this is true though.) And two you get a lot more options with pngs and css, for example you can alter the time between frames on the fly which doesn't require an artist to do. You can also add interactivity easier I believe (like having the user click on something to start the animation.) I was working on a little demo which I'll post tonight.

edit: Actually I have a pretty full schedule tonight but I'll try my best!

@zakkain
@lemoness
Collaborator

I just keep looking at that egg animation and it gets more perfect every single time. So much <3

@wildcate

@Shaners Wow. That is awesome! (And I'm so looking forward to seeing a cactus crack open its little cactus egg... that is probably going to crack up people as well. At least me... but then I'm easy to amuse.)

@Shaners

@lemoness very nice to hear, thank you! more to come!

Here are some more mock ups using the same system:

Same system without a mount. Green and blue boxes are just there to visualize the columns.
RevisionMock-Mountless
Same as above but extra stuff removed.
RevisionMock-Mountless002

Same system but without a pet or a mount.
RevisionMock-Mountless-Petless
Extra removed.
RevisionMock-Mountless-Petless002

All three with a horizontal flip.
RevisionMock-Mountless-Petless-Reverse
RevisionMock-Mountless-Reverse
RevisionMock100-Reverse

@Pandoro

waaah x) swapping the shield and sword gave me a OMG NO! effect :p

How about the last one, but with the sword and shield in the original places?

@horusofoz

Just another awe struck onlooker saying damn you guys come up with some awesome stuff.

@lemoness
Collaborator

Okay, now I am CONVINCED that the outline around the pets are darker than the outline around the humans. When they're next to each other, it's a really visible difference. Thoughts about this? I feel like it makes the human seem a little faded into the background.

I'd also like to see the original orientation of the human, with the pet and mount still swapped! Other than that I like them :)

@Pandoro

@lemoness, hmmm you are right. I think we should change the characters. The outlines have been a little to light in several cases already :-/

@lefnire
Owner

Ooo, got recommended an Octocat pet (copyright issues?)

@Shaners

@lemoness @pandor some of the pet and mount heads use 0, 0, 0 outlines while their bodies use a non-black. This is an attempt at depth since items closer to a viewer have more contrast and detail and items further away have a more muted colour (atmospheric perspective.) Since an animal or mount is more horizontal than vertical the animal's heads would be closer to the viewer while the back ends further away. A human is more vertical than horizontal (most of the time) so all of their parts are essentially at the same depth. All that being said you'd never actually see atmospheric perspective in this situation because the elements are too close together but that doesn't mean you can't use it as a technique.

If you think it isn't working very well it might be a good idea to go for a more subtle effect or have all outlines the same general brightness.

@lefnire I think one existed in the BQ assets. Maybe it was too big as a pet?

@lemoness
Collaborator

@Shaners I think that works fine for the pets, but if that is the case, we should probably darken the humans to go with it, because otherwise they look washed out in comparison. It's kind of a pity, though, since I liked the softer outline. This is the sort of thing that should probably get a vote, and then get standardized.

@Pandoro

@lemoness Personally I don't think we really need to vote on it, at least not a public vote. It is something minor, but I have also noticed it before, wondering why does this player look so "pale"?

I think the depth Idea @Shaners had is not bad at all! But I think I would make it a little more subtle. Going not for black, but something a Little lighter. Then just experiment a little what makes the characters look better and voila. It will not change the overall graphics, but it will change the overall feeling to something a little better :)

@lefnire I think the octocat is a little... big :( What is it with these darn cats :-/ Always too big! But maybe we can give it a try and make it a little smaller. Then again the copyright thing arises though. I think you can get answers from the github guys easier though, than from the grumpycat guys :p

@lemoness
Collaborator

@Pandoro Yeah, I meant 'vote' in an unofficial way, like what we're doing with the layouts! I completely agree with your idea of making the depth a little more subtle and then playing around with the character outlines to match :)

Here are the first two levels of wizard armor! This line is based around the color blue; once I've completed that, I'll make a second option with red and a third option with green.

Level One:

compmage1blue
magehat1 blue
magerobe1 blue

Level Two:
compmage2blue
magehat2 blue
magerobe2 blue

And just for fun, a guy in mixed armor:

compmage1 5blue

Send me feedback :)

@Pandoro

ARG xD I should be writing my thesis right now!

@lemoness
yes the first one seems to work out with the current system. :D Please keep in mind though, that the outline of the skin is part of the body armor, so both armors are lacking a bit of the outline. But this is easy to fix :) I like the look of this, but I think that both are blue is a little suboptimal? Maybe make the first like grayish? Like a newbie simple wizard cannot pay for cool stuff -> so just grey. Alternatively we can also make different color versions of one armor. But let's see. I am not against the color, just for general variety different colors would be cool! The second set looks pretty cool! Something different indeed! And then there is also the one that @Orangyfresh made, so that is 3 already :D

I would like the beard, but We will have to ponder about this a little. Could be part of a general hairstyle, but we will have to make that first then :) And if guys get two, then girls should get two hairstyles as well :p (Yes... I am gonna stick to calling them genders -.-; ). And if both get two, then we will have to cross-check against the other armors! Waaaaaah so much stuff x)

Great work though :D

@wc8
wc8 commented

2¢: The in-game character is a game character, not to be taken too seriously. I think the mix-and-match approach lets users add some fun imagination into it. Also, the gender options were introduced after user requests. Some users would like to choose for their in-game character to be a boy or a girl. Let's not be too quick to totally scrub that.

@Pandoro great ideas for more mixing and matching; have fun ;-) cross-checking.

@Pandoro
@lemoness
Collaborator

@Pandoro - Ahh, the outline of the arms are part of the armor? Cool, I'll add that in for my next edit!

Does that mean that I can fiddle with the arm outlines for sleeve purposes, or should I let them be?

I am totally down with rainbowing things up. More colorful armor options coming up soon!

The beard is actually not mine, it's leftover from @Orangyfresh's original sprite! I have no emotional investment to it at all. I'll only have the girl in the rest. Don't fret over facial hair just yet :)

Speaking of that, I actually have a ton of hairstyles sketched out for once I am done with all of the mage armors (which I have honed down to five levels), so stay tuned for that! I'm really excited to start playing around with those :D

Glad you like the armor! Good luck on the thesis, yikes. Just think of all the levels your character will gain!!

@Pandoro
@wc8
wc8 commented
@Pandoro
@Shaners

Is there a .xcf with all the current player sprites? Full.xcf? Or is that out of date?

@Pandoro

ARg... sorry I forgot to upload that...

https://dl.dropbox.com/u/14462162/player.xcf

@Shaners

@Pandoro awesome thanks!

@Shaners

I really wanted to make this bigger and add more elements to it but it already is a bit big for a shield. Every time I made the skull smaller I didn't like how it's shape changed.

Possible backer-only shield:
Skull-Shield-Animation-Mock
Animation is cycling faster just for demonstration purposes. In prod would hold the first frame a lot longer.

@zakkain
@lefnire
Owner

I think this was mentioned before (excuse my crap memory), but just in case: Pixelists & @zakkain , what do we think of creating on hair sprite, one skin sprite - and applying CSS hues to them for reduced sprite-size overhead? Not a big impact presently, but for anything else that we come up with that has multiple color variations (maybe wizard hats, gems, etc) it can add up?

@zakkain
@lefnire
Owner
@Shaners

Has anyone looked into doing the zoom in browser instead of having our assets at 3x? I believe most game engines work that way to save space but I suspect that the png compression is smart enough with its near pixel logic that this wouldn't be much of a performance boost.

@lemoness
Collaborator

@Pandoro That file is massively helpful, thanks!

@Shaners I'm loving the skull shield! All of these animated objects are very cool.

Here are the edited mages!

Level one is now gray with a blue belt, the sash on the level two outfit is now silver, arm outlines were added, and the robes are now available in the two types, which I am calling "stocky" and "slim". The rest to come soon, in a variety of exciting new colors!

Level one:

compmage1gray
magehat1 gray
magerobe1 gray

@lemoness
Collaborator

Level two:

compmage2blue
magehat2 blue
magerobe2 blue

@zakkain
@zakkain

We should do a sprint one weekend when we're ready to implement this, get us working together in a hangout/skype/IRC in real time—that way I can get some good markup and css going for the avatar box at the same time you guys are rolling out the new sprites and stuff.

@Shaners

@zakkain interesting concept SVG pixel art?!

@zakkain

@Shaners yeah! Maybe a lot of work to make initially since I assume these are all made as raster images... but pixel art like this can probably be vectorized easily and then just saved out in SVG format — really lightweight and infinitely scalable.

@zakkain

Here's a 2-second shitty live-trace of that wizard hat. Not bad, though unoptimized the filesize is much larger (junk xml basically). Scales really well, stays sharp.

http://zkkn.co/habit/wizhat.svg

@Pandoro
@zakkain
@Pandoro
@Pandoro
@Pandoro
@zakkain
@zakkain
@zakkain
@Pandoro
@zakkain
@zakkain
@Shaners
@zakkain
@lefnire
Owner

btw, added a Trello Pixel Art column to help us triage / manage tasks from this thread. Alex & Zach are PMs, I just invited Shaner & Leslie

@SlappyBag

I've been a bit AFK due to uni but this thread is literally making my orgasm. Carry on folks!

@Pandoro
@Shaners

@zakkain I meant browser support for displaying SVG transparency. It looks fine though see Browser compatibility table here: http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility May even be able to have partially transparent areas!

@ruddfawcett sorry wasn't able to join you. If you need something from me or have a topic you want to bring up feel free to post it here or send an email to me at shane (a-- -t) atramentous.com

To keep this place feeling lively here are some random works in progress that may or may not ever be completed:
Pets-Inprogress
Marshmallow Drops (think marshmallow slimes), some ghosts, a monkey, and a creature that cannot be named.

Also here is the finished dark souls blade animation (not much different):
anim-darksoul-blade002
And here is the version adjusted to be in a 105 x 105 pixel box (more on this later):
anim-darksoul-blade003

@lemoness
Collaborator

Dark soul blade remains UNBELIEVABLY AWESOME.
And I don't know if you are intending those to be future enemies.... BUT I WANT A MARSHMALLOW DROP PET, oh my GOD those are perfect!

I am now working on fiddling around with the colors again, I think I've had an idea I'm finally satisfied with. Coming soon :)

@Shaners

EGGGGGGGGGGGGS
eggggggs
Not happy with some of these so will be revising but at least have placeholders for all pets now I think.

@lemoness thank you! The marshmallow drop was intended to be a pet, but now that you mention it could work as an enemy too hmmm.

@Pandoro

Love em man! There are really cool :) It will be so funny to collect them :) Especially the cactus one is nice :)

Are these already animated :p ? I figure it will be quite the work, and questionable if all of them fit into an egg right :x ?

@wildcate

Sweeeeeet! I love them all. And I want them all!

@horusofoz

Suggestion: Circlets, crowns, tiaras etc for a broader ranger of head gear that doesn't cover the head.

@Shaners

This should be the final Baby Cerberus backer-only pet animation:
Cerberus-Anim-Mock
Cycling and playing a bit fast just for demo purposes.

What's next for me:

  • Revised backer-only mount ( maybe new direction )
  • CSS animation demo
  • Some progress on a Habit Pixel art preview tool
  • Food pixel art ( to be eaten by player and used in raising pets )

  • Not sure where backer NPCs are right now but I may work on this since it seems like a priority

@Pandoro not animated yet but planning on making animations for all of them which will be pretty similar to the wolf one. Was also planning to have the base pig egg hover since it's a flying pig but we'll see if that pans out.

@wildcate we might have to make a pet stable or something then!

@horusofoz this is a good idea but may be hard to pull off considering the pixel resolution. Definitely something to try out.

@lefnire
Owner
@Shaners

@lefnire k will make the mock-up of the portrait idea a higher priority. Probably post it here instead of the google group so we can get more feedback.

@lefnire
Owner
@zakkain
@Shaners

Aye aye.

Also I just realized that we have no beer pixel art / item and what a travesty this is.

@lefnire
Owner

@Pandoro or @Shaners could either of you hook us up with an egg spritesheet?

Side note (feel free to ignore me, since I know y'all have your own workflowy down) but I just found out that one of the css compilers has a flag you can pass to merge all images you're currently referencing from html / css into a spritesheet, and generate the necessary css selectors. AFAIK also compresses / optimizes the images. Picked it up in a podcast, so not sure if stylus supports it or not.

@lefnire lefnire referenced this issue
Closed

Sprite of eggs #648

@zakkain
@lefnire
Owner
@zakkain
@lefnire
Owner

We'll also need mount head/body splits so we can z-index-sandwich avatars. I'll add that + egg spritesheet to the trello

@Shaners

So I created a new sprite sheet
http://bluematcha.com/img/player.png

Increased the avatar box to 105h x 105w to accommodate the demon skin armor. Rearranged things, now moving 105 pixels in the y axis is a change in item and moving 105 in the x axis cycles through that item's animation frames. This appears to be closer to the standard for sprite sheets but doesn't mean we have to keep it this way.

Bigger increase in file size than I expected since I was hoping pngs were smarter with near pixels and there is a big expanse of transparent pixels. There could be other reasons for the size increase that I am not aware of (i.e. my output settings.) One fix could be for the items that aren't animated or planning to be animated ( almost everything in this sheet ) to put them on row of their own to use up that space. For example all of the swords on the first row. Kind of violates the idea that moving in x cycles through animation frames but no real reason why we can't do it. Figuring out the CSS positioning will be a little time consuming but only has to be done once.

This sheet could easily be integrated into the current system by reversing the CSS positioning values and adding 15 to each y besides the first one. Something I could easily do but I wanted to see people's opinions and maybe change the sheet so it uses up more of the transparent pixels.

Anyway the main point for creating this was to demonstrate CSS animation so here it is:
http://jsfiddle.net/Shaners/x8sA6/12/

This is just a demonstration I'm sure someone more skilled in CSS and javascript ( @zakkain ? ) will be able to do it better and understand how to integrate it.

Nice things about this method:

  • No call to get another image file ( the animation frames are already apart of the sprite sheet )
  • No having to duplicate frames ( just call that part of the sprite sheet again )
  • Ability to alter animation timings on the fly ( Go ahead try it out now! )
  • Ability to add and delete frames on the fly
  • Ability to call animations when needed or make them interactive ( easter egg animations? click to open a treasure chest? click to use a certain skill which plays a certain animation? )
  • More modular ( did our avatar box change size? change the CSS width, height, and frame background positioning, no need to remake a gif )

This post getting a little too long so I'll end it here!

@Pandoro
@zakkain
@switz
@lemoness
Collaborator

@Shaners I remain enthused about the eggs. Plus, baby cerberus is adorable! All the congratulations.

@horusofoz Love the crown ideas! Those would be great. Maybe I'll do some for some of the NPCs (I'm going to tackle B as soon as I am done with the mages.)

SPEAKING OF MAGES....

Here are the first three levels! I darkened the first level so that it looked less silvery, added some subtle shading to the level two hats, and of course, made level three. I also spent a lot of time designing and pixeling a green outfit.... only to realize that it worked terribly with the green-skinned players :/ No worries; I'll repurpose it later for a druid-y outfit in the token store.

Here we go!

New Level 1:

compmage1gray
magehat1 gray
magerobe1 gray

@lemoness
Collaborator

New Level 2:

compmage2blue
magehat2 blue
magerobe2 blue

aaaaaand Level Three:

compmage3purple
magehat3 purple
magerobe3 purple

And finally, just for fun, some mix-and-match :)

compmage1 5blue
compmage2 5

@Shaners

@switz just cause this was a demo, as I mentioned it'd be changed if we went in this direction.

@Pandoro

Currently the way I extract stuff
is really time costly as it takes up a lot of manual work.

You wouldn't really ever have to do this. After it was created if you wanted to add addition items it'd work something like this:

  • Work in which ever file you like, a .psd or .xcf with guidelines
  • Finish whichever asset you have been working on
  • To add the new asset:
  • Load up the sprite sheet png file
  • Add 105 pixel to the bottom of the sheet
  • Paste your new asset at the bottom of the sheet using a guild to align it
  • Save the new png file
  • Alter the CSS by:
  • Adding a new entry
  • The x pos will be 0
  • The y position will be the ( last y position in the sheet ) + 105

If you add to the bottom of the png you won't ever have to rebuild any of the previous assets unless you were going to alter the avatar box size (could do this with a PS script.