Version 0.1.6 - .dat: OTCv8 'Bones' attribute; .spr: OTC transparency…

… attribute; item generator: configurable to use .dat item IDs [no items.otb required]
gesior · Jan 2, 2023 · c436dec · c436dec
1 parent 83487c7
commit c436dec
Show file tree

Hide file tree

Showing 16 changed files with 7,873 additions and 1,001 deletions.
diff --git a/effectFramesGenerator.html b/effectFramesGenerator.html
@@ -21,11 +21,12 @@ <h2>Effect frames generator (for animated effects PHP script)</h2>
     <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)<br/>
+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"/> (for old clients .dat and .spr
 with this feature enabled)<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<br/>
 <br/>
 <button id="loadFiles">LOAD FILES</button>
 <br/>

diff --git a/effectFramesGenerator.ts b/effectFramesGenerator.ts
@@ -7,17 +7,22 @@ import {WebsiteImageGeneratorBase} from "./websiteImageGeneratorBase";
 
 class EffectFramesGenerator extends WebsiteImageGeneratorBase {
     private forceEnableExtendedSpritesCheckbox: HTMLInputElement;
+    private enableTransparencyCheckbox: HTMLInputElement;
 
     init() {
         this.otbRequired = false;
         super.init();
         this.forceEnableExtendedSpritesCheckbox = <HTMLInputElement>document.getElementById('forceEnableExtendedSprites');
+        this.enableTransparencyCheckbox = <HTMLInputElement>document.getElementById('enableTransparency');
     }
 
     afterSetClientVersion() {
         if (this.forceEnableExtendedSpritesCheckbox.checked) {
             this.client.enableFeature(GameFeature.GameSpritesU32);
         }
+        if (this.enableTransparencyCheckbox.checked) {
+            this.client.enableFeature(GameFeature.GameSpritesAlphaChannel);
+        }
     }
 
     startImageGenerator(imageGenerator: ImageGenerator, otbManager: OtbManager, datManager: DatManager, spriteManager: SpriteManager, zip) {

diff --git a/itemImageFramesGenerator.html b/itemImageFramesGenerator.html
@@ -1,42 +1,44 @@
-<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-library">https://github.com/gesior/open-tibia-library</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)<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="onlyPickupable" checked/><br/>
-Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (for old clients .dat and .spr
-with this feature enabled)<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>
+<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-library">https://github.com/gesior/open-tibia-library</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"/> (for old clients .dat and .spr
+with this feature enabled)<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<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>
diff --git a/itemImageFramesGenerator.ts b/itemImageFramesGenerator.ts
@@ -2,36 +2,51 @@ import {DatManager} from "./modules/datFile/datManager";
 import {OtbManager} from "./modules/otbFile/otbManager";
 import {SpriteManager} from "./modules/sprFile/spriteManager";
 import {ImageGenerator} from "./modules/imageGenerator/imageGenerator";
-import {GameFeature} from "./modules/constants/const";
+import {DatThingCategory, GameFeature} from "./modules/constants/const";
 import {WebsiteImageGeneratorBase} from "./websiteImageGeneratorBase";
 
 class ItemImageGenerator extends WebsiteImageGeneratorBase {
-    private onlyPickupableCheckbox: HTMLInputElement;
+    private onlyPickableCheckbox: HTMLInputElement;
     private forceEnableExtendedSpritesCheckbox: HTMLInputElement;
+    private enableTransparencyCheckbox: HTMLInputElement;
+    private useDatItemIdsAsImageIdsCheckbox: HTMLInputElement;
 
-    private onlyPickupable = true;
+    private onlyPickable = true;
+    private useDatItemIdsAsImageIds = false;
 
     init() {
         super.init();
-        this.onlyPickupableCheckbox = <HTMLInputElement>document.getElementById('onlyPickupable');
+        this.onlyPickableCheckbox = <HTMLInputElement>document.getElementById('onlyPickable');
         this.forceEnableExtendedSpritesCheckbox = <HTMLInputElement>document.getElementById('forceEnableExtendedSprites');
+        this.enableTransparencyCheckbox = <HTMLInputElement>document.getElementById('enableTransparency');
+        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);
+        }
+        this.otbRequired = !this.useDatItemIdsAsImageIdsCheckbox.checked;
     }
 
     startImageGenerator(imageGenerator: ImageGenerator, otbManager: OtbManager, datManager: DatManager, spriteManager: SpriteManager, zip) {
-        this.onlyPickupable = this.onlyPickupableCheckbox.checked;
+        this.onlyPickable = this.onlyPickableCheckbox.checked;
+        this.useDatItemIdsAsImageIds = this.useDatItemIdsAsImageIdsCheckbox.checked;
         this.generateItemImage(imageGenerator, zip, 0);
     }
 
     generateItemImage(imageGenerator: ImageGenerator, zip, serverId: number) {
         const self = this;
-        this.progressValue(serverId, this.otbManager.getLastId());
-        if (serverId > this.otbManager.getLastId()) {
+        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);
@@ -41,21 +56,25 @@ class ItemImageGenerator extends WebsiteImageGeneratorBase {
             return;
         }
 
-        if (!this.otbManager.isValidOtbId(serverId)) {
-            setTimeout(function () {
-                self.generateItemImage(imageGenerator, zip, serverId + 1);
-            }, 1);
-            return;
-        }
+        let clientItemId = serverId;
+        if (!this.useDatItemIdsAsImageIds) {
+            if (!this.otbManager.isValidOtbId(serverId)) {
+                setTimeout(function () {
+                    self.generateItemImage(imageGenerator, zip, serverId + 1);
+                }, 1);
+                return;
+            }
 
-        const 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;
+            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);
@@ -64,15 +83,20 @@ class ItemImageGenerator extends WebsiteImageGeneratorBase {
             }, 1);
             return;
         }
-        if (this.onlyPickupable && !itemThingType.isPickupable()) {
-            console.log('skip not pickupable', serverId);
+        if (this.onlyPickable && !itemThingType.isPickupable()) {
+            console.log('skip not pickable', serverId);
             setTimeout(function () {
                 self.generateItemImage(imageGenerator, zip, serverId + 1);
             }, 1);
             return;
         }
 
-        const itemSprites = imageGenerator.generateItemImagesByServerId(serverId);
+        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);

diff --git a/itemImageGenerator.html b/itemImageGenerator.html
@@ -1,37 +1,39 @@
-<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)<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="onlyPickupable" checked/><br/>
-Force enable extended sprites: <input type="checkbox" id="forceEnableExtendedSprites"/> (for old clients .dat and .spr
-with this feature enabled)<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>
+<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"/> (for old clients .dat and .spr
+with this feature enabled)<br/>
+Enable transparency: <input type="checkbox" id="enableTransparency"/> (OTC feature 'GameSpritesAlphaChannel')<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>