{"id":15164291,"url":"https://github.com/phaserjs/editor-starter-template-customfonts","last_synced_at":"2026-01-15T22:11:21.850Z","repository":{"id":232416510,"uuid":"783836825","full_name":"phaserjs/editor-starter-template-customfonts","owner":"phaserjs","description":"A Phaser Editor v4 project template with a custom web font loader. The custom fonts are loaded into the editor with an editor's plugin.","archived":false,"fork":false,"pushed_at":"2025-03-31T17:29:57.000Z","size":396,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T18:38:08.143Z","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/phaserjs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-08T17:06:04.000Z","updated_at":"2024-09-30T18:42:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"c32ef1db-2928-4949-8f66-3241e3222ced","html_url":"https://github.com/phaserjs/editor-starter-template-customfonts","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"be40087020260bc7d5ea6664dc97e295d158bb21"},"previous_names":["phaserjs/editor-starter-template-customfonts"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/phaserjs/editor-starter-template-customfonts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phaserjs%2Feditor-starter-template-customfonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phaserjs%2Feditor-starter-template-customfonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phaserjs%2Feditor-starter-template-customfonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phaserjs%2Feditor-starter-template-customfonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phaserjs","download_url":"https://codeload.github.com/phaserjs/editor-starter-template-customfonts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phaserjs%2Feditor-starter-template-customfonts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28472624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T20:50:13.584Z","status":"ssl_error","status_checked_at":"2026-01-15T20:49:17.379Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2024-09-27T03:03:50.480Z","updated_at":"2026-01-15T22:11:21.834Z","avatar_url":"https://github.com/phaserjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project template with custom web fonts\n\nA project template for loading web fonts into a Phaser game and the Phaser Editor 2D's Scene Editor.\n\n## First steps\n\nThis project requires [Node.js](https://nodejs.org) and [NPM.js](https://www.npmjs.com). It is recommended that you learn the basics of [Webpack.js](https://www/webpack.js.org).\n\n* Install dependencies:\n\n    ```\n    npm install\n    ```\n\n* Run the development server:\n\n    ```\n    npm start\n    ```\n\n    Open the browser at `http://127.0.0.1:8080`.\n\n* Make a production build:\n\n    ```\n    npm run build\n    ```\n\n    It is generated in the `/dist` folder.\n\n## WebFont loading\n\nThis project uses the [WebFontLoader](https://github.com/typekit/webfontloader) library for loading web fonts.\n\nThere are two parts in this project:\n\n1- A plugin for loading the fonts into the editor.\n2- The code for loading the fonts into the game.\n\n### Loading the fonts into the editor\n\nIt is important to load the same fonts into the editor so you can see the texts as they are rendered in the game.\n\nFor doing this, I created the `fontsloader` plugin, in the `phasereditor2d-plugins` folder. Look in the `phasereditor2d.config.json` file I configured the plugins path to `phasereditor2d-plugins`.\n\nHere I'm not going to explain how the Phaser Editor 2D plugins work. But you can take a look at the files in the plugin. What it does is: \n\n* Load the styles with the font definitions (`phasereditor2d-plugins/fontsloader/`). It `@import` the same `fonts.css` file of the game.\n\n* Load the WebFontLoader library (`phasereditor2d-plugins/fontsloader/lib/webfontloader-1.6.28.js`).\n\n* Uses the WebFontLoader library for loading the font.\n\nFor loading new fonts, you should add them in the `phasereditor2d-plugins/fontsloader/main.js` file.\n\n### Loading the fonts in the game\n\nI load the fonts in the game using a standard method, that is compatible with any Phaser game.\n\nFor loading new fonts, you have to:\n\n* Copy the fonts to the `src/fonts` folder (in case you are loading it from the project and not from the Internet).\n* Update the `fonts/fonts.css` file, with the new `@font-face`.\n* Finally, use the Phaser Loader for loading the fonts:\n\n    ```javascript\n    this.load.webfont(\"myNewFont\", {\n        custom: {\n            families: [\"NewFont\"]\n        }\n    });\n    ```\n\n    The `webfont(key, config)` method receives a `key` and a `config` parameter. The `config` parameter is the same of the [WebFontLoader](https://github.com/typekit/webfontloader) library.\n\n    This method is added to the Phaser Loader in the `index.ts` file.\n\n\n## General Phaser Editor considerations\n\n### Excluding files from the project\n\nThere are a lot of files present in the project that are not relevant to Phaser Editor 2D. For example, the whole `node_modules` folder should be excluded from the editor's project.\n\nThe `/.skip` file lists the folders and files to exclude from the editor's project. \n\n[Learn more about resource filtering in Phaser Editor 2D](https://help.phasereditor2d.com/v3/misc/resources-filtering.html)\n\n### Setting the root folder for the game's assets\n\nThe `/static` folder contains the assets (images, audio, atlases) used by the game. Webpack copies it to the distribution folder and makes it available as a root path. For example, `http://127.0.0.1:8080/assets` points to the `/static/assets` folder.\n\nBy default, Phaser Editor 2D uses the project's root as the start path for the assets. You can change it by creating an empty `publicroot` file. That is the case of the `/static/publicroot` file, which allows adding files to the Asset Pack file (`/static/assets/asset-pack.json`) using correct URLs.\n\n### Asset Pack content hash\n\nWebpack is configured to include the content hash of a file defined in an asset pack editor:\n\n* For loading a pack file in code, import it as a resource:\n    ```javascript\n    import assetPackUrl from \"../static/assets/asset-pack.json\";\n    ...\n    this.load.pack(\"pack1\", assetPackUrl);\n    ```\n    Webpack will add the `asset-pack.json` file into the distribution files, in the folder `dist/asset-packs/`.\n\n* Because Webpack automatically imports the pack files, those are excluded in the **CopyPlugin** configuration. By convention, name the pack files like this `[any name]-pack.json`.\n\n* The NPM `build` script calls the `phaser-asset-pack-hashing` tool. It parses all pack files in the `dist/` folder and transforms the internal URL, adding the content-hash to the query string. It also parses files referenced by the pack. For example, a multi-atlas file is parsed and the name of the image's file will be changed to use a content-hash.\n\nLearn more about the [phaser-asset-pack-hashing](https://www.npmjs.com/package/phaser-asset-pack-hashing) tool.\n\n### Coding\n\nThe `/src` folder contains all the TypeScript code, including the scene and user component files, in addition to the Phaser Editor 2D compilers output.\n\nWe recommend using Visual Studio Code for editing the code files.\n\nIn many tutorials about Phaser Editor 2D, the JavaScript files are loaded using the Asset Pack editor. When using Webpack this is not needed. Just use the Asset Pack editor for loading the art assets.\n\n### Scene, User Components, and ScriptNode configuration\n\nThe Scenes, User Components, and ScriptNodes are configured to compile to TypeScript ES modules. Also, the compilers auto-import the classes used in the generated code.\n\n### ScriptNodes\n\nThe project requires the following script libraries:\n\n* [@phaserjs/editor-scripts-core](https://www.npmjs.com/package/@phaserjs/editor-scripts-core)\n* [@phaserjs/editor-scripts-simple-animations](https://www.npmjs.com/package/@phaserjs/editor-scripts-simple-animations)\n\nYou can add your script nodes to the `src/script-nodes` folder.\n\n## Author\n\nCreated and maintained by the Phaser Editor 2D team.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphaserjs%2Feditor-starter-template-customfonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphaserjs%2Feditor-starter-template-customfonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphaserjs%2Feditor-starter-template-customfonts/lists"}