Search the Community

Showing results for tags 'polygon'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 53 results

  1. Box2D destructible terrain

    Hello there, Is it possible to create destructible terrain in HTML5 and box2d Video examples : Box2d Destructable Box2d Destructable terrain Any help in this direction would be much appreciated. Thanks Again
  2. My sprites are often passing through polygons that they should be bouncing off of. I've tried to research this and all I could find is that the fps may be too low to always detect the collision but surely the game engine should be able to handle this? Interestingly, if I use setCircle() my colliding sprites never pass through even with much higher velocity. Why would a polygon I define behave differently than setCircle() ? Here is a demonstration: //
  3. Hey. I am trying to using 2 polygons as mask for a sprite group. It seems to work with drawRect perfectly, when I use more than 1 (as in the example image). But whenever I try to use 2 polygons, it just apply the first one created as mask. One polygon is above the window, one being the window itself. (see the code). I have provided my example code here. poly = new Phaser.Polygon( { x: 0, y: 0 },{ x: 0, y: 255 },{ x: 153, y: 255 },{ x: 154, y: 218 }, { x: 176, y: 213 },{ x: 165, y: 215 },{ x: 165, y: 215 },{ x: 176, y: 213 }, { x: 199, y: 211 },{ x: 199, y: 211 },{ x: 201, y: 157 },{ x: 202, y: 149 }, { x: 205, y: 142 },{ x: 200, y: 139 },{ x: 199, y: 132 },{ x: 206, y: 127 }, { x: 215, y: 123 },{ x: 215, y: 123 },{ x: 231, y: 120 }, { x: 256, y: 116 },{ x: 303, y: 116 },{ x: 328, y: 119 },{ x: 349, y: 122 },{ x: 356, y: 125 }, { x: 360, y: 130 },{ x: 361, y: 151 },{ x: 365, y: 184 },{ x: 365, y: 216 }, { x: 366, y: 252 },{ x: 550, y: 251 },{ x: 552, y: 213 },{ x: 550, y: 210 }, { x: 550, y: 207 },{ x: 569, y: 201 },{ x: 591, y: 199 },{ x: 615, y: 199 }, { x: 638, y: 201 },{ x: 659, y: 204 },{ x: 675, y: 208 },{ x: 675, y: 212 }, { x: 675, y: 212 },{ x: 672, y: 213 },{ x: 671, y: 216 },{ x: 671, y: 249 }, { x: 767, y: 249 },{ x: 927, y: 239 },{ x: 947, y: 239 },{ x: 940, y: 479 }, { x: 957, y: 497 },{ x: 960, y: 509 },{ x: 960, y: 509 },{ x: 982, y: 532 }, { x: 984, y: 548 },{ x: 998, y: 568 },{ x: 1005, y: 562 },{ x: 1024, y: 561 }, { x: 1024, y: 0 } ); poly2 = new Phaser.Polygon( { x: 780, y: 280 },{ x: 876, y: 280 },{ x: 876, y: 371 }, { x: 848, y: 371 },{ x: 848, y: 352 },{ x: 779, y: 352 } ); mask =, 0); mask.beginFill(0xFFFFFF); mask.drawPolygon(poly.points); mask.drawPolygon(poly2.points); enemies.mask = mask; Is there something I have missed or is this a bug? Is there another (better) way of doing what I am trying to archive (on the example images)? Basicly it is one big image I just want to be able to define specific areas where enemies can be shown in-game. Since I would probably need to add at least a couple more areas. Thanks for your help.
  4. Hello everybody :-) I'm trying to use ExtrudeShape for creating a building shape and am having trouble with the cap. I understand that the cap is not tessellated (triangulated) so it would be faster. But when I have concave angles in the shape, it doesn't look good. I also tried using Ribbon for the roof polygon somehow, but the tessellation doesn't happen here either of course. Here is my code: I tried using PolygonMeshBuilder but the mesh is rotated the way I don't want it to and some walls keep dissapearing depending on the angle of view: I don't need the mesh to be updated so the speed of tessellation doesn't bother me much. What am I doing wrong? What can I do to have a tessellated building? Thanks :-)
  5. Hi, I'm trying to get a sprite to spawn within a polygon I've drawn in Tiled. I've imported the polygon like so: this.bunyipSpawnZone = new Phaser.Polygon(polygonSpawn[0][0],polygonSpawn[0][1],polygonSpawn[1][0], polygonSpawn[1][1],polygonSpawn[2][0],polygonSpawn[2][1],polygonSpawn[3][0], polygonSpawn[3][1],polygonSpawn[4][0],polygonSpawn[4][1],polygonSpawn[5][0],polygonSpawn[5][1]); polygonSpawn is the corresponding Tiled map object. Which is an array where [0] is the x coord and [1] is the y. this.bunyipSpawnZone returns a Phaser.Polygon with seemingly appropriate x and y coordinates. Phaser.Polygon_points: Array[6]0: Phaser.Pointtype: 25x: 158y: -6__proto__: Object1: Phaser.Pointtype: 25x: 20y: -852__proto__: Object2: Phaser.Pointtype: 25x: 902y: -852__proto__: Object3: Phaser.Pointtype: 25x: 892y: -996__proto__: Object4: Phaser.Pointtype: 25x: -96y: -978__proto__: Object5: Phaser.Pointtype: 25x: -114y: 0__proto__: Objectlength: 6__proto__: Array[0] area: -300120 closed: true flattened: false points: (...)type: 12 But the area is negative??? Why is that? And I can't seem fill in the area with graphics.beginFill() to verify that the polygon is in the right place. I tried using .contains for debugging as well, but that's also not giving me a true when I expect it to. Again the end goal here is to have an enemy spawn somewhere randomly in the polygon. But it seems I can't get a polygon working right. the github is Any help would be appreciated. Thanks!
  6. Maximum Scene Polycount

    Hello, I'm trying to export a model which is about 400,000 Polys. I know the maximum export is somewhere around 60, 000 for any one mesh. I am thinking about breaking and exporting the mesh in different parts. Will this lead to issues in the scene? Also, what is the best polygon count for a babylon scene for efficiency in web and mobile? Finaly, what is the maximum polygon count for a babylon scene before it crashes? Thank you in advance!
  7. I'm using P2 physics, and I'm creating a relatively intricate border around the screen that I want balls to bounce against. I am scaling all assets on the screen for 3 different aspect ratios, depending on the user's screen size. I create the border like this: bgOverlay = otherSpriteGroup.create(gameWidth / 2, gameHeight / 2, "bgOverlay"); bgOverlay.anchor.setTo(0.5, 0.5); bgOverlay.scale.setTo(scale.x, scale.y); bgOverlay.body.clearShapes(); bgOverlay.body.loadPolygon("physicsData", "bgOverlay"); bgOverlay.body.setCollisionGroup(otherCollisionGroup); bgOverlay.body.collides(bubbleCollisionGroup, otherHitBubble, this); bgOverlay.body.static = true; The trick is that I scale all assets using a Phaser Point, scale.x and scale.y. But when I load in the polygon data using bgOverlay.body.loadPolygon, it takes in actual pixel values, and I can't scale bgOverlay.body. I am not sure how to scale the numbers in the physics data. Any ideas?
  8. I have this code to add a rectangle in phaser and works fine but it fills with a solid color and i want some transparency in my poly. Is that possible? poly = new Phaser.Polygon(p_1, p_2, p_3, p_4); graphics =, 0); graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill();
  9. p2 complex ground shape

    Hey there So, this is my first post in here, i hope everybody is good out there, let's go straight into the issue. I'm new to, and I'm intending to use it to create a hill climber clone. I have successfully create car like shapes (following a couple of online tutos) but still very confused about how to create the land on which the car will run. To make it clearer, here's an illustration of what i exactly want: So basically, the original game introduces 2+ types of ground, that are the bridges, land, water, ... I need to implement only two types. I know how to "materialize" the body and everything that should go after i declare them, which is my problem. On examples page there's quiet half the solution to my problem but uses Box2D which is paid (and i can afford it right now, else, i would love to get it!)
  10. I found this topic where it says that graphics object in phaser has hitArea that can be any shape. I searched Phaser docs but didn't find hitArea property. Is it moved somewhere else or is there some new way how to make graphics object clickable and call certain function when a click event happens? Also how can I show cursor hand when rollover a clickable graphics object? I forgot to ask is there some official phaser example for this functionality? PS: I even searched DisplayObject class but didn't find hitArea there.
  11. I was wondering are there any useful functions in Pixi.js which I can use in my Phaser 2.6 application to darken /brighten fill color of rectangles polygons etc...? For example make rgb(200, 150, 186) 10% darker. I might code a function like that in JS but should I? A tool that does the job but it works in NodeJS:
  12. Draw closed polygon with border

    1. How can I draw closed polygon like the image above but without the diagonal black line that creates/finishes the polygon? 2. Or should I use Phaser.Polygon function at all? Is there some better solution? 3. Is it possible to create rectangle with mask smaller than the rectangle creating the image above? How would I apply border to this solution?
  13. Polygon .json scaling

    Hi, I want to scale both sprite and .json physics file, is that possible and if so, how? I ve seen a few posts about that but no answers. Thank you
  14. Hey everyone, I am making a simple Worms-Armageddon-like game for educational purposes in my University course. I have a problem figuring out how to implement the following with Phaser. THE SETUP: 1.) Standard map with loaded Polygon from PhysicsEditor - image 1. I am using P2 physics but can change to Box2D if necessary. 2.) Making a hole with some weapon - image 2. THE PROBLEM: I believe I have an idea how to make the visual hole in the sprite, by using this example (correct me if I am wrong or if there is a better method) I have no idea, though, how to change the body of the map by using Phaser - as in image 2. I would like to avoid doing it "by hand" with per pixel manipulation and making a new polygon manually every time. Is there an "automatic" way of calculating the polygon of a sprite by using its non-transparent pixels? Could you please help The code can be seen here and I will share the project once it is done. Thanks in advance for your time.
  15. Collision Maps

    I know I keep polluting this forum with my dumb questions.. BUT, what would be the easiest way to do a collision map not using tiles. I have seen some that make a solid color and tell the player they can't step into that color. I don't know how to get the color data for that so I was going to draw polygons and use ContainsPoint and kick the player out if he steps in or near and I couldn't figure out how to add points to a polygon already drawn so now I am running around the map and writing down my player location where I want my polygon points to be drawn and I felt stupid. More than usual. Who can shine the light for me? Turns out a huge polygon doesn't know when it contains a sprite's point.
  16. Layering moving polygons

    Hi all, I've been trying to achieve a certain effect. I have two polygons, one of which is still while the other moves, and when they overlap, I want to have the still polygon on top. However, it always seems to be the moving polygon that remains on top. I've been trying to use groups following the example here, to no avail. Here is (most of) the offending code: var LayerTest = { preload: function () { }, create: function () { / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2); var center_group =; center_group.z = 1; var center_hexagon_graphics = new Phaser.Graphics(game, 0, 0); var center_hexagon_poly = buildRegularPolygon(0, 0, 6, 40); center_hexagon_graphics.beginFill(CENTER_COLOR); center_hexagon_graphics.drawPolygon(center_hexagon_poly); center_hexagon_graphics.endFill(); center_group.add(center_hexagon_graphics); var moving_group =; moving_group.z = 0; moving_graphics = new Phaser.Graphics(game, 0, 0); moving_group.add(moving_graphics); }, update: function () { var moving_poly = new Phaser.Polygon([ new Phaser.Point(-SIZE_X / 2 + tick, -10), new Phaser.Point(-SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, -10), ]); moving_graphics.clear(); moving_graphics.beginFill(ALT_COLOR); moving_graphics.drawPolygon(moving_poly); moving_graphics.endFill(); tick++; }};This particular example creates a regular hexagon around (0,0), and a small yellow square in the left side of the screen that then moves right and overlaps with the hexagon. Even though I set moving_group.z to 0 and center_group.z to 1, it always paints the small square on top. I also tried to do without the groups, setting the z indices on the graphics directly, but it didn't make a difference. Any help will be much appreciated.
  17. Add Polygon (P2)

    Hey, I'm trying to add a custom collision polygon for a hexagon. I've measured the corners of my hexagon in illustrator: 28, 055,1655,4828,00,480,16 When I try to implement it:game.physics.p2.enable(hexagon, true);hexagon.body.clearShapes();hexagon.body.addPolygon( {} , [[28,0],[55,16],[55,48],[28,0],[0,48],[0,16]]);The collision polygon is not visible at all (in debugger). I've never tried adding a custom polygon so I have no idea what I'm doing wrong. Thanks.
  18. P2 physics semi circle body

    Hi there, I am new to phaser and to test it out I am recreating the old SlimeSoccer Java-browser-game. ( I've implemented it with P2 physics and generally it is working pretty well. However I am having a difficulty with making the body of the "players" behave properly when colliding with the ball. So far I haven't found a way to create the semi circlular shape with phaser/P2? Is it correct that this is not possible - that it is either a full circle or a polygon? I have created a polygon with a lot of points to "simulate" the circular shape, but it doesn't work as intended. I've tried actually making circular bodies to test the physics and that works great, except they should be "cut in half". Does anyone have a clue to how to approach this? Thanks! Anders
  19. Hi, I'm new to phaser. I'm trying to make a very simple game where you must avoid collisions. I started with Arcade Physics and I managed to make everything I wanted easily. But then I added complex characters and I needed more than a rectangle body to have accurate collisions. So I switched to P2 Physics and found out how to set my character's body as a polygon : player = game.add.sprite(0, 0, 'character')game.physics.p2.enable(player, true)player.body.clearShapes()player.body.addPolygon({}, [[0, -50], [-50, 0], [0, 50], [50, 0]])Which results in That's pretty cool, but I can't create a polygon that will perfectly fit my character since it is automatically "centered", and because of the character's animation, he isn't centered in the sprite. So I looked for a way to set an offset to my player body's polygon. I saw that there were offset arguments on `addRectangle` and `addCircle`, but not on `addPolygon` (automatically computed). I also saw the `addShape` method which takes a `p2.Shape` as first argument (btw I didn't find any documentation on this class). I tryed to use it with a Phaser.Polygon, but it failed. Any idea ?
  20. 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: 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: 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!
  21. Take a look at the WebGL rendering in this fiddle: Note the extension of the polygon beyond the 200px width it is defined to be. Is this a bug or a feature? If it's a bug, I'll file an issue. For reference, the fiddle includes a PIXI Canvas rendering and a ProcessingJS rendering. Thanks.
  22. Hello. Since I've migrated to V3, I have a strange issue with polygon drawing. Every time I want to draw a polygon object that has 5 or more vertices, the given alpha value to the .beginFill is ignored and alpha = 1 is used insted. Here is the code chunk from my game framework Dodo: DODO.drawPolygon = function (graphics, polygon, props) { _.isObject(props) || (props = {}); graphics.clear(); graphics.beginFill(props.fillColor || DODO.Colors.violet, props.fillAlpha || 0.5); graphics.lineStyle(props.lineWidth || 2, props.lineColor ||, props.lineAlpha || 0.67); graphics.drawPolygon(polygon.points); graphics.endFill();};I use it for debug purposes to draw a collision mask: Or the other example:
  23. Hi Guys! How can I update the body of a polygon after changing the scale? Thanks in advance, I'm a noob about Box2d haha Regards, Nicholls
  24. Pixi Polygon Hit Area Problems

    Hi, I'm posting this on the Phaser forums as I'm not getting much of a response on the Pixi forums. Also, I think the answer could be useful for users of Phaser (as Phaser uses the same convention as far as I know). I am having difficulty defining a polygon hitArea for a sprite and I'm really not sure what I'm doing wrong. For test purposes; I have done the following: Drawn a graphic to the screenCreated a spriteGiven the sprite a hit area with the same co-ords as the graphic I have drawn (but relative instead of absolute co-ords)Added a click handler to the sprite so that I can raise an alert() when I click inside the shape It is almost detecting all clicks over the shape but not everywhere. Especially around the inside edges of the shape, the click event is not firing. My code is as follows: function drawTest() { // I defined the polygon which will be drawn to screen as a shape var funnyShape = new PIXI.Polygon([ new PIXI.Point(100,100), new PIXI.Point(200, 300), new PIXI.Point(315, 210), new PIXI.Point(40, 120), ]); // I create an instance of the graphics object var theShape = new PIXI.Graphics(); // I draw the shape to the polygon area indicated theShape.beginFill(0xE3BE10); theShape.drawShape(funnyShape); theShape.endFill(); // I add the shape to the screen stage.addChild(theShape); // create sprite // I create my sprite var mrSprite = new PIXI.Sprite(); // I position and anchor my sprite mrSprite.position.x = 100; mrSprite.position.y = 100; mrSprite.anchor.x = 100; mrSprite.anchor.y = 100; // I make sure the sprite is interactive (clickable) mrSprite.interactive = true; // The hit area is relative co-ords, so I set the hit area (should be the same as the drawn polygon) mrSprite.hitArea = new PIXI.Polygon([ new PIXI.Point(0,0), new PIXI.Point(100, 200), new PIXI.Point(215, 110), new PIXI.Point(-60, 20) ]); // I add the click event handler = function(mousedata) { alert("Clicked"); }; // I add the sprite to the screen stage.addChild(mrSprite); }Any help or guidance you could give would be great as this problem has been driving me up the wall for a week! Thanks! (Apologies for posting in the Phaser forums). Hopefully it is relevant as Phaser uses Pixi. Jordan