Jump to content

Image Manimpulation per pixel


Recommended Posts

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!!


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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....

Link to comment
Share on other sites

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.


Link to comment
Share on other sites


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.

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...