Webpackを使用する私のReactプロジェクトでPIXI.jsの画像アセットを
import React from 'react';
import styles from './Menu.css';
import backgroundUrl from './background.jpg';
require('pixi.js')
class Menu extends React.Component {
componentDidMount () {
// Get reference to canvas element
this.canvas = this.refs.canvas;
// Load assets
PIXI.loader.add([
{
name: 'background',
url: backgroundUrl
}
]).load(this.init());
}
init () {
// Create background sprite
const background = new PIXI.Sprite(PIXI.loader.resources.background.texture);
// DEBUG: Height and width is always '1'
console.log('Background width: ' + background.width);
console.log('Background height: ' + background.height);
// Setup renderer
this.renderer = PIXI.autoDetectRenderer(background.width, background.height);
this.renderer.autoResize = true;
this.renderer.resize(window.innerWidth, window.innerHeight);
this.canvas.appendChild(this.renderer.view);
// Create stage
this.stage = new PIXI.Container();
// Add background to stage
this.stage.addChild(background)
// Tell the renderer to render the stage
this.renderer.render(this.stage);
}
render () {
return (
<div className={styles.canvas} ref='canvas'></div>
);
}
}
export default Menu;
ご覧のとおり、 loader.add()
関数を使用して画像background.jpg
をPIXIにロードしようとしています。 それはうまくいきません。 デバッグコンソールのログで、画像の高さと幅が1であることがわかります。また、背景画像のURLを表示すると、すべて問題ないように見えます。 任意のヒント?
これに切り替えてみてください。
〜.load(()=> this.init());〜
うまく機能する
load
はそのパラメーターとして関数を想定していますが、実際にはinit()
を呼び出していたため、その結果(void)がload
渡されました。 init
にthis
への参照がない場合は、以下を使用して関数を渡すことができます。
〜.load(this.init);〜
括弧がないことに注意してください。
これは現在廃止されています...そして、webpackにバンドルしているアセットをロードする方法が必要です
@hayesmaker動作しますが、テクスチャはしばらく空です。 準備ができたら、正しくブリットされます。
@nitwhizは、最初にすべてのスプライトに対して1pxの幅を取得する理由です。
スプライトがロードされたときにコールバックを起動する方法はありますか?
最も参考になるコメント
これは現在廃止されています...そして、webpackにバンドルしているアセットをロードする方法が必要です