Spriters' Guide: Making an AAI style VS. Screen

Read and write tutorials about becoming a great artist.

Moderators: EN - Assistant Moderators, EN - Forum Moderators

User avatar
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Spriters' Guide: Making an AAI style VS. Screen

Post by E.D.Revolution »

I have mentioned quickly in my guide that if you were to go for a AAI-style Testimony sequence, you must use a VS. screen. There are two ways of doing it: a VS screen still and a VS screen animated.

The still version of a VS screen is pretty easy, and there are two ways of doing it: bordered and not bordered. I will provide you with both versions.
Image Image
The norm is that your defense attorney is on the top facing right and your prosecutor is on the bottom facing left.
However, if you want to animate it, you'll read the guide below.

How to animate a VS. screen
Programs needed:
  1. A PNG Editor that can handle layers.
    • I do NOT recommend MSPaint for this because it cannot save transparency.
    • I do recommend Paint.NET or GIMP or Photoshop
  2. A GIF animator program.
    • I recommend ULead GIF Animator, Advanced GIF Animator, and Easy GIF Animator. You may have to pay for those, though.
    • GIMP is free and is the most flexible, but it has a STEEP learning curve.
  3. If you are going to animate as an APNG, get APNG Anime Maker.
    If you are going to use GIMP, don't bother getting any GIF animators or saving as PNG unless you want to save as APNG
Spoiler : The Easy GIF Animator Method :
  1. Make sure your VS sprites are aligned correctly. Then place your character sprites out of the backgrounds. Save.
  2. Slowly, and evenly, creep the VS sprites in. The VS sprites should move in the same distance from their respective start positions. Save a new copy of the VS screen every few steps. Save often. You're going to need it to animate it.
  3. In your GIF animator program, place your VS screens in order from blank to "fighting position", ie, locked into the end.
  4. Place the a 0.03-0.05 second timer for all the slides until the last one. The last one should have a timer so that the sprite will run for 1.80 seconds.
  5. If you made too many copies of your VS screen, take out as many as necessary. Test it out by playing previewing the GIF. You need to preview it in the browser. Test this on both Chrome and Firefox.
  6. Save but do not check off "merge pallete". Upload and use for your trial.
Alternatively...
  1. Make sure your VS sprites are aligned correctly. Then place your character sprites in fighting position. Save.
  2. Slowly, and evenly, creep the VS sprites out. The VS sprites should move in the same distance from their respective start positions. Save a new copy of the VS screen every few steps. Save often. You're going to need it to animate it.
  3. In your GIF animator program, place your VS screens in order from blank to "fighting position", ie, locked into the end.
  4. Place the a 0.03-0.05 second timer for all the slides until the last one. The last one should have a timer so that the sprite will run for 1.80 seconds.
  5. If you made too many copies of your VS screen, take out as many as necessary. Test it out by playing previewing the GIF. You need to preview it in the browser. Test this on both Chrome and Firefox.
  6. Save but do not check off "merge pallete". Upload and use for your trial.
Spoiler : GIMP Method :
  1. Make two layers. The bottom most layer should have the VS bars. The top most layer should have the characters in fighting position. On the bottom layer, add the characters, but place them outside of the viewing area. Save as an .xcf or .psd file. This will serve as a master copy when you start animating.
  2. On the bottom layer, rename the layer by adding the timer to the layer name. E.g., Background -> Background (30ms). You need to add the timer exactly like that, though you can time it however you want. To optimize playing speed, the timer should be around 30-70 ms.
  3. On the layers window, click on the bottom layer and then copy. On the copy, slide in your characters to the desired position. For each layer up until the end, the VS sprite should move the same distance from their respective positions.
  4. Copy the current layer and then repeat step 3 until you have a full set. Do be careful not to make too many layers. You should have no more than 30 frames with 30 ms timers. You should have no more than 20 frames with 70 ms timers.
  5. Test out the animation by going to Filters -> Animation -> Playback. Fix the frames as necessary. If you do not like the timing, you will have to manually rename the layers and change the timers for each frame.
  6. Click on the bottom layer. You should see "imaginary borders" that extend past the viewing frame. Go to Layer -> Layer to Image Size. Do this for every frame.
  7. Save as .gif. When saving, it will ask you how you want it imported. Click on "Save as Animation" and Export. A new window will pop up. Clear the check boxes on "Interlace", "GIF comment" (unless you want to make one), and "Use delay entered above for all frames". On the dropdown menu, select "one frame per layer". Then check off "loop forever" and "Use disposal method entered for all frames. Save, upload, and use.
