Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by soylomass

  1. 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
  2. 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 😄)
  3. 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, textur
  4. 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.
  5. 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?
  6. 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?
  7. 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:
  8. Wow! Thanks for sharing this! You gave me a good reason to migrate Deeeep to pure Pixi, as phaser 2 doesn't have Mesh.
  9. I changed the title because it may lead to misunderstandings. The sprites use small images, but they are repeated using big tilesprites.
  10. 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. deeeep.io 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.
  11. 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)
  12. The Dev Log (https://phaser.io/phaser3/devlog/73) mentions a new Game Object called Layers that acts as a graphical container for game objects, but I can't find it on the API or on the code. Does it exist yet? Otherwise what can I use as a replacement for Phaser 2 groups? There isn't anything similar? Groups in phaser 2 gave its children a relative position and the group's position and scale affected all of them.
  13. Thanks for your answer. I think it's great that it uses its own renderer. What I care the most is basically mobile performance. I did not do a comparison myself, but I read that Pixi.js latest version was optimised for mobile, and performed quite better than Phaser 2's renderer. Anyway, I'll start developing my game using Phaser 3 and I'll see what the results are.
  14. Hi, I'm about to start a new project, and having used Phaser 2 in the last one, I'd like to use Phaser 3 in this one, as I'm familiar with the API. But I have a doubt about the graphics library. Phaser 2 used a custom version of Pixi, does the same happen with Phaser 3? If so, what version of Pixi is the latter closer to? How does it compare performance wise with the lastest version of Pixi? Thanks in advance.
  15. Ideally it should be a performant solution, as the size of the circle hole would change often.
  16. Basically that's what I want to achieve, removing/hiding a part of a sprite/image/graphic. That's the opposite of how masks work in Phaser, so does anyone know how to achieve that result?
  17. Hi, I'll take a look at that. I don't think I can use Bitmap Text honestly, as I render the chat with Phaser, and I have to support non-alphabetical languages (like Chinese). Having a bitmap with thousands of Chinese characters would take a lot of space I guess. Do you think that rendering the chat with HTML would be better?
  18. Hi, I am the (sole) developer of this io game. Honestly, I've done the most I could to make it work as good as possible, but it still fails to work well in low/mid end computers (specially in the "deep" and "swamp" biomes), and I think that this is causing a lot of people to give up playing it. I don't know if this is the correct place to ask for this, but I would like to have someone who has experience in Phaser, to see the client code and do all the modifications he/she considers to make it work better. Of course I would pay for this, we can discuss the amount.
  19. Hi, is it possible to load assets on the run, and show them on a sprite when they are loaded? I'm developing a team feature, where a team (and it's logo) may have been created after the game was loaded (therefore I can't load it's texture on preload). I've seen other canvas games which do that, for example Agar.io (http://agar.io/). You can check the chrome console, Network tab, filter by Img, and you'll see the images are loaded as a player using them appears on screen. This is all seamless. Is it possible to do with Phaser? Thanks in advance.
  20. I am, actually, but didn't destroy them manually. I thought they would be destroyed when restarting the state I'll try that. Thanks!
  21. As a workaround, I'm emptying the CanvasPool before restarting the stage: while(PIXI.CanvasPool.pool.length > 0) { let elem = PIXI.CanvasPool.pool.pop(); elem.parentNode = null; elem = null; }
  22. It's me again. I have a problem with my game. Whenever a user changes server, I recreate the game (because otherwise I should reset a lot of things) using: game.state.start(game.state.current, true, false, host); It works fine, but each time I do this, the memory grows a lot. I've checked the memory profiler of Chrome Console, and I see that there are a lot of big BitmapData inside CanvasPool, which explain most of the used memory: Is there any way to avoid this? It causes crashes in low memory devices (like most mobile phones). Thanks in advance.
  23. Thanks, it was a moment of inspiration where all the designs came to my mind, haha. I'm more a programmer than a designer.
  24. Another note, if I move a group from one group to another one, with group1.remove and group2.add, when I destroy the child group at the end, it won't be removed from it's last parent's hash property (group2), so I had to set group2.hash.length = 0 after moving a child.
  25. Oops, I found the cause. Each time I created an sprite/group, I first created it and then added it to a parent group with group.add, but the child "parent" property always remained as world. I solved it by setting the parent parameter in the constructor method.
  • Create New...