npm - open-tibia-tools - Versions diffs - 0.2.1 - Mend

open-tibia-tools 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,29 @@
+# Open Tibia Tools
+Browser tools for viewing and converting Tibia/OTS DAT, SPR and OTB files.
+Uses [@gesior/open-tibia-library](https://www.npmjs.com/package/@gesior/open-tibia-library) for parsing. File pickers and downloads stay in this project.
+## Setup
+```
+npm install
+npm run build
+```
+Then open an HTML file in a browser (Chrome), for example `itemImageFramesGenerator.html`.
+## Tools
+- `itemImageGenerator.html` — item images (PNG/GIF ZIP)
+- `itemImageFramesGenerator.html` — item animation frames for the PHP GIF/APNG converter
+- `outfitImageGenerator.html` — outfit frames plus PHP outfit host files
+- `effectFramesGenerator.html` — magic effect frames
+- `missileFramesGenerator.html` — missile frames
+- `otbEditor.html` — example `items.otb` editor
+- `tests.html` — playground
+PHP helpers:
+- `tools/item-image-frames-to-animated-gif-converter/` — PNG frames to GIF/APNG
+- `tools/colored-outfit-images-generator/` — colored outfit images from exported frames

package/effectFramesGenerator.html ADDED Viewed

@@ -0,0 +1,42 @@
+<html>
+<head>
+    <title>Effect Frames Generator - OpenTibiaLibrary</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+</head>
+<body>
+<h2>Effect frames generator (for animated effects PHP script)</h2>
+<blockquote>
+    How to use:<br/><br/>
+    1. Type version of Tibia client.<br/>
+    2. Select SPR and DAT files.<br/>
+    3. Click "LOAD FILES", watch "Progress".<br/>
+    4. Click "GENERATE IMAGES", wait for ZIP file download.<br/>
+    5. Convert generated PNG images into animations using:<br/>
+    <a href="https://item-images.ots.me/png-to-gif-converter/">https://item-images.ots.me/png-to-gif-converter/</a><br/>
+    You can also download <a href="https://github.com/gesior/open-tibia-tools">https://github.com/gesior/open-tibia-tools</a>
+    and use command line PHP script <b>"tools/item-image-frames-to-animated-gif-converter/cli_convert.php"</b>
+    to convert it to animations on your PC<br/>
+    <br/>
+    <b>FILES ARE NOT SEND TO SERVER! EVERYTHING IS GENERATED ON YOUR COMPUTER.</b><br/>
+    <br/>
+    (Enable Developer console in webbrowser to get more information about problems/progress)
+</blockquote>
+Client Version: <input type="number" id="clientversion" value="860"/> (format 860, NOT 8.60, clients: 740 - 1099, type <b>1099</b> for latest .dat+.spr version [ex. from 12+])<br/>
+Sprite file: <input type="file" id="spr"/><br/>
+Dat file: <input type="file" id="dat"/><br/>
+Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (OTC feature 'GameSpritesU32')<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<br/>
+Enable improved animations: <input type="checkbox" id="enableEnhancedAnimations"/> (OTC feature 'GameEnhancedAnimations')<br/>
+Enable frame groups: <input type="checkbox" id="enableIdleAnimations"/> (OTC feature 'GameIdleAnimations')<br/>
+<br/>
+<button id="loadFiles">LOAD FILES</button>
+<br/>
+<br/>
+<button id="generateImages">GENERATE IMAGES</button>
+<br/>
+<br/>
+<b>Progress:</b> <span id="progressBar">Not running</span><br/>
+<script src="js/vendor.js"></script>
+<script src="js/effectFramesGenerator.js"></script>
+</body>
+</html>

package/effectFramesGenerator.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import {DatManager, DatThingCategory, GameFeature, ImageGenerator, OtbManager, SpriteManager} from "@gesior/open-tibia-library";
+import {WebsiteImageGeneratorBase} from "./websiteImageGeneratorBase";
+class EffectFramesGenerator extends WebsiteImageGeneratorBase {
+    private forceEnableExtendedSpritesCheckbox: HTMLInputElement;
+    private enableTransparencyCheckbox: HTMLInputElement;
+    private enableEnhancedAnimationsCheckbox: HTMLInputElement;
+    private enableIdleAnimationsCheckbox: HTMLInputElement;
+    init() {
+        this.otbRequired = false;
+        super.init();
+        this.forceEnableExtendedSpritesCheckbox = <HTMLInputElement>document.getElementById('forceEnableExtendedSprites');
+        this.enableTransparencyCheckbox = <HTMLInputElement>document.getElementById('enableTransparency');
+        this.enableEnhancedAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableEnhancedAnimations');
+        this.enableIdleAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableIdleAnimations');
+    }
+    afterSetClientVersion() {
+        if (this.forceEnableExtendedSpritesCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesU32);
+        }
+        if (this.enableTransparencyCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesAlphaChannel);
+        }
+        if (this.enableEnhancedAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameEnhancedAnimations);
+        }
+        if (this.enableIdleAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameIdleAnimations);
+        }
+    }
+    startImageGenerator(imageGenerator: ImageGenerator, otbManager: OtbManager, datManager: DatManager, spriteManager: SpriteManager, zip) {
+        this.generateEffectImage(imageGenerator, datManager, zip, 0);
+    }
+    generateEffectImage(imageGenerator: ImageGenerator, datManager: DatManager, zip, effectId: number) {
+        const self = this;
+        this.progressValue(effectId, datManager.getCategory(DatThingCategory.ThingCategoryEffect).length);
+        if (effectId > datManager.getCategory(DatThingCategory.ThingCategoryEffect).length) {
+            this.progressText('Packing images to ZIP file, please wait (it may take a while)');
+            zip.generateAsync({type: "blob"}).then(function (blob: Blob) {
+                console.log('zip size', blob.size);
+                self.progressText('ZIP generated, it should start download now.');
+                self.downloadBlob('effects.zip', blob);
+            });
+            return;
+        }
+        let effectThingType = this.datManager.getEffect(effectId);
+        if (!effectThingType) {
+            console.log('dat ID not found in dat file', effectId);
+            setTimeout(function () {
+                self.generateEffectImage(imageGenerator, datManager, zip, effectId + 1);
+            }, 1);
+            return;
+        }
+        const effectSprites = imageGenerator.generateEffectImagesById(effectId);
+        if (!effectSprites || effectSprites.length == 0) {
+            setTimeout(function () {
+                self.generateEffectImage(imageGenerator, datManager, zip, effectId + 1);
+            }, 1);
+            return;
+        }
+        const firstEffectSprite = effectSprites[0];
+        const canvas = <HTMLCanvasElement>document.createElement('canvas');
+        canvas.width = firstEffectSprite.getWidth() * effectSprites.length;
+        canvas.height = firstEffectSprite.getHeight();
+        document.getElementsByTagName('body')[0].appendChild(canvas);
+        const ctx = canvas.getContext("2d");
+        for (let animationFrame = 0; animationFrame < effectSprites.length; animationFrame++) {
+            const palette = ctx.getImageData(firstEffectSprite.getWidth() * animationFrame, 0, firstEffectSprite.getWidth(), firstEffectSprite.getHeight());
+            const effectSprite = effectSprites[animationFrame];
+            palette.data.set(new Uint8ClampedArray(effectSprite.getPixels().m_buffer.buffer));
+            ctx.putImageData(palette, firstEffectSprite.getWidth() * animationFrame, 0);
+        }
+        const callback = function (blob) {
+            canvas.remove();
+            zip.file('effects/' + effectId + '_' + effectSprites.length + '.png', blob);
+            setTimeout(function () {
+                self.generateEffectImage(imageGenerator, datManager, zip, effectId + 1);
+            }, 1);
+        };
+        canvas.toBlob(callback);
+    }
+}
+const effectFramesGenerator = new EffectFramesGenerator();
+effectFramesGenerator.init();

