TIL_200907(PixiJS - sprite)

 

PixiJS Part 5: Sprites - CJ Gammon

 

Pixi에서 texture로 이미지를 불러옵니다.

const canvas = document.getElementById("mycanvas");
const app = new PIXI.Application({
    view: canvas,
    width: window.innerWidth,
    height: window.innerHeight,
});

const texture = PIXI.Texture.from('sprite.png');

 

 texture를 sprite로 정합니다.

let sprite1 = new PIXI.Sprite(texture);
app.stage.addChild(sprite1);

 

sprite의 위치설정

let sprite1 = new PIXI.Sprite(texture);
sprite1.x = 200;
sprite1.y = 100;
app.stage.addChild(sprite1);

 

sprite들을 container에 넣습니다.

let container = new PIXI.Container();
app.stage.addChild(container);

sprite1 = new PIXI.Sprite(texture);
sprite1.x = 200;
sprite1.y = 100;
container.addChild(sprite1);

sprite2 = new PIXI.Sprite(texture);
sprite2.x = 300;
sprite2.y = 100;
container.addChild(sprite2);

 

sprite의 animate를 정합니다.

app.ticker.add(animate);

let delta = 0;

function animate() {
    delta += 0.1;
    
    // sprite1이 위아래로 y=100의 위치에서 움직임
    sprite1.y = 100 + Math.sin(delta) * 10;
    
    // sprite2가 좌우로 x=100의 위치에서 움직임
    sprite2.x = 100 + Math.sin(delta) * 10;
    
    // container 안의 모든 sprite가 좌우로 움직임
    container.x = Math.sin(delta) * 10;
    
}

scale

function animate() {
    sprite1.scale = new PIXI.Point(0.5);
}

position

sprite1 = new PIXI.Sprite(texture);
sprite1.position.set(200, 100);
container.addChild(sprite1);

rotation

function animate() {
    sprite1.scale = new PIXI.Point(0.5);
    sprite1.rotation += 0.1;
}

pivot (회전 포인트 설정)

sprite1 = new PIXI.Sprite(texture);
sprite1.position.set(200, 100);
sprite1.anchor.set(0.5);
sprite1.pivot.set(0, 100);
container.addChild(sprite1);

alpha (fade in & out)

function animate() {
    sprite1.scale = new PIXI.Point(0.5);
    sprite1.rotation += 0.1;
    sprite1.alpha = Math.sin(delta);
}

tint (sprite의 색 설정)

sprite1 = new PIXI.Sprite(texture);
sprite1.position.set(200, 100);
sprite1.anchor.set(0.5);
sprite1.pivot.set(0, 100);
sprite1.tint = 0xfff000;
container.addChild(sprite1);

renderer.screen

sprite1 = new PIXI.Sprite(texture);
sprite1.position.set(app.renderer.screen.width / 2, app.renderer.screen.height / 2);
sprite1.anchor.set(0.5);
sprite1.pivot.set(0, 100);
sprite1.tint = 0xfff000;
container.addChild(sprite1);

Blend Mode

function animate() {
    sprite1.scale = new PIXI.Point(0.5);
    sprite1.rotation += 0.1;
    sprite1.alpha = Math.sin(delta);
    sprite1.blendMode = PIXI.BLEND_MODES.MULTIPLY;
}

visible

function animate() {
    sprite1.visible = false;
}

interactive

function animate() {
    sprite1.interactive = true;
    sprite1.buttonMode = true;
}

Mask

function animate() {
    // sprite1과 sprite2를 겹친 상태에서
    sprite2.x = (app.renderer.width / 2) + Math.sin(delta) * 10;
    sprite1.mask = sprite2;
}

create sprite random position

for (let i = 0; i < 10; i++) {
  let sprite = new PIXI.Sprite(texture2);
  sprite.x = Math.random() * app.renderer.screen.width;
  sprite.y = Math.random() * app.renderer.screen.height;
  // 랜덤색지정
  sprite.tint = Math.random() * 0xffffff;
  sprite.anchor.set(0.5);

  container.addChild(sprite);
  sprites.push(sprite);
}

 

 

function animate() {
    delta += 0.1;

    container.y = Math.sin(delta) * 10;

    for (let i = 0; i < sprites.length; i++) {
      sprites[i].rotation += 0.1;
    }
}