Spoiler : The APNG Method :
The following steps use Easy GIF Animator as a guide. It's harder to pull off an APNG on GIMP without the plugins.
  1. Make sure your VS sprites are aligned correctly. Then place your character sprites out of the backgrounds. Save.
  2. Slowly, and evenly, creep the VS sprites in. The VS sprites should move in the same distance from their respective start positions. Save a new copy of the VS screen every few steps. Save often. You're going to need it to animate it.
  3. In your GIF animator program, place your VS screens in order from blank to "fighting position", ie, locked into the end.
  4. Place the a 0.03-0.05 second timer for all the slides until the last one. The last one should have a timer so that the sprite will run for 1.80 seconds.
  5. If you made too many copies of your VS screen, take out as many as necessary. Test it out by playing previewing the GIF. You need to preview it in the browser. Test on both Firefox and Chromium. Chromium and all its forks (Chrome, Puffin, Brave, etc.) have APNG support since 2016. Firefox had APNG support since 2009.
  6. Export all frames. Make sure you keep the program open so you have the timing on.
  7. Open APNG Anime Maker and import all frames. Note the timings and apply it to the program. Use the msec on the delay. For disposal, select previous. Save, upload, and use.
Alternatively...
  1. Make sure your VS sprites are aligned correctly. Then place your character sprites in fighting position. Save.
  2. Slowly, and evenly, creep the VS sprites out. The VS sprites should move in the same distance from their respective start positions. Save a new copy of the VS screen every few steps. Save often. You're going to need it to animate it.
  3. In your GIF animator program, place your VS screens in order from blank to "fighting position", ie, locked into the end.
  4. Place the a 0.03-0.05 second timer for all the slides until the last one. The last one should have a timer so that the sprite will run for 1.80 seconds.
  5. If you made too many copies of your VS screen, take out as many as necessary. Test it out by playing previewing the GIF. You need to preview it in the browser. Test this on Firefox. Test on both Firefox and Chromium. Chromium and all its forks (Chrome, Puffin, Brave, etc.) have APNG support since 2016. Firefox had APNG support since 2009.
  6. Export all frames. Make sure you keep the program open so you have the timing on.
  7. Open APNG Anime Maker and import all frames. Note the timings and apply it to the program. Use the msec on the delay. For disposal, select previous. Save, upload, and use.
Since not all of the AAI VS sprites have a set "width," if you choose to incorporate it, you will have to figure out how to make it scroll in smoothly

Just a note, though: while the AA version of the VS sprite can work for both bordered and unbordered versions, the same cannot be said for AAI VS sprites. AAI VS sprites, as of now, can only be used with the bordered versions. If you wish to use an AA VS sprite on the bordered version, you'll have to cut the height to 36 pxls, unless you make a bordered version of the first PNG.
Spoiler : PNG Stills of VS Screen :
Image Image
Spoiler : GIF Animations of VS Screen :
Image Image
Oh, and if you're using a custom sprite, you will have to cut a VS sprite out of a Zoom sprite. Make sure your cut includes the eyes, ears, eyebrows, and the nose. Cut the sprite appropriately with your VS border.

