I'm trying to create a Scratch Card game using PIXI.js 2D rendering library.
I have created a prototype using the Web Canvas api by creating a matrix of canvases and changing the pixel colours by using this method:
cavas2DContext.putImageData(new ImageData, positionX, positionY)
When I try to do something like that using PIXI.js, I create a PIXI.Container and render it using PIXI.CanvasRenderer.
Within the container, I create a matrix of stages using PIXI.Stage and two sprites using PIXI.Sprite inside each stage (one for the random image, and one to cover the image).
I'm finding some difficulties when I try to use PIXI's CanvasRenderContext2D.putImageData, and it's not even making the cover image transparent.
The prototype applies a transparent ImageData object and manipulates the pixels within a certain specified space (mouseX, mouseY) for example, and it works, but it's not yet working when implementing it in PIXI.js.
I there a certain thought that anyone can give me? some advice that will help me achieve this goal.
Thanks so much, really appreciated!!
Cheers
This should run perfectly if Angular.js and PIXI.js libraries scripts exist in index.html
TypeScript Snippet
angular.module("App").directive("scratchbox", scratchbox);
function scratchbox(): Object {
let directive: ng.IDirective = {
restrict: 'E',
template: '<div id="renderer"></div> ', //'<div id="scratch-box" style="background-color: #fd583f;"></div>',
replace: true,
link: linkFn
};
return directive;
function linkFn(scope, element, attrs, ctrl): void {
let scratchBox = element[0];
let padding = Number(attrs.padding);
let matrixX = Number(attrs.matrixx);
let matrixY = Number(attrs.matrixy);
let width = Number(attrs.width);
let height = Number(attrs.height);
let brushSize = Number(attrs.brushsize);
let fullWidth = width + (matrixX * padding) + (padding * 3);
let fullHeight = height + (matrixY * padding) + (padding * 3);
let imgHeight = height / matrixY;
let imgWidth = width / matrixX;
let length = matrixX * matrixY;
let images = [];
let scratchImage;
let posX, posY, jumpY, jumpX;
let brushImageData = new ImageData(brushSize, brushSize);
brushImageData.data[0] = 1;
brushImageData.data[1] = 1;
brushImageData.data[2] = 1;
brushImageData.data[3] = 1; // or 0 but should it like this
images = JSON.parse(JSON.stringify(attrs.images)).split('-').map((current, index, arr) => {
return current.split(',');
});
scratchImage = new Image();
scratchImage.src = attrs.scratchimage;
scratchImage.width = imgWidth;
scratchImage.height = imgHeight;
posX = padding;
posY = padding;
jumpX = padding;
jumpY = padding;
let scratch = '/development/_public/images/scratch.png';
//let canvas, ctx;
let sprite, scratchSprite;
let renderer = new PIXI.CanvasRenderer(fullWidth, fullHeight, { backgroundColor : 0xFD583F}); //orange
console.log(PIXI);
let stages = [[], [], []];
let sprites = [[], [], []];
let scratchSprites = [[], [], []];
let mainCanvas;
let stage = new PIXI.Container();
scratchBox.appendChild(renderer.view);
renderer.interactive = true;
stage.interactive = true;
mainCanvas = angular.element(scratchBox).find('canvas')[0];
createMatrix();
animate();
function createMatrix(): void {
for (let row = 0; row < matrixX; ++row) {
jumpX = padding;
for (let col = 0; col < matrixY; ++col) {
//IMAGES CONTAINERS
stages[row][col] = new PIXI.Container();
stages[row][col].x = posX + jumpX;
stages[row][col].y = posY + jumpY;;
stages[row][col].height = imgHeight;
stages[row][col].width = imgWidth;
stages[row][col].interactive = true;
stages[row][col].row = row;
stages[row][col].col = col;
//stages[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
//stages[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
//RANDOM PRIZES SPRITES
sprites[row][col] = PIXI.Sprite.fromImage(images[row][col]);
sprites[row][col].cacheAsBitmapboolean = true;
sprites[row][col].interactive = true;
sprites[row][col].height = imgHeight;
sprites[row][col].width = imgWidth;
sprites[row][col].row = row;
sprites[row][col].col = col;
sprites[row][col].position.set(0, 0);
//sprites[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
//sprites[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
//THE SPRITE SCRATCH IMAGE: EACH PRIZE IMAGE HAS IT'S OWN SCRATCHING AREA
scratchSprites[row][col] = PIXI.Sprite.fromImage(scratch);
scratchSprites[row][col].cacheAsBitmapboolean = true;
scratchSprites[row][col].interactive = true;
scratchSprites[row][col].row = row;
scratchSprites[row][col].col = col;
scratchSprites[row][col].height = imgHeight;
scratchSprites[row][col].width = imgWidth;
scratchSprites[row][col].position.set(0, 0);
//scratchSprites[row][col].bounds = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
//scratchSprites[row][col].hitArea = new PIXI.Rectangle(posX + jumpX, posY + jumpY, imgWidth, imgHeight);
stage.addChild(stages[row][col]);
stages[row][col].addChild(sprites[row][col]);
stages[row][col].addChild(scratchSprites[row][col]);
stages[row][col].on('mouseover', mouseover);
stages[row][col].on('mouseout', mouseout);
jumpX += imgWidth + padding;
}
jumpY += imgHeight + padding;
}
}
function animate(): void {
requestAnimationFrame(animate);
renderer.render(stage);
}
let brushImg = '/development/_public/images/red.jpg';
function brush(event): void {
let mouseX = event.data.originalEvent.layerX;
let mouseY = event.data.originalEvent.layerY;
let row = event.target.row;
let col = event.target.col;
//Transparent image way
// let brushSprite = PIXI.Sprite.fromImage(brushImg);
// brushSprite.cacheAsBitmapboolean = true;
// brushSprite.interactive = true;
// brushSprite.height = 5;
// brushSprite.width = 5;
// brushSprite.position.set(mouseX, mouseY);
//brushSprite._tint = 0x000000;
//brushSprite.alpha = 1;
// stage.addChild(brushSprite);
//Graphics rectangle way
// let graphics = new PIXI.Graphics();
// graphics.beginFill(0,0.1);
// // // set a fill and line style
// //graphics.alpha = 1;
// graphics.drawShape(new PIXI.Rectangle(mouseX - 25, mouseY - 25, 50, 50))
// graphics.endFill();
// stage.addChild(graphics);
//Pixel manipulation
var ctx = new Object(renderer.rootContext.__proto__);
console.log(ctx)
renderer.view.getContext('2d').beginPath();
renderer.view.getContext('2d').putImageData(brushImageData, mouseX - (brushSize / 2), mouseY - (brushSize / 2));
renderer.view.getContext('2d').fill();
}
function mouseover(event): void {
let row = event.target.row;
let col = event.target.col;
stages[row][col].on('mousemove', brush);
}
function mouseout(event): void {
let row = event.target.row;
let col = event.target.col;
stages[row][col]._events['mousemove'] = null;
}
}
}
HTML
<div id="main-page" class="pages" style="width: 100%;height: 100%;min-width: 100%;min-height: 100%;position: relative;">
<scratchbox
width="500"
height="500"
padding="20"
matrixX="3"
matrixY="3"
brushSize="50"
images="/development/_public/images/carr0.jpg,/development/_public/images/carr1.jpg,/development/_public/images/carr2.jpg-/development/_public/images/carr3.jpg,/development/_public/images/carr4.jpg,/development/_public/images/carr5.jpg-/development/_public/images/carr6.jpg,/development/_public/images/carr7.jpg,/development/_public/images/carr8.jpg"
scratchimage="/development/_public/images/scratch.png"></scratchbox>
