Cleaning up + Adding sprite animation test [WIP].

build/compression/compressToKTX2.sh

@@ -8,7 +8,7 @@ start_time_seconds=$SECONDS
 # ----> Use --dir to give the directory to export the files to <----
 if [ "$#" -eq 0 ]; then
     toktx_params="--t2 --encode etc1s --clevel 5 --qlevel 255"
-    output_directory="KTX2"
+    output_directory="KTX2_ETC1S"
 else
     toktx_params="$(echo "$*" | sed -n 's/.*--t2 \(.*\)/\1/p')"
     output_directory="$(echo "$*" | sed -n 's/.*--dir \([^ ]*\) --t2.*/\1/p')"

build/compression/compressToKTX2New.sh

@@ -7,10 +7,10 @@ start_time_seconds=$SECONDS
 # Parse command-line parameters or set default values
 # ----> Use --dir to give the directory to export the files to <----
 if [ "$#" -eq 0 ]; then
-    toktx_params="--t2 --encode etc1s --clevel 5 --qlevel 255"
-    output_directory="KTX2"
+    toktx_params="--encode basis-lz --clevel 5 --qlevel 255"
+    output_directory="KTX2_ETC1S"
 else
-    toktx_params="$(echo "$*" | sed -n 's/.*--encode \(.*\)/\1/p')"
+    toktx_params="$(echo "$*" | sed -n 's/.*--encode \(.*\)/--encode \1/p')"
     output_directory="$(echo "$*" | sed -n 's/.*--dir \([^ ]*\) --encode.*/\1/p')"
 fi
 
@@ -71,7 +71,8 @@ find "$root_directory" -type f \( -iname "*.${extensions[0]}" -o -iname "*.${ext
 
 	# Run toktx.exe for the current file
     # Info: https://github.khronos.org/KTX-Software/ktxtools/ktxsc.html
-    "$script_directory/ktx.exe create" $toktx_params "$new_path" "$file"
+    echo "$script_directory/ktx.exe" create $toktx_params "$file" "$new_path"
+    "$script_directory/ktx.exe" create $toktx_params "$file" "$new_path"
 	echo "Created file: $new_path"
 
     echo "------------------------"

package.json

@@ -68,8 +68,6 @@
         "webpack-merge": "^5.8.0"
     },
     "dependencies": {
-        "@pixi/compressed-textures": "^7.3.3",
-        "@pixi/core": "^7.3.3",
         "@types/stats": "^0.16.30",
         "@types/three": "^0.146.0",
         "commander": "^10.0.1",
@@ -79,7 +77,7 @@
         "js-to-ts-converter": "^0.18.2",
         "lodash": "^4.17.21",
         "pixi-basis-ktx2": "^0.0.17",
-        "pixi.js": "^7.3.3",
+        "pixi.js": "^7.x.x",
         "stats.js": "^0.17.0",
         "three": "^0.148.0",
         "zstddec": "^0.0.2"

src/constants/constants.ts

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import { KTX2Types } from "../types/compressionTypes";
 
 export const assetKtxEtc1sPath = './assets/KTX2_ETC1S'
@@ -196,18 +197,24 @@ export const assetTexturePaths = [
 ];
 
 export const assetsKTXTestPaths = [
-    './assets/ktx_test/x2Portrait.png',
-    './assets/ktx_test/x2Portrait-etc1s.ktx2',
-    './assets/ktx_test/x2Portrait-etc1s3.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-high.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-mid3.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-high3.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-high4.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-mid3-zlib.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-high3-zlib.ktx2',
-    './assets/ktx_test/x2Portrait-uastc-high4-zlib.ktx2'
+    './assets/ktxTest/x2Portrait.png',
+    './assets/ktxTest/x2Portrait-etc1s.ktx2',
+    './assets/ktxTest/x2Portrait-etc1s3.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-high.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-mid3.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-high3.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-high4.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-mid3-zlib.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-high3-zlib.ktx2',
+    './assets/ktxTest/x2Portrait-uastc-high4-zlib.ktx2'
 ];
 
+export const animTestPath = {
+    path: './assets/animTest/anematicDragonFire',
+    ext: 'jpg',
+    length: 16
+}
+
 export const assetsSoundPaths = [
     './assets/variant/ogg/soundHowl/soundAmbientBonus.ogg',
     './assets/variant/ogg/soundHowl/soundAmbientMain.ogg',
@@ -320,4 +327,12 @@ export function getTextureAssetPaths(ktx2Type?: KTX2Types): string[] {
         return assetTexturePaths.map((item) => item.replace('./assets', texturePath).replace(/jpg|jpeg|png/g,'ktx2'));
     }
     return assetTexturePaths
+}
+export function getAnimationAssetPaths(ktx2Type?: KTX2Types): string[] {
+    const paths = _.times(animTestPath.length, (index) => `${animTestPath.path}${index + 1}.${animTestPath.ext}`);
+    if (ktx2Type) {
+        const texturePath = getKTX2TypePath(ktx2Type);
+        return paths.map((item) => item.replace('./assets', texturePath).replace(/jpg|jpeg|png/g,'ktx2'));
+    }
+    return paths;
 }

src/ktxTestView.ts

@@ -1,7 +1,8 @@
 import * as Pixi from 'pixi.js';
-import { assetsKTXTestPaths } from './constants/constants';
+import { animTestPath, assetsKTXTestPaths, getAnimationAssetPaths } from './constants/constants';
 import _ from 'lodash';
 import { KTX2Types } from './types/compressionTypes';
+import { wait } from './utils/wait';
 
 export class KTXTestView {
     private canvasApp: Pixi.Application;
@@ -115,6 +116,38 @@ export class KTXTestView {
         };
     }
 
+    public async createTestAnimation(spriteCount: number, type?: KTX2Types, animationSpeed = 1.0): Promise<void> {
+        const spritePaths = getAnimationAssetPaths(type);
+        const textureArray: Pixi.Texture[] = [];
+        for (let i = 0; i < spritePaths.length; i++) {
+            const texture = await Pixi.Assets.load<Pixi.Texture>(spritePaths[i]);
+            texture.textureCacheIds = [spritePaths[i]];
+            (texture as any).texture = texture;
+            console.error(texture instanceof Pixi.Texture);
+            textureArray.push(texture);
+        }
+
+        for (let i = 0; i < 1; i++) {
+            //this._textureID = -1, this._textureTrimmedID = -1, this._cachedTint = 16777215, this.uvs = this._texture._uvs.uvsFloat32, this.updateAnchor && this._anchor.copyFrom(this._texture.defaultAnchor), this.onFrameChange && this.onFrameChange(this.currentFrame))
+            // textureArray.forEach((tex) => console.error(tex._uvs, tex._uvs.uvsFloat32));
+            const sprite = new Pixi.AnimatedSprite(textureArray);
+            console.error(i);
+            // console.error(i, logSprite._uvs.uvsFloat32, logSprite._previousFrame, logSprite._texture, logSprite._textureID, logSprite._textureTrimmedID, logSprite._cachedTint, logSprite.updateAnchor, logSprite._anchor, logSprite.onFrameChange);
+            sprite.scale.set(0.1);
+            sprite.anchor.set(0.5);
+            sprite.position.set(
+                _.random(sprite.width * 0.05, this.canvasApp.screen.width - sprite.width * 0.05),
+                _.random(sprite.height * 0.05, this.canvasApp.screen.height - sprite.height * 0.05));
+            sprite.autoUpdate = true;
+            sprite.loop = true;
+            sprite.animationSpeed = animationSpeed;
+            sprite.play();
+
+            this.container.addChild(sprite);
+            this.sprites.push(sprite);
+        }
+    }
+
     private async getFileSize(path: string):  Promise<number>{
         const response = await fetch(path);
         const blob = await response.blob();

src/project.ts

@@ -260,11 +260,18 @@ export class Project implements IProject {
             this.logResults('KTX2 test loaded!');
         });
 
-        this.createButton('Add test sprites', this.loadContainer, 20 + scaleW + offset, offset + height * 4.5, scaleW, scaleH, async () => {
+        // this.createButton('Add test sprites', this.loadContainer, 20 + scaleW + offset, offset + height * 4.5, scaleW, scaleH, async () => {
+        //     const imageExt = this.ktx2Type ? 'KTX2_' + this.ktx2Type.toUpperCase() :'PNG'
+        //     this.logResults(`Loading 1000 ${imageExt} sprites...`);
+        //     await this.ktxTestViewer.createTestSprites(1000, this.ktx2Type);
+        //     this.logResults(`${imageExt} sprites loaded!`);
+        // });
+
+        this.createButton('Anim test', this.loadContainer, 20 + scaleW + offset, offset + height * 4.5, scaleW, scaleH, async () => {
             const imageExt = this.ktx2Type ? 'KTX2_' + this.ktx2Type.toUpperCase() :'PNG'
-            this.logResults(`Loading 1000 ${imageExt} sprites...`);
-            await this.ktxTestViewer.createTestSprites(1000, this.ktx2Type);
-            this.logResults('KTX2 sprites loaded!');
+            this.logResults(`Loading 1000 ${imageExt} animation...`);
+            await this.ktxTestViewer.createTestAnimation(1000, this.ktx2Type, 0.4);
+            this.logResults(`${imageExt} animation loaded!`);
         });
     }