Main Menu

Fun Idea: Sprite Rips

Started by LemonWizard, June 01, 2011, 08:21:42 AM

Previous topic - Next topic

LemonWizard




This is a new post basically showing off where I'm going with this whole sprite ripping thing.

As I said in my other posts below this one, I have a life long mission to remake all of the donkey kong country 2 game and I have faith playbasic is more than capable of well...emulating it's gameplay in a sense.=p

So. Here's some eye candy, for those retro fans it should give you an idea of what this project is all about. :D





The idea here is that I'm remaking Donkey Kong Country 2, with a twist.
KNUCKLES! because I like Knuckles the Echidna, and it'd be cool to play as him INSIDE DKC2
no amount of rom hacking can achieve this as I feel would hold true to the sonic series. and the DKC2 gameplay.
So I'm doing it myself!!

I'm making a debug mode and already programming in some of the game's basic mechanics.
Like Squitter!! The spider dude.. and hook/platforms.
Gameplay controls for characters will come last.
This is my first revision, and after this the project will need to be seriously re coded.
So I might call it Donkey Kong Country 2 AND Knuckles, Re coded after first release. or something cool..
I dunno.

Who knows but if I get a good fanbase while in dev then I can launch it for public eyes.
No other secrets yet.
If you want to know what this game'll be about , basically you get to play as knuckles through DKC2's levels.
ALL OF THEM.












OLD:

Quote


Sorry if the image files are too large.
Basically where to start.
This is a program I made which features the ability to load up an image, then, select areas of it to become frames for a spritesheet.
Then, when your done and you hit ten frames, you can press the space key and it previews the animation.
It doesn't save right now, but it will later.
I need this tool for some of my projects because I'm tired of having to use paint or Gimp to extract sprites from spritesheets one at a time.
Later on I might write some code to automate the task even more.. maybe check for black pixels against background color of image and cut out all the "whitespace" of the image so the actual minimum size of the sprite you selected is there. Then centering.. Oh boy.
All this trouble JUST because people who rip sprites can't take even more time to make nice sprite sheets for us to use.

Now while I understand there's probably a program that can do this already and alot of spritesheets that are well done, it's still a nice tool to have.

So enjoy !

Please note: It needs modification to work as intended. But the features I explained work



!! Does not save.
PlayBASIC Code: [Select]
; PROJECT : Frame capture
; AUTHOR : Kasumi
; CREATED : 6/1/2011
; EDITED : 6/1/2011
; ---------------------------------------------------------------------
openscreen 1024, 768, 32, 1

cls rgb(255, 255, 255)
ink rgb(0,0,0)

print "Instructions: "

print "Use the left mouse button to select the first coordinate"
print "Drag, but don't hold from there."
print "When you are happy with your square or frame selection, use the right mouse button"
print "The system will move onto the next frame for you and show you the previous one"
print "When you're all done, and you've moved to frame 10. Press the space key to preview"

Print "This utility is made for ripping sprites from spritesheets that ARENT Sprited correctly"
print "Thank you. --LemonWizard"


print "--------------------------press the up key to continue----------------"

check:
sync
if upkey()
cont=true
else
goto check
endif



newframe=false
currentframe=1
//Frame Capture program:
x=loadnewfximage("diddy.bmp")
rendertoimage x
transparent=point(1,1)
imagemaskcolour x, transparent
rendertoscreen
dim frames(10)
for temp=1 to 10
frames(temp)=newfximage(100, 100)
next temp







type animation
frames(10)

endtype


dim anim as animation


dim frames(10)
for temp=1 to 10
anim.frames(temp)=newfximage(100, 100)
next temp





main:

drawimage x, 0, 0, 1

if newframe=false
if leftmousebutton()

newframex=mousex()
newframey=mousey()
newframe=true
endif
endif





if newframe=true
ink rgb(0, 255, 0)

box newframex, newframey, mousex(), mousey(), 0



if rightmousebutton()

newframex2=mousex()
newframey2=mousey()
newframe=false
if currentframe<=10
getimage anim.frames(currentframe), newframex, newframey, newframex2, newframey2
currentframe=currentframe+1
if currentframe>10 then currentframe=10

