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.
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.
Sweet!!! good job @acsargent. I would love a great animation of me (my avatar) killing an orc when i level up. :D
LOL (or kissing a hot lady elf too) just saying
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
I alos like pixel art which handles dept like PaperMario
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.
Finished that orc I mentioned. Have a look!
(some white detail in the helmet may be lost in the white background)
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
Well done @acsargent
@acsargent very nice indeed. It'll be great to see these being implemented in the future.
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.
Yeah, I like the SNES look. And share my avatar on Facebook or G+ everytime I level up would be amazing too.
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!
PS i donated 5 bucks.
I'm going to leave this open because its a beast on its own.
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.
We just need to implement them eventually.
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.
If you REALLY like it, I might take the time to give the armor sets a try as well ;)
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
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 ;)
If desired also available without the flower. I did it like this to somehow distinguish the female from the male character with this armor.
Should I continue ^^; ?
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.
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!
that is amazing. we have our female avatars now, haha - that just happened!
I like left - left - right, respectively - what do y'all think?
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.
@Pandoro that is awesome
@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.
female avatars are in, thanks @Pandoro! user -> settings -> gender
Just changed it for my GF and she was like "Whoop". Goodjobs!
Is there a priority list of additional art assets Habit RPG is looking for?
Or is it just:
@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.
Threw this together over my lunch break today then refined it a little just now.
Supposed to be a pet wolf (looks more like a husky) and I imagine it'd be something like this implemented:
@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.
@Shaners I love the wolf! Let's get that committed to the repository, we can add a border in version two and second commit.
@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?
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 ?
@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?
@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.
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.
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.
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.
Submitted these variations a little bit ago, hope I did it right!
From left to right: Base, White Wolf, Desert Wolf, Red Wolf, Shade Wolf, Skeleton Wolf, Zombie Wolf, Happy Golden Wolf, and Veteran Wolf.
Fantastic job 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!
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.
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!
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;.
Not one of my best, but I guess it might serve as a possible pet, for the sheep lovers amongst us :p
@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!
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.
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.
Ok, nice. I understand, thanks! Yeah I'll have a go at it when I've next got some time on my hands.
When do you think different skin colors and hair colors will be available? That seems like it should be a priority for the sprites.
Made a few more pets:
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.
A lion followed you home... and you had a sudden urge (verging on panic) to finish your daily tasks. :-)
@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,
Feedback :) ?
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
Oooh and @Neohuman GIMP ;)
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!!
Helmet: BQ content
Weapon: own creation
Hmmm somehow github is buggy :-/
Here is the animated version
@Pandoro you art is beautiful & @Shaners
@Shaners now too, you've both been doing an excellent job. @Shaners, [mailto:email me] sometime - would love to get in touch with you.
The Tard-meister is getting some limelight in the world outside GH :)
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
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 :)
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?
Ok, seperate .xcf files with layers it is then. I'll get round to changing my sprites to this and adding them later.
@lefnire @Pandoro @Neohuman thank you!
Another day, another set of critters:
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:
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.
@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
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
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?
@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.
Thought you guys might find this useful
@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.
@Neohuman looks interesting, but I think with the current setup it isn't really needed as we can just exchange one hair color sprite with another hair color sprite. If at some point we want to change color of armor though, this might be cool though, considering the armor is one big piece and this might come in handy!
@Orangyfresh cool :)
Hmmm in order to review the results in a better way, I would like to create a little character viewer. See my mock up.
Sadly I have no real idea how. I was thinking about a little python program... but then again I figured it might be easier to just do it in html? But is that possible... I got no idea. But considering it is there already in the code of habitrpg, how hard would it be to extract that part and extend it to such a thing. It would just need to load the css file. From there load the png and all the classes and then cycle through the different parts. It would be really useful to test if a new piece of armor works with all other pieces of equipment! And also some general css sanity checks!
@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.
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.
@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!
Anybody got any weapon sprites like a portal gun or Samuses gun?
@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?
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?
@Shaners & @Orangyfresh - could you send me an email each so we can help organise your work in a more official capacity =D
: 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.
It is working great, emulate next day still causes a reload and disconnect of page though. Male or female setting not available.
This is what the Lion, Tiger, and Panda mounts could look like implemented:
I think it works, a panda mount would be pretty slow but he'd be hell against a thicket of bamboo! Might have to move the level icon to the side or just move everything up. Another concern could be how much of the armour and weapons are covered by by the mounts.
I like the level float top left too, makes room for a pet. This is coming together my friends :)
Plus it leaves room to have icons underneath, e.g. inventory button etc
Something along these lines i guess - dependent on future features etc
(Note, this was 2mins)
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
@lefnire that would make a great deal of sense so lets go with that
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.
Kickstarter supporters could get fancy coats of arms.
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.
HP 155/50 on clicking negative habit?
@lefnire I've got a similar UI idea to what you stated above but one that also incorporates other future potential features.
@lefnire OMG the emulate next day bug is gone and everything else is fine at least for me
@wc8 ah, modifiers are helping the user too much lol. Fixing.
Able to drag-and-drop but the results after refresh are not saved; either reverting to original position or creating a new order.
that's a bug with the current site, in a separate ticket - still trying to fix that.
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.
alright, new push with less drastic modifiers - try now
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.
The HP issue is fixed.
Here are two mock ups of how the flying pig might might look like implemented:
I think both work, making the grey eye pixel like the others and making the outline grey wasn't as bad as I was thinking. I still prefer the first version for the depth but I'll update the pig sprite tonight based what other people think of this comparison.
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 :)
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
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?
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.
@lefnire Ok, cool. I'll see what ideas I can think of.
@Neohuman as separate entities, or as pets?
@lefnire as a guide I assume they would be separate entities but if not a guide pets. Depends on their functionality really.
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?
@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 :)
@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:
Pets in the works! Screenshot, branch
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
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"
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.
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?
Not a problem, we'll figure stuff out when you're less busy, we're in a decent spot right now :)
Our own @Pandoro has developed some guidelines for submitting Pixel Art, check it out!
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.
Also tooling with ideas for a backer only mount, Ethereal Lion, and backer only pet, Dawn Phoenix.
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.
Also, some free-to-use item icons we may find beneficial: http://www.pixeljoint.com/pixelart/44976.htm
@lefnire those are awesome, but too high res?
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
@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:
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.
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?
That's really clever!
@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!
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.
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!
@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 :)
@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!
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 :)
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
@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!
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.
@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!
Sorry I don't really have time for a proper explanation but as to the coloured lines:
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
@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
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:
(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.
@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.
@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?
@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 ^^;
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.
Just a little preview of something I've been working on. Please note, the body is missing because this is a work in progress.
Edit: here it is with a body, not the final colours but gives it more context.
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
I guess semi big update, all pet colour variations plus a polar bear pet and mount.
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:
For the backer-only armor I am thinking either something dark inspired by this:
or something translucent and crystalline inspired by this:
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.
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.
@lefnire A seperate trello board might be good, but honestly there are only a few discussions going on.
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! :)
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
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 :)
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:
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).
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.
@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 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.
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
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.
This generator has quite a few options, including one to preserve the original image dimensions :)
@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
Demon Skin Armor, possible back-only armor. Has a pulsing animation currently:
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?
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
Edit: Found it!: https://github.com/lefnire/habitrpg/tree/master/public/img/BrowserQuest/habitrpg_mods
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 :)
Never been called a wizard champion ninja robot before, thank you!
Going to be working on:
@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!
@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
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:
Here it is on the player, I think I need to fit it better:
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:
Edit: Great, I figured it out :) I still think the bird needs a lot of work.
Edit: (Again :P) I've redone the bird from scratch, I think it looks a lot better now, I just need to add shading.
And a close up:
Edit: Fail I forgot the wings xD Adding them now...
Wings and small shading added:
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)
And I thought that the brims could get bigger as you leveled up?
The colors were made very quickly, so I could make many other shades and patterns if you guys like them :)
Those hats look really cool :)
@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 :)
@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?
@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 :-/
@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!!
@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.
@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?
@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
WOW OKAY HERE COME A LOT OF HAT OPTIONS! Say what you like/don't like.
Basic green hat, regular and flipped:
Lemoness tries to do a feather and tears her hair out for an hour, coming up with the following options for voting:
Advanced hat with crest:
Advanced hat with 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.)
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):
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.
Sorry I haven't been that active lately. I hope these armor designs make up for it :)
A rogue armor set
With an alternate color scheme
Ninja inspired armor set (possible backer only armor)
Horned armor set
Possible mage/rogue armor set
Remake of my old grey mage armor. The beard is part of the hat so hopefully it works better than my previous design.
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.
@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.
Also, is everyone in agreement that tips to the right looks better? I'm pretty neutral!!
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...
@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.
@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).
@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.
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 ^^;
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. :)
@jjjjesse You could take a look at Pandoro's AWESOME tutorial.
@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 sorry for harassing you, I'm just trying to get a proper understanding of everything... How does that work as far as contributions?
Here's my first contribution, a gladiator with a trident, complete with a net. (I'd assume it would take the 'shield' slot)
Next we have the robed samurai.
Wow, that samurai is really nice. I wonder how shields would fit with it though...
I may have been a little ambitious with this one, armored samurai:
@tmas Good point! I'll have to consider making something that fits with the set.
@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 :)
Here is an Immortal, inspired from 300.
@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.
@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.
Great stuff everyone, things are looking awesome!
Quick one, dark souls blade:
Possible backer-only weapon. Animation is looping fast just for viewing, will be tweaked before final.
@lefnire Vancouver Canada, including flight would be an expensive drink!
One more for today, crystal armor set:
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.
Re-opening as with all the activity and great artwork, it should be open for more people to see.
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.
Here's another fun one, I call it "The Bride".
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.
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 :/
@jjjjesse you are exceptionally good at this!
All, here's are my current thoughts, tell me what you think:
@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)
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:
Still far from done but here is a preview of the backer-only phoenix pet.
It came out pretty big but funny enough this was the smallest iteration that actually worked.
@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
@lefnire, you mentioned someone requesting a 'Dragon Staff of Power', but I thought I'd up one better.
Here's the 'Dragon Hunter':
As far as the background, I thought it could go in a miscellaneous item slot, the item itself being a 'Dragon Heart':
Also @Shaners, that phoenix is brilliant... Just sucks how big it is! Maybe it can be used for something else, not a pet?
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?
@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 :/
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?
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.
@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
@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.
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.
(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!
@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:
Just tell me which version you guys like better, and I will roll out a TON OF HATS AND ROBES based on that. :D
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.
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.
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 ;)
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 )
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 ;)
Tail is for the miscellaneous slot, of course!
@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!
@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!
@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.
Here is a list of suggestions for pixel art assets if anyone else is looking for ideas:
Possible backer-only pet, 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.
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.
Special Request: Armoured Kangaroo or Koala ;)
@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.
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.
Hmmm well, it MIGHT work, but it is pretty big, opinions?
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...
@wildcate I guess these weapons would probably be doable yes :)
Does anyone recognize this guy?
@Pandoro The Goon?
@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.
@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:
Tyler liked the first one, if it fits specs.
@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.
Ok this one was mostly just for fun and won't make it in:
Some may get the reference. Lets call it the 'adventure' set.
Edit another one just for fun. 'Legend' set:
Zelda looking character definitely rocks. Should be considered for an NPC.
@Pandoro It's not the Goon, it's TYLER!!!!!!!!!!!!!
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
The fact that this is the first RL character threw me off.
@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.
@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!)
@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 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 :)
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 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 ;)
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...)
Created a little mock up of how things could be revised:
And here is a zoomed in version with more of an explanation:
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.
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)
and, just to try out how it looks, the pet below on the left
@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?
@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!
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 ;)
The pet a bit higher...
Yea I think I like that one or this one:
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.
If everyone likes this method it would mean the new system would:
Still to mock pet-less and mount-less version using this same system.
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 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?
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
Guess I was mistaken. Here is a wolf egg!
Here it is in the stages of opening / cracking:
Here is an animation of it cracking (way too much fun than it should have been!)
These are over the 30x30 limit though.
Oh my GOD those eggs! And the animation with the wolf....Hope you can fix the size limit conflict.
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
@Shaners This is a 15x17 image! You can go bigger if you want to :p
But uuhm yea.. I am in awe! Great job!
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!
I just keep looking at that egg animation and it gets more perfect every single time. So much <3
@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.)
@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.
Same as above but extra stuff removed.
Same system but without a pet or a mount.
All three with a horizontal flip.
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?
Just another awe struck onlooker saying damn you guys come up with some awesome stuff.
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 :)
@lemoness, hmmm you are right. I think we should change the characters. The outlines have been a little to light in several cases already :-/
Ooo, got recommended an Octocat pet (copyright issues?)
@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?
Oh yes,t How could I forget! https://raw.github.com/mozilla/BrowserQuest/master/client/img/1/octocat.png
@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.
@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
@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.
And just for fun, a guy in mixed armor:
Send me feedback :)
ARG xD I should be writing my thesis right now!
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
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 - 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!!
Is there a .xcf with all the current player sprites? Full.xcf? Or is that out of date?
ARg... sorry I forgot to upload that...
@Pandoro awesome thanks!
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:
Animation is cycling faster just for demonstration purposes. In prod would hold the first frame a lot longer.
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?
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.
@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!
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.
@zakkain interesting concept SVG pixel art?!
@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.
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.