Quick guide to making a VS sprite out of a Zoom sprite.
Generally speaking, one should never resize, crop, and resize the original sprite. If you choose this method, do not complain that the quality has gone down.
  1. Zoom the sprite by 257%.
  2. Crop the height of the sprite depending on the zoomline you're using. Follow the correct cut as described above. If you're using the first set of vs zoom lines, the crop height should be 96 pxls. If you're using the second set of vs zoom lines, the crop height should be 72 pxls.
  3. Resize by 50%.
If one of the characters has appeared in a HD version, you might as well use that to make your VS sprite as opposed to making one from scratch or resizing a GBA/DS Zoom sprite. If your frankensprite uses bases from HD versions, use that to make your frankensprite and resize down to an appropriate size.

If you want your custom VS sprite to look professional, here is Hikari Yamija's guide on creating a zoom sprite. Just apply the same principles from her guide and create your custom VS sprite.

Note: Her guide will have to be rewritten as imageshack has changed how they do business and deleted all free user files in 2016. Her files were broken before that though...

Either that or follow her guide by clicking on the spoiler.
Spoiler : How to make a professional-looking VS sprite. Credits to Hikari Yamija. Edited to perfect the English. :
Well, we have our "zoom-in" and the "VS screen"... but we don't have the animation working... yet
ImageImage

1-Copy and paste your Zoom sprite in the VS screen.
ImageImage
Note: Preferably align the vision approximately guiding you with the middle line of the VS screen.

2A-Now, just select the empty area with magic wand and press "Supr" in your sprite (This is only if your editor has a layers)
Image
2B- If your editor cannot handle layers, you should do it manually with square selector.
Image

Well, if you decided use a screen without borders, you're finished already, but if not... you need to do a little more work.
Image

3-Using the square selector or magic wand, select the border to erase the excess.
Image

4-Now, we're preparated to animate our VS screen, so just follow the indications by guide above, and you should have a VS sprite working..
Image
Last edited by E.D.Revolution on Wed Jul 01, 2020 4:16 am, edited 11 times in total.
Image
Phantom

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Phantom »

Lovely guide! Wish you made this before I did this along time ago:
Image
User avatar
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by E.D.Revolution »

You have to save it in PNG first. If you save straight to GIF (like yours), the quality is automatically lowered.
Image
Phantom

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Phantom »

Yeah, i did do that.
User avatar
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by E.D.Revolution »

Then I wonder how your VS Sprite ended up being, umm, flushed...
Image
User avatar
LunchPolice
Posts: 2357
Joined: Sat May 22, 2010 1:05 am
Gender: Male
Spoken languages: English, Namekian, Pezazulian
Location: New Zealand
Contact:

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by LunchPolice »

Must be a bad host website.
I make stuff sometimes
Image trophy x 5
MIND-FREAK
User avatar
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by E.D.Revolution »

Host site has nothing to do with quality. I'm using DropBox too, you know, and it's not affecting the quality of my pics.
Image
Phantom

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Phantom »

E.D.Revolution wrote:Then I wonder how your VS Sprite ended up being, umm, flushed...
I think I mustve made it glow in paint.net or something, not sure cuz i was playing around with it.
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Dypo deLina »

I'm still wondering why Phoenix's hair is gray at the end. Is he getting old? xD
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
Phantom

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Phantom »

Yeah, it was meant to reflect the time after 7 years and his aging being quicker thanks to the events that made him a hobo
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Dypo deLina »

Ah, yes, I see. And you used a shade that was already present in one of his DA sprites, didn't you?
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Hikari Yamija »

Oh~, nice guide. Maybe I'll create some animated VS. screen.
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
Phantom

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Phantom »

Dypo wrote:Ah, yes, I see. And you used a shade that was already present in one of his DA sprites, didn't you?
What you mean?
User avatar
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by E.D.Revolution »

Wait a sec Phantom. Are you pulling an Anderson Cooper on PW? (Anderson Cooper has white hair at age 43, had started going platinum white at quite a young age)
Image
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Spriters' Guide: Making an AAI style VS. Screen

Post by Dypo deLina »

I mean you used another colour that had already been used at one place in Phoenix's normal hair.
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
Post Reply