pixijs 1

by Marodheure

HTML

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <script src="https://pixijs.download/v6.2.0/pixi.js"></script>
    <title>Pixi js 1</title>
  </head>

  <body>
  </body>

</html>

JavaScript

let app;
let loader;
let bunnyUrl = 'https://pixijs.io/examples/examples/assets/bunny.png';
let circlesUrl = 'https://pixijs.io/examples/examples/assets/bg_scene_rotate.jpg';
let circlesSprite;

Init();

function Init()
{
	app = new PIXI.Application();
	loader = PIXI.Loader.shared;
	document.body.appendChild(app.view);
	app.renderer.backgroundColor = 0x279e5b;
	loader.add([bunnyUrl, circlesUrl]).load(SuccessLoad);
}

function SuccessLoad(loader, resource)
{
	let bunnySprite = new PIXI.Sprite(resource[bunnyUrl].texture);
	app.stage.addChild(bunnySprite);
  bunnySprite.position.set(200, 0);
  bunnySprite.scale.set(2, 2);
	
	circlesSprite = new PIXI.Sprite(resource[circlesUrl].texture);
	app.stage.addChild(circlesSprite);
  circlesSprite.scale.set(0.1, 0.1);
	
	app.stage.interactive = true;
	app.stage.hitArea = app.renderer.screen;
	app.stage.on('mousedown', OnMouseDown);
  app.ticker.add(LoopGame);
}

function OnMouseDown(e)
{
	let x = Math.round(e.data.global.x);
	let y = Math.round(e.data.global.y);
	let w = Math.round(app.stage.width);
	let h = Math.round(app.stage.height);
	let pixels = app.renderer.plugins.extract.pixels(app.stage);
	let pixelR = pixels[4 * (y * w + x)];
	let pixelG = pixels[4 * (y * w + x) + 1];
	let pixelB = pixels[4 * (y * w + x) + 2];
	let pixelA = pixels[4 * (y * w + x) + 3];
	
	app.renderer.backgroundColor = PIXI.utils.rgb2hex([pixelR / 255, pixelG / 255, pixelB / 255]);
	console.log('x:'+x+' y:'+y+' ; w:'+w+' h:'+h+' ; R:'+pixelR+' G:'+pixelG+' B:'+pixelB+' A:'+pixelA);
}

function LoopGame(deltaTime)
{
	circlesSprite.rotation += 0.01 * deltaTime;
}