All Activity

This stream auto-updates     

  1. Yesterday
  2. Hello, and welcome to the forums! Looks like a general JS problem. Someone will help you with code, I'm sure My two bits: 1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option 2. store images in array, store current image in a variable. 3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is. 4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its totally fine to write on your own first, because you need to understand how such things work.
  3. i am trying to making zoomin images slideshow using pixijs on canvas from three images below this I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload); } function handleimagesload() { var imagessprites=[] var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture); var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture); imagessprites.push(img1) imagessprites.push(img2) imagessprites.push(img3); for (let index = 0; index < imagessprites.length; index++) { const element = imagessprites[index]; pixiapp.stage.addChild(element); // here will the the code to run zoom image to specific width and heigth and then move to next image, // here is my code, its only display zooming third image var ticker = new PIXI.Ticker(); ticker.add(() => { console.log('ticker called') element.width += 1; element.height += 1; if(element.width==1500) { ticker.stop() } }) ticker.start() } } One more things, how to display a box with text for three seconds before slideshow start.
  4. You misunderstood Ivan anwser I think. TLDR : while(app.stage.children[0]) { app.stage.removeChild(app.stage.children[0]) } Problem with your code is that your remove element at a specific index during iteration, so you don't remove all elements. I think app.stage.removeChild() withotut parameter is equivalent to app.stage.removeChild(app.stage.children[0]), but can't check right now.
  5. Oh, its a new scene problem! Then you have a few options 1. Destroy all textures and re-load all the assets 2. Dont destroy textures, dont pass "texture:true" in recursive destroy. - in that case you share assets between two scenes 3. Some textures are shared some are not.. Well.. you have to know how loader and everything else related to assets work to make that work Lets think about 2) Instead of going through those If's , why not just make scene a child of stage? stage.addChild(scene) ... scene.destroy({ children: true }); // destroy only texts textures and containers/children . All referenced textures are alive! // now scene does not exists even in stage. IF you dont want to do that, well, you can destroy() whole stage and recreate it with "app.stage = new PIXI.Container()" - its fine. Or you can use those FOR's but just regular FOR with backwards iterator for (let i=children.length-1;i>=0;i--) { children[i].destroy({children:true}); } and {children:true} is the same as "true" in that case. Now I remembered it > You misunderstood Ivan anwser I think. VVV yeah, I just posted all the data i know instead of thinking about user problem, it happens
  6. So I guess the anwser is, there is no best way. I want to kill everything on screen and re build, e.g. move to a new scene... this makes sense for how my mind is viewing the game and how pixi works, and I was hoping that there might be wisdom for a best case, or normal way of proceeding. This not the case then it sounds like someone (maybe me) needs to work it out and write a tutorial and its seems pretty basic to want to add and remove sprites and containers without them lingering on screen or having to do strange hacky things.
  7. > there is no much materials how to use ShaderToy with PIXI We start expansion in that territory not long ago When people will be able to convert things by instinct and not by knowing everything there - that'll mean we succeeded. Writing docs takes time and front is very big.
  8. Well you are kind of second person who noticed that it doesnt work, so I added to some list... maybe it'll work in later versions
  9. There are many other more critical criteria before approval, some of which might feel obscure. But yes, >3MB is not a specific issue. 10MB is probably a sensible cut off for developed nation audiences? Whereas for "Instant Games Lite" you'd need to aim for <1MB. That's a technical challenge and will likely need to adopt some postloader techniques like @plicatibu mentions. https://developers.facebook.com/docs/games/instant-games/guides/lightweight You should evaluate as to whether the "Lite" pros outweigh the cons for your particular game design and intended audience.
  10. Best way is "stage.removeChildren()" but you might need some extra stuff if you want to manage your Texts differently or Textures - destroying texts is a problem because... well.. i dont have time to explain, here's one of those threads, you can search more: https://github.com/pixijs/pixi.js/pull/6427 Read up removeChildren() code anyway. If you use destroy() of all children , do it with backwards iteration, that way you wont trigger the problem you encountered. Or copy the array of children before you iterate through it.
  11. > Very strange. both of your implementations remove only half objects because you actually modify the collection Look at the picture. Unfortunately, I dont have enough time to explain everythign to people this month, so I can do only general suggestions: Look at https://github.com/pixijs/pixi.js/tree/dev/packages/display/src 1. I hope you have experience with adding/removing elements in array. 2. You have to read sources of removeChild and removeChildren. 3. You have to read source of destroy() 4. You have to understand how exactly javascript GC works and why cant we just "remove object". 5. even destroy(true) is different from our "destroy" . Does it handle WebGL textures ? i dont know. Read up on that. 6. WebGL objects need a destroy, everything else needs to be removed from global and local scopes, not more. Why? Need experience with javascript and WebGL to understand that. PixiJS just mirrors it. Now you can meditate on that and wait when someone with free time can explain you how to delete objects in pixi.
  12. I'm trying to remove sprites and containers from the current app.stage as to add new ones–e.g. change scene. However, both: let i = 0; app.stage.children.forEach(function(child){ app.stage.removeChild(i); i++; }); and app.stage.children.forEach(function(child){ child.destroy(true); }); remove the top level sprites but not the ones in a container?! Very strange. A second trigger of either of the above then removes them but I'd rather not trigger a function twice without working out why it's not working. I'm running pixi.js - v5.2.0
  13. I am not asking for it. There are probably more important things for the team to work on!
  14. Thanks! I solved it by creating an <img> from the buffer (base64) and passing that to Texture.from().
  15. Okay, no worries please let me if something comes up for remote Regards Nicole
  16. @ivan.popelyshev yess its greate. when unFoucuse . this plugin convert string in input to SpriteText.
  17. Oh, right, fromBuffer() doesnt work with canvas2d. Whole TextureResource subsystem werent coded for it yet, because no one needed that. Now that you've asked for it , we can have that in two months or so, because it requires to code whole system for canvas and not just one "fromBuffer", and most of the team is busy.
  18. There's https://github.com/Mwni/PIXI.TextInput
  19. Sorry, I'm restricted by my institution on this one. There really isn't a possibility of remote work in this instance. best wishes Jon
  20. You're welcome. If you need to combine those two inside of pixi stage, you'll have to write your own pure pixi input unfortunatelly
  21. Thanks a lot. I hope you will be able to upload that and I'm sure a lot of ppl here would have use from that, since there is no much materials how to use ShaderToy with PIXI. I'm giving my best to combine code samples and advices you guys give me to make it work, since I don't have knowledge and experience with Shaders i rely only on pure instinct and luck, so any information and example are more than valuable.
  22. You can either do multiple rendertextures or you can create two and recycle them. (or 3 if you need 2 input + 1 output) Also creating new uniforms is just as simple as writing them. The iChannel0-n is just how shadertoy gives access to them. So writing something like `uniforma sampler2D noise;` for example would be perfectly ok and then you could just pass an texture to that uniform on js side. I had two examples made about shadertoy & pixi (one with mesh and other with filter). Looks like that's still in pr. Might update it to include multiple buffering during this week if I manage to find extra time.
  23. Thank you very much! πŸ˜„
  24. Can you give me one advice, btw. I looked for his example and noticed that he is creating RenderTexture from Buffer and he is using 2 RenderTextures one for Buffer one for Image, since that shader has its Buffer A and Image on Shader Toy. Shader that I want to use has Buffer A, Buffer B and Image, should I than create 3 RenderTextures? One more question, code he use differs from one from Shader toy just with this two lines for each Buffer he use. Since example I want to use also have iChannel1; I wounder, how should I define them? uniform vec2 iResolution; uniform sampler2D iChannel0;
  1. Load more activity