Search the Community

Hello everyone, I have struggled all day long to create a simple filled circle using Shaders. I succeed creating triangle and square thanks to Pixi example. My approach is the following one : Creating a square and hide some pixels using discard in fragment. const geometry = new PIXI.Geometry().addAttribute("aVertexPosition", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2).addIndex([0, 1, 2, 0, 2, 3]); const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `, ` precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main() { vec2 coord = gl_FragCoord.xy; // vec2 st = gl_FragCoord.xy/u_resolution; // float pct = 0.0; // a. The DISTANCE from the pixel to the center // pct = distance(st,vec2(0.5,0.5)); // if (pct > RADIUS) discard; gl_FragColor = vec4(coord.x, coord.y, 1, 1); } `); const circle = new PIXI.Mesh(geometry, shader); circle.position.set(400, 300); app.stage.addChild(circle); Issues : - In my example, i'm just trying to display my square with differents colored depending on position => Why the square is still white ? coord.x seems to be very high (around 100000000000) leading the color to be always vec4(1, 1, 1, 1). - When calculating the distance, what is the center of the circle ? If someone already face this issue, a little help would be really appreciated. Thank you in advance. Have a good day.

I’m new to Phaser3 and i can speak a little English…sorry I use plugin circlemaskimage (link: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/circlemaskimage/) , it can works on type: Phaser.AUTO, it can not works when i change the type to Phaser.CANVAS. I need it works on canvas type, how can i do? Is there other ways to implement clip a rectangle image to circle? Thanks a lot.

Snippet for phaser2: const graphics = game.add.graphics(x, y); graphics.height = 0; graphics.width = 0; alpha = 0.5; const bounce = game.add.tween(graphics); bounce.to({ height: 300, width: 300, alpha: 0 }, 300); bounce.start(); Actually, is it possible for phaser3? This snippet not resize circle: const circle = new Phaser.Geom.Circle(400, 300, 50); const graphics = this.add.graphics(); graphics.fillStyle(0x00ff00); graphics.fillCircleShape(circle); this.tweens.add({ targets: graphics, alpha: {getStart: () => 0, getEnd: () => 1}, height: 500, width: 500, // or radius duration: 1000, });

Hi, I want to apply a circle mask to a sprite. What's the most performant way to do so with WebGL? Alpha mask or graphics mask? I recall that graphics circles were once made up of LOTS of lineTo calls so they were never actually perfect circles and performed really bad, not sure if this has been fixed though?? Thanks!

Hey guys, I'm new to phaser and I'm not quite sure if this is a bug or a mistake of myself. In this code if the player has a circle as his body and if he is colliding with one of this obstacles he won't get separated as it is described in the phaser documentation. So if you move up and collide with the obstacle the console starts printing out true even if you stop moving. In addition to that if you walk against an edge of the obstacle the player gets stuck on it and can't get away of that. I'm confused because this doesn't happen if the players body is an rectangle. Does anybody have an idea? var game = new Phaser.Game(600, 600, Phaser.AUTO, "", {preload: preload, create: create, update: update}); var player; var cursors; var obstacles; function preload(){ game.load.image("robot", "player.png", 32, 48); game.load.image("obstacle", "box.png"); } function create(){ player = game.add.sprite(game.world.centerX, game.world.centerY + 200, "robot", 5); game.stage.backgroundColor = 'rgb(239, 228, 176)'; game.physics.arcade.enable(player); player.body.setCircle(player.width/2);// player don`t get seperated in the collide function //player.body.setSize(player.width * 0.8, player.height*0.8,player.width * 0.1, player.height*0.1 ); //player get seperated in the collide function player.anchor.set(0.5); player.angle = -90; cursors = game.input.keyboard.createCursorKeys(); obstacles = game.add.group(); game.physics.arcade.enable(obstacles); obstacles.enableBody = true; obstacles.create(game.world.centerX, game.world.centerY - 200, 'obstacle'); obstacles.create(game.world.centerX - 190, game.world.centerY - 200, 'obstacle'); obstacles.create(game.world.centerX + 150, game.world.centerY - 100, 'obstacle'); obstacles.create(game.world.centerX - 130, game.world.centerY, 'obstacle'); obstacles.create(game.world.centerX - 230, game.world.centerY, 'obstacle'); obstacles.setAll('body.immovable', 'true'); obstacles.setAll('anchor.x', '0.5'); obstacles.setAll('anchor.y', '0.5'); } function update(){ game.debug.body(player); obstacles.forEach(function(item) { game.debug.body(item); }); if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(player.angle, 200, player.body.velocity); } else { player.body.velocity.set(0); } if (cursors.left.isDown) { player.body.angularVelocity = -300; } else { if (cursors.right.isDown) { player.body.angularVelocity = 300; } else { player.body.angularVelocity = 0; } } game.physics.arcade.collide(player,obstacles,(p1,en)=>{ console.log(true); }, null, this); } cheers landa

i use this code var circles = this.game.add.graphics(this.game.world.centerX, this.game.world.centerY); circles.lineStyle(1, 0x0000ff); circles.drawCircle(0, 0, 200); // and finally add the third 1px wide unfilled blue circle with a radius of 150 circles.inputEnabled = true circles.events.onInputDown.add(function(){ console.log("cire click"); }, this) but not working. Can i detect click in Circle ?

Hi i want to make those little circles move to a certain random point and watch them moving how is it possible to do it ? here http://asciimulation.link/creatures/new project/ thx in advance

I'm trying to use Phaser (2.6.2) to mask an image. I need a circle, but the circle drawn has very jagged edges. How can I get a smoother circle? I've tried `drawArc`, `drawCircle`, and drawing a smaller circle but scaling up (for intentional scaling artifacts) Pasting this into http://phaser.io/sandbox/edit/1 illustrates it pretty clearly function create() { var game = this.game var graphics2 = game.add.graphics(0, 0); graphics2.beginFill(0x0000FF, 1) graphics2.drawCircle(0, 0, 100) graphics2.scale.set(12) var graphics = game.add.graphics(0, 0); graphics.beginFill(0x00FF00, 1) graphics.arc(0, 0, 500, game.math.degToRad(0), game.math.degToRad(360), false); graphics.beginFill(0xFF0000, 1); graphics.drawCircle(0, 0, 800); }

So, circles are confounding me today... About twenty years ago I did GCSE maths and remember wondering when or why I would ever need to know any of this stuff about circles and angles and the like. Now. Now is when I need to know all that stuff. So I've been all over the interwebz and have learned lots about circles, but while there are myriad explainations of how to work out the length of an arc, the angle and area of a sector... and use both radians and degrees to calculate same; I can find nothing that will tell me which sector a given value (theta, radian, degree, whatever) is in. If I've divided my circle into 12 segments, can I pass a value and know that it belongs in sector 3, for instance?

I have a sprite with an anchor of 0.5, 0.5, so the middle of the sprite. How would I add a circle body to the sprite with the center of the circle on the anchor of the sprite, so that if I scaled the sprite, the circle would scale from the middle of the sprite and not from the top left? Seems simple but setCircle (and setSize) seems to be messed up as I've been trying to get them to work all day... - Circle body size doesn't seem to respect the scale of the parent sprite or its anchor.

I tried to modify the Arcade physics Body scale example online this way : game.load.image('wizball', 'assets/sprites/wizball.png'); modifying the sprite in the create function like this: //sprite = game.add.sprite(200, 300, 'gameboy', 2); sprite = game.add.sprite(200, 300, 'wizball', 2); then adding this line after game.physics.enable : sprite.body.setCircle(45); and finally activating the debug in the render function game.debug.body(sprite); Why the circle body does not scale ? The only thing that scales is the sprite.

Hey everyone, I'm new to Phaser and love the sandbox functionality and editable examples, letting me test and try right there on the website. I've been looking at the Sprite From BitmapData example, but cannot seem to get it to display a circle instead of a rectangle. I've tried changing the line in the linked example page from: bmd.ctx.rect(0,0,128,128);to: bmd.ctx.circle(0,0,50);Every other line stays the same. The results I expect are a red circle with a radius of 50px in the same position as the rectangle/square. The results I get are a completely empty (black) canvas, regardless of the numbers I use for bmd.ctx.circle( ). Am I doing something wrong? Do other people get an empty/black screen when they try change from a rectangle to a circle in the Sprite From Bitmapdata example? Many thanks!

Hey guys, just a simple question about one of the examples on the website, specifically the Sprite From BitmapData example. I love the interactivity on Phaser.io with its Sandbox and editable examples. I've found myself interested in attaching primitives as textures to sprites and found the Sprite From BitmapData example. What I want to do is simply change the red square to a red circle. I tried doing so by changing this line of code: bmd.ctx.rect(0,0,128,128);to this: bmd.ctx.circle(0,0,64);Every other line has remained the same. The result I expected is a red circle with a radius of 64px in the same location as the red square/rectangle (a simple shape replacement). The results observed however are a complete black and/or empty canvas. Nothing at all. Am I doing something wrong? Does anyone else have any issues changing the square in the Sprite From BitmapData example to a circle? Many thanks!

Hi everybody ! I'm trying to make a space game, so i need to have a collision between my spaceship and the planet, i try this : circle = game.add.graphics(0, 0);circle.beginFill(0xFF0000, 0.3);circle.drawCircle(0, 0, 305);planetCircle = game.add.sprite(game.width/2, game.height/2);planetCircle.addChild(circle);game.physics.enable(planetCircle, Phaser.Physics.ARCADE);planetCircle.body.immovable = true;fusee = this.game.add.sprite(game.width/2,10,"fusee");game.physics.enable(fusee, Phaser.Physics.ARCADE);fusee.anchor.setTo(0.5,1);game.physics.arcade.collide(fusee, planetCircle);But the ship cross through the planet :/ Is it a limit of Phaser.Physics.ARCADE ?? Thanks !

Hello Guys, Has anyone got experience on drawing a hollow circle with Pixi?, my current approach only works in the WebGL renderer which makes me think it's flawed, and i also need to fallback to the other rendered for other devices. this.mathPiDub = 2 * Math.PI; this.color = 0xFF00FF var nuRad = 10; this.pixiCircle.beginFill(this.color, 1); this.pixiCircle.arc(0, 0, nuRad - 2, 0, this.mathPiDub, false); this.pixiCircle.arc(0, 0, nuRad, 0, this.mathPiDub, false); this.pixiCircle.endFill(); The 2D rendered gives me a full circle while the WebGL cuts the hole through. What's the best approach? Thanks!. Naz.

Can anyone show me the way to draw graphic circle timing? please gimme some code or fiddler for demonstration. Thanks you in advance !

Is it possible to emit a burst of particles in form of a circle using the Emitter class? By default the emitter object emits particles with random x and y speeds, but what I want to do is manipulate the x/y speeds so the particles in each burst form a circle. What I've tried is making a for-loop, setting the speeds using emitter.setXspeed and setYspeed each time, and then adding one individual particle. It creates the particles alright, but they don't move for some reason. I've taken this burst particle example as a starting point, and changed it. See github or code below.https://github.com/BdR76/phaserparticlesfunction particleBurst_circle(pointer) { // Position the emitter where the mouse/touch event was emitter.x = pointer.x; emitter.y = pointer.y; var EXPLODE_DIAMETER = 80.0; // emit a circle of particles, 360 / 18 = 20 particles for (var i = 0; i < 360; i=i+18) { // set fixed x speed var xsp = Math.cos(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER; emitter.setXSpeed(xsp, xsp); // set fixed y speed var ysp = Math.sin(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER; emitter.setYSpeed(ysp, ysp); // TODO: how to emit one single particle? // next line doesn't work, only emits one(?) moving particle //emitter.start(true, 2000, null, 1); // next line add particles, but not moving var star = emitter.create(pointer.x+xsp, pointer.y+ysp, 'particles', null, true); }}Any help would be much appreciated

Hi all :-) Can I create circular or polygon bounding boxes in Arcade engine? If yes, how? If no, is there any engine which supports collision and bouncing? Thanks.

I just stumbled over "Hundreds" ( iOS / Android Puzzle game ) and tried to find a way to render Circles with Phaser. There is an example for rendering a circle with debug graphics, but it get's drawn last, so I can't really include the score / weight inside the circle. What's the best way, if there is any currently, to draw Circles vector-like in Phaser? Do you have some directions for me here? Thx a lot Attached code: App.Game.prototype = { create: function() { for (var i = 0; i < 10; i++) { var x = Math.random() * this.game.width, y = Math.random() * this.game.height, d = 20; var circle = new Phaser.Circle(x, y, d); var text = this.game.add.text(x, y, '' + 0, { font: "25px Arial", fill: "#ff0044", align: "center" }); text.anchor.set(0.5); this.objects.push({ circle: circle, color: 0x999999, value: 0 }); } }, render: function() { for (var i = 0; i < this.objects.length; i++) { var o = this.objects[i]; this.game.debug.geom(o.circle, o.color, true); } }};

So, this weekend I finish the design of my new game. I managed to go from here: to here: what do you think about my progress?? Do you like the new design??

Hi guys, new to Phaser so maybe this isn't a bug. I searched on the forum but i cannot find any information about it, hope it will be not already asked. I found an issue regarding the circle body collider, in particular when scaling a sprite the circle collider doesn't fit the new scale of the sprite. You can try this out by modify the "Circle vs Polygon" example, just add this line of code: "sprite4.scale.setTo(0.7, 0.7);" after creating sprite4 in create() function. You can find an image attached. The fact is that if you remove the circle body (using the rect one) everything's fine. I think that is possible to modify the center of the collider manually, but i wanted to signal the problem.

So I'm currently trying to make a sprite that just moves around in a circle forever. I was using the example found here: http://examples.phaser.io/_site/view_full.html?d=physics&f=angular+velocity.js&t=angular%20velocity as a base. My code for creating said sprites looks like this: @map.createFromObjects 'PlatformLayer', 45, 'platforms', 0, true, false, @circPlatforms @circPlatforms.setAll 'body.allowGravity', false @circPlatforms.setAll 'body.immovable', true @circPlatforms.forEach ((platform) => platform.radius = (+platform.radius or 1) platform.rotAngle = +platform.rotAngle or 0 @game.time.events.loop 1, ((platform) => platform.body.velocity.x = 0 platform.body.velocity.y = 0 @game.physics.velocityFromAngle platform.rotAngle, platform.radius*32, platform.body.velocity platform.rotAngle = ++platform.rotAngle % 360 ), @, platform ), @In Tiled I assign a rotAngle (the current spot in the rotation) and a radius (the number of tiles I'd like it to cover). Unfortunately, I have no idea what I'm doing. I can't seem to get the sprite to move faster along the circle (increasing the speed parameter just seems to make the circle larger and body.angularRotation, body.angularAcceleration, and body.speed don't seem to help either), and I'm not at all certain how to ensure the radius in tiles (a tile for me is 32x32). Also, when this sprite gets to the end of a full rotation, it is not where it started, it's somewhere off to the top-left. I can't figure out how to determine why it's doing that. Overall, I'm just sorta confused about this whole ordeal. Any ideas?

Hello, I'm trying to do something easy, and I did it very quickly with Phaser, that framework is really awesome I made a big ball (a sprite) bouncing in the game world, then I added some "platforms" in the middle of the world (some sprites too) then everything was ok. The ball bounced on the edges and on the platforms. BUT. My ball is a circle (obviously) and my platforms are rectangle, so, in some case, the collision is not accurate, see example below : I'm using this.game.physics.collide(); to test collision. I tried to use the processCallback to test the collision precisely using Phaser.Circle.intersectsRectangle() which is very easy to achieve, but the "bounce" already occured at this time. I don't know what to do next, I don't know if I'm on the right way. Of course, I don't want to use an overkill physic system like box2D or whatever else... Can someone could help ? thanks