Streets of Girls: Beat em Up using AI Shoujo characters (2 Viewers)

[slayer]

Download the current version (0.24) to play



For some time I've been wondering about the potential to be tapped out of software such as AI Shoujo in order to create beat 'em up characters. So, today I spent a while and imported a character created there into the classic Beats of Rage. Since I imported the files in somewhat of a hurry, some sprites are out of proportion (besides the fact that I wanted to scale the characters up for more detail) and a couple of anchor porints and bounding boxes are messy, but it sort of works. I'm wondering as to who may be interested in participating in a completely new asset beat em up using that engine.

The link to download the test:

Streets of Girls - 0.24

MediaFire is a simple to use free service that lets you put all your photos, documents, music, and video in a single place so you can access them anywhere and share them everywhere.

www.mediafire.com

The girls are waiting for you...

 

[Tsukachan]

For some time I've been wondering about the potential to be tapped out of software such as AI Shoujo in order to create beat 'em up characters. So, today I spent a while and imported a character created there into the classic Beats of Rage. Since I imported the files in somewhat of a hurry, some sprites are out of proportion (besides the fact that I wanted to scale the characters up for more detail) and a couple of anchor porints and bounding boxes are messy, but it sort of works. I'm wondering as to who may be interested in participating in a completely new asset beat em up using that engine.

The link to download the test:

BOR - AISyoujyo

MediaFire is a simple to use free service that lets you put all your photos, documents, music, and video in a single place so you can access them anywhere and share them everywhere.

www.mediafire.com

The sprite looks gigantic. Can you resize it?

 

[Weoooo]

I made a whole dang thread about this that... I probably shouldn't have let die

This is very much possible, but I can see you ran into the immediate issues I did!

1: getting the colors down to 256 is difficult with a detailed model. It ends up looking washed out. I still haven't figured out the best solution to this.
2: Sprite sizes are... an issue. The highest internal resolution the game can get vertically is 600, in an 800X600 format. It's real hard to keep definitions of stuff when you resize down that far. You CAN go the China Warrior route, I suppose, but that makes it really hard to have interesting enemy behavior.

All in all, this is totally doable, but requires a deft hand and understanding of graphics that I, quite frankly, do not have at this moment! So I've instead been focusing my BOR ideas into understanding enemy behavior and figuring out cheap ways to get around things that could be difficult, as well as looking into just how much my idea of a hot scenario actually is to play. Personally I think it's good! It's fun to knock down enemies easily and watch them squirm around. I was inspired by Legend of Double Dragon to try foolin' with different hit reactions leading to different recoveries, but that requires me to know which hit reaction is which and that's a matter of reverse engineering at the moment.

 

[Wagles]

Any chance you have an example of a detailed model? I'd love to take a stab and see if I can hash out something manageable. Just a single picture if anything as a test.

 

[Weoooo]

Yeah sure, here's a few 1080 shots I tried to index and shrink down that I had the biggest problem with showing the point of, usually small bits in the expressions that just did NOT come through. The average size of a BOR sprite is probably KoF up to 11, and that has a lot to do with the sheer variety of fan stuff created around those characters.

 

[Wagles]

Yeah, a lot of detail gets lost once you start shrinking things down unfortunately. Let me know what your take on this is.

Scaled resolution down relative to height(175)

Edit: 3_350, scaled resolution down to 350 instead.

 

[Weoooo]

Hmm... manually highlighting the expressions isn't something I had thought of. That's smart! With a few bold colors and lines you can get across what gets lost. Or using a black/white palette to get them and overlaying that. With a red for the lips and maybe a pixel of color for the eyes, you could get a good effect.

I think the real issue here is that automating the process isn't going to work, since they'll gladly throw in a million colors when the way small pixel stuff works is through big changes with small amounts of colors.

 

[Wagles]

Yeah, can't quite say it was automated but just a recap of my steps taken using GIMP:

1. Duplicate layer(x2)
2. Add a new layer with white background, prop it under the duplicate layer and merge the two
3. Filter > Photocopy
   1. I can include parameters if there's interest, this'll create the outline across the entire character
   2. It might be fare better to just make a selection on the facial expressions and run this filter
   3. For reference, I erased all of the outline except for the facial expression, otherwise you'd see black lines across the "edges" of the character
4. Colors > Threshold
   1. This slightly helps clean up the excess artifacts
   2. Note if we use just do a selection on the facial expression we might be able to avoid this step altogether
5. Filter > Noise Reduction x2
6. Filter > Sharpen
7. Set the mode for the layer to Multiply
   1. This will overlay the outline over the layer beneath and remove all of the white
