DeusX

Members
  • Content Count

    14
  • Joined

  • Last visited


Reputation Activity

  1. Like
    DeusX reacted to ivan.popelyshev in Apply Filter only to small area   
    I did it.
    https://github.com/pixijs/pixi-picture
    https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js
    Second solution is also available now
  2. Like
    DeusX reacted to ivan.popelyshev in pixels() returns only 0   
    You didnt account for anchor and sprite transform. "var p = this.sprite.toLocal(mouse.global)" should give you local coords , then you floor them and shift by (anchor.x * width, anchor.y * height)
    Also, `extract` works bad with elements that already have parents, there are no guarantees that this thing wont be shifted. It will also modify the sprite transform which is bad, because you are inside interaction call right now and all interaction with sprite children might go wrong. Use it on your own risk.
    Pixi does not support per-pixel interaction, and there's no plugin for it.
    1. generate bits from base texture that was loaded and look there, instead of `extract` info.
    2. rewrite all pixi shaders, add `mouseCoords` uniform, make sure that shader writes object number there if alpha is not zero. Call `readPixels` on the end of each frame, get object number, find object in tree by that number.
    Unfortunately, I dont have time to give you more information and guide through the process. Maybe someone else can add more ideas?
  3. Like
    DeusX reacted to ivan.popelyshev in pixels() returns only 0   
    Suppose we go for bitmap. Take baseTexture, its "Image" source, draw it to temporary canvas, call "getImageData" on it, there's your bitmap, cache it somewhere. Don't forget to account for Texture shift (sprite.texture.frame!!!)
  4. Like
    DeusX reacted to ivan.popelyshev in pixels() returns only 0   
    let canvas = document.createElement("canvas"); canvas.width = 100;canvas.height = 50; and then your stuff. You dont need to use "extract". You can also store that temporary canvas somewhere in global or in the texture (cache it!). Also you dont need ALL pixels, just call getImageData(myX, myY, 1, 1);
     
    Event better idea: cache whole array that returns getImageData, or only its Alpha component (every fourth elemtn starting from fourth). EVEN BETTER: STORE ALPHA BITS (int32 stuff, i hope you know bitwise operations), that'll give you only one byte of storage per 8 pixels - that's much better trade than 4 bytes per pixel
    yeah, if "this.pixels" is your cache then its correct.
    I like it when people are not afraid of difficulties
  5. Like
    DeusX got a reaction from ivan.popelyshev in pixels() returns only 0   
    I can't test it right now but from what I understand this should work? Where 100 and 50 are the size of the sprite.
    And in my handler I keep my code(with addition of accounting for the things you listed) and work with the this.pixels array?
    let canvas = this.app.renderer.plugins.extract.canvas(); let context = canvas.getContext("2d"); context.drawImage(this.sprite.texture.baseTexture.source, 0, 0, 100, 50 ); this.pixels = (context.getImageData(0, 0, 100, 50).data);
  6. Like
    DeusX got a reaction from ivan.popelyshev in Apply Filter only to small area   
    Hello,
    I'm currently working on a little game with and Island and some (right now static) water, I was looking online for water-effects and found this, simple Article
    https://markhawkinsdesigns.com/blog/web-design/working-with-pixijs-v4-and-the-displacementfilter/
    I really like that effect but how do I restrict the area so that some of the image (especially the borders of the image, they look weird) stays uneffected, right now it looks a bit like wet paper instead of water. I tried using masking but that doesn't really help because now we have the same Image in the background but the edges of the foreground are still moving.
    Restricting filterArea and changing the padding doesn't really work also. My Goal right now is that the edges of the images stay static respectively uneffected by the filter.
    Thanks.
  7. Like
    DeusX reacted to samme in Clicks on Object and Background   
    https://codepen.io/samme/pen/dqLgRQ?editors=0010
  8. Like
    DeusX reacted to fazz in Clicks on Object and Background   
    I don't think you're testing input on the cookie correctly, you're passing *this* instead of *this.cookie* to your handler method. Try this instead,
    this.cookie = this.physics.add.sprite(400, 400, "cookie"); this.cookie.setInteractive(); this.cookie.on('pointerup', function() { // do something to the cookie this.doSomething(); }, this.cookie);