|
|
#1 |
|
Homebrew Developer
![]() 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. |
|
|
|
|
Likes: (5) |
|
|
#2 |
|
Homebrew Developer
![]() Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
|
for those that may be confused - take a look at the /data/characters and /data/players folders they help alot to know what you need
Last edited by lunuxx; 08-11-2011 at 11:34 PM. |
|
|
|
|
|
#3 |
|
Homebrew Developer
![]() Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
|
here is a video of a character i put together pretty fast using this info - nothing advanced this was a 15 minute job - I have left some things in for you to notice - when you see peter fall you see his background this comes from ripping mugen sprites w/ sffextract. The background needs to be changed to RGB 255,0,255 so the background will become transparent. build and test on your pc then play it on your ps3! I will finish peter and solid snake for use in adventure mode soon
paintown - peter griffin test - YouTube |
|
|
|
|
|
#4 |
|
Homebrew Developer
![]() Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
|
updated tutorial with more thorough text tutorial
|
|
|
|
|
Likes: (1) |
|
|
#5 |
|
Homebrew Developer
![]() Join Date: Jan 2011
Location: dev_hdd0/game/BLUS31011 :)
Posts: 1,829
Likes: 1,027
Liked 1,367 Times in 629 Posts
Mentioned: 374 Post(s)
Tagged: 0 Thread(s)
|
Thanks ,This is a great tut .. oh ,I have to rip this 4 sure to a .PDF
This will help out Big time ! I would thank you again ,but i already did lol..
__________________
|
|
|
|
|
|
#6 |
|
Homebrew Developer
![]() Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
|
Updated tutorial with Imagemagic command to convert all sprites to png and have transparent background using one command instead of a million gimp steps and hours of waisted time
|
|
|
|
|
Likes: (1) |
|
|
#7 |
|
Homebrew Developer
![]() Join Date: Jun 2011
Posts: 175
Likes: 33
Liked 207 Times in 76 Posts
Mentioned: 21 Post(s)
Tagged: 0 Thread(s)
|
sorry about the images being gone I lost them all when my server crashed will upload some new ones very soon
|
|
|
|
![]() |
| Bookmarks |
| Thread Tools | |
|
|