Search the Community

Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/ To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY

I'm creating triangles using Phaser.Graphics.drawTriangle. Then I'm rotating the shape by the center point (width/2, height/2). After that I want to place triangles side by side, but, after the rotation the height and width may change, so I recalculate this and get a new center point. But the shapes are not very well placed. How to place it right? There is another way to center the shapes? In attchament I generated the same triangle side by side rotating then 45°. The red dot and the lines are only for reference where they would be. Thanks in advance,

I'm using WebGL to render N triangles in 2D. The triangles' geometry and colors are random, computed once and placed in buffers at start up. My shaders are super simple. Then I render them by one call to drawArrays, and animate via requestAnimationFrame. The FPS drops rapidly as N grows (both on my PC and my MacPro). When N = 10k, it's painfully slow. All over the web I see smooth demos with very large numbers of triangles. What I'm doing is very simple: https://jsfiddle.net/CaptainHarlock/mphd96L5/ You can vary the number of triangles and see performance go down. I don't get it. Isn't WebGL expected to excel at this type of things? What am I doing wrong?

Hi, I'm trying to create a textured box2d polygon. I thought this is a common problem, but the resources I find a rare. Anyway, my progress so far is pretty ok (screen attached). See for yourself: http://jsfiddle.net/georgie/x6yva6v0/2 There are actually two problems to solve. Problem A: Texturing a polygon (and don't use a mask) Problem B: (Edit: Already solved, see my response) Transform a group of shapes (rectangles & triangles) to a list of vertices forming a single polygon. Problem A (Texturing) The texturing part is nearly done. There is only one problem left: How do I create the UVs to make a texture repeating in the Mesh? My current version simply stretches the texture over the polygon: var newUVS = []var ww = texture.width;var hh = texture.height;for(var i = 0; i< verticesMesh.length; i+=6){ var x1 = verticesMesh[i]%ww/ww var y1 = verticesMesh[i+1]%hh/hh var x2 = verticesMesh[i+2]%ww/ww var y2 = verticesMesh[i+3]%hh/hh var x3 = verticesMesh[i+4]%ww/ww var y3 = verticesMesh[i+5]%hh/hh newUVS.push(x1,y1,x2,y2,x3,y3)} Is this because the default shader is not expected to repeat a texture? Problem B (shapes to vertices) Never mind! This is solved, see my answer. My staring point are three shapes generated during the tessellation process in PhysicsEditor (or RUBE) I have those source points, which are manually placed in PhysicsEditor to form a polygon: [134, 74,169, 110,386, 110,523,245,572,198,491,120,536,75] Those points are transformed to this group of shapes. You see two triangles and one rectangle. The crux: the source points are not accessible later in the code. There is just this list of exported shapes available. "shape": [ 491, 191 , 386, 202 , 523, 66 , 572, 113 ]"shape": [ 536, 236 , 134, 237 , 491, 191 ]"shape": [ 386, 202 , 134, 237 , 169, 201 ]To create the actuals mesh in PIXI, I want to use PIXI.Mesh and therefore I need a list of vertices. My three options:1. Iterate over those three shapes, triangulate if necessary, and create 3 instances of a PIXI.Mesh to form the original polygon. This is bad, I really don't want three instances where I could get away with a single one.2. Get the three shapes, mangle them, and create a large list of vertices by triangulate every rectangle with poly2tri. This result is a mess: http://jsfiddle.net/georgie/x6yva6v0/1 as the vertices are in a indeterminated order I guess.3. Just export the source points I already have in the physics editor and don't waste your time merging those shapes. Of course! I would be happy to do so, but I can't get PhysicsEditor to export them and I can't try it in R.U.B.E yet. Maybe I don't see the obvious at the moment? Anyone with ideas here? Thanks for reading!