• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[DISCUSSION] 128x128 pixels Tibia sprites with AI (neural network)

Okay, I found something interesting. Maybe THIS could help us in refining Neural Network outputs. Since it's all command line based, it would be easy to develop an algorithm focused on polish Neural Network outputs. I'm still studying it, not sure if we can do what we need, but it would be great polishing all sprites with some kind of script.

4drik results with Photoshop are really nice, they do look great, but since I'm not PS user, not sure if we could easily implement any kind of algorithm to automate the process. Refining edges manually would be a very hard work. But, well, it's just my opinion, ofc i can be totally wrong.

@EDIT: Sure, tool's usage is pretty easy. But i don't know too much about image editing, so I'm stuck. Seens that "refine edges" 4drik used is a PS-only feature, didn't manage how to do it even in GIMP (a lot of tutorials on YouTube teach it, but it's not as good as 4drik results). If I could just manage how to refine edges manually, with a good result, then we could get a command for fix borders automatically (but seriously, GIMP results are very far from the PS ones).
 
Last edited:
I wrote simple image processing script in PHP to make images look better after resizing.
Current algorithm looks 1 px around and results aren't good. I will work on algorithm that will look for 'configurable' px around (resize x8 = 24 px) and try to find 'pixelated lines' to make them look smoother.

ORIGINAL TIBIA IMAGES TO COMPARE
items_processing_original.png


Results from left side:

1. Output of neural network
2. Pixels that script detects as 'not smooth' (check every 8 px, as we resized image 8 times)
3. 'not smooth' pixels filled with color taken from closest pixels (generates gradient)
4. with 3px border added


RESIZED 2x (64x64)
items_processing_v1_64.png


RESIZED 4x (128x128) - Tibia HD
items_processing_v1_128.png


RESIZED 8x (256x256) - Tibia 4K
items_processing_v1.png
 
Okay, I found something interesting. Maybe THIS could help us in refining Neural Network outputs. Since it's all command line based, it would be easy to develop an algorithm focused on polish Neural Network outputs. I'm still studying it, not sure if we can do what we need, but it would be great polishing all sprites with some kind of script.

4drik results with Photoshop are really nice, they do look great, but since I'm not PS user, not sure if we could easily implement any kind of algorithm to automate the process. Refining edges manually would be a very hard work. But, well, it's just my opinion, ofc i can be totally wrong.

@EDIT: Sure, tool's usage is pretty easy. But i don't know too much about image editing, so I'm stuck. Seens that "refine edges" 4drik used is a PS-only feature, didn't manage how to do it even in GIMP (a lot of tutorials on YouTube teach it, but it's not as good as 4drik results). If I could just manage how to refine edges manually, with a good result, then we could get a command for fix borders automatically (but seriously, GIMP results are very far from the PS ones).
Imagick is great. You could also use PHP for this matter; I wrote a library for extracting images out of websites and processing their backgrounds in imagick a while back. Alternatively, there is also GDLibrary.
 
Imagick is great. You could also use PHP for this matter; I wrote a library for extracting images out of websites and processing their backgrounds in imagick a while back. Alternatively, there is also GDLibrary.

Indeed. I'm still learning about it. I knew Image Magick from my time using Linux, but I didn't know its command line tools. Not hard to use, but I'm still out of lucky with "refine edges" in any another software different of Photoshop. I spent around 2 hours in GIMP... and got nothing. Already developed a small application to apply an imagick command for multiple files, but it doesn't matter if i can not find the right effect. Very simple usage, just for simple tasks.

 
Dude, this is incredible.
I know a little about C ++, Lua and OTClient, but I do not know if what I know is enough. And I do not know much English for great dialogue. Could make an OTClient using 64x64 sprites and after everything is working, put an option to select the resolution of the sprites
 
Last edited:
Indeed. I'm still learning about it. I knew Image Magick from my time using Linux, but I didn't know its command line tools. Not hard to use, but I'm still out of lucky with "refine edges" in any another software different of Photoshop. I spent around 2 hours in GIMP... and got nothing. Already developed a small application to apply an imagick command for multiple files, but it doesn't matter if i can not find the right effect. Very simple usage, just for simple tasks.

Basically, what I did what something like this:
PHP Imagick - backgroundMasking

If you wanna see my code, it was in PHP and GDLibrary both, let me know through pm. I will be glad to hand it over. Plus, I didn't understand the video :D
 
Basically, what I did what something like this:
PHP Imagick - backgroundMasking

If you wanna see my code, it was in PHP and GDLibrary both, let me know through pm. I will be glad to hand it over. Plus, I didn't understand the video :D
Very nice! Very interesting what you did... I'd love see your code, but i have not much knowledge in PHP. Learning PHP is in my plans, but since I work with something completely different, it's hard find some time.

Yeah, that video was a little fast. Actually, it's just a simple script to apply a imagick effect for how many images you'd like. Nothing complex at all. You could make it in any languague, even BAT or ShellScript. Since we have a lot of PNGs to refine edges, could be useful just type command once and let a script like this do all the job for all image files. So, we put in the TXT file the right command for refine edge, then choose number of files and run the script. It will apply the FX for all sprites. In that case, I used a negate + rotate, just for e.g.
 
Very interesting.
I was able to extract the .bmp's and process them using the algorithm, I now have all the needed 64x64 bmp's to be set up on the .spr and the client.
How do I proceed with this?
And do I need to use otclient or tibia client will do?
Thanks
 
Dude, this is incredible.
I know a little about C ++, Lua and OTClient, but I do not know if what I know is enough. And I do not know much English for great dialogue. Could make an OTClient using 64x64 sprites and after everything is working, put an option to select the resolution of the sprites
Could use this for something like item icon and bigger sprite inna description box
 
Gesior could you please fix the url images? I would love to see the results of your awesome work
 
Results of 'tibia images NN' are worse then 'anime images NN'. I don't know why. I will try to contact author of this NN implementation.
I will also search for some other NN implementation that we can adjust to tibia image requirements (32x32 px input) and increase number of NN 'layers'. Current implementation process 80x80 px images and uses 1.5GB RAM + 513MB on graphic card.

This week I will try to write some border-fixing algorithm to make all items smooth, not only these with black borders. I got few simple concepts that should give nice results for most of items.

@4drik
Try it with:
http://vpn.skalski.pro/items_nb/2420.png
and post results.
how is this going? closed?
 
how is this going? closed?
There is too many things to fix before people can use it on OTSes. Single images look good, but when you compose them with OTClient into game screen, they won't fit to each other.
Only way to make it look good, would be to increase resolution of whole game screen, but it takes around 1 second for 1 image. I think we must wait for better PCs.

Maybe I will write OTClient code that load sprites from PNG files (data/things/860/item_images/2400.png), not .spr file and use different sprite sizes (64x64, 512x512).
It will be good for tests of new sprites.

Rip images here :/
I reinstalled OS on it. I got only images where I increased resolution from 32x32 to 256x256 and added black border by PHP script:
Index of /ai_spr
 
Before I can start some real 'OTClient HD' development I need some tools to test results.

1. OTClient that loads images from PNG files and unpack .spr file to directory with PNG images
JSkalskiSBG/otclient

In this file you can choose to load from .png or .spr files:
JSkalskiSBG/otclient
PHP:
g_sprites.setLoadFromPng(true)
Set it to 'false' when you run it for first time to unpack sprites loaded from .spr

To unpack sprites from .spr file to folder with .png files type in client console:
PHP:
g_game.setClientVersion(860) g_sprites.loadSpr('/things/860/Tibia') g_sprites.exportSprites()

Sprites images will appear in 'sprites' folder in %HOMEPATH% (windows) or /home/yourusername/.otclient (linux)
OTClient can load sprites from that folder, but you can also move folder 'sprites' to 'data' in OTClient directory.


Now I need some NN that will draw nice high resolution sprites, but it's task for next 2 months.
 
Last edited:
Everything looks amazing.

But could somebody say what advantages that solution gives? loading from png
 
Everything looks amazing.
But could somebody say what advantages that solution gives? loading from png
Easier to load any size of sprite images. Don't need any special 'SPR tool' to prepare sprites with 64x64 or 128x128 images.
When I finish neural network that resize images (and draw missing details), I can test new sprites in minutes.

2. OTClient that loads images from PNG files with custom images size (32,64,128,256)
All functions that draw things on game screen are replaced with X px versions.
Sprites size is configurable from LUA:
JSkalskiSBG/otclient
PHP:
g_sprites.setSpritesFactor(2)
Value: 1 -> 32px, 2 -> 64px, 4 -> 128px

OTClient search for PNG images in directory:
PHP:
./data/things/{PROTOCOL_VERSION}/sprites_{SPRITES_FACTOR}/
Example:
PHP:
./data/things/860/sprites_2/
 
Seriously... this is fantastic.

After several years, i'm finally looking something real in Open Tibia development. Every day, i enter this forum and see same things, nothing really new or interesting.

But you made my day, Gesior. Congratulations and thanks for everything.
 
Before I can start some real 'OTClient HD' development I need some tools to test results.

1. OTClient that loads images from PNG files and unpack .spr file to directory with PNG images
JSkalskiSBG/otclient

In this file you can choose to load from .png or .spr files:
JSkalskiSBG/otclient
PHP:
g_sprites.setLoadFromPng(true)
Set it to 'false' when you run it for first time to unpack sprites loaded from .spr

To unpack sprites from .spr file to folder with .png files type in client console:
PHP:
g_game.setClientVersion(860) g_sprites.loadSpr('/things/860/Tibia') g_sprites.exportSprites()

Sprites images will appear in 'sprites' folder in %HOMEPATH% (windows) or /home/yourusername/.otclient (linux)
OTClient can load sprites from that folder, but you can also move folder 'sprites' to 'data' in OTClient directory.


Now I need some NN that will draw nice high resolution sprites, but it's task for next 2 months.

You`re doing a wonderful job, man.
Is there any chance you can give us some hint on how to compile that?
I tried to compile it using visual studio but ended up with an error due to the new library you used, it`s probably a linking problem with CryptOpenssl
Thanks in advance
 
You`re doing a wonderful job, man.
Is there any chance you can give us some hint on how to compile that?
I tried to compile it using visual studio but ended up with an error due to the new library you used, it`s probably a linking problem with CryptOpenssl
Thanks in advance
On windows I only compiled it in CodeBlocks some time ago. Now I use Linux at work and there it's very easy to compile.

#topic
Just bought GeForce 1080Ti. Now it will learn 3 times faster then on 1050. I should get some results in 3-5 weeks.
 
Last edited:
Back
Top