package/itemImageFramesGenerator.html ADDED Viewed

@@ -0,0 +1,45 @@
+<html>
+<head>
+    <title>Item Image Frames Generator - OpenTibiaLibrary</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+</head>
+<body>
+<h2>Item image frames generator (for animated items PHP script)</h2>
+<blockquote>
+    How to use:<br/><br/>
+    1. Type version of Tibia client.<br/>
+    2. Select SPR, DAT and OTB files.<br/>
+    3. Click "LOAD FILES", watch "Progress".<br/>
+    4. Click "GENERATE IMAGES", wait for ZIP file download.<br/>
+    5. Convert generated PNG images into animations using:<br/>
+    <a href="https://item-images.ots.me/png-to-gif-converter/">https://item-images.ots.me/png-to-gif-converter/</a><br/>
+    You can also download <a href="https://github.com/gesior/open-tibia-tools">https://github.com/gesior/open-tibia-tools</a>
+    and use command line PHP script <b>"tools/item-image-frames-to-animated-gif-converter/cli_convert.php"</b>
+    to convert it to animations on your PC<br/>
+    <br/>
+    <b>FILES ARE NOT SEND TO SERVER! EVERYTHING IS GENERATED ON YOUR COMPUTER.</b><br/>
+    <br/>
+    (Enable Developer console in webbrowser to get more information about problems/progress)
+</blockquote>
+Client Version: <input type="number" id="clientversion" value="860"/> (format 860, NOT 8.60, clients: 740 - 1099, type <b>1099</b> for latest .dat+.spr version [ex. from 12+])<br/>
+Sprite file: <input type="file" id="spr"/><br/>
+Dat file: <input type="file" id="dat"/><br/>
+Otb file: <input type="file" id="otb"/><br/>
+Only pickable items: <input type="checkbox" id="onlyPickable" checked/><br/>
+Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (OTC feature 'GameSpritesU32')<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<br/>
+Enable improved animations: <input type="checkbox" id="enableEnhancedAnimations"/> (OTC feature 'GameEnhancedAnimations')<br/>
+Enable frame groups: <input type="checkbox" id="enableIdleAnimations"/> (OTC feature 'GameIdleAnimations')<br/>
+Use .dat item IDs as image IDs: <input type="checkbox" id="useDatItemIdsAsImageIds"/> (no 'items.otb' required)<br/>
+<br/>
+<button id="loadFiles">LOAD FILES</button>
+<br/>
+<br/>
+<button id="generateImages">GENERATE IMAGES</button>
+<br/>
+<br/>
+<b>Progress:</b> <span id="progressBar">Not running</span><br/>
+<script src="js/vendor.js"></script>
+<script src="js/itemImageFramesGenerator.js"></script>
+</body>
+</html>

