How to detect collision between a graphic and a Sprite in phaser 3?

Question

In my game I want to implement a range sort of feature that would restrict players area. I tried to draw a graphic circle and assign it physics properties. Then I setup collision detection between sprite and graphic. The code shows no errors but the collision is not detected. I followed the following tutorial.

Graphic and Sprite

Answer 1

 var config = { type: Phaser.AUTO, parent: 'phaser-example', loader: { baseURL: 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/', crossOrigin: 'anonymous' }, width: 800, height: 600, physics: { default: 'arcade' }, scene: { preload: preload, create: create, update:update } }; var game = new Phaser.Game(config); var player; function preload() { this.load.image('dude', 'sprites/phaser-dude.png') } function create () { player = this.physics.add.sprite(100, 100, 'dude'); player.setCollideWorldBounds(true); var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } }); var circle = new Phaser.Geom.Circle(50, 50, 25); graphics.fillCircleShape(circle); this.physics.add.existing(graphics); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider(player, graphics); } function update() { if (cursors.left.isDown) { player.setVelocityX(-160); } else if (cursors.right.isDown) { player.setVelocityX(160); } else if (cursors.down.isDown) { player.setVelocityY(160); } else if (cursors.up.isDown) { player.setVelocityY(-160); } } 

 <script src="//cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.min.js"></script>