• 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)

admkhbr

Member
Joined
Mar 24, 2014
Messages
31
Reaction score
17
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:
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,384
Solutions
44
Reaction score
1,851
Location
Poland
GitHub
gesior
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
 

ScorpionOT

uber n00b
Joined
Mar 28, 2015
Messages
391
Solutions
6
Reaction score
120
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.
 

admkhbr

Member
Joined
Mar 24, 2014
Messages
31
Reaction score
17
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.

 

gugu15

Well-Known Member
Joined
Dec 15, 2014
Messages
99
Reaction score
62
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:

ScorpionOT

uber n00b
Joined
Mar 28, 2015
Messages
391
Solutions
6
Reaction score
120
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
 

admkhbr

Member
Joined
Mar 24, 2014
Messages
31
Reaction score
17
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.
 

mindswiped

New Member
Joined
Aug 7, 2017
Messages
15
Reaction score
0
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
 

namco

Alienbutserious
Joined
Sep 5, 2010
Messages
148
Solutions
2
Reaction score
39
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
 

struzck

New Member
Joined
Jan 23, 2010
Messages
5
Reaction score
1
Gesior could you please fix the url images? I would love to see the results of your awesome work
 

Il Knight

Veteran OT User
Joined
Dec 1, 2014
Messages
638
Solutions
7
Reaction score
324
Location
Spain
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?
 
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,384
Solutions
44
Reaction score
1,851
Location
Poland
GitHub
gesior
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
 
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,384
Solutions
44
Reaction score
1,851
Location
Poland
GitHub
gesior
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:

jestem pro

That is the question
Joined
Apr 20, 2013
Messages
604
Solutions
12
Reaction score
76
Everything looks amazing.

But could somebody say what advantages that solution gives? loading from png
 
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,384
Solutions
44
Reaction score
1,851
Location
Poland
GitHub
gesior
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/
 

admkhbr

Member
Joined
Mar 24, 2014
Messages
31
Reaction score
17
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.
 

mindswiped

New Member
Joined
Aug 7, 2017
Messages
15
Reaction score
0
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
 
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,384
Solutions
44
Reaction score
1,851
Location
Poland
GitHub
gesior
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:
Top