package/itemImageFramesGenerator.ts ADDED Viewed

@@ -0,0 +1,140 @@
+import {DatManager, DatThingCategory, GameFeature, ImageGenerator, OtbManager, SpriteManager} from "@gesior/open-tibia-library";
+import {WebsiteImageGeneratorBase} from "./websiteImageGeneratorBase";
+class ItemImageGenerator extends WebsiteImageGeneratorBase {
+    private onlyPickableCheckbox: HTMLInputElement;
+    private forceEnableExtendedSpritesCheckbox: HTMLInputElement;
+    private enableTransparencyCheckbox: HTMLInputElement;
+    private enableEnhancedAnimationsCheckbox: HTMLInputElement;
+    private enableIdleAnimationsCheckbox: HTMLInputElement;
+    private useDatItemIdsAsImageIdsCheckbox: HTMLInputElement;
+    private onlyPickable = true;
+    private useDatItemIdsAsImageIds = false;
+    init() {
+        super.init();
+        this.onlyPickableCheckbox = <HTMLInputElement>document.getElementById('onlyPickable');
+        this.forceEnableExtendedSpritesCheckbox = <HTMLInputElement>document.getElementById('forceEnableExtendedSprites');
+        this.enableTransparencyCheckbox = <HTMLInputElement>document.getElementById('enableTransparency');
+        this.enableEnhancedAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableEnhancedAnimations');
+        this.enableIdleAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableIdleAnimations');
+        this.useDatItemIdsAsImageIdsCheckbox = <HTMLInputElement>document.getElementById('useDatItemIdsAsImageIds');
+    }
+    afterSetClientVersion() {
+        if (this.forceEnableExtendedSpritesCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesU32);
+        }
+        if (this.enableTransparencyCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesAlphaChannel);
+        }
+        if (this.enableEnhancedAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameEnhancedAnimations);
+        }
+        if (this.enableIdleAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameIdleAnimations);
+        }
+        this.otbRequired = !this.useDatItemIdsAsImageIdsCheckbox.checked;
+    }
+    startImageGenerator(imageGenerator: ImageGenerator, otbManager: OtbManager, datManager: DatManager, spriteManager: SpriteManager, zip) {
+        this.onlyPickable = this.onlyPickableCheckbox.checked;
+        this.useDatItemIdsAsImageIds = this.useDatItemIdsAsImageIdsCheckbox.checked;
+        this.generateItemImage(imageGenerator, zip, 0);
+    }
+    generateItemImage(imageGenerator: ImageGenerator, zip, serverId: number) {
+        const self = this;
+        if (this.useDatItemIdsAsImageIds) {
+            this.progressValue(serverId, this.datManager.getCategory(DatThingCategory.ThingCategoryItem).length);
+        } else {
+            this.progressValue(serverId, this.otbManager.getLastId());
+        }
+        if ((this.useDatItemIdsAsImageIds && serverId > this.datManager.getCategory(DatThingCategory.ThingCategoryItem).length) ||
+            (!this.useDatItemIdsAsImageIds && serverId > this.otbManager.getLastId())) {
+            this.progressText('Packing images to ZIP file, please wait (it may take a while)');
+            zip.generateAsync({type: "blob"}).then(function (blob: Blob) {
+                console.log('zip size', blob.size);
+                self.progressText('ZIP generated, it should start download now.');
+                self.downloadBlob('items.zip', blob);
+            });
+            return;
+        }
+        let clientItemId = serverId;
+        if (!this.useDatItemIdsAsImageIds) {
+            if (!this.otbManager.isValidOtbId(serverId)) {
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+                return;
+            }
+            clientItemId = this.otbManager.getItem(serverId).getClientId();
+            if (!clientItemId) {
+                console.log('otb ID not mapped to any dat ID', serverId);
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+                return;
+            }
+        }
+        let itemThingType = this.datManager.getItem(clientItemId);
+        if (!itemThingType) {
+            console.log('dat ID not found in dat file', serverId, clientItemId);
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        if (this.onlyPickable && !itemThingType.isPickupable()) {
+            console.log('skip not pickable', serverId);
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        let itemSprites = null;
+        if (this.useDatItemIdsAsImageIds) {
+            itemSprites = imageGenerator.generateItemImagesByClientId(serverId);
+        } else {
+            itemSprites = imageGenerator.generateItemImagesByServerId(serverId);
+        }
+        if (!itemSprites || itemSprites.length == 0) {
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        const firstItemSprite = itemSprites[0];
+        const canvas = <HTMLCanvasElement>document.createElement('canvas');
+        canvas.width = firstItemSprite.getWidth() * itemSprites.length;
+        canvas.height = firstItemSprite.getHeight();
+        document.getElementsByTagName('body')[0].appendChild(canvas);
+        const ctx = canvas.getContext("2d");
+        for (let animationFrame = 0; animationFrame < itemSprites.length; animationFrame++) {
+            const palette = ctx.getImageData(firstItemSprite.getWidth() * animationFrame, 0, firstItemSprite.getWidth(), firstItemSprite.getHeight());
+            const itemSprite = itemSprites[animationFrame];
+            palette.data.set(new Uint8ClampedArray(itemSprite.getPixels().m_buffer.buffer));
+            ctx.putImageData(palette, firstItemSprite.getWidth() * animationFrame, 0);
+        }
+        const callback = function (blob) {
+            canvas.remove();
+            zip.file('items/' + serverId + '_' + itemSprites.length + '.png', blob);
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+        };
+        canvas.toBlob(callback);
+    }
+}
+const itemImageGenerator = new ItemImageGenerator();
+itemImageGenerator.init();

package/itemImageGenerator.html ADDED Viewed

@@ -0,0 +1,40 @@
+<html>
+<head>
+    <title>Item Image Generator - OpenTibiaLibrary</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+</head>
+<body>
+<h2>Item images generator</h2>
+<blockquote>
+    How to use:<br/><br/>
+    1. Type version of Tibia client.<br/>
+    2. Select SPR, DAT and OTB files.<br/>
+    3. Click "LOAD FILES", watch "Progress".<br/>
+    4. Click "GENERATE IMAGES", wait for ZIP file download.<br/>
+    <br/>
+    <b>FILES ARE NOT SEND TO SERVER! EVERYTHING IS GENERATED ON YOUR COMPUTER.</b><br/>
+    <br/>
+    (Enable Developer console in webbrowser to get more information about problems/progress)
+</blockquote>
+Client Version: <input type="number" id="clientversion" value="860"/> (format 860, NOT 8.60, clients: 740 - 1099, type <b>1099</b> for latest .dat+.spr version [ex. from 12+])<br/>
+Sprite file: <input type="file" id="spr"/><br/>
+Dat file: <input type="file" id="dat"/><br/>
+Otb file: <input type="file" id="otb"/><br/>
+Only pickable items: <input type="checkbox" id="onlyPickable" checked/><br/>
+Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (OTC feature 'GameSpritesU32')<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<br/>
+Enable improved animations: <input type="checkbox" id="enableEnhancedAnimations"/> (OTC feature 'GameEnhancedAnimations')<br/>
+Enable frame groups: <input type="checkbox" id="enableIdleAnimations"/> (OTC feature 'GameIdleAnimations')<br/>
+Use .dat item IDs as image IDs: <input type="checkbox" id="useDatItemIdsAsImageIds"/> (no 'items.otb' required)<br/>
+<br/>
+<button id="loadFiles">LOAD FILES</button>
+<br/>
+<br/>
+<button id="generateImages">GENERATE IMAGES</button>
+<br/>
+<br/>
+<b>Progress:</b> <span id="progressBar">Not running</span><br/>
+<script src="js/vendor.js"></script>
+<script src="js/itemImageGenerator.js"></script>
+</body>
+</html>

package/itemImageGenerator.ts ADDED Viewed

@@ -0,0 +1,161 @@
+import {DatManager, DatThingCategory, GameFeature, ImageGenerator, OtbManager, SpriteManager} from "@gesior/open-tibia-library";
+import {WebsiteImageGeneratorBase} from "./websiteImageGeneratorBase";
+let GIF = require('gif.js');
+class ItemImageGenerator extends WebsiteImageGeneratorBase {
+    private onlyPickableCheckbox: HTMLInputElement;
+    private forceEnableExtendedSpritesCheckbox: HTMLInputElement;
+    private enableTransparencyCheckbox: HTMLInputElement;
+    private enableEnhancedAnimationsCheckbox: HTMLInputElement;
+    private enableIdleAnimationsCheckbox: HTMLInputElement;
+    private useDatItemIdsAsImageIdsCheckbox: HTMLInputElement;
+    private onlyPickable = true;
+    private useDatItemIdsAsImageIds = false;
+    init() {
+        super.init();
+        this.onlyPickableCheckbox = <HTMLInputElement>document.getElementById('onlyPickable');
+        this.forceEnableExtendedSpritesCheckbox = <HTMLInputElement>document.getElementById('forceEnableExtendedSprites');
+        this.enableTransparencyCheckbox = <HTMLInputElement>document.getElementById('enableTransparency');
+        this.enableEnhancedAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableEnhancedAnimations');
+        this.enableIdleAnimationsCheckbox = <HTMLInputElement>document.getElementById('enableIdleAnimations');
+        this.useDatItemIdsAsImageIdsCheckbox = <HTMLInputElement>document.getElementById('useDatItemIdsAsImageIds');
+    }
+    afterSetClientVersion() {
+        if (this.forceEnableExtendedSpritesCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesU32);
+        }
+        if (this.enableTransparencyCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesAlphaChannel);
+        }
+        if (this.enableEnhancedAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameEnhancedAnimations);
+        }
+        if (this.enableIdleAnimationsCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameIdleAnimations);
+        }
+        this.otbRequired = !this.useDatItemIdsAsImageIdsCheckbox.checked;
+    }
+    startImageGenerator(imageGenerator: ImageGenerator, otbManager: OtbManager, datManager: DatManager, spriteManager: SpriteManager, zip) {
+        this.onlyPickable = this.onlyPickableCheckbox.checked;
+        this.useDatItemIdsAsImageIds = this.useDatItemIdsAsImageIdsCheckbox.checked;
+        this.generateItemImage(imageGenerator, zip, 0);
+    }
+    generateItemImage(imageGenerator: ImageGenerator, zip, serverId: number) {
+        const self = this;
+        if (this.useDatItemIdsAsImageIds) {
+            this.progressValue(serverId, this.datManager.getCategory(DatThingCategory.ThingCategoryItem).length);
+        } else {
+            this.progressValue(serverId, this.otbManager.getLastId());
+        }
+        if ((this.useDatItemIdsAsImageIds && serverId > this.datManager.getCategory(DatThingCategory.ThingCategoryItem).length) ||
+            (!this.useDatItemIdsAsImageIds && serverId > this.otbManager.getLastId())) {
+            this.progressText('Packing images to ZIP file, please wait (it may take a while)');
+            zip.generateAsync({type: "blob"}).then(function (blob: Blob) {
+                console.log('zip size', blob.size);
+                self.progressText('ZIP generated, it should start download now.');
+                self.downloadBlob('items.zip', blob);
+            });
+            return;
+        }
+        let clientItemId = serverId;
+        if (!this.useDatItemIdsAsImageIds) {
+            if (!this.otbManager.isValidOtbId(serverId)) {
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+                return;
+            }
+            clientItemId = this.otbManager.getItem(serverId).getClientId();
+            if (!clientItemId) {
+                console.log('otb ID not mapped to any dat ID', serverId);
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+                return;
+            }
+        }
+        let itemThingType = this.datManager.getItem(clientItemId);
+        if (!itemThingType) {
+            console.log('dat ID not found in dat file', serverId, clientItemId);
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        if (this.onlyPickable && !itemThingType.isPickupable()) {
+            console.log('skip not pickable', serverId);
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        let itemSprite = null;
+        if (this.useDatItemIdsAsImageIds) {
+            itemSprite = imageGenerator.generateItemImageByClientId(serverId);
+        } else {
+            itemSprite = imageGenerator.generateItemImageByServerId(serverId);
+        }
+        if (!itemSprite) {
+            setTimeout(function () {
+                self.generateItemImage(imageGenerator, zip, serverId + 1);
+            }, 1);
+            return;
+        }
+        const canvas = <HTMLCanvasElement>document.createElement('canvas');
+        canvas.width = itemSprite.getWidth();
+        canvas.height = itemSprite.getHeight();
+        document.getElementsByTagName('body')[0].appendChild(canvas);
+        const ctx = canvas.getContext("2d");
+        const palette = ctx.getImageData(0, 0, itemSprite.getWidth(), itemSprite.getHeight());
+        palette.data.set(new Uint8ClampedArray(itemSprite.getPixels().m_buffer.buffer));
+        ctx.putImageData(palette, 0, 0);
+        if (self.imageFormat == 'png') {
+            const callback = function (blob) {
+                canvas.remove();
+                zip.file('items/' + serverId + '.png', blob);
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+            };
+            canvas.toBlob(callback);
+        } else {
+            const gif = new GIF({
+                workers: 1,
+                quality: 10,
+                width: itemSprite.getWidth(),
+                height: itemSprite.getHeight(),
+                workerScript: './js/gif.worker.js',
+                transparent: 'rgba(0,0,0,0)'
+            });
+            gif.addFrame(canvas, {copy: true});
+            canvas.remove();
+            gif.on('finished', function (blob) {
+                zip.file(serverId + '.gif', blob);
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+            });
+            gif.render();
+        }
+    }
+}
+const itemImageGenerator = new ItemImageGenerator();
+itemImageGenerator.init();

package/missileFramesGenerator.html ADDED Viewed

@@ -0,0 +1,42 @@
+<html>
+<head>
+    <title>Missile Frames Generator - OpenTibiaLibrary</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+</head>
+<body>
+<h2>Missile frames generator</h2>
+<blockquote>
+    How to use:<br/><br/>
+    1. Type version of Tibia client.<br/>
+    2. Select SPR and DAT files.<br/>
+    3. Click "LOAD FILES", watch "Progress".<br/>
+    4. Click "GENERATE IMAGES", wait for ZIP file download.<br/>
+    5. Convert generated PNG images into animations using:<br/>
+    <a href="https://item-images.ots.me/png-to-gif-converter/">https://item-images.ots.me/png-to-gif-converter/</a><br/>
+    You can also download <a href="https://github.com/gesior/open-tibia-tools">https://github.com/gesior/open-tibia-tools</a>
+    and use command line PHP script <b>"tools/item-image-frames-to-animated-gif-converter/cli_convert.php"</b>
+    to convert it into animations on your PC<br/>
+    <br/>
+    <b>FILES ARE NOT SEND TO SERVER! EVERYTHING IS GENERATED ON YOUR COMPUTER.</b><br/>
+    <br/>
+    (Enable Developer console in webbrowser to get more information about problems/progress)
+</blockquote>
+Client Version: <input type="number" id="clientversion" value="860"/> (format 860, NOT 8.60, clients: 740 - 1099, type <b>1099</b> for latest .dat+.spr version [ex. from 12+])<br/>
+Sprite file: <input type="file" id="spr"/><br/>
+Dat file: <input type="file" id="dat"/><br/>
+Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (OTC feature 'GameSpritesU32')<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<br/>
+Enable improved animations: <input type="checkbox" id="enableEnhancedAnimations"/> (OTC feature 'GameEnhancedAnimations')<br/>
+Enable frame groups: <input type="checkbox" id="enableIdleAnimations"/> (OTC feature 'GameIdleAnimations')<br/>
+<br/>
+<button id="loadFiles">LOAD FILES</button>
+<br/>
+<br/>
+<button id="generateImages">GENERATE IMAGES</button>
+<br/>
+<br/>
+<b>Progress:</b> <span id="progressBar">Not running</span><br/>
+<script src="js/vendor.js"></script>
+<script src="js/missileFramesGenerator.js"></script>
+</body>
+</html>