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 ());~
@ staff0rd ์ ์๋ํฉ๋๋ค! ๊ทผ๋ฐ .. ์ ??
load
๋ ๋งค๊ฐ ๋ณ์๋ก ํจ์๋ฅผ ์์ํ์ง๋ง ์ค์ ๋ก init()
๋ฅผ ํธ์ถํ์ฌ ๊ฒฐ๊ณผ (void)๋ฅผ load
ํฉ๋๋ค. init
์ this
๋ํ ์ฐธ์กฐ๊ฐ์๋ ๊ฒฝ์ฐ ๋ค์์ ์ฌ์ฉํ์ฌ ํจ์๋ฅผ ์ ๋ฌํ ์ ์์ต๋๋ค.
~.load (this.init);~
๊ดํธ๊ฐ ์์ต๋๋ค.
์ด๊ฒ์ ์ง๊ธ์ ์ธ๋ชจ๊ฐ ์์ต๋๋ค ... ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ ์นํฉ๊ณผ ํจ๊ป ๋ฌถ๋ ์์ฐ์๋ก๋ ํ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.
@hayesmaker ์๋ํ์ง๋ง ํ ์ค์ฒ๊ฐ ์ ์ ๋น์ด ์์ต๋๋ค. ์ค๋น๊ฐ๋๋ฉด ์ฌ๋ฐ๋ฅด๊ฒ ๋ธ๋ฆฌ ํ ๋ฉ๋๋ค.
@nitwhiz ๋ ์ฒ์์ ๋ชจ๋ ์คํ๋ผ์ดํธ์ ๋ํด 1px ๋๋น๋ฅผ ์ป๋ ์ด์ ์
๋๊น?
์คํ๋ผ์ดํธ๊ฐ๋ก๋๋๋ฉด ์ฝ๋ฐฑ์ ์คํํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ ์ง๊ธ์ ์ธ๋ชจ๊ฐ ์์ต๋๋ค ... ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ ์นํฉ๊ณผ ํจ๊ป ๋ฌถ๋ ์์ฐ์๋ก๋ ํ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.