Jump to content

Search the Community

Showing results for tags 'circle'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 23 results

  1. 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 projectionMatr
  2. 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.
  3. 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: (
  4. mcolman

    Circle mask

    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!
  5. 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 a
  6. 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 ?
  7. 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
  8. 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)
  9. 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.
  10. 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.
  11. 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.
  12. 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 th
  13. 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
  14. 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 cr
  15. 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 ap
  16. Can anyone show me the way to draw graphic circle timing? please gimme some code or fiddler for demonstration. Thanks you in advance !
  17. 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/B
  18. 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.
  19. 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(
  20. 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??
  21. 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 f
  22. 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)
  23. 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
  • Create New...