Closed lefnire closed 11 years ago
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.
Yea I would avoid GIFs anywhere possible and stick to PNG sprite sheets for animations. GIFs are going to be a bad time. See @zakkain 's link and here: http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail
@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.
I'm aware of some of these tools, I was just hoping that the nicely aligned stuff we have from the gimp export right now could be utilized. So instead of taking 20 png files and creating 1 css file and 1 png, I was thinking of taking something like 3 png files and 3 css files and creating 1 big css spritesheet out of those. Maybe I misread your answer and this is also possible with those ^^? Otherwise we can also just export the stuff as single images and then stitch them together. I'm just expecting that these general auto stitch things will not respect the big transparent part of the images that are there currently and instead screw up the nice alignment of the items as it available now. But well.. worst case scenario is that I will have to write me myself x) It will be hideous, but I think I will manage to do this :p
On Mon, Feb 18, 2013 at 10:26 AM, Zachary Kain notifications@github.comwrote:
No worries, @Pandoro https://github.com/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! Compasshttp://compass-style.orghas 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.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13713124.
This generator has quite a few options, including one to preserve the original image dimensions :)
Great :D I guess this can work :) Let's see if we can crack the 1mb upload limit at some point ;)
On Mon, Feb 18, 2013 at 10:42 AM, Zachary Kain notifications@github.comwrote:
This generator http://spritegen.website-performance.org/ has quite a few options, including one to preserve the original image dimensions :)
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13713724.
@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
I hope nobody misunderstood me, I wasn't trying to say that you should get rid of it @Shaners :x
On Mon, Feb 18, 2013 at 5:47 PM, Tyler Renelle notifications@github.comwrote:
@Shaners https://github.com/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
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13730912.
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?
Ohh ho ho! I'm holding my face right now, you are a wizard champion ninja robot @Shaners
On Tue, Feb 19, 2013 at 5:00 PM, Shane Lister notifications@github.comwrote:
Demon Skin Armor, possible back-only armor. Has a pulsing animation currently: [image: DemonSkin-Mock-Anim001]https://f.cloud.github.com/assets/2374703/173508/415d1c5c-7adf-11e2-8865-7bf7dd3dac9d.gif 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?
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13802578.
Holy shit man! That looks awesome!
On Tue, Feb 19, 2013 at 11:00 PM, Shane Lister notifications@github.comwrote:
Demon Skin Armor, possible back-only armor. Has a pulsing animation currently: [image: DemonSkin-Mock-Anim001]https://f.cloud.github.com/assets/2374703/173508/415d1c5c-7adf-11e2-8865-7bf7dd3dac9d.gif 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?
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13802578.
I'm just wondering, where can I find the .png files for all of the images (body, hair, weapons, etc.)? I've looked through all of the files here: https://github.com/lefnire/habitrpg/tree/master/public/img/BrowserQuest The ont image I can find of the default player is here: https://github.com/lefnire/habitrpg/blob/master/public/img/BrowserQuest/spritesheet.png
I know I sound a bit nooby but :P
Thanks!, busterroni
Edit: Found it!: https://github.com/lefnire/habitrpg/tree/master/public/img/BrowserQuest/habitrpg_mods
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
My turtle: 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: Eyepatch alone:
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 :-/
Noooooooo! On Feb 21, 2013 7:11 PM, "busterroni" notifications@github.com wrote:
@Pandoro https://github.com/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?
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13921336.
@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:
SECOND PART!!
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.)
LAST UPDATE:
Here is a quickly-edited sample of what you would look like if you bought the basic leather armor and a shield, and then spent ALL THE REST OF YOUR MONEY ON A RED-WINGED MAGE HAT (aka this was the first basic sprite I found to edit):
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.
Yesssssss! Here comes Tom bombadil! On Feb 22, 2013 9:31 PM, "lemoness" notifications@github.com wrote:
LAST UPDATE:
Here is a quickly-edited sample of what you would look like if you bought the basic leather armor and a shield, and then spent ALL THE REST OF YOUR MONEY ON A RED-WINGED MAGE HAT (aka this was the first basic sprite I found to edit):
[image: habitrpg girl sample HAT]https://f.cloud.github.com/assets/3494081/187497/f5653fc6-7d60-11e2-96f4-d6c887747abc.png
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.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13983586.
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)
With an alternate color scheme
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...
Wow! A lot of great stuff! Some of it might not work out perfectly, but I like a lot if it :-D I will hopefully soon find some time to put them into sprites.
And I agree about the pets. In the pet sprite which I was making lately I moved them so that they work okay with all weapons :-) On Feb 23, 2013 2:46 PM, "lemoness" notifications@github.com wrote:
ALSO 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 it's endearing face...
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-13990242.
@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.
@lemoness In general I find it hard to judge, as these are "bare" images of the hat. Seeing it work with a full character makes it look by far better and easier to judge :) I think overall the stuff looks pretty cool, although I am wondering a little if the feathers and wings (?) are a little bulky :x I know it is hard to make smaller stuff, but this would be a huge feather if you compare it to the head etc. If smaller is possible, I would really be interested to see that as well, but I think it can work out as this as well. I would go for feather on the right as well. I like the ones better where the feather has a darker border, which makes it clearer where the hat end and the feather starts :) (e.g. version 1 of the red hat and version 2/3 of the green hat.)
@Orangyfresh what worries me a little about the first two rogue sets is that the hat is pretty big and I don't know how this would look if you recombine it with the other armors. However if I recall correctly you did use gimp when you uploaded the other sets right? So maybe you can see if the hats also work with the other stuff.
@ruddfawcett I will reply here, since other people might chime in as well. I'm not sure how much time I will have in the near future, but I am curious about what you would need for an iPhone app from a pixel artist ^^;
Hi, I'm interested into contributing as much as I can to this project as a pixel artist.
I just have a few questions. What is the process towards submitting art? Is their any kind of "weight" pixel art has as far as the royalty process? Is there any area where you lack that I can fill in?
Thanks, I'm pretty keen to get involved. :)
@horusofoz 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?)
@jjjjesse It's a fairly informal process. Just drop your files here and listen in for the gasps of astonishment ;)
Horusofoz "Live to learn. Learn to live." J.W.S.
On 25 February 2013 14:28, jjjjesse notifications@github.com wrote:
@horusofoz https://github.com/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?)
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-14024687.
@horusofoz sorry for harassing you, I'm just trying to get a proper understanding of everything... How does that work as far as contributions?
@jjjjesse No worries. Being open source we're all here to help each other out.
If you post your files up and they woo then they'll be picked up by the devs. Either way your interest and efforts are appreciated :)
Horusofoz "Live to learn. Learn to live." J.W.S.
On 25 February 2013 14:34, jjjjesse notifications@github.com wrote:
@horusofoz https://github.com/horusofoz sorry for harassing you, I'm just trying to get a proper understanding of everything... How does that work as far as contributions?
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/107#issuecomment-14024818.
Here's my first contribution, a gladiator with a trident, complete with a net. (I'd assume it would take the 'shield' slot)
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.