Main Site

Forum Index

Please login or register.

Login with username, password and session length
Advanced search  

News:

Welcome to FFH, where all your dreams come true!

Pages: [1]
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 25, 2012, 01:17:55 AM]
Mini guide to making RGB high resolution sprites for Tethical
« on: March 25, 2012, 01:17:55 AM »
This is for anyone interested in seeing how I start the sprites for Tethical based on FFT's. I'd be honored if anyone decided to make sprites to match this style and work with me. But any sprite style can be used as long as an entire set is planned on or enough to use in a game. No colliding styles should be used in this engine, to put it as plainly as I can. There's still a lot to be developed in this particular style, like monsters, or the way portraits ought to be made; so any input is welcome and any efforts will be fully embraced. You can use this format, or make your own in the new UTILITY Win32 Sprite Animator tool (to be updated very soon) I'm just posting this to document the order I've come up with so far. But you can use this tool to make sprites for the Tethical engine in either size or your own format and size I reckon... But consider joining my efforts.

First, download UTILITY Win32 Sprite Animator: http://ffhacktics.com/smf/index.php?topic=7409.0
Use this template for placement:
this for reference (a finished sheet):
To use any existing FFT or custom FFT sprite as a base use this template:
and get Xifanie's full sheet generating scripts (ffhacktics.com/smf/index.php?action=dlattach;topic=3901.0;attach=6687) used in palette editor. With those you can export full spritesheet which turn out like this:
From these you can extract any frame. Though better yet; in the latest update of UTILITY Win32 Sprite Animator you may be able to export any sprite into this format easily..
[this part will need be updated once this is clarified for me by Lirmont]

The Utility should be updated soon to have an automatic walking frame testing script included for both sizes, original and doubled. You can also easily scroll with the arrow keys to test frames by unchecking the animate box. Custom animations will be easy to make for testing using any order of frames you want as well.

This is the sheet so far but it can easily be expanded in 96 pixel increments to the right to accommodate for more frames. Here is a graph of the frames:
Unlike FFT sheets where the heads remain level these are adjusted as follows for the walking frames:

About proportions, they are exactly like FFT's in height from the feet up until the shoulders, The head and neck are slightly taller. If you want to make sprite conform to these humans use this guide:
Their bodies are also filled out a little and have a little more contrast and a bit less shadow around the waist.

Now this is a part some may hate.. since it's in RGB and involves palettes. I make one sheet that when done is used as a master key for paletting. All the objects and colors are listed within the image file in a palette as I go (you'll see in the next image). Never add a color with out listing it in the palette; it's  to self index colors and keep all accessories, garments, skin and everything separated as you go so that making the 12 palettes is not so hard later. Also try to keep color amount limited .. I probably used too many on the male's hair actually, but it's not unmanageable.
In RGB and with keeping as much of the objects as you want separated, you can have even more diverse palettes than you could with actual use of indexed colors.



That's all for now.. this is a work in progress.
« Last Edit: March 28, 2012, 03:23:20 AM by Lijj »
Kivutar [Posts: 224] Logged
  • View Profile
  • share
  • [March 26, 2012, 08:41:13 AM]
Re: Small guide to making RGB high resolution sprites for Tethical
« Reply #1 on: March 26, 2012, 08:41:13 AM »
Great guide, thanks a lot.

Tethical, an online FFT clone
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 28, 2012, 03:13:24 AM]
Re: Small guide to making RGB high resolution sprites for Tethical
« Reply #2 on: March 28, 2012, 03:13:24 AM »
                                :mrgreen: Thank you Kivutar. :mrgreen:
and no sweat at least it's documented as to avoid future clashes and help anyone willing to join in with me or make sprites in their own style.

 Now for a second part just going over, first some very basic tools for spriting in Photoshop, then some helpful shortcuts... This could be a spriters' Red Shoes