8. Return to the other duplicate layer that was created
9. Filter > Gaussian Blur
10. Color > Posterize > 12
    1. The two above steps will help create a consistent shading as opposed to create an artifacted/pixelated shading, also drops the color count down
11. Merge the outline layer with the posterized layer
12. Rescale image to 175/350 height(pixel)
13. Filter > Sharpen
14. Set the mode for this layer to Overlay
    1. Edit: I forgot this step earlier and this will just overlay on top of the original image, this step might be skippable actually

There's always probably a cleaner way to do this, but these were the steps I took. Hope that helps!

Edit: *With* that being said, I'm fairly certain there's an automation process available in GIMP that I've never dabbled with. All of these actions excluding the facial expression could probably compiled into a simple script to execute?

 

[Weoooo]

No no, I mean the color indexing. I could tell you did a bunch, even though I didn't know what it was. It settled out to looking light a manual highlight of expressions in black to me, cause I don't know shit about this shit

A big problem always ends up that when it gets small, computers still want lots of colors. This is a problem since the whole way sprite stuff works is through a small selection with big changes so you can notice details like eyes and mouths doing things. I don't know how the hell to NOT automate that. I guess create a palette first? But I donno how to know what should be there.

 

[Wagles]

No no, I mean the color indexing. I could tell you did a bunch, even though I didn't know what it was. It settled out to looking light a manual highlight of expressions in black to me, cause I don't know shit about this shit

A big problem always ends up that when it gets small, computers still want lots of colors. This is a problem since the whole way sprite stuff works is through a small selection with big changes so you can notice details like eyes and mouths doing things. I don't know how the hell to NOT automate that. I guess create a palette first? But I donno how to know what should be there.

So for the color indexing, I think you might be referring to the Gaussian Blur / Posterize portions (steps 9 and 10). The gaussian blur helps mix adjacent colors(unfortunately it creates the fuzzy edges) and the posterize then reduces the number of colors automatically. I didn't actually do color indexing, although there is an index option to do so as well that could be leveraged if you want to use a palette as the results may vary using gaussian blur > posterize. So yeah, actually you could create a palette and use the index option. maybe even create the palette based on the end result of the first image processed so you can make it more consistent across the set. Instead of utilizing posterize in step 10, use indexed mode with the palette you created.

Automating highlighting expressions though, that is something I wasn't able to do unfortunately.

 

[horatiojones80]

1: getting the colors down to 256 is difficult with a detailed model. It ends up looking washed out. I still haven't figured out the best solution to this.
2: Sprite sizes are... an issue. The highest internal resolution the game can get vertically is 600, in an 800X600 format. It's real hard to keep definitions of stuff when you resize down that far. You CAN go the China Warrior route, I suppose, but that makes it really hard to have interesting enemy behavior.

God do I feel this pain. DOOM modding was a massive pain. Pixel art is a lot more difficult than it looks. I just trace things over with aggressive lines and fill them in with super simple colors. I still don't have a good process for scaling. A good option is using inkscape to convert your lines to an SVG, then scaling there, then exporting that to a .png and refilling it. It's a lot of steps for one image, especially if you are dealing with sprite animations.

 

[Wagles]

Speaking of Inkscape, you might be able to leverage that to get outlines on specific parts of the body when you import the image into there but its not something I've tried extensively. Its definitely very easy to get an outline of an object by selecting multiple objects, making sure they're ungrouped and then do a Path > Union.



Worth a shot but also still a manual process unfortunately.

Agree, regarding pixel art(and just art in general) People make it seem so easy even with simplistic designs but man, when it comes to doing it yourself, its a lot harder than it looks.

Also, just for reference, here's a before/after of an AI generated image after I've run it through the steps I previously listed in GIMP, excluding the manual cleanup of all the other lines. It doesn't outline everything unfortunately and only certain hard edges, but it may or may not be something worth trying on your end.

Edit: Formatting because I don't know how links work just yet.

 

[jettmanas]

Ambitious, and great idea. Glad to seem some interest in it, including technical advice.

 

[slayer]

I had some spare time and added a second girl enemy.

Thanks a lot for the replies! I'll now concentrate on answering them as well.


Experiment Verison 0.02

 

[slayer]

The sprite looks gigantic. Can you resize it?

I could do the BOR mod with the standard character sprite size, but I fear it would lose much detail, since this isn't pixel art.

I made a whole dang thread about this that... I probably shouldn't have let die

I'm sorry for not checking!

This is very much possible, but I can see you ran into the immediate issues I did!

1: getting the colors down to 256 is difficult with a detailed model. It ends up looking washed out. I still haven't figured out the best solution to this.

