{"id":14963998,"url":"https://github.com/wiserim/phaser-raycaster","last_synced_at":"2025-04-04T15:05:18.057Z","repository":{"id":37951999,"uuid":"241055289","full_name":"wiserim/phaser-raycaster","owner":"wiserim","description":"Raycasting plugin for Phaser 3. Documentation:","archived":false,"fork":false,"pushed_at":"2024-11-29T22:11:18.000Z","size":1956,"stargazers_count":96,"open_issues_count":2,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T14:04:35.825Z","etag":null,"topics":["phaser","phaser-framework","phaser-plugin","phaser3","phaserjs","raycasting"],"latest_commit_sha":null,"homepage":"https://wiserim.github.io/phaser-raycaster/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wiserim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-17T08:26:00.000Z","updated_at":"2025-01-29T05:05:25.000Z","dependencies_parsed_at":"2024-12-28T17:11:11.519Z","dependency_job_id":null,"html_url":"https://github.com/wiserim/phaser-raycaster","commit_stats":{"total_commits":120,"total_committers":4,"mean_commits":30.0,"dds":"0.16666666666666663","last_synced_commit":"134fae8320ef64607143b6cdf77fdda37daac0e8"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiserim%2Fphaser-raycaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiserim%2Fphaser-raycaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiserim%2Fphaser-raycaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiserim%2Fphaser-raycaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wiserim","download_url":"https://codeload.github.com/wiserim/phaser-raycaster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198435,"owners_count":20900079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["phaser","phaser-framework","phaser-plugin","phaser3","phaserjs","raycasting"],"created_at":"2024-09-24T13:32:26.862Z","updated_at":"2025-04-04T15:05:18.042Z","avatar_url":"https://github.com/wiserim.png","language":"JavaScript","readme":"# Phaser Raycaster\nRaycasting plugin for Phaser 3.\n\n[![GitHub release](https://img.shields.io/github/release/wiserim/phaser-raycaster.svg)](https://github.com/wiserim/phaser-raycaster/releases) [![npm](https://img.shields.io/npm/v/phaser-raycaster.svg)](https://www.npmjs.com/package/phaser-raycaster) [![GitHub](https://img.shields.io/github/license/wiserim/phaser-raycaster.svg)](https://github.com/wiserim/phaser-raycaster/blob/master/LICENSE) [![Github file size](https://img.shields.io/github/size/wiserim/phaser-raycaster/dist/phaser-raycaster.min.js.svg)](https://github.com/wiserim/phaser-raycaster) [![](https://data.jsdelivr.com/v1/package/npm/phaser-raycaster/badge?style=rounded)](https://www.jsdelivr.com/package/npm/phaser-raycaster)\n\nPhaser Raycaster is a [Phaser 3](https://github.com/photonstorm/phaser) plugin which provide raycasting for geometric game objects, sprites, Arcade Physics and Matter.js bodies.\n\nDocumentation: [https://wiserim.github.io/phaser-raycaster/](https://wiserim.github.io/phaser-raycaster/)\n\nCode examples are available on CodePen: [LINK](https://codepen.io/collection/AOOQWr)\n\n**Features:**\n* compatible with arcade and matter physics,\n* raycasting in a single direction, 360 degrees circle or in a cone,\n* visibility detection (collision detection with game objects),\n* test rays on mapped game objects (containers, lines, rectangles, polygons, circles, sprites, tilemaps and matter bodies),\n* provides closest intersection points between rays and tested objects,\n* tests can be made on all mapped objects, selected ones or only ones within detection range,\n* static and dynamic mapping for individual objects,\n* mapped objects intersections detection,\n* debug mode.\n\n***NPM***\n```\nnpm install phaser-raycaster\n```\n\n***CDN***\n\n[https://www.jsdelivr.com/package/npm/phaser-raycaster](https://www.jsdelivr.com/package/npm/phaser-raycaster)\n\n## Getting started\n### 1. Include plugin in your project:\n```html\n\u003c!--CDN--\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/phaser-raycaster@0.10.11/dist/phaser-raycaster.min.js\"\u003e\u003c/script\u003e\n```\n```\n# NPM\nnpm install phaser-raycaster\n```\n### 2. Enable plugin in your Game config:\n```javascript\nimport PhaserRaycaster from 'phaser-raycaster'\n\nlet config = {\n    type: Phaser.Auto,\n    parent: 'game',\n    width: 800,\n    height: 600,\n    backgroundColor: \"black\",\n    scene: [\n        Scene1\n    ],\n    plugins: {\n        scene: [\n            {\n                key: 'PhaserRaycaster',\n                plugin: PhaserRaycaster,\n                mapping: 'raycasterPlugin'\n            }\n        ]\n    }\n}\n\nnew Phaser.Game(config);\n```\n### 3. Create new raycaster in your scene:\n```javascript\ncreate() {\n  this.raycaster = this.raycasterPlugin.createRaycaster(options);\n  \n  // additional code\n}\n```\nIf you're using TypeScript, you need to add to scene plugin class:\n```javascript\nimport PhaserRaycaster from 'phaser-raycaster'\n\nexport default class MyScene extends Phaser.Scene {\n  raycasterPlugin: PhaserRaycaster\n\n  // aditional code\n}\n```\n\n### 4. Create new ray\n```javascript\ncreate() {\n  // additional code\n  \n  this.ray = this.raycaster.createRay();\n  \n  // additional code\n}\n```\n### 5. Map game objects which will be tested by rays\n```javascript\n//create game object\nthis.rectangle = this.add.rectangle(100, 100, 50, 50)\n  .setStrokeStyle(1, 0xff0000);\n\n//map game object\nthis.raycaster.mapGameObjects(this.rectangle);\n\n//create group\nthis.group = this.add.group();\n\n//map game objects actually in group\nthis.raycaster.mapGameObjects(this.group.getChildren());\n\n//map tilemap layer\nthis.map = this.make.tilemap();\nthis.tilemap = this.map.createStaticLayer();\n\nthis.raycaster.mapGameObjects(this.tilemap, false, {\n  collisionTiles: [1,2,3] //array of tiles types which can collide with ray\n});\n```\n### 6. Cast ray\n```javascript\n//set ray position\nthis.ray.setOrigin(400, 300);\n//set ray direction (in radians)\nthis.ray.setAngle(2);\n//set ray direction (in degrees)\nthis.ray.setAngleDeg(90);\n//cast single ray and get closets intersection, hit mapped object and hit segment\nlet intersection = this.ray.cast();\nlet hitObject = intersection.object;\nlet hitSegment = intersection.segment;\n\n//cast rays in all directions (toward all mapped objects vertices / points)\nlet intersections = this.ray.castCircle();\n\n//set ray's cone angle (in radians)\nthis.ray.setCone(1);\n//set ray's cone angle (in degrees)\nthis.ray.setConeDeg(90);\n\n//cast rays in a cone\nlet intersections = this.ray.castCone();\n```\n\n### 7. Raycaster bounding box\nBy default Raycaster is setting it's bounding box based on Arcade Physics / Matter physics world bounds.\nIf world size will change after creation of Raycaster, bounding box needs to be updated.\n```javascript\n//define bounds\nvar bounds = new Phaser.Geom.Rectangle(x, y, width, height);\n\n//get world bounds (arcade physics)\nbounds = this.worldLayer.getBounds();\n\n//get bounds (matter physics)\nlet walls = this.matter.world;\nbounds = new Phaser.Geom.Rectangle(\n  walls.top.vertices[3].x, //x\n  walls.top.vertices[3].y, //y\n  walls.bottom.vertices[1].x - walls.top.vertices[3].x, //width\n  walls.bottom.vertices[1].y - walls.top.vertices[3].y //height\n)\n\n//set bounding box on raycaster creation\nvar raycaster = this.raycasterPlugin.createRaycaster({\n  boundingBox: bounds\n});\n\n//set bounding box after creation\nraycaster.setBoundingBox(x, y, width, height);\n```\n\n### 8. Collisions (arcade physics)\n```javascript\n//enable auto slicing field of view\nthis.ray.autoSlice = true;\n//enable arcade physics body\nthis.ray.enablePhysics();\n//set collision (field of view) range\nthis.ray.setCollisionRange(200);\n//cast ray\nthis.ray.castCircle();\n\n//get all game objects in field of view (which bodies overlap ray's field of view)\nlet visibleObjects = this.ray.overlap();\n\n//get objects in field of view\nvisibleObjects = this.ray.overlap(group.getChildren());\n\n//check if object is in field of view\nvisibleObjects = this.ray.overlap(gameObject);\n\n//add overlap collider (require passing ray.processOverlap as process callback)\nthis.physics.add.overlap(this.ray, targets, function(rayFoVCircle, target){\n  /*\n  * What to do with game objects in line of sight.\n  */\n}, this.ray.processOverlap.bind(this.ray));\n```\n\n### 9. Collisions (matter physics)\n```javascript\n//enable auto slicing field of view\nthis.ray.autoSlice = true;\n//enable matter physics body\nthis.ray.enablePhysics('matter');\n//cast ray\nthis.ray.castCircle();\n\n//get all game objects and bodies in field of view (which bodies overlap ray's field of view)\nlet visibleObjects = this.ray.overlap();\n\n//get objects and bodies in field of view\nvisibleObjects = this.ray.overlap([gameObject1, gameObject2, body1, body2]);\n\n//check if object or body is in field of view\nvisibleObjects = this.ray.overlap(gameObject);\n\n//add onCollide event\nthis.ray.setOnCollide(function(collisionInfo){\n  //get body\n  let body = collisionInfo.bodyA.label === 'phaser-raycaster-ray-body' ? collisionInfo.bodyB : collisionInfo.bodyA;\n    /*\n    * What to do with game object which enters line of sight .\n    */\n  }\n});\n\n//add onCollideWith event\nthis.ray.setOnCollideWith(body, function(body, collisionInfo){\n    /*\n    * What to do with game object which enters line of sight.\n    */\n  }\n});\n\n//add onCollideEnd event\nthis.ray.setOnCollideEnd(function(collisionInfo){\n  //get body\n  let body = collisionInfo.bodyA.label === 'phaser-raycaster-ray-body' ? collisionInfo.bodyB : collisionInfo.bodyA;\n    /*\n    * What to do with game object which leaves line of sight.\n    */\n  }\n});\n\n//add onCollideActive event\nthis.ray.setOnCollide(function(collisionInfo){\n  //get body\n  let body = collisionInfo.bodyA.label === 'phaser-raycaster-ray-body' ? collisionInfo.bodyB : collisionInfo.bodyA;\n    /*\n    * What to do with game object while it's in line of sight.\n    */\n  }\n});\n```\n\n### 10. Destroy objects\n```javascript\n//remove mapped objects\nthis.raycaster.removeMappedObjects(object);\nthis.raycaster.removeMappedObjects(arrayOfObjects);\n\n//destroy ray\nthis.ray.destroy();\n\n//destroy raycaster\nthis.raycaster.destroy();\n```\n\n### 11. Statistics\n```javascript\n//get raycaster statistics\nlet statistics = this.raycaster.getStats();\n/*\n  statistics = {\n    mappedObjects: {\n      total - mapped objects total\n      static - static maps\n      dynamic - dynamic maps\n      rectangleMaps - rectangle maps\n      polygonMaps - polygon maps\n      circleMaps - circle maps\n      lineMaps - line maps\n      containerMaps - container maps\n      tilemapMaps - tilemap maps\n      matterMaps - matter body maps\n    }\n  }\n*/\n\n//get ray statistics\nlet rayStatistics = this.ray.getStats();\n/*\n  rayStatistics = {\n    method - used casting method (cast, castCircle, castCone)\n    rays - casted rays\n    testedMappedObjects - tested mapped objects\n    hitMappedObjects - hit mapped objects\n    segments - tested segments\n    time - casting time\n  }\n*/\n```\n\n### 12. Debug mode\n```javascript\n  //enable debug mode\n  this.raycaster = this.raycasterPlugin.createRaycaster({\n    debug: true\n  });\n\n  //advanced debug mode options\n  this.raycaster = this.raycasterPlugin.createRaycaster({\n    debug: {\n      enabled: false, //enable debug mode\n      maps: true, //enable maps debug\n      rays: true, //enable rays debug\n      graphics: {\n          ray: 0x00ff00, //debug ray color; set false to disable\n          rayPoint: 0xff00ff, //debug ray point color; set false to disable\n          mapPoint: 0x00ffff, //debug map point color; set false to disable\n          mapSegment: 0x0000ff, //debug map segment color; set false to disable\n          mapBoundingBox: 0xff0000 //debug map bounding box color; set false to disable\n      }\n    }\n  });\n\n  //change debug options after initialization\n  this.raycaster.debugOptions.enabled = true;\n\n  this.raycaster.setOptions({\n    debug: true\n  });\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiserim%2Fphaser-raycaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiserim%2Fphaser-raycaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiserim%2Fphaser-raycaster/lists"}