{"id":14971143,"url":"https://github.com/azerion/phaser-responsive","last_synced_at":"2026-03-12T18:51:50.606Z","repository":{"id":57322881,"uuid":"50592925","full_name":"azerion/phaser-responsive","owner":"azerion","description":"Adds a set of responsive objects to Phaser that can be pinned to ","archived":false,"fork":false,"pushed_at":"2016-07-27T08:12:25.000Z","size":394,"stargazers_count":26,"open_issues_count":2,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-11-27T09:31:52.759Z","etag":null,"topics":["phaser","phaser-plugin"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/azerion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-28T15:37:17.000Z","updated_at":"2024-05-29T11:09:13.000Z","dependencies_parsed_at":"2022-08-25T22:41:26.913Z","dependency_job_id":null,"html_url":"https://github.com/azerion/phaser-responsive","commit_stats":null,"previous_names":["orange-games/phaser-responsive"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/azerion/phaser-responsive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azerion","download_url":"https://codeload.github.com/azerion/phaser-responsive/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-responsive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30438647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T14:34:45.044Z","status":"ssl_error","status_checked_at":"2026-03-12T14:09:33.793Z","response_time":114,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-plugin"],"created_at":"2024-09-24T13:44:46.354Z","updated_at":"2026-03-12T18:51:50.585Z","avatar_url":"https://github.com/azerion.png","language":"TypeScript","readme":"Phaser Responsive\n================\nPhaser-Responsive plugin adds images/sprites/buttons/groups that can be pinned to corners/sides/center!\n\nNOTICE\n------\nThis repo is depecrated in favor of Phasers alignIn / alignTo methods introduced in Phaser@2.5.0\n\nGetting Started\n---------------\nFirst you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.\n```\nnpm install phaser-responsive --save-dev\n```\n\nNext up you'd want to add it to your list of js sources you load into your game\n```html\n\u003cscript src=\"node_modules/phaser-responsive/build/phaser-responsive.js\"\u003e\u003c/script\u003e\n```\n\nUsage\n-----\n\n### Load the plugin\n\nYou still need to load the plugin in your game. This is done just like any other plugin in Phaser\n```javascript\ngame.plugins.add(Fabrique.Plugins.Responsiveness);\n```\n\nThe plugin will patch your Phaser game with additional load/add/make methods so the responsive objects fits up in Phaser like any normal object!\n\n### Create responsive objects\n\nAdd an image, text, button or sprite as you would in Phaser, adding 'responsive' in front of the name.\nWhen creating them, add a pin position in the parameters which can be either the middle of the canvas or one of it's edges.\n\n\nThe available pin positions are:\n\n\n* topLeft\n* topCenter\n* topRight\n* middleLeft\n* middleCenter\n* middleRight\n* bottomLeft\n* bottomCenter\n* bottomRight\n\nThen, set an anchor point to align the corner of the image/text/button/sprite with the corner of the canvas.\n\n```javascript\nsampleImage = game.add.responsiveImage(5, 5, 'square', null, Fabrique.PinnedPosition.bottomRight);\nsampleImage.anchor.set(1, 1);\n```\n\n```javascript\nspriteButton = game.add.responsiveButton(5,5, 'leaderboard', this.myCallBack,this,0,0,0,0, Fabrique.PinnedPosition.bottomRight);\nspriteButton.anchor.setTo(1,1);\n```\n\n### Set scaling for objects\n\nBy setting the landscape/portrait scaling for an object, the object will be scaled a certain percentage of the width or height of the total game. \nBy default the width will be used, if you want the object to scale according to the height, you can pass the second parameter as false.\nThe scaling will only be done on mobile, if you want the objects to be scaled when your game is running on desktop you can pass the third parameter as true.\n\nIn the next example the sampleImage will always be 50% of the game width in landscape and 50% of the game height in portrait.\n\n```javascript\nsampleImage = game.add.responsiveImage(5, 5, 'square', null, Fabrique.PinnedPosition.bottomRight);\nsampleImage.setLandscapeScaling(50, true, false);\nsampleImage.setPortraitScaling(50, false, false);\n```\n\n### Relative pinned position\nIf you want the offset of your objects to be relative to the game size you can also pass a pinned position and an x and y offset to the landscape/portrait scaling.\n\nIn the next example the sampleImage will always be 20% of the game width and be positioned to the middle left.\nWhen the image is the original size the offset will be 100px, when the image is scale the 100px will be relative to the scaling.\n\n```javascript\nsampleImage = game.add.responsiveImage(5, 5, 'square', null);\nsampleImage.setLandscapeScaling(20, true, false, Fabrique.PinnedPosition.middleLeft, 100, 0);\nsampleImage.setPortraitScaling(20, true, false, Fabrique.PinnedPosition.middleLeft, 100, 0);\n```\n\nChangelog\n---------\n### 1.3.0\n* Pinned position offset is now relative to portrait/landscape scaling\n\n### 1.2.0\n* Objects can now store their portrait/landscape special scaling values\n\n### 1.1.0\n* Added static dynamic scaling method\n\n### 1.0.1\n* Initial release\n\nDisclaimer\n----------\nWe at OrangeGames just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome objects that needed to be responsive in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazerion%2Fphaser-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-responsive/lists"}