View Single Post
Old 08-11-2011   #1
lunuxx
Homebrew Developer
 
lunuxx's Avatar
 
Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
Paintown - creating your own characters a turorial on the animation editor by jon

creating your own paintown characters - a tutorial - by jon rafkind - original doc located at -http://sourceforge.net/apps/trac/pai...reateCharacter
----sorry about the images being gone I lost them all when my server crashed will upload some new ones very soon This guide is currently being edited 01/06/2011-----

feel free to submit your characters for addition to the game on IRC
(irc.freenode.net #paintown)
{updated 2011/26/08 with easy one command convert of pcx files to png/transparent background using imagemagic saving hours of time}

precompiled animation editor latest 2011-12-31
http://sourceforge.net/projects/pain...r.jar/download

put the jar file in C:/Program Files/Paintown if on windows make sure it is in the same folder as the DATA directory!!

create your characters in data/players/ and disregard anything here that says not too.
On linux this process is much easier.

if you would like some sprites to practice with i have converted and uploaded peter griffins sprites-
converted:
http://www.multiupload.com/R134C4K8V1
not converted:
http://www.multiupload.com/6X456NWZ4A
things changed in the latest version include:
things moved around to free screen space up, actions (add frame, add attack etc) have been moved to an actions tab (next to properties), a tools menu (placed in the actions tab) contains options for onion skinning and adjust all offsets.
more to come

SEE BELOW THE VIDEOS FOR A FULL STEP BY STEP CREATING FROM SCRATCH
other useful info:

http://sourceforge.net/apps/trac/paintown/wiki

here is the video tutorial

Paintown Animation Editor - YouTube




video for ripping sprites
rip sprites for paintown - YouTube

--Since there is no audio for my sprite ripping video I will write some instrucitons below the pictorial here if needed---

needed tools:
sffextract (widows or linux)http://www.mugenguild.com/winane/software/index.html
gimp image editor - if you have windows get it here
http://www.gimp.org/windows/
if your on linux you know how to install it or you have it already
Imagemagic - For quick image conversion
http://www.imagemagick.org/script/bi...es.php#windows
Paintown animation tutorial

Ok guys I am going to show you step by step how to get started creating a character from sprites.

Creating Direcotries
Click here to see full text

First you need to create a folder Under the editor directory
so lets just make the folders like this under paintown/editor/
make folder editor/data/players/yourplayername
In this case I will be making peter so I will make a folder named "peter"






Ok next in the "peter" folder I am going to make 4 seperate folders that are the required states for the player to work in the game
(after you get the player to work you can start making attack moves or whatever)




ripping sprites:
Click here to see full text

Now I will save my mugen character here because that is what I am ripping the sprites from,
You can also find sprite bases online that are not mugen characters but just sprites.



Notice the .sff and .act files the sff file is what you will rip the sprites from
the .act file these are your color palette files more on those in a moment.





Now I will use sffextract to rip the sprites from the sff file



Notice a new folder has been created It contains all of the sprites that were just ripped.





Now whats with those act files? well lets see lets rename that folder to something else
so we dont overwrite our current sprites



Now use sffextract with the -a option and a palette file to check (example shown here)


Hey now we have peter in a different outfit!



One step image creation with image magic:
Click here to see full text

Now I will go over the imagemagic part for those that would like to convert the sprites quickly and not take hours:
Now I need to convert my image to an actual png and make the background transparent and make the image a png for use in the animation editor, this is
an easy way to do this with imagemagic. first ill show you the quick way
then ill show you the VERY long way using the gimp image editor. first open a pcx image file and
with the gimp. Then find the color of the background (use the tools -> color picker), then with
the color picker click the background on your character


you will see the color change on the toolbox to the color that you selected, click on that color


Clicking on the color will open the color changing tool, It will show you the html notation for
the color, note the html color ("HTML Notation"), you need this number


open up commandline and navigate to your imagemagic install directory, copy your spirte folder to
the imagemagic install directory if necissary.



create a folder in the sprite folder (this will keep your converted png files seperate and easier
to sort) I made a folder named converted in this image


run the imagemagic convert from commandline (windows cd to C:/Program files/imagemagic/) - might not be exact but along these lines
on windows it works like this:
convert.exe -fill "#ff00ff" -opaque "#008100" guile-color1/*.pcx guile-color1/convert/guile.png
the number "#008100" was the original background color the color you wanted to change to was "ff00ff"
(replace folder names with whatever yours are named)


That command will convert all the sprites in that folder to png/transparent backgrounds and
place them in the folder I named convert


copy animations:
Click here to see full text

Ok now I am going to select sprites that looks like they would make a good animation of my
character walking. Do this for the rest of the folders you made as well I am only going to go over walk now.



I copy those sprites to my characters walk directory



Converting images - the long way, (skip if you use imagemagic)
Click here to see full text

Next I rename them to simple names and change the file extention to png Notice walk1.png in order
of the movements to keep it simple and easy to remember.



Now I need to convert my image to an actual png and make the background transparent, There is
an easier way to do this with imagemagic if you have some l33t imagemagic skills. but for
beginners I'm using the gimp image editor which is a free program. I select all image files and open with the gimp. Then I click on the select by color tool.



Next I click on the background region in the image, which happens to be purple on this character.



After slecting the background I goto Image-->mode and slect RGB



Then Click on Tools-->GEGL Operation



as the operation type in the dropdown select color, then click on the color box



set R 255 G 0 B 255 as shown here and click ok



click ok on the GEGL operation and now the background should be pink transparent, you can close
The image and select to save it, just be sure to save the image as a png make sure the type is set
to png if it asks. PUT 2 IMAGES FROM YOUR IDLE DIRECTORY IN YOUR BASE CHARACTER FOLDER FOR REMAPS
AND RENAME THEM TO map1.png and map2.png also find an image small enough to be the icon for the players health bar
basically just under /editor/data/players/peter copy
idle1.png twice and rename it to map1.png and map2.png



load animation in editor:
Click here to see full text

Ok after you have your desired images open the animation editor select character-->New Character



complete the first section, Name your character, set health amount, jump speed, sounds and An ICON
which you also have to get from the sprites (icon should go in base directory like the maps)
Original map should be the original file you used to make the map1.png file so click change
and if you used idle1.png navigate the selector to players/peter/idle/idle1.png
Now click on New Animation.



Notice the new animation will appear in a tab on the left you can now drag the selector over as
shown in the video because we dont need that part at the moment until we need to add a new animation.
Name the animation in this case the name will be walk. We dont need to add any movement keys and
do not need to set the type at the moment because this is not an attack.
Set the base directory to the directory of the action, in this case we will set the directory
to data/players/peter/walk just highlight walk do not click into the directory from the selector
highlight it and click choose.
Now notice the two tabs Properties and events



Next we click over to the events tab, this is were you add options such as delay and attack etc from
the drop down box. Since we have set the base directory for this action we are going to click on
add frames, This will add all frames from the base directory that you set (data/players/peter/walk)








Now watch the animation editor tutorial



When done editing your character save the character as playername.txt (peter.txt) in the directory with all your folders (eg editor/data/players/peter/peter.txt) then copy the folder (peter) to
data/players/ so that it is in the GAMES data directory not the EDITORS data directory you created,
and test the character.

Last edited by lunuxx; 01-06-2012 at 10:38 AM.
lunuxx is offline   Reply With Quote
Likes: (5)