So uh ... I made this thing. I don't really know what to call it, or if anyone other than me would get any actual use out of it ... but I figured I'd share it anyways because why the hell not.
I wrote this code partially to help me with a project I was doing, and partially just because I haven't coded anything in a long while and I was starting to get really rusty. I enjoy just messin' around with web code to make weird useless crap like this.
Anyways, basically what this does is it takes screenshots of 8-bit games, and quickly finds and returns all the unique 16x16 tiles. The point being to help you collect tilesets for games without you missing anything or having to "eyeball" which tiles are actually unique in an image.
Let me explain how it works.
Step 1: Create a bunch of screenshots for your game of choice. Make it easier on yourself by using an emulator that has a screenshot function built into it. For best results it should save the screenshots as PNGs.
Step 2: Upload a screenshot. You'll get a screen that looks something like this:
(I'm using Kirby's Dream Land 2 in these examples)
![[Image: Demo1.png]]()
Step 3: Fiddle with the offsets until the tiles in the screenshot look correctly lined up in the squares.
![[Image: Demo2.png]]()
Step 4: Press the "Process Image" button. The results will check each tile in the image against both all the rest of the tiles in the current image, as well as any tiles you may have already collected from other screenshots, and return which tiles it deems unique. It will look something like this:
![[Image: Demo3.png]]()
You'll notice in my example, the door tiles and the solid white tiles were ignored. The reason is because I already obtained those tiles from a previous screenshot I processed.
Step 5: Click on any tiles you do not want to keep. Usually this means any tiles that are covered up by sprites, as well as the HUD. When clicked they will fade out like this:
![[Image: Demo4.png]]()
Afterwards click "Keep Selected tiles". You can also click "Remove Image" if it turns out there is nothing of value.
Step 6: Unwanted tiles will be deleted, unique tiles will be added to your overall collection. You'll see a screen similar to this:
![[Image: Demo5.png]]()
In this example you can see I already sorted some files from previous screenshots.
Now this is where things slow down a bit. Unfortunately, creating drag-and-drop forms is a bit outside my ability at the moment. If you want to move a tile onto the tilesheet, you have to click the tile you want to move, click the location you want to move it to, and click the "Swap Two Tiles" button. You can also swap two tiles within the sorted sheet itself this way.
Granted, you don't HAVE to do it this way. You could not use the sorter at all, and just keep collecting screenshots and screenshots worth of tiles into the Unsorted Tiles, then just take a screenshot and use an outside paint program to move them by hand. Though honestly I don't think doing it that way is really any faster, so it's just a matter of preference thing.
The "Clear All Unsorted Tiles" button deletes any tiles you have yet to sort. Useful if you accidentally saved some garbage that you didn't intend to.
Finally the "Convert Current Sheet to Image" button does just what it says. It turns your sorted tiles into a PNG image which you can save to your computer in the usual fashion. The final product looks something like this:
![[Image: Demo6.png]]()
If this thing interests you at all, you can use it here:
http://www.jermungandr.net/experiments/8bit-tilechop/
If you want to see how I coded it, you can download the files here:
http://www.jermungandr.net/experiments/8...p/demo.rar
Feel free to copy it, improve it, upload it somewhere else, I don't care. If someone wants to make an offline java-or-whatever version of this, feel free. Just post it here so I can see it.
Please tell me if you run into any errors. I will also listen to any suggestions on how to improve it. Likewise if anyone has any suggestions for any future projects I would be happy to consider them. If people like stuff like this I'll probably use this topic to post more of my experiments like this.
I wrote this code partially to help me with a project I was doing, and partially just because I haven't coded anything in a long while and I was starting to get really rusty. I enjoy just messin' around with web code to make weird useless crap like this.
Anyways, basically what this does is it takes screenshots of 8-bit games, and quickly finds and returns all the unique 16x16 tiles. The point being to help you collect tilesets for games without you missing anything or having to "eyeball" which tiles are actually unique in an image.
Let me explain how it works.
Step 1: Create a bunch of screenshots for your game of choice. Make it easier on yourself by using an emulator that has a screenshot function built into it. For best results it should save the screenshots as PNGs.
Step 2: Upload a screenshot. You'll get a screen that looks something like this:
(I'm using Kirby's Dream Land 2 in these examples)
![[Image: Demo1.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo1.png)
Step 3: Fiddle with the offsets until the tiles in the screenshot look correctly lined up in the squares.
![[Image: Demo2.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo2.png)
Step 4: Press the "Process Image" button. The results will check each tile in the image against both all the rest of the tiles in the current image, as well as any tiles you may have already collected from other screenshots, and return which tiles it deems unique. It will look something like this:
![[Image: Demo3.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo3.png)
You'll notice in my example, the door tiles and the solid white tiles were ignored. The reason is because I already obtained those tiles from a previous screenshot I processed.
Step 5: Click on any tiles you do not want to keep. Usually this means any tiles that are covered up by sprites, as well as the HUD. When clicked they will fade out like this:
![[Image: Demo4.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo4.png)
Afterwards click "Keep Selected tiles". You can also click "Remove Image" if it turns out there is nothing of value.
Step 6: Unwanted tiles will be deleted, unique tiles will be added to your overall collection. You'll see a screen similar to this:
![[Image: Demo5.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo5.png)
In this example you can see I already sorted some files from previous screenshots.
Now this is where things slow down a bit. Unfortunately, creating drag-and-drop forms is a bit outside my ability at the moment. If you want to move a tile onto the tilesheet, you have to click the tile you want to move, click the location you want to move it to, and click the "Swap Two Tiles" button. You can also swap two tiles within the sorted sheet itself this way.
Granted, you don't HAVE to do it this way. You could not use the sorter at all, and just keep collecting screenshots and screenshots worth of tiles into the Unsorted Tiles, then just take a screenshot and use an outside paint program to move them by hand. Though honestly I don't think doing it that way is really any faster, so it's just a matter of preference thing.
The "Clear All Unsorted Tiles" button deletes any tiles you have yet to sort. Useful if you accidentally saved some garbage that you didn't intend to.
Finally the "Convert Current Sheet to Image" button does just what it says. It turns your sorted tiles into a PNG image which you can save to your computer in the usual fashion. The final product looks something like this:
![[Image: Demo6.png]](http://www.jermungandr.net/experiments/8bit-tilechop/Demo6.png)
If this thing interests you at all, you can use it here:
http://www.jermungandr.net/experiments/8bit-tilechop/
If you want to see how I coded it, you can download the files here:
http://www.jermungandr.net/experiments/8...p/demo.rar
Feel free to copy it, improve it, upload it somewhere else, I don't care. If someone wants to make an offline java-or-whatever version of this, feel free. Just post it here so I can see it.
Please tell me if you run into any errors. I will also listen to any suggestions on how to improve it. Likewise if anyone has any suggestions for any future projects I would be happy to consider them. If people like stuff like this I'll probably use this topic to post more of my experiments like this.