Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. We're currently doing "ie mode" by putting 2d canvas on and game to low-end rendering mode ( limited effects, low quality assets etc). Before getting to play client gets a lot of warnings that you should change your browser as MS no longer supports IE and it's a bad idea securitywise to use it. If some user has problems with IE, then no debugging is done for those, just a generic message that official support for IE has ended and you should change the browser. Also not full ES6 as I'm using Haxe mostly. With typescript projects I use ES5/ES6/ESNext depending on the project and target
  2. https://pixijs.io/examples/#/mesh-and-shaders/multipass-shader-generated-mesh.js That example has a texture that gets passed to next shader. You should do similar but instead of shader rendered texture you would render your heightmap into a texture and then pass that texture to your shader.
  3. The covering element has to have interaction enabled as well as the other item. Only those that are marked as interactive and whose parents dont have interactivechildren are taken into account when checking interactions.
  4. They are using 2d canvas, not 3d. 2d canvas has no limitations on amount as its run on the cpu and basically memory is the limiting factor in that. As a warning if you are going to do lots of canvases then you need to make sure they are updated only when needed. Otherwise your site will be very cpu heavy.
  5. You can destroy the textures after you have used them and create new ones when needed. Or if you know that you are about to reuse them at some point then you could just reuse the old ones and let pixi automatic memory management handle things. I have done one similar solution so that I created a graph that has basically a node with knowledge of what background it has and what are the next positions where it can move to. Then load that nodes bg and the ones next to it. And if distance goes farther away than N (in my case it was 1) then destroy that asset and reload when coming near again.
  6. Easiest way would be to render the rounded rectangle and then use a mask to show only parts of it. There's an example for that (with circle instead of rounded rectangle) here: I'll try to find time to make an example of spinners to pixi examples this week.
  7. Do you need to have the shapes update per frame? If not, you could draw them to a rendertexture and use that on the scene. Drawing that a bit larger than the viewport would alllow movement and then you would need to do update draw whenever enought movement has happened. If the points update on the fly, then that solution wont help as you would still end up drawing them every frame. Another option would be to draw your polygons with meshes. Might be faster or slower depending on how things update. There's also one way to make everything really fast with webgl2 using transform fee
  8. Correct way would be to create your own version with a flag that does the ignoring. Then make a pull request to make it part of pixi if others see that it adds value.
  9. If you dont have a need for pointer/touchmovement at all you could either fork the interactionmanager and use your own interactionplugin, remove the listeners or make the handling function do nothing. (game.renderer.plugins.interaction.processPointerMove = () => {} in v4, dont have a v5 project at hand to check how it would go there). Currently the interactionplugin does not have properties for ignoring certain events.
  10. If you want to make sure it's the interacitonmanagers search that is at fault you should take a profile when moving the mouse to see if that part of the code has issues.
  11. The interaction plugin tries to find target it moves over on and if you have lots of interactive elements to search from with complex hitareas then movement will slow things down as it has to iterate lot of stuff and see if they are under the pointer. You could try setting the armatures interactiveChildren to false to prevent them from going deeper into the armature.
  12. Exca

    Crisp Metaballs

    Do the metaballs need to be based on graphics? You could do much nicer looking metaballs directly with shader: https://www.shadertoy.com/view/wtfcWS
  13. Create sprites for each position you know you will have a sprite in, create new ones as needed and destroy old ones (without destroying the texture). Create textures of all the textures you have (put them in a spritesheet to get benefire of batch rendering) then just assign a texture to a sprite whenever it changes. You could also pool the sprites but that can bring lots of other issues depending on how it's done. And to answer the question about rendering single sprite to a multiple location. Sprite is basically doing just that. It renders the texture to a different location based o
  14. Are those standard html input fields with canvas below them? You could make a container that has a hitarea with the size of whole screen and set interactive = true. Then on the handler call blur for the inputfields (or focus for another element, canvas for example).
  15. setInterval(() => { this.cursor.alpha = 1; //alpha is undefined setTimeout( ()=> { this.cursor.alpha = 0; }, 500); }, 1000); You could use arrow functions instead. The scope to which this refers in javascript changes in your first example to functions scope. For more info on how this gets scoped check out this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
  16. The mp3 looping problem is caused by the format. It can be mitigated by fiddling around the original sound source and compression: https://www.compuphase.com/mp3/mp3loops.htm I'd suggest using multiple formats and drop them based on browser support. Most of the audio libraries have alternateExtension -configuration (or something similar) to handle this. I usually go with ogg as first choice and then mp3 for those that dont support ogg.
  17. I still have cases where the max is 2048x2048. Though we support very old hardware and even ie11.
  18. Anything below or equal to MAX * MAX is quaranteed to work (almost always, unless something is wrong with the gpu/driver). Going over either of those (even if decreasing another) might work or might not work. From the khronos specifciation: "The value gives a rough estimate of the largest texture that the GL can handle. The value must be at least 64. "
  19. For the MAX_TEXTURE_SIZE it's how many pixels the image can be in width/height.
  20. I'm sorry but I dont know what you mean with gpu & pixijs calculations? There shouldnt be any other than loading the assets. Or do you mean there happens some texture upload which causes a lag spike? You could avoid that by having the textures uploaded before rendering or waiting for one frame to be rendered and on the next frame swap the spinner with scene. Though in that case you couldnt use pixi spinner as the upload would halt it's rendering also.
  21. 1. In html: <div id="spinner">...spinner stuff here or in css...</div> <canvas id="canvas" style="visibility:hidden"></canvas> In code: preloadComplete = () => { document.getElementById("spinner").remove(); document.getElementById("canvas").style.visibility = "visible"; } 2. var spinner = new Spinner(); //Spinner being your spinner class extending container or something else that can be added to maincontainer app.stage.addChild(spinner); //Animate update app.ticker.add((delta)=>{ if(spinner.visible) spinner.upd
  22. const canvas = document.createElement("canvas"); //draw what you want to canvas.. //Build the basetexture, texture and sprite using the canvas const canvasTexture = new PIXI.Texture( new PIXI.BaseTexture(canvas)); const sprite = new PIXI.Sprite(canvasTexture); //Add the sprite where you want. If the canvas changes, you need to call update to basetexture. (Or it might detect it automatically, cant remember right now). And if you want to make it a bit faster you could use offScreenCanvas -element instead of canvas. Though that is not yet widely supported. https://developer.mozilla.org
  23. You can also use an external 2d canvas for a bit more of drawing api. You could even use p5js to draw that, then use that canvas as a source for basetexture.
  24. You could do that atleast in two different common ways: 1. Use good old classic css spinner and keep your game canvas hidden and set it visible & start rendering after load is done. 2. Have two containers, one containing a spinner and a second containing your gamescene. Render the spinner container when loading and after load is complete start rendering you scene container. If on the other hand question is about how to do a spinner animation with pixi, then let me know and I'll help with that.
  • Create New...