pixijs / assetpack

A configurable asset pipeline for the web
http://pixijs.io/assetpack/
MIT License
105 stars 25 forks source link

Assetpack creates wrong aliases #76

Closed YVeselovskyi closed 2 months ago

YVeselovskyi commented 2 months ago

This is my folders structure, it was working on 0.8.0 version, but now, when assets are built it ignores the fact, that they are inside folders and makes an alias with just their file names, like instead of animations/water in packed json it is water.

Знімок екрана 2024-08-14 о 14 49 11

my config:

Знімок екрана 2024-08-14 о 14 53 28

nameStyle: 'relative' - this is not working at all, no matter where I put it.

how can I fix it?

Thanks!

Zyie commented 2 months ago

Hey the config here looks a little off, can you try this

import { pixiPipes } from "@assetpack/core/pixi";

export default {
  entry: './raw-assets',
  output: './public',
  pipes: [
    ...pixiPipes({
        texturePacker: { nameStyle: "relative" },
        manifest: { output: './src/manifest.json' }
    }),
  ],
};
YVeselovskyi commented 2 months ago

I tried all variants, it still ignores :(

Zyie commented 2 months ago

ok yeah i can recreate this

will take a look!

Zyie commented 2 months ago

@YVeselovskyi I've got a PR to fix the issue, if you want an immediate solution try turning removeFileExtension: false

YVeselovskyi commented 2 months ago

@Zyie thanks! also fonts are not working, I have a fonts folder, they are converting to woff2, but pixi.js does not recognize them at all.

Zyie commented 2 months ago

fonts are not working

Yeah this is a known issue with cache busting and fonts, just turn that off for now

export default {
  pipes: [
    ...pixiPipes({
        cacheBust: false
    }),
  ],
};

Will be fixing this issue fairly soon

antag0n1st commented 2 months ago

The aliases are not generated correctly for some of the bundles.

In this example you can see how the names are correctly trimmed in one of the bundles , but it stops the trimming process for the other bundles.

image

here is my config

import { pixiManifest } from "@assetpack/core/manifest";
import { compress } from "@assetpack/core/image";

export default {
  entry: "./assets",
  output: "./public/assets",
  cache: true,
  cacheLocation: ".assetpack",
  pipes: [
    ...pixiPipes({
      // TODO can't be used, because it attaches a hash after the file name
      // but we load the SOUNDS by name...
      cacheBust: false,
      texturePacker: {
        texturePacker: {
          removeFileExtension: true,
          nameStyle: "short",
        },
      },
      resolutions: { default: 1, low: 1 },
    }),
    pixiManifest({
      output: "manifest.json",
      createShortcuts: true,
      trimExtensions: true,
      includeMetaData: true,
    }),
    compress({
      jpg: false,
      png: false,
      webp: { quality: 80, alphaQuality: 80 },
      avif: false,
    }),
  ],
};

Here is the folder structure image

please , help

Zyie commented 2 months ago

please , help

Hey @antag0n1st do you by chance have two or more files named logo_jili? The manifest removes any name clashes

antag0n1st commented 2 months ago

@Zyie
yes that was the problem , thank you for pointing that. Is it possible that assetpack can log a warning for this ?

antag0n1st commented 2 months ago

@Zyie actually I need to have them with duplicate names. As I want to load language dependent assets in different language bundles.

for example en{m}/title.png de{m}/title.png

and It will be a different title based on the language.

YVeselovskyi commented 2 months ago

@Zyie hello! when you will be able to merge that PR with fix?

sarahgaucimizzi commented 1 month ago

@Zyie Using latest 1.1.1 with this config:

import { pixiPipes } from '@assetpack/core/pixi'

export default {
  entry: './raw-assets',
  output: './public/assets/',
  pipes: [
    ...pixiPipes({
      cacheBust: true,
      texturePacker: {
        texturePacker: {
          nameStyle: 'relative'
        }
      }
    })
  ]
}

I still get this warning

image

and this output

image

Like the scenario mentioned above with the languages, I want them to have identical names but distinguished by their path/folder name to use landscape and portrait assets in the respective scenario.

Am I missing something else in the config?

Zyie commented 1 month ago

Hey @sarahgaucimizzi

Can you provide me with your folder structure layout so i can see if i can recreate the error?

If you cant provide a screenshot then this tool is very useful: Tree~version!%271%27)5%200!false2-%203%5Cn4source!5%20%0154320)

sarahgaucimizzi commented 1 month ago

Hi thanks for the quick response, this is a screenshot of the folder structure with the issue being about test_banner.png (the rest of the assets are fine)

image

Since posting I also tried with texture packer pipe instead of the pixiPipe just incase but still same issue

import { audio } from '@assetpack/core/ffmpeg'
import { json } from '@assetpack/core/json'
import { pixiManifest } from '@assetpack/core/manifest'
import { texturePacker } from '@assetpack/core/texture-packer'
import { webfont } from '@assetpack/core/webfont'
// import { pixiTexturePacker } from '@assetpack/plugin-texture-packer'

export default {
  entry: './raw-assets',
  output: './public/assets/',
  // cache: false,
  pipes: [
    json(),
    webfont(),
    audio(),
    texturePacker({
      texturePacker: {
        nameStyle: 'relative',
        removeFileExtension: true
      }
    }),
    pixiManifest({
      output: './public/assets/assets-manifest.json'
    })
    // ...pixiPipes({
    //   cacheBust: false,
    //   // texturePacker: {
    //   //   texturePacker: {
    //   //     removeFileExtension: true,
    //   //     nameStyle: 'relative'
    //   //   }
    //   // }
    // })
  ]
}
Zyie commented 1 month ago

ahh ok, I think I need to introduce another naming strategy that includes the folder name that has the {tps} tag on it. The 'relative' strategy only takes the folder structure inside the {tps} into account.

assets
└── mobile{m}
    ├── landscape{tps}
    │   └── landscape
    │       └── test_banner.png
    └── portrait{tps}
        └── portrait  
            └── test_banner.png

so in this example the names would be portrait/test_banner.png and landscape/test_banner.png

sarahgaucimizzi commented 1 month ago

I see, sorry did not understand this from the docs, to resolve the warning I had to separate again mobile and desktop since they both have landscape.

image

and the output is what I expect thanks 🙏

image