{"id":14963997,"url":"https://github.com/goldfire/phaser-webpack-loader","last_synced_at":"2025-10-25T03:31:06.533Z","repository":{"id":51108268,"uuid":"87644483","full_name":"goldfire/phaser-webpack-loader","owner":"goldfire","description":"Asset loader for Phaser + Webpack.","archived":false,"fork":false,"pushed_at":"2021-02-10T10:49:43.000Z","size":11,"stargazers_count":90,"open_issues_count":3,"forks_count":4,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-30T00:42:50.779Z","etag":null,"topics":["assets","loader","phaser","webpack"],"latest_commit_sha":null,"homepage":null,"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/goldfire.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":"2017-04-08T15:38:51.000Z","updated_at":"2024-06-18T09:49:14.000Z","dependencies_parsed_at":"2022-09-06T05:52:04.313Z","dependency_job_id":null,"html_url":"https://github.com/goldfire/phaser-webpack-loader","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldfire%2Fphaser-webpack-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldfire%2Fphaser-webpack-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldfire%2Fphaser-webpack-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldfire%2Fphaser-webpack-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldfire","download_url":"https://codeload.github.com/goldfire/phaser-webpack-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238070608,"owners_count":19411582,"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":["assets","loader","phaser","webpack"],"created_at":"2024-09-24T13:32:26.781Z","updated_at":"2025-10-25T03:31:06.222Z","avatar_url":"https://github.com/goldfire.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://s3.amazonaws.com/howler.js/phaser-webpack-loader2.png\" alt=\"Phaser Webpack Loader\"\u003e\n\u003c/p\u003e\n\n# Phaser 3 Webpack Loader\nInstead of manually calling `scene.load.image`, `scene.load.audio`, etc for every asset in your game (and then dealing with caching issues), phaser-webpack-loader lets you define all assets in a simple manifest file and handles the rest for you.\n\n**NOTE:** This plugin now only supports Phaser 3 and later. If you need support for Phaser 2, [use v1.1.0](https://github.com/goldfire/phaser-webpack-loader/tree/d3c9683e6a5ba9541ec0b0cd11c89fb824ff45b6).\n\n## Features\n\n* Load all game assets in parallel.\n* Load images, spritesheets, atlases, audio, bitmap fonts and web fonts.\n* Integrated with Webpack for automatic cache-busting.\n* Supports all filetypes.\n* Supports asset postfix for retina support ('@2x', '@3x', etc).\n* Custom event to track each file load (including fonts).\n\n## Install\n\nInstall the plugin through NPM (or Yarn):\n\n```\nnpm install phaser-webpack-loader --save\n```\n\nThen create your manifest file and add the plugin as outlined below.\n\n## Manifest File (AssetManifest.js)\n\n```javascript\nconst AssetManifest = {\n  images: [\n    'image001.png',\n    'image002.jpg',\n    '...',\n  ],\n  sprites: [\n    'sprite001.png',\n    'sprite002.png',\n    '...',\n  ],\n  audio: [\n    'audio001.webm',\n    'audio002.mp3',\n    '...',\n  ],\n  bitmapFonts: [\n    'font001.png',\n    'font002.png',\n    '...',\n  ],\n  fonts: {\n    google: {\n      families: [\n        'Open Sans:300,700',\n      ],\n    },\n  },\n};\n\nexport default AssetManifest;\n```\n\n## Running Plugin (Preload.js)\n\nIn your preload state, add the plugin. It uses promises, which makes it flexible to move to the next step when ready.\n\n```javascript\nimport WebpackLoader from 'phaser-webpack-loader';\nimport AssetManifest from '../AssetManifest';\n\nexport default class Preload extends Phaser.Scene {\n  preload() {\n    this.load.scenePlugin('WebpackLoader', WebpackLoader, 'loader', 'loader');\n  }\n\n  create() {\n    this.loader.start(AssetManifest);\n    this.loader.load().then(() =\u003e {\n      // Done loading!\n    });\n  }\n}\n```\n\nIf you want to load high DPI assets, you can pass an optional postfix string:\n\n```javascript\nthis.loader.start(AssetManifest, '@2x');\n```\n\nIf you want to know when each file is loaded, use the optional callback:\n\n```javascript\nthis.loader.systems.events.on('load', (file) =\u003e {\n  console.log('File loaded!', file);\n});\n```\n\n## Loading Fonts\n\nThe font loader uses [Web Font Loader](https://github.com/typekit/webfontloader), which supports loading web fonts from all major providers. Simply provide their standard configuration object in your manifest.\n\n## Loading Sprites/Atlases\n\nAll sprite/atlas files are loaded as JSON hashes (which can be output using [TexturePacker](https://www.codeandweb.com/texturepacker), [Shoebox](http://renderhjs.net/shoebox/) and others). All you have to specify in the manifest is the image filename, but you'll also need to include the JSON hash file alongside it, which will automatically get loaded and used.\n\n## Directory Structure\n\nSpecify the base directory in your Webpack config:\n\n```\nresolve: {\n  alias: {\n    assets: path.join(__dirname, '../src/assets'),\n  },\n},\n```\n\nThen, place your assets in the following sub-directories:\n\n```\nassets/\n├── images/\n├── sprites/\n├── audio/\n└── fonts/\n```\n\n## ES6 Building\n\nThis plugin is not pre-compiled to ES5, so you'll want to make sure your Webpack config rules are setup to not exclude it:\n\n```javascript\nmodule: {\n  rules: [\n    {\n      test: /\\.js$/,\n      loader: '...',\n      exclude: /node_modules\\/(?!phaser-webpack-loader)/,\n    },\n  ],\n  ...\n},\n```\n\n### License\n\nCopyright (c) 2018 [James Simpson](https://twitter.com/GoldFireStudios) and [GoldFire Studios, Inc.](http://goldfirestudios.com)\n\nReleased under the [MIT License](https://github.com/goldfire/phaser-webpack-loader/blob/master/LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldfire%2Fphaser-webpack-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldfire%2Fphaser-webpack-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldfire%2Fphaser-webpack-loader/lists"}