{"id":14971120,"url":"https://github.com/phasereditor2d/phasereditor2d-ninepatch-plugin","last_synced_at":"2026-03-04T13:02:49.223Z","repository":{"id":57322906,"uuid":"439095129","full_name":"PhaserEditor2D/phasereditor2d-ninepatch-plugin","owner":"PhaserEditor2D","description":"NinePatch plugin for Phaser Editor 2D","archived":false,"fork":false,"pushed_at":"2022-12-06T09:29:57.000Z","size":504,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-21T21:44:03.320Z","etag":null,"topics":[],"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/PhaserEditor2D.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","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":"2021-12-16T18:50:08.000Z","updated_at":"2024-03-22T05:51:10.000Z","dependencies_parsed_at":"2023-01-24T06:31:07.770Z","dependency_job_id":null,"html_url":"https://github.com/PhaserEditor2D/phasereditor2d-ninepatch-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhaserEditor2D%2Fphasereditor2d-ninepatch-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhaserEditor2D%2Fphasereditor2d-ninepatch-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhaserEditor2D%2Fphasereditor2d-ninepatch-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PhaserEditor2D%2Fphasereditor2d-ninepatch-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PhaserEditor2D","download_url":"https://codeload.github.com/PhaserEditor2D/phasereditor2d-ninepatch-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249868858,"owners_count":21337470,"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":[],"created_at":"2024-09-24T13:44:44.547Z","updated_at":"2026-03-04T13:02:49.181Z","avatar_url":"https://github.com/PhaserEditor2D.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phaser Editor 2D v3 - NinePatch plugin\n\nThis repository contains NinePatch plugin for Phaser Editor 2D v3.\n\nThis plugin requires Phaser Editoe 2D v3.33.2 or a newer version.\n\n## Install\n\nThe plugin is distributed as a NodeJS package:\n\n```bash\n$ npm i --save-dev phasereditor2d-ninepatch-plugin\n```\n\nIt is important that you install the package as a development dependency (`--save-dev`), because Phaser Editor 2D only searches for plugins in that section. Also, the `package.json` file should be in the root of the project.\n\n## Creating a NinePatch object\n\nFor creating a NinePatch object, you can drag the **NinePatch** type from the **Built-In** section of the **Blocks** view and drop it in the scene.\n\nBecause the default NinePatch object doesn't have a texture, it shows a blank image:\n\n![Drop ninepatch type](images/ninepatch/drop-ninepatch-in-scene.png)\n\nYou can set a texture to the object in the **Texture** section:\n\n![Select texture](images/ninepatch/select-texture.png)\n\n\n![Texture selected](images/ninepatch/texture-selected.png)\n\n\nAnother way of creating a NinePatch object is converting an **Image** object into a **NinePatch** object.\n\n![Convert to ninepatch](images/ninepatch/convert-image-to-ninepatch.png)\n\n## NinePatch parameters  \n\nThe NinePatch objects are rendering by taking frames of the original texture. These frames are created using margins. You can change the margin values in the **NinePatch** section of the **Inspector** view.\n\nThis section also includes the parameters for changing the size and disabling the rendering of the object's center:\n\n![Ninepatch properties](images/ninepatch/properties.png)\n\nThere are other properties common to the Image object, like those in the sections Transform, Origin, Visible, Texture, etc...\n\n## Size manipulators\n\nYou can resize the NinePatch object with the **Size Tool**. Press the `Z` key or select this tool in the context menu **Tools** \u003e **Resize Tool**.\n\n![Resize tool](images/ninepatch/resize-tool.png)\n\n## Code generation\n\nThe NinePatch object is not available in the Phaser built-in API. Phaser Editor 2D uses an internal implementation of this object, and provides the source code of a NinePatch game object that you can use in your project.\n\nTo get the source code of the NinePatch game object, execute the command **Create Nine Patch User Files**:\n\n![Create ninepatch files command](images/ninepatch/create-files-command.png)\n\nYou can open the Command Palette in the main menu or by pressing the `Ctrl+K` keys.\n\nLook you there are four different commands:\n\n* For creating JavaScript files as ES modules.\n* For creating simple JavaScript files.\n* For creating TypeScript files as ES modules.\n* For creating simple TypeScript files.\n\nThese commands create a series of files with the source code of the NinePatch object. The files are copied in the folder selected in the **Files** view.\n\n![Ninepatch user files](images/ninepatch/ninepatch-files.png)\n\nThe files are following:\n\n### `NinePatch.ts`\n \nContains the implementation of the NinePatch game object.\n\nYou can create a new instance like this:\n\n```javascript\nconst obj = new NinePatch(scene, 10, 10, 100, 100, \"atlas\", \"green-button\");\nscene.add.existing(obj);\n```\n\nIn addition to the `NinePatch.ts` file, the `NinePatchImage.ts` \u0026 `NinePatchContainer.ts` files are generated, with a similar format.\n\n### `registerNinePatchFactory.ts`\n\nContains the `registerNinePatchFactory()` function. \n\nYou should use it for registering a `GameObjectFactory` method. It allows you creating new NinePatch objects like this: \n\n```javascript\nconst obj = this.add.ninePatch(10, 10, 100, 100, \"nine-patch-texture\");\n```\nBefore, you need to register the factory:\n\n```javascript\n\nconst game = new Phaser.Game(...);\n...\nregisterNinePatchFactory();\n...\n```\n\nIn addition to the `registerNinePatchFactory.ts` file, the `registerNinePatchImageFactory.ts` \u0026 `registerNinePatchContainerFactory.ts` files are generated, with a similar format.\n\n### `ninepatch.d.ts`\n\nContains the TypeScript definitions. Maybe you should move it to the `types` folder of your project. Or you should configure the `tsconfig.json` file finding the definitions.\n\n## Same interface, different implementations\n\nThe **NinePatch** class extends the `Phaser.GameObjects.RenderTexture` class. A `RenderTexture` may consume a lot of memory and could affect the performance of your game. But you can use one of the following alternatives:\n\n### NinePatchImage\n\nThe **NinePatchImage** class extends the `Phaser.GameObjects.Image` class. The idea is to draw the nine-patch in a texture and set this texture to the image object. It saves the generated texture in the textures cache, so if different objects share the same nine-patch properties (like margins), they will use the same texture from the cache.\n\nGenerating a new texture for an **NinePatchImage** object is expensive, but if you have a lot of nine-patch objects with the same properties, the dynamically generated texture is cached and generated once. This may boost the performance of your game and could be a much better alternative to the **NinePatch** class.\n\nIf you use the **NinePatchImage** class in your game, you should register its factory like this:\n\n```javascript\n\nconst game = new Phaser.Game(...);\n...\nregisterNinePatchImageFactory();\n...\n```\n\n### NinePatchContainer\n\nThe **NinePatchContainer** class extends the `Phaser.GameObjects.Container` class. The idea is to group the nine patches inside a container. This implementation has the advantage of a low memory consumption and a fast rendering. Each patch is an image with a frame of the main texture.\n\nI recommend this implementation if:\n\n* The ninepatch object's properties are changing a lot in your game.\n* The ninepatch objects have a huge size.\n* Basically, don't use this implementation if generating \u0026 caching textures is too expensive in terms of memory \u0026 processing.\n\nIf you use the **NinePatchContainer** class in your game, you should register its factory like this:\n\n```javascript\n\nconst game = new Phaser.Game(...);\n...\nregisterNinePatchContainerFactory();\n...\n```\n\nThe **NinePatchContainer** \"simulates\" some properties that are common to the other nine-patch implementations but are not available in the Phaser Container class. It is the case of the origin \u0026 tint. These \"simulated\" properties are shown in the **Nine Patch Container** section:\n\n![NinePatchContainer properties](images/ninepatch/nine-patch-container-properties.jpeg)\n\n### Code customization\n\nYou are free to change the code of the generated NinePatch files, however, take in consideration that the scene's code generated by the editor uses always the same public interface of the NinePatch object.\n\n## What's next\n\nWe should work on other NinePatch properties like the Axis Stretch (Stretch, Tile, Tile Fit). Yes, it is inspired by the Godot's NinePatch object.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphasereditor2d%2Fphasereditor2d-ninepatch-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphasereditor2d%2Fphasereditor2d-ninepatch-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphasereditor2d%2Fphasereditor2d-ninepatch-plugin/lists"}