Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/466.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can';t导入json spritesheet_Javascript_Typescript_Webpack_Pixi.js - Fatal编程技术网

Javascript Can';t导入json spritesheet

Javascript Can';t导入json spritesheet,javascript,typescript,webpack,pixi.js,Javascript,Typescript,Webpack,Pixi.js,我正在尝试用精灵制作游戏,但我无法导入精灵表。 我得到的错误是: Uncaught TypeError: Cannot read property 'scale' of undefined 由于某种原因,当我尝试在精灵表中创建图像时,会发生这种情况。此错误发生在浏览器上。 花了几个小时在谷歌上搜索,仍然无法让它工作 网页包配置。我了解到json应该在没有任何加载程序的情况下正确绑定: const path = require('path'); const HtmlWebpackPlugin =

我正在尝试用精灵制作游戏,但我无法导入精灵表。 我得到的错误是:

Uncaught TypeError: Cannot read property 'scale' of undefined
由于某种原因,当我尝试在精灵表中创建图像时,会发生这种情况。此错误发生在浏览器上。 花了几个小时在谷歌上搜索,仍然无法让它工作

网页包配置。我了解到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
解决了。
刚刚使用了
复制网页包插件
并复制了所有资产。然后像在PixiJS文档
loader.add('hero','/assets/hero/hero.json')中编写的那样导入它

什么是英雄形象?和heroSprite
?您正在使用webpack,因此这听起来像是路径问题。你检查控制台了吗?浏览器将在某个时候尝试加载这些图像。HeroMage是图像的路径,heroSprite是来自json的对象。我无法加载json路径(可能是因为typescript的缘故),所以我找到了一个方法,可以对一个对象执行同样的操作