Dilantha

Members
  • Content Count

    6
  • Joined

  • Last visited

Everything posted by Dilantha

  1. Hi @ivan.popelyshev Thanks for replying. Sorry if its not clear. Let me explain further. Im creating a simple jigsawpuzzle game and Im following the method explained in below thread . Now i want to add a background to the game. For that im using the method i have explained in the post. My problem is, whenever i change the background image i also have to redraw the puzzle pieces again. So im wondering is there a better way to do this where i can just change the background layer without having to redraw all the pieces ?
  2. Hello, Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?. Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you const parent = app.view.parentNode; var imagePath = "images/"+image; var landscapeTexture = PIXI.Texture.fromImage(imagePath); var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight)); background = new PIXI.Sprite(texture2); app.stage.addChild(background)
  3. @ivan.popelyshev Thanks for your reply. I will research more on this..
  4. @ivan.popelyshev How ever im facing a performance issue when trying to have large number of pieces of the puzzle. For example in below scenario 30 * 15 , the puzzle pieces moves very slowly. I suspect its because im adding the image 30 * 15 times to the canvas . basically i create a mask for each piece using mask.bezierCurveTo(p1x,p1y,p2x, p2y, p3x,p3y); Then i add that to the original image texture const bunny = new PIXI.Sprite(texture); bunny.mask = mask; bunny.addChild(mask); app.stage.addChild(bunny); I repeat this for every piece. Which i suspect can be the reason to the performance issue. Do you know a way of overcoming this ? Thank you
  5. @ivan.popelyshev Thanks a lot for your reply. I have removed splitting logic and placed the curves in different position of the original image and then applied the mask. Now it looks fine. Thanks again
  6. Hi, Im also following the same tutorial and trying to make my first project using pixi. Please bare with me for my beginner questions. After creating a mask with bezierCurve on four sides , i have split the original image into blocks and added the mask into those blocks. But as you can see below some parts of the mask is outside of the split image block This will eventually cutoff the parts outside the image block and look like below. Can you please help me to solve this ? It will be a great help. Thanks