-The nudge tool can be used with the keyboard arrows to move an image or selection pixel by pixel; it can also be used to move images or selections 10 pixels by holding shift and  pressing an arrow key (Shift+Up for example).
-The marquee tool can select one area to work in specifically or many; to make multiple selections hold shift key and make another selection. Use this tool select something you wish to move alone or copy (control+C to copy and Control+V to paste). To invert a selection press Control+Shift+I. You can also change the shape from rectangular to circular by clicking and holding over the icon.
-Lasso tool , right below it, is pretty much the same thing; works the same way.
-The magic wand tool is used for selecting all of one color primarily. Set it with a Tolerance of 1 and make sure anti-aliasing is off. If you check the box 'Contiguous' it will only select one part of one contiguous color.
-The eye dropper is just used to pick colors from a sprite-sheet or another image.
-The pencil and brush tool is used to push pixels. One handy shortcut for changing brush size is toggling with the [ and ] keys as mentioned above but not used in pixel art Shift+[or] to toggle brush hardness with a quickness.
-The history brush tool is something to know about. You wont use it here unless you choose to make indexed color sprites. I do use the tool often when spiting for FFT. It also needs to be at hardness 100% since it's always in brush mode (so shift+[ and hold to set). This tool takes what ever you draw over back to exactly how it was when first opened. so to set a desired point with this save and close/reopen the image.
-Eraser tool functions just like the pencil and brush tool so use it in pencil mode or brush set to full hardness.
-The paint-bucket tool needs to be set with anti-aliasing off and tolerance to 1. Set to contiguous you can fill one area of color; with contiguous unchecked you can paint all shared colors at once.

Those are the basic visual tools commonly used in pixel art making. Some more commonly used things would be:
-Merging layers (Control+Shift+E)
-Making Layers (Control+Shift+N)
-To rotate one thing. Marquee select (or select with wand or lasso), then hit Control+T to transform... rotate by grabbing a corner of the 'transform box' and holding Shift key, this keeps it in 45 degree angles so the pixels don't; in indexed, distort and in rgb, blur.
-To double the size of something go to Image, mode and set to indexed. Then go to Image, image size and change it to 200%.. if you dont have it in indexed the pixels will be blurred terribly.
-How to extend the canvas.. say you want to make room for more frames. Go to Image, Canvas size and click on the side you want to retain opposite to the side or sides you want to extend.. in this case let's say we're adding one frame to on of mine. Click the arrow on the opposite of the side you want to extend and add another 96 pxls to the width.
-Also since this is the only spriting related Photoshop thing I can think of To make something save with a transparent background make it one layer. If it says 'Background' where the layer is shown, double click on it to turn it too a layer then use magic wand/non contiguous to select all of the background color and Backspace to delete it. Then go under File and select 'save for web and devices' then save as an indexed gif or png or an RGB png24.

There are a lot more awesome tools and shortcuts but for this mini spriting guide this is all I can think of; I have covered enough for spriting though.

