Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by soylomass

  1. Great, I'll update and see how it goes 😄 Thanks for your help
  2. @ivan.popelyshev Thanks! I use the following plugins (except pixi-tween): Most importantly, will upgrading to v6 improve performance? If so, then it's a must 😄
  3. Hi, I'm using Pixi.js v5.1.5 with legacy support in https://deeeep.io, I noticed there's a new v6 version. Is it recommended to update in my case? Are there any breaking changes? I use Typescript if it matters. Thanks in advance.
  4. 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
  5. 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 tha
  6. 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.
  7. 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.
  8. 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.
  9. I feel writing shaders is far away from my possibilities, at least for now😂 Will investigate anyway. Thanks!
  10. 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)
  11. 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, t
  12. I was 1 minute away from doing the migration to PIXI v5 until this 😂 But maybe I should still do it, and use both methods depending on the user's device.
  13. 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.
  14. beginTextureFill works perfectly when using a single sprite, but as soon as I use a sprite from a spritesheet, it doesn't work correctly anymore (it shows the rest of the spritesheet, instead of only repeating the frame). Is this a bug or a limitation?
  15. 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.
  16. 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
  17. 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.
  18. Because I want to do it each time I re-draw the original graphics, and creating new instances each time doesn't seem a good practice.
  19. Hi, is it possible to copy a Graphics content into another Graphics? I saw there is a clone method, but I don't want to create a new instance, I want to copy its contents into an existing Graphics. Thanks.
  20. 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. Thanks!
  21. 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]; body.appendChild(canvas); let newOptions = <RendererOptions>{ view: canvas, width: renderer.width, height: renderer.height, forceCanvas: forceCanvas, antialias: antialias, forceFXAA: forceFXAA, resolution: resolut
  22. 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.
  23. 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: If the application starts with a webglRenderer, and I want to recreate a webglRenderer, the following error appears: And if I want to recreate a CanvasRenderer, the following appears: 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
  24. 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.
  • Create New...