soylomass

Members
  • Content Count

    42
  • Joined

  • Last visited

About soylomass

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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!
  2. 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: resolution }  renderer.destroy(true) renderer = PIXI.autoDetectRenderer( newOptions); this.app.renderer = renderer; You can see it working here
  3. 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.
  4. 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?
  5. 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.
  6. 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.
  7. 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.
  8. 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!
  9. 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
  10. 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 😄)
  11. 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!
  12. 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.
  13. I've achieved a result using the method used by @george here: http://www.html5gamedevs.com/topic/15223-piximesh-textured-polygon-from-box2d-a-question-of-triangles-uvs/?tab=comments#comment-86335 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.
  14. 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?