• 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
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand
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.
 

Sam Drost

Intermediate OT User
Joined
May 29, 2017
Messages
88
Best answers
0
Reaction score
104
I love TypeScript. It is currently my favorite programming language.
 

Forby

Advanced OT User
Joined
Jul 24, 2011
Messages
112
Best answers
0
Reaction score
192
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).
 
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand
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)
 

EduardoDantas

Well-Known Member
Joined
Sep 25, 2013
Messages
142
Best answers
4
Reaction score
72
Location
Brazil
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!
 
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand

jo3bingham

Excellent OT User
Joined
Mar 3, 2008
Messages
1,057
Best answers
12
Reaction score
601
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.
 

EduardoDantas

Well-Known Member
Joined
Sep 25, 2013
Messages
142
Best answers
4
Reaction score
72
Location
Brazil
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
 

V0RT4C

New Member
Joined
May 3, 2019
Messages
2
Best answers
0
Reaction score
2
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
 

ScorpionOT

uber n00b
Joined
Mar 28, 2015
Messages
278
Best answers
6
Reaction score
61
@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?
 

Blez

eh..
Joined
Dec 21, 2010
Messages
2,950
Best answers
0
Reaction score
525
Location
Garden City, Idaho
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:

StreamSide

Joseluis Gonzalez
Support Team
Joined
Aug 31, 2007
Messages
3,420
Best answers
41
Reaction score
919
Location
Arica - Chile
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
 

Blez

eh..
Joined
Dec 21, 2010
Messages
2,950
Best answers
0
Reaction score
525
Location
Garden City, Idaho
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.
 
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand

ScorpionOT

uber n00b
Joined
Mar 28, 2015
Messages
278
Best answers
6
Reaction score
61
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.
 
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand
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.
 

Syntax

Developer
Joined
Oct 10, 2007
Messages
2,876
Best answers
0
Reaction score
266
Location
Texas
Great project @Gesior.pl. Your PHP outfit image generator alone was very useful to the community. I look forward to the TypeScript port.
 
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Premium User
Joined
Sep 18, 2007
Messages
2,105
Best answers
23
Reaction score
1,316
Location
PLand
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

Top