Image Manimpulation per pixel

[Serajo]

Hi everyone!

I have made a game which uses PIXI.Sprites for different textures like chests etc. I now have the task, that when i shoot theses textures, they have to get fragmented by voronoi fracture.

The simple steps of voronoi are clear to me, but i was wondering, if it is possible, to load the PIXI.Sprite directly into some sort of bitmap so i can interact pixel by pixel and make them transparent etc.

 

Or would it be faster to create an 2d Array, since it's only 32x32 pixels, and create a new image overlay from this one?

 

Thanks for help and answers in advance!!

[ivan.popelyshev]

Yes, its possible, I dont get it whats your problem?  "Texture.fromBuffer()" , and regularly update it and notify texture resourcec that it has to be reuploaded. The easiest way is to make a canvas with 2d context, draw your image there, use geTImageData/putImageData when needed, use "Texture.from(canvas)", use "texture.update()" evrey time you change something.

[Serajo]

I wasn't quite sure if this would work for Sprites since I'm somewhat new to the whole javascript and html and pixi stuff but thank you !

I guess this will work for my particular case

[ivan.popelyshev]

> I'm somewhat new to the whole javascript and html and pixi stuff but thank you !

I recommend to do something with pure canvas 2d context - its easy and you'll get the general feel of html5 canvas

And maybe even "webgl fundamentals" later when you have time.

I recommend it because there are problems with "bitmap" classes everywhere in html5 renderers, not only pixi. The best way to fix them for your case is to know the low-level layer a bit.

I'll be glad to answer questions when you have something concrete

Edited June 7, 2021 by ivan.popelyshev

[Serajo]

I've created a canvas with given 2d context now and I don't know if I've gotten the texture correctly from my object. chests[c]is an array and the object from whom i want to get the texture is at position c.

<canvas id="block" width="32" height="32"></canvas>

let canvas = document.getElementById('block');
let ctx = canvas.getContext('2d');

texture = PIXI.Texture.fromBuffer(chests[c], 32, 32);

but I'm somehow stuck. I can't find a way, to load this texture into my canvas, and manipulate the canvas and load it back into the texture at position c. I don't know if I'm to stupid to find a correct way or searching for the wrong things....

[ivan.popelyshev]

I dont know how to fix that code, it seriously lacks many things.

I can give you another code that lacks many things, hope that helps.

canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');

//draw something in ctx, maybe all blocks.

const baseTex = new PIXI.BaseTexture(canvas);
// consider you had block at position x,y with w,h
const texForBlock = new PIXI.Texture(new PIXI.Rectangle(x,y,w,h), baseTex);

//draw something else update canvas?
texForBlock.update(); // update one of textures that depend on canvas, that's enough.

 

[Serajo]

 

No no, it's not a code to fix, it's the point of where i don't really know how to progress further. I have my canvas, and i have my pixi texture. I now want to load my pixi texture into the canvas that I've created before. In the canvas, i then want to manipulate, as you said, the texture pixel by pixel and afterwards load it back into my pixi texture.

[ivan.popelyshev]

> I now want to load my pixi texture into the canvas that I've created before

"renderer.extract" it. Its slow because its readPixels. That's why I need exact case from you - there are many hacks can be done , i dont know which one you have to do. Alternatively, just go learn 2d first. Actually, yes, reproduce what you want to do with pure 2d canvas, no pixi, no other libs. Then i can tell you how to do the same thing with pixi.

Edited June 8, 2021 by ivan.popelyshev

[Serajo]

Okay thank you, then I'm going after 2d first again!! Thanks for your fast replies  really helping out!