How to use upscaled sprites (64x64 or bigger) in OTCv8

[Erikas Kontenis]

This tutorial was made for a reason to support newbie OTS devs. I am not owner of any tools or solutions done neither I really promote to use OTCv8 but nevertheless this OTClient fork have already built-in everything you need regarding the support of upscaled sprites so you can investigate or play with them further. There are countless threads in support board of how to use upscaled sprites in the game client and if you were looking for a solution you are lucky cause this tutorial is for you.

Prerequisities

• Download latest node.js - Downloading and installing Node.js and npm | npm Docs (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
• Download and carefully read read-me of .CWM generation tool - GitHub - ErikasKontenis/opentibia-tools (https://github.com/ErikasKontenis/opentibia-tools)
• Download or compile OTCv8 client

Little Know-How

• You don't need to edit a single line of code in client or server files.
• You will be supporting two different formats where you store your graphical assets. For playing with RME you still be using .SPR and see sprites in 32x32. While in game-client you will be supporting .CWM format where you will see your sprites in 64x64 (or bigger) size.
• In your client things folder "OnlyFortressClient\data\things\1098" you want to put only two files Tibia.cwm and Tibia.dat (do not add there Tibia.spr cause OTClient will load this firstly)
• Extract images of .SPR to a folder by executing command: npm run unpack-spr ./binary/Tibia.spr ./sprites/tibia
• The tool can also convert you images from 32x32 to 64x64 by executing command: npm run convert-to-png ./sprites/tibia ./sprites/png64 64
• Finally compile the converted 64x64 sprites to Tibia.cwm format by executing command: npm run pack-cwm ./sprites/png64 ./binary/Tibia.cwm
• Use your regular open tibia tools to update your .SPR & .DAT files however after modifying .SPR repeat the process to extract sprites and compile to .CWM format.

This is the simple tutorial explaining and providing everything that you should need to play with this. It is really that simple the only thing is that since OTCv8 were closed developed the available features and tools are little to no known for newcomers.

Note: Upscaling with the provided tool doesn't bring the best results. But there are hot topics how to upscale with AI and have great results. I hope this know-how will help more for enthusiasts regarding the AI upscaling results.

Example of 64x64 sprites in-game


Example of 96x96 sprites in-game

Example of 128x128 sprites in-game


Example of 128x128 vs 32x32 sprites in-game. (Up picture 128x128, down 32x32)

 

[mrianura]

nice, I'm glad that You like my feature

 

[Marko999x]

nice, I'm glad that You like my feature

What was your price befor?
I heard like 100 euros per 100k sprites

 

[mrianura]

for scailing 100$/100k sprites, but as there are a lot of AI development You can give a try to scale it Yourself, but thats not as easy at it seems. 3 years ago i spent over 2 months to train/improve my AI model and to implement postprocessing fixing some glitches.

Post automatically merged: Apr 25, 2024

the main idea behind this feature was to design new sprites directly in 64x64 or bigger base. As a lot of ppl have already thousands of 32x32 sprites, they needed initial sprites scailing at the very beginning

 

[MatCollier]

@Erikas Kontenis something seems to be going wrong for me here. I just tried it, and after running npm run unpack-spr ./binary/Tibia.spr ./sprites/tibia, the result was a folder full of empty bmps. Maybe there's something to do with extended/transparency being enabled. Have you seen this happen before/do you know how to fix?

 

[marcelomnzs]

Very good and I managed to make it work, but the upscale was apparently looking the same. Any tools that make it look more "HD"?

 

[oen432]

Very good and I managed to make it work, but the upscale was apparently looking the same. Any tools that make it look more "HD"?

Because it only upscales them using nearest-neighbor method, meaning that 1x1 pixel becomes 2x2. There is no AI upscaling involved, you would have to get your own tool for that.

 

[marcelomnzs]

Because it only upscales them using nearest-neighbor method, meaning that 1x1 pixel becomes 2x2. There is no AI upscaling involved, you would have to get your own tool for that.

Yes, that's what I'm looking for... that transforms each png into a generative upscale png. :T

 

[Niebieski]

Yes, that's what I'm looking for... that transforms each png into a generative upscale png. :T

You can play with chainner + perfect pixel model, works kinda nice however separated sprites (these which connects with edges of the image) won't be smooth as you expect, you'll need to increase size of alpha first, then use pixel perfect model and then cut these properly. Author of that thread just shown how it may look if you do it properly (he did it on printed / completed screen image, not separated sprites).

 

[oen432]

You can play with chainner + perfect pixel model, works kinda nice however separated sprites (these which connects with edges of the image) won't be smooth as you expect, you'll need to increase size of alpha first, then use pixel perfect model and then cut these properly. Author of that thread just shown how it may look if you do it properly (he did it on printed / completed screen image, not separated sprites).

There are models that don't have issues with what you described.

God damn it... Forgot the name of one of them, ugh.

 

[Niebieski]

There are models that don't have issues with what you described.

God damn it... Forgot the name of one of them, ugh.

I'm pretty sure I've tested every single available model I'm talking about that issue (won't make smooth outline unless you don't have alpha space):

 

[Codinablack]

I'm pretty sure I've tested every single available model I'm talking about that issue (won't make smooth outline unless you don't have alpha space):

View attachment 85935

The solution for the edges is to add padding before up-scaling (after slicing) and then trimming it off after the upscale.

I was running into the same issue when up-scaling the sprite-sheets. Pad and crop, simple and effective.

I have no idea why you are running into a problem with the edges though.. Should be no need to mess with the alpha, I have used countless models already and 95 percent of them work fine without messing with the alpha channel.

xbrz is the best algorithm for up-scaling. The best AI model for up-scaling is a matter of opinion and preference and is likely something you will need to make yourself by blending models together or training your own.

 

[Niebieski]

The solution for the edges is to add padding before up-scaling (after slicing) and then trimming it off after the upscale.

I was running into the same issue when up-scaling the sprite-sheets. Pad and crop, simple and effective.

I have no idea why you are running into a problem with the edges though.. Should be no need to mess with the alpha, I have used countless models already and 95 percent of them work fine without messing with the alpha channel.

xbrz is the best algorithm for up-scaling. The best AI model for up-scaling is a matter of opinion and preference and is likely something you will need to make yourself by blending models together or training your own.

Does it look well after you connect sprites? Let's say a stone which have 4 slices of 32x32 - if you gonna add the padding, then how you'll connect these again? Have you tried it?

By alpha space I meant same thing you called padding

 

[Codinablack]

Does it look well after you connect sprites? Let's say a stone which have 4 slices of 32x32 - if you gonna add the padding, then how you'll connect these again? Have you tried it?

By alpha space I meant same thing you called padding

Yes it works perfectly fine reconnecting the sprites. I split , pad, upscale, crop, and merge all in one go, in that exact order, using chaiNNer, and they come out perfect, no flaws.

 

[marcelomnzs]

Yes it works perfectly fine reconnecting the sprites. I split , pad, upscale, crop, and merge all in one go, in that exact order, using chaiNNer, and they come out perfect, no flaws.

I would like to understand what you are talking about... could you give me a hint on how I can do this?

 

[Codinablack]

I would like to understand what you are talking about... could you give me a hint on how I can do this?

I already did. I told you the exact nodes I used, in the exact program. I'm not going to do it for you, nor am I going to share my workflow file.

Try!

 

[leo18dff]

Using chatgpt + python you can make anything to work with that very easy... just give a try. You can apply a lot of filters on .bmp images and do whatever you want.

 

[marcelov2]

@Erikas Kontenis algo parece estar errado para mim aqui. Acabei de tentar, e depois de executar npm run unpack-spr ./binary/Tibia.spr ./sprites/tibia, o resultado foi uma pasta cheia de bmps vazios. Talvez haja algo a ver com extended/transparency estar habilitado. Você já viu isso acontecer antes/sabe como consertar?

Did you manage to solve it?