Interactive

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-projection.min.js"></script>

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 600px;
}

JavaScript

const elements = [{
  src: "https://media.gettyimages.com/vectors/two-women-jump-and-highfive-each-other-vector-id1207202567?b=1&k=6&m=1207202567&s=612x612&w=0&h=4aSgSDLbwYuUYEi7Kb1bd2oTitPYsRb24NMgyqi2MW4="
}];

const app = new PIXI.Application({
  width: document.body.clientWidth,
  height: 600,
  backgroundColor: 0xCCCCCC,
  antialias: true,
  resolution: 2
});

document.body.appendChild(app.view);

const stage = app.stage;

const container = new PIXI.Container();
stage.addChild(container);
const sprite = new PIXI.Sprite(PIXI.Texture.from(elements[0].src));
sprite.interactive = true;

container.addChild(sprite);

const s = new PIXI.Sprite(PIXI.Texture.from(elements[0].src));
s.interactive = true;
s.width = 200;
s.height = 200;
container.addChild(s);

sprite.on('click', event => {
  console.log('BIG SPRITE');
});

s.on('click', event => {
  console.log('SMALL SPRITE');
});

stage.hitArea = new PIXI.Rectangle(0, 0, document.body.clientWidth, 600);
stage.interactive = true;

stage.on('mouseup', () => console.log('STAGE MOUSE UP'));
/* stage.on('mousemove', () => console.log('STAGE MOUSE OVER')); */