I don't think there is a quick and clean solution to this. If every character could have its own palette things would be different, but I guess that would require to remake the whole engine altogether.

2: Sprite sizes are... an issue. The highest internal resolution the game can get vertically is 600, in an 800X600 format. It's real hard to keep definitions of stuff when you resize down that far. You CAN go the China Warrior route, I suppose, but that makes it really hard to have interesting enemy behavior.

Since the goal of this project is to bring down zakos, and playability is not a main concern, I don't think large sprites are problematic (but of course this is subjective).

All in all, this is totally doable, but requires a deft hand and understanding of graphics that I, quite frankly, do not have at this moment! So I've instead been focusing my BOR ideas into understanding enemy behavior and figuring out cheap ways to get around things that could be difficult, as well as looking into just how much my idea of a hot scenario actually is to play. Personally I think it's good! It's fun to knock down enemies easily and watch them squirm around. I was inspired by Legend of Double Dragon to try foolin' with different hit reactions leading to different recoveries, but that requires me to know which hit reaction is which and that's a matter of reverse engineering at the moment.

Thanks a lot for your feedback!

Yeah, can't quite say it was automated but just a recap of my steps taken using GIMP:

1. Duplicate layer(x2)
2. Add a new layer with white background, prop it under the duplicate layer and merge the two
3. Filter > Photocopy
   1. I can include parameters if there's interest, this'll create the outline across the entire character
   2. It might be fare better to just make a selection on the facial expressions and run this filter
   3. For reference, I erased all of the outline except for the facial expression, otherwise you'd see black lines across the "edges" of the character
4. Colors > Threshold
   1. This slightly helps clean up the excess artifacts
   2. Note if we use just do a selection on the facial expression we might be able to avoid this step altogether
5. Filter > Noise Reduction x2
6. Filter > Sharpen
7. Set the mode for the layer to Multiply
   1. This will overlay the outline over the layer beneath and remove all of the white
8. Return to the other duplicate layer that was created
9. Filter > Gaussian Blur
10. Color > Posterize > 12
    1. The two above steps will help create a consistent shading as opposed to create an artifacted/pixelated shading, also drops the color count down
11. Merge the outline layer with the posterized layer
12. Rescale image to 175/350 height(pixel)
13. Filter > Sharpen
14. Set the mode for this layer to Overlay
    1. Edit: I forgot this step earlier and this will just overlay on top of the original image, this step might be skippable actually

There's always probably a cleaner way to do this, but these were the steps I took. Hope that helps!

Thanks for sharing your automation process!

So for the color indexing, I think you might be referring to the Gaussian Blur / Posterize portions (steps 9 and 10). The gaussian blur helps mix adjacent colors(unfortunately it creates the fuzzy edges) and the posterize then reduces the number of colors automatically. I didn't actually do color indexing, although there is an index option to do so as well that could be leveraged if you want to use a palette as the results may vary using gaussian blur > posterize. So yeah, actually you could create a palette and use the index option. maybe even create the palette based on the end result of the first image processed so you can make it more consistent across the set. Instead of utilizing posterize in step 10, use indexed mode with the palette you created.

Automating highlighting expressions though, that is something I wasn't able to do unfortunately.

Gaussian blur or not is an aesthetic decision that should be made at the beginning of a project, since characters with different processes would look odd, I believe.

God do I feel this pain. DOOM modding was a massive pain. Pixel art is a lot more difficult than it looks. I just trace things over with aggressive lines and fill them in with super simple colors. I still don't have a good process for scaling. A good option is using inkscape to convert your lines to an SVG, then scaling there, then exporting that to a .png and refilling it. It's a lot of steps for one image, especially if you are dealing with sprite animations.

Thanks for sharing your experience!

Speaking of Inkscape, you might be able to leverage that to get outlines on specific parts of the body when you import the image into there but its not something I've tried extensively. Its definitely very easy to get an outline of an object by selecting multiple objects, making sure they're ungrouped and then do a Path > Union.



Worth a shot but also still a manual process unfortunately.

Agree, regarding pixel art(and just art in general) People make it seem so easy even with simplistic designs but man, when it comes to doing it yourself, its a lot harder than it looks.

Also, just for reference, here's a before/after of an AI generated image after I've run it through the steps I previously listed in GIMP, excluding the manual cleanup of all the other lines. It doesn't outline everything unfortunately and only certain hard edges, but it may or may not be something worth trying on your end.

Interesting. I'll have to look into it!

Ambitious, and great idea. Glad to seem some interest in it, including technical advice.