endif

endif
endif

setcursor 600, 200
print "Previous frame"
box 600, 200, 700, 300, 0
if currentframe>1
if testing=false
drawimage anim.frames(currentframe-1), 600, 200, 1
endif

endif




dot mousex(), mousey()


if spacekey()
testing=true
endif


if testing=true
if timer()>testtimer
testtimer=timer()+100
currentframe=currentframe+1
endif

if currentframe>10 then currentframe=1
drawimage anim.frames(currentframe), 600, 200, 1


endif


print currentframe
print "Current frame"


Login required to view complete source code




LemonWizard

#1
Additions:

-You can now save
-It exports seperate frames
-You can now choose how many frames you want before starting the program
-It attempts to auto clip white space.








Update:






Okay, people. I have added the option to save your bitmap frames now.
There is one thing that I wish I had so far. That is to integrate this into flexGUI and then have a file open/save dialogue.
As well, as a way to compress the following into a "project" file.

Frame coordinate data
Clipping data
Image filename /path :the originating image for getting frames.

That way the project could be loaded up again.
As I'm on a life long mission to eventually remake the entire donkey kong country series, starting with number one.
I NEED sprite rips.

I got an idea today though. If anyone is willing to help me clip some spritesheets with the aid of this program then make sure they are "aligned" properly that'd be sweet. They need to animate smoothly.
Another note. If you do help, just keep in mind, the clipping in this program so far isn't "perfected"
The frame images still require "some" editing to look right.
Especially with Diddy Kong's sprites. >.>

I think , certain sprite ripping fanatics and flash designers would actually love this little utility.
Don't worry though I plan on developing it until it's near perfect.


One issue I"m having with diddy's sprites and my program is that his standing position starts offset to the left.
And when he's turned facing foreward, his tail only has a few pixels of whitespace. But that whitespace, including his tail length needs to be accounted for:



Example:




I have two algorithms in place.
The first one takes the whitespace at the left and top side, and calculates the most whitespace for each image.
It attempts to center frames, based on whitespace clipping distance assuming the first pixel from the left and the first one from the top (going down), is where the image's whitespace ends.

If frame 1 has 10 pixels of white space
Frame 2 has 5 pixels of white space
and frame 3 has 8 pixels of white space

The resulting algorithm will take the offset of each image, and subtract it from the maximum offset found among all images (being Frame 1 having 10 pixels)

And do this:

Redraw each frame, into a new blank image taking into account whitespace and adding an offset.
The offset is : trueleftoffset (in this case being 10)-offsets(temp, 1)
It draws the frames in order
Frame 1: X offset is 10-10
Frame 2: X offset is 10-5
Frame 3: 10-8

this would make every single frame have the same whitespace offset of 10. Because, it takes the WHOLE image, and adds whitespace until each image has the same amount of whitespace.
thus "centering" based on whitespace.

Neat huh? Unfortunately.. I didn't realize before the whitespace with diddy's tail and hat, isn't consistent through each frame, and the distance and proportioning is wierd..

SO example 1 needs to somehow become this:










Anyhow here's the updated code:
It's using the second algorithm I made, which is just to eliminate whitespace completely.
On attempts of hoping, each frame's beggining pixel on the top and left edges, are already "centered"
I find this doesn't work as well but what matters is that it speeds up the process of clipping images into frames from a spritesheet!

At any rate it's alot easier than manually copying/pasting from one image to another to separate images in a spritesheet. :D


PlayBASIC Code: [Select]
; PROJECT : Frame capture
; AUTHOR : Kasumi
; CREATED : 6/1/2011
; EDITED : 6/3/2011
; ---------------------------------------------------------------------
#Include "Input"
#include "savebitmap"


openscreen 1024, 768, 32, 1

cls rgb(255, 255, 255)
ink rgb(0,0,0)

print "Instructions: "

print "Use the left mouse button to select the first coordinate"
print "Drag, but don't hold from there."
print "When you are happy with your square or frame selection, use the right mouse button"
print "The system will move onto the next frame for you and show you the previous one"
print "When you're all done, and you've moved to frame 10. Press the space key to preview"

