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

Another OT Item editor (otb, dat, spr) in TypeScript

Gesior.pl

Mega Noob&LOL 2012
Senator
Joined
Sep 18, 2007
Messages
2,955
Solutions
98
Reaction score
3,351
Location
Poland
GitHub
gesior
I'm learning TypeScript (website frontend, extends JavaScript) and I wrote library that loads .otb, .dat and .spr files. It also saves .dat files.

Is there anyone interested in writing some web browser based Item Editor?
It all runs on client side, so user of website does not need to upload/share his files to edit it in webbrowser.

Test code that loads .spr, .dat and .otb files and display Magic Sword on website:
JavaScript:
import {Client} from "./modules/client";
import {DatManager} from "./modules/datManager";
import {OtbManager} from "./modules/otbManager";
import {SpriteManager} from "./modules/spritemanager";
import {ThingCategory} from "./modules/constants/const";
import {Sprite} from "./modules/sprite";

const canvas = <HTMLCanvasElement>document.getElementById('view');
const ctx = canvas.getContext("2d");

function drawImage(sprite: Sprite, x, y) {
    const palette = ctx.getImageData(x, y, sprite.getWidth(), sprite.getHeight());
    palette.data.set(new Uint8ClampedArray(sprite.getPixels()));
    ctx.putImageData(palette, x, y);
}

async function test() {
    const client = new Client();
    client.setClientVersion(854);

    const datManager = new DatManager(client);
    await datManager.loadDat('http://php70/prv/webclient/fronttypescript/Kasteria.dat').then(datLoaded => {
        console.log('loaded dat', datLoaded)
    });

    const otbManager = new OtbManager(client);
    await otbManager.loadOtb('http://php70/prv/webclient/fronttypescript/items.otb').then(otbLoaded => {
        console.log('loaded otb', otbLoaded)
    });

    const spriteManager = new SpriteManager(client);
    await spriteManager.loadSpr('http://php70/prv/webclient/fronttypescript/Kasteria.spr').then(sprLoaded => {
        console.log('loaded spr', sprLoaded)
    });

    // get client ID of item 2400 (magic sword in items.xml)
    let magicSwordClientId = otbManager.m_itemTypes[2400].getClientId();
    // get data from '.dat' about that item
    let magicSwordThingType = datManager.getThingType(magicSwordClientId, ThingCategory.ThingCategoryItem);
    // get first sprite [image] of that item
    let firstMagicSwordSprite = magicSwordThingType.getSprites()[0];
    // get image from .spr file
    let firstImagePixelsData = spriteManager.getSpriteImage(firstMagicSwordSprite);
    // draw image in webbrowser with Canvas on position 0, 0
    drawImage(firstImagePixelsData, 0, 0);

}

test();

I will put library on my github after I clean up code and add .spr and .otb save functions.
 
Good luck! A long time ago I started on a browser map editor but loading the sprite resources took too long so I gave it up. Like you said, it's better to have the files locally and load them in to the application, but you might as well go native in something like C++ then.

