在pixi.js中创建通过文件加载器加载的纹理

嗨我使用Webpack，TypeScript和fileloader设置了一个项目。在pixi.js中创建通过文件加载器加载的纹理

我webpack.config.js：

const path = require('path'); 

module.exports = { 
    entry: './src/index.ts', 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.tsx', '.js', '.jsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     enforce: 'pre', 
     loader: 'tslint-loader', 
     options: { /* Loader options go here */ } 
     }, 
     { 
     test: /\.(png|svg|jpg|gif)$/, 
     use: [ 
      'file-loader' 
     ] 
     },  
     { 
     test: /\.tsx?$/, 
     loader: 'awesome-typescript-loader' 
     } 
    ] 
    }, 
    devtool: 'inline-source-map', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    } 
};

我tsconfig.json：

{ 
    "module": "commonjs", 
    "target": "es6", 
    "noImplicitAny": true, 
    "moduleResolution": "node", 
    "compilerOptions": { 
     "noImplicitAny": true, 
     "removeComments": true 
    }, 
    "sourceMap": true, 
    "outDir": "dist", 
    "baseUrl": ".", 
    "paths": { 
     "*": [ 
      "node_modules/*", 
      "src/types/*" 
     ] 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
}

而且我index.ts：

import * as _ from 'lodash'; 
import * as PIXI from 'pixi.js'; 

const renderer = PIXI.autoDetectRenderer(256, 256, 
    { antialias: false, transparent: false, resolution: 1 }); 

document.body.appendChild(renderer.view); 

const stage = new PIXI.Container(); 

renderer.render(stage);

上述星座呈现阶段index.html预期。

现在我添加了一个bs.png文件到我的src/images/文件夹，现在我的项目结构是这样的：

据我了解，这个bs.png被加载的文件/dist/14145c56ece7799954586ba6f8464dbb.png。这里我的麻烦开始了。我尝试加载图像如下。首先，我创建了一个custom.d.ts其中包括装载.png文件模块声明：

declare module "*.png" { 
    const content: any; 
    export default content; 
}

现在index.ts我通过import * as Image from './images/bs.png';加载它。由此产生的Image是类型函数，console.log（Image）的输出是14145c56ece7799954586ba6f8464dbb.png。不幸的是，我不能够加载Pixi的质地是这样的：

const text = new PIXI.Texture(Image);

这一行，我得到：

src/index.ts(12,31): error TS2345: Argument of type 'typeof "*.png"' is not assignable to parameter of type 'BaseTexture'. 
    Property 'touched' is missing in type 'typeof "*.png"'.

我理解。我也不能使用：

const texture = PIXI.utils.TextureCache[Image];

虽然图似乎没有返回文件路径。我尝试使用由webpack创建的png的文件路径加载图像，但纹理仍然为undefined。

我真的不确定这里真正的问题是什么。我是否需要运行一个服务器（例如express）还是我只是想念一些东西？顺便说一句，这是使用awesome-typescript-loader的npm run build命令的输出：

> webpack 

Hash: 45f5667bd75205a328bf 
Version: webpack 3.4.1 
Time: 3297ms 
           Asset  Size Chunks     Chunk Names 
14145c56ece7799954586ba6f8464dbb.png 4.07 kB   [emitted] 
          bundle.js 4.83 MB  0 [emitted] [big] main 
    [16] (webpack)/buildin/global.js 509 bytes {0} [built] 
    [37] (webpack)/buildin/module.js 517 bytes {0} [built] 
    [88] ./src/index.ts 851 bytes {0} [built] 
[192] ./src/images/bs.png 82 bytes {0} [built] 
    + 189 hidden modules

来源

2017-08-09 チーズパン

至少我会建议在使用它之前确保图像已被加载。因为在这个例子中你尝试从TextureCache中检索一个图像，但是我没有看到你真正将它添加到缓存的位置。所以你至少可以使用loader：http：//pixijs.download/dev/docs/PIXI.loaders.Loader.html。例如： loader.add（'bunny'，'data/bunny.png'）;装载机。load（（loader，resources）=> {从缓存中的图像创建精灵}） ... 另外，在创建纹理时，您应该使用：let texture = PIXI.Texture.fromImage，而不是构造函数 – Hachi

你有图像的路径，你需要在使用前加载它。

PIXI.loader.add([ 
     Image, 
     "and_others_if_any.png", 
     ]) 
     .load(() => { 
      var sprite = new PIXI.Sprite(PIXI.Texture.fromImage(Image)); 

     });

而且此操作将执行ajax请求，因此您需要从服务器提供这些文件。如果你在Linux上，你可以通过从工作目录运行python -m SimpleHTTPServer 8000命令来提供服务。

来源

2017-08-24 10:53:32 alperenc

在pixi.js中创建通过文件加载器加载的纹理

回答

相关问题