Jump to content


  • Content Count

  • Joined

  • Last visited

Posts posted by soylomass

  1. Users have been reporting a problem for a long time where after some time playing the game, chat messages and player names (both of which use Text elements) would disappear and some time after that, the application would crash.

    As I don't have an iOS device, I installed XCode on a Mac OS VM and started to debug. I found out that most of the memory is consumed by Canvas instances, that don't seem to be garbage collected.

    I did a search on Google and found this https://github.com/openlayers/openlayers/issues/9291, could this be related?

    I will set the Canvas element's size manually to see if this fixes the issue, and will report with my results.

  2. I'm using Pixi 5 legacy and I notice that in Canvas mode, resolution affects texture sizes, see the examples:

    I'm making a "center light" using 4 square sprites and a center radial gradient sprite. I make it this way so the sizes can be dynamic.


    Both the green sprite and the red one have the same height. In this case I'm using a 8x8 white, tinted texture for the red sprite.


    If I use a base 10 (10x10, 100x100) texture, the effect almost disappears, scaling correctly:



    Also, if I use 1x1 texture,  the sprite becomes invisible with a resolution other than 1 (at least smaller than 1).


    Is this normal? How can I avoid it?

  3. 28 minutes ago, Jammy said:

    I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

    Yes, maybe I could create a small square version (for example 100x100) of the sky gradient, apply the gradient transparency on it somehow and then create a texture out of it and use it in both sides enlarged/skewed, this way I would be using only a small additional texture per sky. (though maybe 100x100 will look bad when enlarged)

    I will try this later.

  4. 54 minutes ago, Jammy said:

    Yea I see the issue...

    You could do it like a 9-grid (i.e. 3-grid), e.g. the sky is a 1px width gradient rendered from a photoshop png the height of the sky (stretched to the desired width), and on each end of the sky you attach your gradient-ed dither from photoshop or such.

    That way you could even do away with the pixel dither all together and just have joining skys with whatever gradient u want... but ofcourse im not sure on the impact of a stretched 1px texture, not tried it in pixi.

    The sky is made from a 1px width gradient, pixi works fine with that. But the gradients are made in real time as the users can change the colors of the skies, so everything has to be dynamic. 

  5. 2 hours ago, Jammy said:

    Feel you there bro I wouldn't touch shaders. I thought about this one a lot and what about maybe... A pixel art dither as a texture, repeated to the height of the screen, dithering from one color to transparency.

    You could maybe even build the dither on an off screen canvas.

    The problem is that the skies are gradients, not solid colors, so the borders should not only be a gradient from top color to bottom color, but have an horizontal alpha gradient from 1 to 0.

  6. I also experimented with drawing the graphics at the side line by line (or polygon by polygon, actually) from alpha 1 to 0, but I found out that to look good it should have next to one line per pixel and it would require a lot of lines, I don't think it'll be performant either.

    PS: Instead of sprite mask, in the first case, I tried with graphic mask, but it didn't respect it's content, it either showed all or nothing (no intermediate alpha values)

  7. So I'm building this map editor: https://mapmaker.deeeep.io/map/mrbirdyflee_cartography

    As you see, the separation between sky objects is too rough, I'd like to soften it. Each sky is a graphic object with textureFill and drawPolygon (because they are polygons)



    So what I did is create an aditional graphic per side, draw an extension of the sky on each. After that I use a 1x300 texture of a white to black gradient, create a sprite with it, enlarge it and apply it as a mask to each graphic:



    The problem is, when many of these objects are present on screen, the performance goes down, presumably because of the mask.


    Does anyone know of a better way to do this?


  8. Hi,

    In my game I'm using Pixi 4 using this method (https://www.html5gamedevs.com/topic/39049-drawing-huge-objects/?tab=comments#comment-223277) to create textured polygons. I do it by dividing the polygons in triangles, then creating meshes with DRAW_MODES.TRIANGLES. It works on both WebGL and Canvas.

    In Pixi 5 we can just create a Graphics object and draw the textured polygon with beginTextureFill and drawPolygon.

    What is the most performant way? Does Pixi 5 method work in Canvas too?

    Thanks in advance.

  9. 2 hours ago, lmfielding said:

    Your translation project looks incredibly cool too. I know a bit about i18n

    Thanks! Actually it has been inactive for a while since I'm working on a lot of things at the same time, but I really like that project.

    About the project related to this post, it's a map editor for one of my games, I'll make it's source public once I finish some of its main features.

  10. 1 hour ago, ivan.popelyshev said:

    There's a way to hack vertices in 5.1.1 . Unfortunately, someone erased my playground that shows it (pixi-playground can be edited by anyone)

    You can hack inside "graphics.geometry.graphicsData" , change shape points and lineStyle/fillStyle. You have to call "graphics.gepmetry.invalidate()" afterwards.

    As for cloning - it doesn't copy geometry, it just links to the same. You can have several graphics with different transforms but geometry is the same.

    It was discussed here, but examples are wrong, someone overrode them by mistake: 


    I just tried clone(). It looks like it takes the geometry by reference, so a change in the first graphic is reflected in the second, that's exactly what I needed! Thanks

  11. 1 minute ago, lmfielding said:

    It is only a new graphics instance, how many are you planning on making? When they aren't being rendered any longer garbage collection (optimisation) is easy, even if you know nothing about it... a lot of it is automatic.

    It's a drawing app and the polygons have to be re-drawn each time a vertex is moved, it could happen once per frame (60 times per second) while a vertex is being moved. That's 60 graphics created in a second. They will be cleared by GC but it MAY create a spike in memory consumption that slows down the game for an instant.

    Haven't tried yet though.

  12. Hi everyone, I'm the developer of https://crowdl.io, a crowd translations system that has been already implemented in games like Deeeep.io, Raaaaft.io and Microgravity.io.

    It allows you to have your game translated to dozens of languages doing almost nothing.

    In this stage it is completely free (and will be forever for everyone who implements it), and I'm willing to help with implementation if anyone wants to try it.

    Also, I'd like to hear feedback and suggestions about it.



  13. I've solved it by recreating the canvas and the renderer when settings are changed:

            let renderer = this.renderer;
            let canvas = document.createElement('canvas');
            canvas.id = "game-canvas";
            let body = document.getElementsByTagName("body")[0];
            let newOptions = <RendererOptions>{
                view: canvas,
                width: renderer.width,
                height: renderer.height,
                forceCanvas: forceCanvas,
                antialias: antialias,
                forceFXAA: forceFXAA,
                resolution: resolution
            renderer = PIXI.autoDetectRenderer( newOptions);
            this.app.renderer = renderer;


    You can see it working here

  14. On 9/24/2018 at 3:37 PM, Exca said:

    One canvas can only support either 2d canvas or webgl. Not both. So if your old renderer is a canvasrenderer then you need to recreate the view also to switch to webgl. And other way round.

    WebGL to WebGL didn't work either (it threw that checkMaxIfStatmentsInShader.js:19 Uncaught Error: Invalid value of `0` passed to `checkMaxIfStatementsInShader` error that I posted above).

    I'll try to recreate the view or directly reload the whole game.

  15. On 9/21/2018 at 9:49 PM, Exca said:

    The attributes given in the creation of webgl context are immutable. So you would need to create new webgl context and destroy the old one.

    Easiest way to do that would be something like this:

    var newOptions = {
      view: renderer.view,
      width: renderer.width,
      ...settings from your setup & default values needed...
    renderer = PIXI.autodetectRenderer( newOptions);

     So basically destroy the old renderer, keep the view intact and pass it on to the next renderer.

    I've tried doing this, with varying results:

    If the application starts with a canvasRenderer, I can recreate the renderer with forceCanvas = true, but if I set it to false, the following error appears:


    createContext.js:20 Uncaught Error: This browser does not support webGL. Try using the canvas renderer
        at Object.createContext (createContext.js:20)
        at new WebGLRenderer (WebGLRenderer.js:210)
        at Object.autoDetectRenderer (autoDetectRenderer.js:63)
        at <anonymous>:10:17


    If the application starts with a webglRenderer, and I want to recreate a webglRenderer, the following error appears:


    checkMaxIfStatmentsInShader.js:19 Uncaught Error: Invalid value of `0` passed to `checkMaxIfStatementsInShader`
        at checkMaxIfStatmentsInShader (checkMaxIfStatmentsInShader.js:19)
        at SpriteRenderer.onContextChange (SpriteRenderer.js:155)
        at WebGLRenderer.emit (index.js:150)
        at WebGLRenderer._initContext (WebGLRenderer.js:327)
        at new WebGLRenderer (WebGLRenderer.js:245)
        at Object.autoDetectRenderer (autoDetectRenderer.js:63)
        at <anonymous>:10:17


    And if I want to recreate a CanvasRenderer, the following appears:


    CanvasRenderer.js:111 Uncaught TypeError: Cannot read property 'imageSmoothingEnabled' of null
        at new CanvasRenderer (CanvasRenderer.js:111)
        at Object.autoDetectRenderer (autoDetectRenderer.js:66)
        at <anonymous>:10:17



    So, it only seems to work when using a Canvas renderer and trying to recreate a Canvas renderer. But I can't recreate a WebGL renderer, which most people use. Any idea?

  16. Hi, I'd like to give the users the possibility to turn off antialias at runtime, is there anyway to do it? Changing renderer.options.antialias at runtime does nothing.

    I've thought of just refreshing the website with a query parameter when the option is changed, but the game must also run on mobiles (Cordova) where refreshing a website isn't possible.


    PS: If it's possible, it would be even better if user could change between native antialias, fxaa, and completely disabled.

  17. Hi, I have the following questions about renderer's resolution property:

    1. It seems obvious, but I want to be sure: Does increasing the resolution of the renderer reduce performance?

    2. In case the above is true, may I implement a switch in my game so that users on low end devices can reduce resolution, increasing performance? If so, is there any problem with changing the renderer's resolution at runtime?


    Thanks in advance.

  18. 2 hours ago, ivan.popelyshev said:

    i guess both will work the same way. parallelogram can be just a sprite with skew transform and tinted color, "PIXI.Texture.WHITE" that way you can batch them , if you need it, of course :)

    Wow, just find out there are those kind of transforms. Wish I had read more before starting to code games. Thanks again for your extremely helpful support!

  • Create New...