« Last Edit: March 29, 2012, 02:12:49 AM by Lijj »
Atma [Posts: 177] Logged
  • View Profile
  • share
  • [March 28, 2012, 09:21:03 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #3 on: March 28, 2012, 09:21:03 PM »
Very cool.  Nice guide.

I see there are frames for bare hand attacks and for a weapon swing, but i was thinking... do we want to have left and right hand animations and I guess we need to add frames for a lunging weapon(Polearm/Spear) and Bows, maybe others (books, instruments, whips).  Also, still need frames for casting/singing, throwing, jumping, tackle...

I'm thinking it would be nice to have a submission thread and maybe a thread listing completed and wanted sprites.
I suppose it would be simplest to start with basic professions/jobs that most people will want (Knights, mages, etc), hopefully with both male and female versions for generics.  As it progresses, there can be more variations for each, or sub-categories for each job (mages - wizard/priest/time, etc) where it might just need a palette change to distinguish them to a more drastic change like hats or capes.

Maybe something like this:
Martial Classes:
   -Knight
     -Holy Knight
     -Dark Knight
   -Archer
   -Theif
Caster Classes
  -Wizard
  -Priest
  -Oracle
  -Summoner

-or-

Melee
  -...
Ranged
  -...
Caster
  -...
Physical
  -...

If there is a list of what's done and what's needed then people can take up an unfinished sprite and we can all pool our resources faster and hopefully not end up making multiples (until we have the basic core jobs done then move on to variations and alternates).  Of course people will want to have unique/special characters which won't fit into these so maybe just a list of completed ones.

Is there a format/template for monsters and/or bosses, yet?  Weapon/equipment/item sprites?
Another question... Is there a format for the palette, or is it just 'keep it simple and clean'?  I'm curious as to how the palettes will be handled in game.
« Last Edit: March 28, 2012, 10:08:42 PM by Atma »
My name is Atma... I am pure energy... and as ancient as the cosmos.
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 28, 2012, 09:58:42 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #4 on: March 28, 2012, 09:58:42 PM »
I agree. We should first make basic sprite classes then get add to the mix once 4 basic sets are done. We were also thinking of having, down the road, visible in-game accessories which would be on separate layer with transparent as a backing.
I think someone ought to jump on thieves or a ranged class like archers.. We've got the basic fighters almost done (so close I've got it when I get back in a few weeks; I was supposed to leave today but the person I'm waiting on screwed up making us both a day late [of course I will have to explain for this haha]). I also have a 1 frame proto of a basic female mage done. I'll go ahead and make another thread as you suggested with everything done posted and even the wips.

For monsters lets double the size or more.. so hows 200 square pixels per frame sound?  or 300? I guess it doesn't matter just as long as you arrange it in a similar way. In the update coming for Sprite utility you can edit the preview frames to whatever order you want for testing animations. The format should be the same with 4 rows for directions SW, SE, NE and NW and have as many frames as you want going across. I imagine we'll need more for some and less for others as with humans, but even more so.

Atma and Choto will you be in charge of Tethical spriting while I'm gone? bb in 3 weeks; at most a month, if any longer not much.
SaGa Frontier Hacker
Pickle Girl Fanboy [Posts: 1483] Logged
  • View Profile
  • Bio Research Lab
  • share
  • [March 28, 2012, 10:16:56 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #5 on: March 28, 2012, 10:16:56 PM »
What about units that take up more than 1 square?
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 28, 2012, 10:29:21 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #6 on: March 28, 2012, 10:29:21 PM »
We'll have to figure it out. I made a thread for this type of discussion and WIPs here
http://ffhacktics.com/smf/index.php?topic=8654.0
SaGa Frontier Hacker
Pickle Girl Fanboy [Posts: 1483] Logged
  • View Profile
  • Bio Research Lab
  • share
  • [March 28, 2012, 10:45:38 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #7 on: March 28, 2012, 10:45:38 PM »
The Dragons in Jeanne D'Arc are the best example of multi-tile characters.


^Doesn't show dragons, but does show other things about Jeane D'Arc, (hereby known as JD).  JD isn't like FFT, in that it is completely 3D, except for menus.  Implementing 2D multi-tile sprites may be impossible.

EDIT

Here it is:
Choto [Posts: 398] Logged
  • View Profile
  • share
  • [March 28, 2012, 11:05:39 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #8 on: March 28, 2012, 11:05:39 PM »
I'll certainly do what I can Lijj... but my workload is getting overwhelming with college applications, classes, etc. I'm getting photoshop-savvy, so I'll see what I can do.

For monster sprites... can't you vary the size to whatever you'd like? I mean i'm sure there will be both big and small monsters right?
« Last Edit: March 28, 2012, 11:32:34 PM by Choto »
Atma [Posts: 177] Logged
  • View Profile
  • share
  • [March 29, 2012, 12:27:18 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #9 on: March 29, 2012, 12:27:18 AM »
I seem to remember a long time ago Kivutar mentioned that we could use any size image, since it's gonna be on a textured plane or piece of geometry.  What is important is to have a standard so when we need to reference/load a certain area of the sprite sheet for an animation the frames will line up (eg, character sprite is 96x96 so they all line up).  However, unless it can be coded in a way that u can use a certain dimension, like 128x128, but have an option to choose the size/res as a multiple, like x2/x3.  That way if people make a different res u can still use it so long it's the same ratio as the base size.
Here's a quick idea for weapon sprite sheets.  I was thinking if maybe have the same size squares as the character sprites (96x96) and pre-line up the weapons so it can simply be overlapped instead of having to align them. 
However, I was also thinking we should just use a single image for each weapon since the geometry can just be rotated.  This way u only need a single sprite to draw.
One problem I can foresee is how the weapon may look together with the character.  If we place the weapon behind the character part of it may be hidden by the chest or head, but if we place it over top, then it's obviously gonna be covering the hand.  Would we still need a separate frame for the arms?  Or should we just keep it in mind when designing them?  Or just reference a small square where the hand is on the sheet and layer it over the weapon?
« Last Edit: March 29, 2012, 12:54:01 AM by Atma »
My name is Atma... I am pure energy... and as ancient as the cosmos.
Monochrome dreams.
lirmont [Posts: 296] Logged
  • View Profile
  • share
  • [March 29, 2012, 01:34:02 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #10 on: March 29, 2012, 01:34:02 AM »
I feel like there is only really one way that makes since to do it (to me), and that's providing the user/designer some form of alignment capability. Otherwise, you're stuck making a weapon's axis be one single spot ever. This may make sense if you only ever have one sprite (or type of sprite); it makes no sense if you intend to do something like give monsters weapons, because, unless their hands fall at exactly the same place, the weapons won't match up. It also makes no sense if you want to have weapons include exotic-style hilts (say, a monk's sword with cloth attached to the end of the hilt).

Anyway, this is an example of what I think should happen:




You may not be familiar with the sprite animation utility program I wrote, but that "hot-spot" could be on an unrendered composite frame or the hot-spot's frame could be in the actual composite frame (the composite frame each weapon is on) and could be assigned a color with 0 opacity (so that it's totally see-through). For the weapons, it would just be a matter of making sure the area covered centers on where you want the hand to be (from other images/sprites/etc). For the characters/monsters/sprites, the hot-spot could be used to mask out the weapon's details; however, I don't know that I like combining the two idea's together as one, and they may need to stay separate (i.e. you'd have one frame in the composite frame of a character sprite for the hot-spot and one for the mask, but this reservation is fueled by a design flaw of my utility program, which can still be changed).
« Last Edit: March 29, 2012, 02:12:21 AM by lirmont »
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 29, 2012, 02:09:53 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #11 on: March 29, 2012, 02:09:53 AM »
Good thinking..  glad to at least see this moving forward (weapons sprite discussion) before I go; it's in good hands :)
That's great that we can test them on the sprite as we go! \o/ In-game visible accessories!
 We can make the weapons better fit the angle of the game by making them actually isometric. And for monsters and such much more variety and freedom.
Also somewhat off topic
The current fighting animation on the sheet isn't enough.. it's worth having. But another full swing animation is a must for the fighters. The one she has now is a fencing poke. I'm thinking the fencing move would be good as the only attack for a mage but a fighter needs it and a full swing.
 and none of the frames from FFT look good on it right now so we should really try to get a better 3/4 view going.

I updated the top with a better description of canvas size also.
This is a good pixel rotater also good for at least retaining proportions when rotating say a sword frame:
http://info.sonicretro.org/RotSprite
« Last Edit: March 29, 2012, 02:15:42 AM by Lijj »
Choto [Posts: 398] Logged
  • View Profile
  • share
  • [March 29, 2012, 02:17:36 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #12 on: March 29, 2012, 02:17:36 AM »
I've been tossing the idea of having weapons/shields ever-present during battle... I think logistically it would be a huge hassle and may be beyond the scope of what we're trying to do... but what are your thoughts of it? If it were able to be pulled off, it would be a big accomplishment visually... you'd be able to see.. " ohhh shit that dudes got a killer axe hope he doesn't smack me with it". or "DOHHH check out mah new sword of facemelting!!! ees badass is it not?"

If not, the classic system was always purty good.
Lijj [Posts: 1713] Logged
  • View Profile
  • share
  • [March 29, 2012, 02:25:12 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #13 on: March 29, 2012, 02:25:12 AM »
I like the idea and think it would be much more exiting.
Monochrome dreams.
lirmont [Posts: 296] Logged
  • View Profile
  • share
  • [March 29, 2012, 02:29:55 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #14 on: March 29, 2012, 02:29:55 AM »
After weapon strikes make it into the engine, you'll have example code for always visible equipment. It would only really be a matter of, A, doing the work to draw the shields (as an example), B, marking the items with correct hot-spots, C, marking the sprites with correct hot spots and masks (for a shield, this would apply if you had a riot shield with a window), and, D, configuring the game to load those things. The last item can (and probably should) be the way the engine does things anyway. That is, it could look through a character's slots for applicable "display in battle, if available" slots. If the slot is marked as such, it would go and find the item's sprite sheet, load the appropriate named composite frame sets, and run the alignment-and-mask algorithm (that will have to be written for the weapon strikes anyway) during the update timer events in the game's game loop. That's it.
Choto [Posts: 398] Logged
  • View Profile
  • share
  • [March 29, 2012, 02:59:39 AM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #15 on: March 29, 2012, 02:59:39 AM »
:D this gets more and more exciting, thanks!

Another question, I was just looking at diablo 2 spritesheets for some monster ideas, and i noticed this abyss knight has a transparency effect around his hand. I feel like it does already, but does sprite animator support mating effects with sprites? This would open up another world of possibilities like... having fire rising from a fiery monster, having magic emanate from a magical monster, having water falling from a watery monster, etc. The important thing this would allow is the effect moving faster than the sprite in each frame, so that the effect isn't moving in unison with the sprite..which we could do originally but looks crumby when the sprite is in a standing frame. The other question that arises is how palettes would be handled with different color paletted sprites. I know they're not indexed colors so that shouldn't be a problem right? It would also allow for "aura" effects to be placed on sprites or like a simple glow effect.
« Last Edit: March 29, 2012, 12:22:46 PM by Choto »
Monochrome dreams.
lirmont [Posts: 296] Logged
  • View Profile
  • share
  • [March 29, 2012, 10:17:33 PM]
Re: Mini guide to making RGB high resolution sprites for Tethical
« Reply #16 on: March 29, 2012, 10:17:33 PM »
An effect is separate from a character sprite. In that way, it is immaterial what their separate animation speeds/frame rates are. Will sprite animator let you combine two animation sequences into one like that? No. Could you do so in a game? Yes, you decide where the character and effect should be, and then you set them to looping over an appropriate named frame set (which keeps them displayed and animated). In short, the same process I described for adding always visible equipment is required here, except you have to go a step farther and account for such effects somehow (because it's reasonable to assume they do not apply to everyone).

Now, does that stop you from taking advantage of sprite animator's blending modes in sprite design if, say, you want to add an always visible glow effect to a sprite? No, but you have to understand that it would be behind what's rendered on top of it (re: weapons during weapon strikes and whatever else you always show), so maybe it's not a good idea to combine them (if you have those intentions). However, there is nothing stopping you from adding graphical data for particle effects to your sprite sheet, marking those sections as frames, and then adding them into your own format's animations. In other words, you could have a psychic class with some manifestation of that power displayed in every frame taking full advantage of the sprite animator's ability to mark those things with blending modes (say, color dodge), which will include everything drawn beneath those frames in-game (the character, other characters, the map, the background gradient) in the compositing process done by your graphics card.

The example in the previous paragraph is in place of drawing something on the sprite intended to appear blended in each composited frame but  that is not actually blended. This has many benefits over that. For one, the effect you spent the time to make gets new life EVERYTIME something behind the effect changes (assuming the change causes a visible change in the underlying color buffers). Second, it's a lot easier to animate (up/down, left/right, opacity, scaling, rotation; all within the sprite animator's interface already). And last, it includes the ability to tack on a sound effect (say, a low hum that repeats indefinitely, or, if you add enough frames in, you could use longer and longer sound effects which will be looped as the animation loops).
Pages: [1]