Maybe there is still some code that you can use: Inconcessus/editor (https://github.com/Inconcessus/editor).
 
First version. Loads OTB, DAT and SPR. Saves DAT. Tested on 8.54 files:
gesior/open-tibia-library (https://github.com/gesior/open-tibia-library)

Working on saving OTB and SPR now.
Plans:
  • some example with file picker (now it loads files from URL)
  • load idle outfit animations from DAT file (now it loads only movement animation, like OTClient)
  • generate item and outfit images (now it only shows sprites, not composing them)
  • load/save OTBM (manipulate maps)
 
It would be interesting to develop it to edit tibia 11 assets as well. I don't know if there is a possibility, but it would be cool!
 
I don't know, if there is any good documentation for that format.
It uses Google's protobuf format. You can use something like Protod (sysdream/Protod (https://github.com/sysdream/Protod)) to extract the .proto metadata from the client executable. It hasn't changed in a while, but I can't remember off the top of my head the last time it did. Google doesn't have its own JS/TS code generator, but I'm sure there's something out there.
 
It uses Google's protobuf format. You can use something like Protod (sysdream/Protod (https://github.com/sysdream/Protod)) to extract the .proto metadata from the client executable. It hasn't changed in a while, but I can't remember off the top of my head the last time it did. Google doesn't have its own JS/TS code generator, but I'm sure there's something out there.


@SpiderOT has created a program that extracts the assets and converts them to .dat and .spr already with all attributes in .dat and etc.
Based on protobufs, but I'm not aware of that so I don't even know if I'm talking bullshit kkkkk
 
Thats nice!
I'm working on similar stuff in JS. Started to create a SPR editor in the browser. Everything works on client side, nothing gets uploaded to any kind of backend. Parsing SPR file and converting each SPR into PNG image.

As Forby noted above the process of parsing and converting the sprites to a format that the browser can use is pretty slow and takes a lot of resources. Therefore I'm using webworkers for this. The whole process takes about 1 minute on a Macbook (7.72 .SPR file), havent tested on any better hardware yet.

Once the parsing and conversion has been done I again use webworkers to save each SPR file as a blob in indexeddb. Then a project gets automatically created in indexeddb. So the next time the user wants to work with this SPR file it is already saved in the browsers indexeddb as a project. Since each SPR is now saved in indexeddb as a PNG blob, loading the SPR files now takes a matter of seconds instead.

The project is just in the starting phase. So far importing SPR files works, I havent created an export function yet.

I also want to make .dat and .otb editors. However I'm not really familiar with how the structure of these files are yet, im studying the source code of otclient and tfs for this. Also your code will be of much help.
Maybe we can share some ideas or help each other, if you are interested please message me. It would be nice to talk to someone who's doing similar things.

Screenshot 2019-11-14 at 23.33.06.png
 
@Gesior.pl
If you'll can open some issues, I can get them sorted while I try to adapt myself to the changes in TypeScript. I have been using node.js and I have had no problem working with github too. Maybe I can fork the project and make commits/pull requests as I go, as I believe this is a tool that could help the community prolong its longevity.

Anyway, it is something which could help me with my own project and the transition to all web apps is something we can benefit from for (more doable) changeability without having the direct need to compile binaries and run those too. It would also be a honour to work with the legendary Gesior on this project. I'll keep an eye out in case you might need a hand, imma check up those sources and see whats the current progress of this otc customizer too.

@v0rt4c
Do you have the sources available online somewhere? What language/framework/engine did you write this on?
 
I know what your talking about with simones otitemeditor worked that exact way it would export the items.xml with all properties n such.
Post automatically merged:

I know what your talking about with simones otitemeditor worked that exact way it would export the items.xml with all properties n such.
But it only worked with 8.1
 
Last edited:
I know what your talking about with simones otitemeditor worked that exact way it would export the items.xml with all properties n such.
Post automatically merged:


But it only worked with 8.1
you can download otitemeditor from github and edit the plugins to make it work with 11.00 (or 10.98)
I did it, but it does not create items.xml or something like that
 
you can download otitemeditor from github and edit the plugins to make it work with 11.00 (or 10.98)
I did it, but it does not create items.xml or something like that
I just bucked up and did it manuel for the xml, I have a 10.98 otitemeditor i was just hoping there would have been a way for it to atleast put all the new ids in order in the xml. woulda saved me about 2 hours haha.
 
Does anybody have a clue of how to implement this properly on a webserver/service? I would like to commit some changes to this, and use it for personal purposes as well.
 
Does anybody have a clue of how to implement this properly on a webserver/service? I would like to commit some changes to this, and use it for personal purposes as well.
I will add in GitHub readme information how to run it and make it work as website (short instruction: npm install && webpack, but it requires some preparation which I will describe in readme).
I will also put 'live example' on my web server.

I did some update yesterday. It's not yet on github as I got to refactor code, but I will publish it in few days.
After selecting dat, spr and otb you can click 'export item images' and it generates all item images and download them in .zip. It exported 8.54 items in 4 minutes, so it's not bad.
Plans:
1. Convert PNG to GIF in webbrowser (reduce size).
2. Make animated item images (items with animation/stackable with all stack counts).
3. Export outfit images (for PHP outfit image generator).
4. Make outfits/items exportable to JSON (attributes + images), so you can export outfit (with all images) from one client version and import it to other.
 
Great project @Gesior.pl. Your PHP outfit image generator alone was very useful to the community. I look forward to the TypeScript port.
 
First demo is ready (export all pickable items - items that player may equip):

You can also run it offline in webbrowser:

@ScorpionOT
Also added short instruction how to run it on GitHub:

How to run example (item image generator)?
  1. Google 'install nodejs' and follow instruction for installation with system integration.
    It will install node and npm in your system.
  2. Open folder with OpenTibiaLibrary in terminal (cmd).
  3. Type:
    npm install

  4. Type:
    npm run-script build
  5. After build there will appear folder js.
  6. Open itemImageGenerator.html in webbrowser (tested on Chrome). Done.
 

Attachments

  • open-tibia-library-0.0.1-dist.zip
    249.6 KB · Views: 5 · VirusTotal
Back
Top