无法导入 json spritesheet

Posted 2023-03-13

【中文标题】无法导入 json spritesheet

【英文标题】：Can't import json spritesheet

【发布时间】：2020-03-25 02:10:33

【问题描述】：

我正在尝试使用 PixiJS 制作游戏，但我无法导入 spritesheet。 我得到的错误是：

Uncaught TypeError: Cannot read property 'scale' of undefined

由于某种原因，当我尝试将图像放入 spritesheet 时会发生这种情况。此错误发生在浏览器上。 花了几个小时在谷歌上搜索，仍然无法正常工作。

Webpack 配置。我读到 json 应该在没有任何加载器的情况下正确捆绑：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const  CleanWebpackPlugin  = require('clean-webpack-plugin');

module.exports = 
    mode: 'development',
    entry: './src/index.ts',
    output: 
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
      ,
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            title: 'Cool website',
        ),
      ],
    module: 
        rules: [
            
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            ,
            
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            ,
            
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            ,
            
                test: /\.(glsl|vs|fs)$/,
                loader: 'shader-loader',
                options: 
                    glsl: 
                        chunkPath: path.resolve("/glsl/chunks")
                    
                
            
        ],
    ,
    resolve: 
        extensions: [ '.tsx', '.ts', '.js' ],
    ,
    devServer: 
        port: 9999
    ,
    devtool: 'inline-source-map',
;

index.ts:

// all the setup

const loader = new Loader();

loader.add('hero', heroImage);

const sprites:  [name: string]: Sprite  = ;

loader.load((loader, resources) => 
    const sheet = new Spritesheet(resources.hero.texture.baseTexture, heroSprite); //error happens here

    const animatedSprite = new AnimatedSprite(sheet.animations['idle']);
    app.stage.addChild(animatedSprite);

    app.ticker.add(loop);
);
// loop function

【问题讨论】：

什么是heroImage？还有heroSprite？您正在使用 webpack，所以这听起来像是一个路径问题。你检查控制台了吗？浏览器会在某个时候尝试加载这些图像。

heroImage 是图像的路径， heroSprite 是来自 json 的对象。我无法加载 json 路径（可能是因为打字稿？）所以我只是在某个地方找到了如何仅对对象执行相同操作

【参考方案1】：

解决了。 刚刚使用copy-webpack-plugin 并复制了所有资产。然后就像在 PixiJS 文档中写的那样导入它loader.add('hero', '/assets/hero/hero.json');