无法导入 json spritesheet
Can't import json spritesheet
我正在尝试使用 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
解决了。
刚刚使用 copy-webpack-plugin
并复制了所有资产。然后像 PixiJS 文档中写的那样导入它 loader.add('hero', '/assets/hero/hero.json');
我正在尝试使用 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
解决了。
刚刚使用 copy-webpack-plugin
并复制了所有资产。然后像 PixiJS 文档中写的那样导入它 loader.add('hero', '/assets/hero/hero.json');