Search the Community

Showing results for tags 'polygon'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 53 results

  1. 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: http://www.babylonjs-playground.com/#1KQZAF#0 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: http://www.babylonjs-playground.com/#SJLOW#1 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 :-)
  2. studdDev

    Box2D destructible terrain

    Hello there, Is it possible to create destructible terrain in HTML5 and box2d Video examples : Box2d Destructable terrain.mov Box2d Destructable terrain 2.mov Any help in this direction would be much appreciated. Thanks Again
  3. 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: //phaser.io/sandbox/xeGQxHis
  4. 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 = this.add.graphics(0, 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.
  5. Hello! I am the P2 physics. I have a sprite scaled. My problem is that the polygon loaded to the sprite does not scale with it. It is possible to scale the polygon?
  6. 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 https://github.com/nodes777. Any help would be appreciated. Thanks!
  7. J_alchemist

    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!
  8. 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?
  9. 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 = game.add.graphics(0, 0); graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill();
  10. omediadon

    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 Phaser.io, 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 Phaser.io 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!)
  11. 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.
  12. 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: https://www.npmjs.com/package/color
  13. spinnerbox

    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?
  14. Ocelot

    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
  15. 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 http://phaser.io/examples/v2/bitmapdata/alpha-mask (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.
  16. Gyldstrand

    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.
  17. unpollito

    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 () { game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2); var center_group = game.add.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 = game.add.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. layer-test.zip
  18. Conqarous

    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.
  19. I am having some performance issues with collision groups on mobile. I have 13 enemy sprites in game that collide with map polygon boundaries. Having the enemy sprites in game degrades the fps from 60fps down to 30fps. As I reduce the number of enemies in game the fps increases. 13 seems like a really small number of sprites to have in game so I feel like I must be setting up the collision detection incorrectly. I am trying to setup a base map with polygons to use for collision boundaries of the map. I want to have enemies go back and forth horizontally between the map boundaries. They will change direction (both a change in x velocity and flipping the scale so they visual point the opposite direction) when they make contact with the boundary. Is this the proper way to setup this type of collision detection? If so, any thoughts on why it is so slow on mobile devices (testing on iPhone 5)? Here is the code I currently have: // Init gamevar game = new Phaser.Game(1024, 640, Phaser.CANVAS, 'test-game'); // Load the assetsgame.load.image('level01', 'assets/level01.png'); // Image 1024x4608 game.load.physics('level01_physics', 'assets/level01_physics.json'); // Physics data format is Lime + Corona (JSON)// Setup collision groups var landCG = game.physics.p2.createCollisionGroup(); var enemyCG = game.physics.p2.createCollisionGroup();// Load map background imagevar map = this.add.sprite(0, 0, 'level01');// Create sprite and load polygon physics data for the map boundaries var mapCollisionPolygons = this.add.sprite(15, 15); this.physics.p2.enableBody(mapCollisionPolygons, false); mapCollisionPolygons.fixedRotation = true; mapCollisionPolygons.body.motionState = Phaser.Physics.P2.Body.STATIC; mapCollisionPolygons.body.clearShapes(); mapCollisionPolygons.body.loadPolygon('level01_physics', 'left'); mapCollisionPolygons.body.loadPolygon('level01_physics', 'right'); mapCollisionPolygons.body.setCollisionGroup(landCG); mapCollisionPolygons.body.collides(enemyCG); // Create a new enemy and setup collision var enemy = new Enemy(game, 100, 100, 100, 100, 100); enemy.body.setCollisionGroup(enemyCG); enemy.body.collides(landCG, enemy.collided, enemy); The extended Sprite class called 'Enemy': var Enemy = function (game, x, y) { this.hasCollided = false; this.speed = 100; Phaser.Sprite.call(this, game, x, y, 'boat'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.body.onEndContact.add(this.endCollided, this); game.add.existing(this); return this;};Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {};Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }};Enemy.prototype.endCollided = function(bodyB, shapeA, shapeB) { this.hasCollided = false;};module.exports = Enemy;The 'assets/level01_physics.json' file: { "left": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 4608 , 224, 4016 , 384, 4056 , 384, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 384, 264 , 224, 303 , 0, 0 , 384, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 224, 4016 , 0, 4608 , 0, 0 , 224, 303 ] } ] , "right": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 640, 4056 , 800, 4016 , 1024, 4608 , 640, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 1024, 0 , 800, 303 , 640, 264 , 640, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 800, 4016 , 800, 303 , 1024, 0 , 1024, 4608 ] } ] }Here is a link to a related post with some of my performance testing with different options for displaying the background map and boundaries in case it helps. http://www.html5gamedevs.com/topic/9677-vertical-scrolling-background-with-collisions-in-p2/
  20. andersthorborg

    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. (http://slimegames.eu/soccer/) 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
  21. 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 ?
  22. 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!
  23. Take a look at the WebGL rendering in this fiddle: http://jsfiddle.net/intrinsica/L9z655jy/ 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.
  24. 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 || DODO.Colors.green, 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: