• Content Count

  • Joined

  • Last visited

Everything posted by soylomass

  1. 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.
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. Hi everyone, I'm the developer of, a crowd translations system that has been already implemented in games like, and 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!
  7. I've solved it by recreating the canvas and the renderer when settings are changed: let renderer = this.renderer; let canvas = document.createElement('canvas'); = "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: resolution }  renderer.destroy(true) renderer = PIXI.autoDetectRenderer( newOptions); = renderer; You can see it working here
  8. 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.
  9. 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. Any idea?
  10. 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.
  11. Thanks everyone! I'll set a default resolution and if changing resolution at runtime works well, I'll implement a slider so users can change it.
  12. 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.
  13. 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!
  14. I have a question, if I want to create a simple object like a parallelogram with a plain color background, what's the most performant way? Using a Graphics object with drawPolygon, or using a Mesh? Considering both WebGL and Canvas. I've looked for the performance differences between Graphic and Mesh but didn't find an answer. Thanks
  15. Hi, I'll try one of those solutions once I get back home. About Pixi 5, will the migration be straightforward? (That it will be easier than migrating from phaser 2 to Pixi 4 Is out of doubt 😄)
  16. Update: Reutilising canvas patterns that share the same texture, finally I got constant 60fps! Drawing all the hundreds of triangles that form the whole map! Thats a 30x improvement from using tilesprites and masks in the way I was using them in Phaser 😃 Thanks to all of you for your support, now I'll continue with rewriting the Deeeep's client. PD: The solution was to edit lib/mesh/canvas/CanvasMeshRenderer.js's MeshSpriteRenderer.prototype._renderDrawTriangle function, replacing: context.drawImage( textureSource, 0, 0, textureWidth * base.resolution, textureHeight * base.resolution, 0, 0, textureWidth, textureHeight ); with: // create a nice shiny pattern! // TODO this needs to be refreshed if texture changes.. var imageUrl = texture.baseTexture.imageUrl; if(!_canvasPattern[imageUrl]) { var baseTexture = texture.baseTexture; const baseTextureResolution = baseTexture.resolution; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, baseTextureResolution); // Tint the tiling sprite /*if (this.tint !== 0xFFFFFF) { var tintedTexture = CanvasTinter.getTintedTexture(mesh, mesh.tint); tempCanvas.context.drawImage(tintedTexture, 0, 0); } else { tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } this.cachedTint = this.tint;*/ tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); _canvasPattern[imageUrl] = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } context.fillStyle = _canvasPattern[imageUrl]; context.fill(); As you see, I'm storing the canvasPatterns in a variable on that file, I'll try to make that cleaner. Also, I've commented the tint section because I'm not using tint right now. Now, the only thing that's left is figuring out why in Canvas there's a separation between all triangles, while in WebGL there isn't, but this isn't that important. (note: not talking about the big separation on the left, but the micro separations between all triangles, look at the center) Thanks again for all your help!
  17. The above solution with the constant canvasPattern creation fixed, storing it in the mesh object, works at 60fps, but with frequent fps drops that cause micro-stuttering. I'll try to see what else I can do to improve the performance. When I'm done, I'll post the result here.
  18. I've achieved a result using the method used by @george here: Basically, editing MeshSpriteRenderer.prototype._renderDrawTriangle and replacing the drawImage at the end with the canvasPatter from tilingsprite. It looks pretty good, but the performance is awfull, and degrades over time until the game crashes (without drawing anything else). I know that culling will help with this, but is there any kind of optimization I could add to this? Thanks in advance EDIT: I just noticed that that draw function is constantly called, that's why the fps degrade over time. I'll implement some state storing the pattern on the mesh, and will try to reutilise the canvas pattern to see if it improves performance.
  19. When I thought all my problems were solved 😴 I don't think that's at the reach of my capabilities, but what part of CanvasRenderer should I look at? CanvasMeshRenderer?
  20. Hi, could it be that a mesh with a repeating texture only works in WebGL mode? In canvas the meshes are invisible, unless I configure the uvs so as they draw a stretched texture, in that case it works on both Canvas and WebGL. In all cases baseTexture.wrapMode is set as PIXI.WRAP_MODES.REPEAT, I only change de uvs values: I've triangulated all the polygons so the meshes are triangles, drawn as : let mesh = new PIXI.mesh.Mesh(tex, vertices, indices, DRAW_MODES.TRIANGLES) (with and without the last argument) 0 and 1 uvss in Canvas: 0 and 1 uvss in WebGL: Bigger uvs in WebGL: Bigger uvs in Canvas: Meshes aren't visible, but no error shown.
  21. Wow! Thanks for sharing this! You gave me a good reason to migrate Deeeep to pure Pixi, as phaser 2 doesn't have Mesh.
  22. I changed the title because it may lead to misunderstandings. The sprites use small images, but they are repeated using big tilesprites.
  23. Hi, I have a problem with all my games related to optimization, and it's about how to draw huge sprites that form background/terrain. Examples: 1. This was my first one, it used Phaser, which used Pixi 2.x as renderer. It runs on canvas mode because in webgl mode it's much slower. In this game, the floor is created serverside as polygons, then the polygon points are sent to the client. In the client, I draw a squared tilesprite with the terrain design, then I write the polygon to a graphics object, and apply the graphics as a mask to the tilesprite. 2. This game is made using pure Pixi v4, it runs on webgl by default. Something similar happens here. The islands are circles, with a pattern filling, so I create a square tilesprite, then I create a graphics, draw a circle on it, and then apply it as a mask to the tilesprite. When drawing huge islands, it uses a lot of resorces. -------------------- Is there a better way to do these? I'm sure there is, but I've never been able to think of one. I've tried for example drawing a small vesion of these and then scaling them, but both the patterns and the borders look blurred. I'd be extremely thankful if anyone could help me think of a solution. Thanks!
  24. When do you think it will be completed? Is there any alternative currently for grouping objects? For example I want to group a character, it's health, it's name among other things and move/rotate/scale them together. (I used Groups in Phaser 2 for this)