Print "This utility is made for ripping sprites from spritesheets that ARENT Sprited correctly"
print "Thank you. --LemonWizard"


temp$=staticinput("--------------How many frames do you want?? ")
frames=val(temp$)



print "--------------------------press the up key to continue----------------"

check:
sync
if upkey()
cont=true
else
goto check
endif



newframe=false
currentframe=1
//Frame Capture program:
x=loadnewfximage("diddy.bmp")
rendertoimage x
transparent=point(1,1)
imagemaskcolour x, transparent
rendertoscreen
dim frames(frames)
for temp=1 to frames
frames(temp)=newfximage(100, 100)
next temp
dim offsets(frames, 2)
currentframe=1






type animation
frames(frames)
leftoffset
rightoffset

endtype


dim anim as animation


dim frames(frames)
for temp=1 to frames
anim.frames(temp)=newfximage(100, 100)
next temp





main:

drawimage x, 0, 0, 1

if newframe=false
if leftmousebutton()

newframex=mousex()
newframey=mousey()
newframe=true
endif
endif





if newframe=true
ink rgb(0, 255, 0)

box newframex, newframey, mousex(), mousey(), 0



if rightmousebutton()

newframex2=mousex()
newframey2=mousey()
newframe=false
if currentframe<=frames
getimage anim.frames(currentframe), newframex, newframey, newframex2, newframey2
currentframe=currentframe+1
if currentframe>frames then currentframe=frames

endif

endif
endif

setcursor 600, 200
print "Previous frame"
box 600, 200, 700, 300, 0
if currentframe>1
if testing=false
drawimage anim.frames(currentframe-1), 600, 200, 1
endif

endif




dot mousex(), mousey()


if spacekey()
testing=true
endif


if testing=true
if timer()>testtimer
testtimer=timer()+100
currentframe=currentframe+1
endif
Login required to view complete source code


And finally.
The download to the updated compiled exe.



LemonWizard


And for those of you feeling fancy enough.
PLEASE try this program out on different spritesheets and tell me what your results are.
Post your screenshots here if you want to.
I'd really love it if I got some of the other community members on board with me on this one as it might require alot of user submissions.


If anyone is willing that is.
The benefit of this is towards my cause of making an outstanding game, even better.
feel free to mess around, and if you do get good results I'd love to see them.
You can download spritesheets at any website.
One thing to keep in mind, if you do want to use another spritesheet with this program you have to remove diddy.bmp from the folder and replace it with another image named the same and it also must be a bmp file.
That's it ^^;

Enjoy. Another update should be coming this week, which allows for manual centering with guidepoints. Just so you can move the image around inside the frame. And an option to transparently show the last frame in editing mode to ensure smoother animation dumps.

I think the sprite clipping with whitespace works but only to an extent.
This tool needs to give users the ability to clip manually as well or to select the area of center for an image! WOO! Okay.
Next up...
User screenshots/sprite dumps anyone?


Also: Requests for features you want this program to have? Know any spriters or sprite ripping type people? Ask them for ideas to!
The sky is the limit.


LemonWizard


okay so I figured out a problem after thinking about it for a long long time.
The problem is, you can't use just whitespace to figure out if a frame matches even slightly another frame.
I think.. I might create an alignment tool, which aligns center, top, left, and bottom.


Basically what it's going to do is it's going to pick one part of the sprite and use that as the centering point.
It's going to look for pixels through each frame that are similiar and center them based off of those matching pixels and get the offsets.

So say if you have the feet of a character, and some, and usually there always are SOME pixels in the image that match within a 10X10 or 15X10 area. It will use that to judge if the sprite is centered.
I'm also going to have to add a manual centering option.
But.. with that aside  for now I just want to get a working demo of my mini game up so I'm going to go hammering it manually.
The demo will be posted in this thread once I've done it.

and for all of you who are wondering.. the reaso sprite ripping can be so fun despite you know ... original works is because sometimes programming is easier if you have a graphical set. already...