Thanks! And yes, I'm glad some are interested in the idea, it helps me move forward in the project.

 

[slayer]

I'd like to improve the anchor point and bounding boxes. I know for a fact that once I ran a character editor that displayed the box rectangle neatly, and the base of che character. I've been, however unable to recover it. Does anybody maybe know about it? Thanks!

 

[Weoooo]

I'd like to improve the anchor point and bounding boxes. I know for a fact that once I ran a character editor that displayed the box rectangle neatly, and the base of che character. I've been, however unable to recover it. Does anybody maybe know about it? Thanks!

P sure it's this: Chronocrash Modders Tools

 

[slayer]

I think I used a more basic one (over a decade ago) so thanks a lot for the link! :)

 

[slayer]

I had a while available and decided to try Chronocrash Modders Tools. Thanks again for the link, Weoooo !
I used that software to relocate the models' offsets. Unfortunately, when I save a model txt with that software, it leaves boxes a new, unknown format. Let me show you the modified code to illustrate:

Spoiler: Character's Box Code, before and after saving

anim idle
loop 1
delay 1
offset 54 190
bbox 20 10 68 188
frame data/chars/Karen/KarIdle001.gif
frame data/chars/Karen/KarIdle002.gif
frame data/chars/Karen/KarIdle003.gif
frame data/chars/Karen/KarIdle004.gif
frame data/chars/Karen/KarIdle005.gif
frame data/chars/Karen/KarIdle006.gif
frame data/chars/Karen/KarIdle007.gif
frame data/chars/Karen/KarIdle008.gif
frame data/chars/Karen/KarIdle009.gif
frame data/chars/Karen/KarIdle010.gif
(...)
anim idle
loop 1
delay 1
offset 54 190
bbox.position.x 36
bbox.position.y 24
bbox.size.x 96
bbox.size.y 269
frame data/chars/Karen/KarIdle001.gif
frame data/chars/Karen/KarIdle002.gif
frame data/chars/Karen/KarIdle003.gif
frame data/chars/Karen/KarIdle004.gif
frame data/chars/Karen/KarIdle005.gif
frame data/chars/Karen/KarIdle006.gif
frame data/chars/Karen/KarIdle007.gif
frame data/chars/Karen/KarIdle008.gif
frame data/chars/Karen/KarIdle009.gif
frame data/chars/Karen/KarIdle010.gif
(...)

OpenBOR won't open that new format. Most unfortunate.

In any case, for those who want to try and beat up some zako, here is the corrected current prototype version:

Download Playable Beat Em Up Experiment

If someone has already downloaded it and want to simply copy the new two txt files, I attached them here as well.

 

[Tsukachan]

I had a while available and decided to try Chronocrash Modders Tools. Thanks again for the link, Weoooo !
I used that software to relocate the models' offsets. Unfortunately, when I save a model txt with that software, it leaves boxes a new, unknown format. Let me show you the modified code to illustrate:

Spoiler: Character's Box Code, before and after saving

anim idle
loop 1
delay 1
offset 54 190
bbox 20 10 68 188
frame data/chars/Karen/KarIdle001.gif
frame data/chars/Karen/KarIdle002.gif
frame data/chars/Karen/KarIdle003.gif
frame data/chars/Karen/KarIdle004.gif
frame data/chars/Karen/KarIdle005.gif
frame data/chars/Karen/KarIdle006.gif
frame data/chars/Karen/KarIdle007.gif
frame data/chars/Karen/KarIdle008.gif
frame data/chars/Karen/KarIdle009.gif
frame data/chars/Karen/KarIdle010.gif
(...)
anim idle
loop 1
delay 1
offset 54 190
bbox.position.x 36
bbox.position.y 24
bbox.size.x 96
bbox.size.y 269
frame data/chars/Karen/KarIdle001.gif
frame data/chars/Karen/KarIdle002.gif
frame data/chars/Karen/KarIdle003.gif
frame data/chars/Karen/KarIdle004.gif
frame data/chars/Karen/KarIdle005.gif
frame data/chars/Karen/KarIdle006.gif
frame data/chars/Karen/KarIdle007.gif
frame data/chars/Karen/KarIdle008.gif
frame data/chars/Karen/KarIdle009.gif
frame data/chars/Karen/KarIdle010.gif
(...)

OpenBOR won't open that new format. Most unfortunate.

In any case, for those who want to try and beat up some zako, here is the corrected current prototype version:

Download Playable Beat Em Up Experiment

If someone has already downloaded it and want to simply copy the new two txt files, I attached them here as well.

I'll try it, and I hope we can do a beat 'em up game together with me and my Koikatsu charas.