{"id":13491446,"url":"https://github.com/nkholski/phaser3-es6-webpack","last_synced_at":"2026-01-20T11:04:45.948Z","repository":{"id":24115501,"uuid":"100577767","full_name":"nkholski/phaser3-es6-webpack","owner":"nkholski","description":"Generic platformer and Phaser 3 bootstrap project","archived":false,"fork":false,"pushed_at":"2023-01-13T22:16:07.000Z","size":28101,"stargazers_count":701,"open_issues_count":25,"forks_count":141,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-10-31T05:34:46.538Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://metroid.niklasberg.se/phaser3platformer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nkholski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-17T08:01:42.000Z","updated_at":"2024-09-26T00:56:19.000Z","dependencies_parsed_at":"2023-01-14T13:30:51.118Z","dependency_job_id":null,"html_url":"https://github.com/nkholski/phaser3-es6-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkholski%2Fphaser3-es6-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkholski%2Fphaser3-es6-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkholski%2Fphaser3-es6-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkholski%2Fphaser3-es6-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nkholski","download_url":"https://codeload.github.com/nkholski/phaser3-es6-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245996706,"owners_count":20707298,"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-07-31T19:00:57.066Z","updated_at":"2026-01-20T11:04:45.941Z","avatar_url":"https://github.com/nkholski.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Generic Platformer and Phaser Bootstrap Project\n#### Phaser 3 + ES6 + Webpack\n\nThis repository started as a sandbox for testing out Phaser 3 while it was in Beta bundeled with a few examples. These examples are now removed and replaced with a generic platformer project that explores Phaser 3 API. With the example project removed this is still a good boiler plate to start with. The aim of the platformer is not to relase a game but to try stuff out and to share something for others to learn from. I usually think the best way to learn is to read and manipulate source code. A quick disclaimer though, even if my aim is to identify best practices that's far from where the source code is today. I don't use pools. I do define at least one global function. Etc etc.\n\n![Running example](https://github.com/nkholski/phaser3-es6-webpack/raw/master/rawAssets/smb-phaser3.gif)\n\n**Live demo:** http://metroid.niklasberg.se/phaser3platformer/\n\nThe boiler plate code is based on the excellent Bootstrap project for Phaser 2 \"Phaser + ES6 + Webpack\" (https://github.com/lean/phaser-es6-webpack), which was based on https://github.com/belohlavek/phaser-es6-boilerplate and https://github.com/cstuncsik/phaser-es6-demo. Most of this project is an exact copy of that repository, only with the Phaser package updated to Phaser 3 and the example replaced with one based on Phaser 3. If (or when) Lean releases a Phaser 3 version of their own I'll probably shift to use that and focus on the generic platformer.\n\n**Disclaimer**: The generic platformer isn't an attempt to recreate any copyrighted game, and it will not become a playable game. You get nothing out of this besides learning about Phaser 3.\n\n# Contribute\nPlease any submit issues you have, including proposals. Ask me before preparing a PR or your PR might be rejected if in conflict with other ideas and planned way to do stuff. This would be great:\n- Feedback on best practises and why I'm being stupid\n- Extend the sprites texture atlas from the spritesheets I still use so I can dump them\n\n# Parts of API used:\nA messy list of things I used from the Phaser API. I'll try to improve this, but it gives a hint of what you might expect to find in the source code to read bring to your own projects.\n\n**Preloader**\n- image, tilemapTiledJSON, spritesheet, atlas, audio, audiosprite, bitmapFont, plugin\n\n**Input**\n- Phaser.Input.Keyboard\n- Touch controls\n\n**Audio**\n- Audioatlas (including some event listeners)\n- Music (pause/resume/rate)\n\n**Animations**\n- Animating sprites\n\n**Tilemaps**\n- Multiple layers\n- Dynamic layers\n- Animated tiles (Plugin: https://github.com/nkholski/phaser-animated-tiles)\n- Object layers are used to manipulate the map, define areas and add enemies. \n\n**Tilesprite**\n- Background clouds\n\n**Sprites**\n- All sprites are ES6 extensions of native Phaser.Sprite\n\n**Physics**\n- Acceleration\n- body sizes\n- pause\n- collisions and overlap sprite/sprite and sprite/tilemaplayer\n\n**Groups**\n- Sprites are put in groups\n\n**BitmapText**\n- For score and timer\n\n**Tweens**\n- entering pipes, ending the world etc.\n\n# Thanks to\n- The Phaser team @photonstorm, @mikewesthad and @pavle-goloskokovic for building Phaser 3 in general and for assisting while building this.\n- @AleBles - Updated webpack-stuff when the project was stalled at Beta 19.\n\n# Setup\nYou’ll need to install a few things before you have a working copy of the project.\n\n## 1. Clone this repo:\n\nNavigate into your workspace directory.\n\nRun:\n\n```git clone https://github.com/nkholski/phaser3-es6-webpack.git```\n\n## 2. Install node.js and npm:\n\nhttps://nodejs.org/en/\n\n\n## 3. Install dependencies (optionally you could install [yarn](https://yarnpkg.com/)):\n\nNavigate to the cloned repo’s directory.\n\nRun:\n\n```npm install```\n\nor if you choose yarn, just run ```yarn```\n\n## 4. Run the development server:\n\nRun:\n\n```npm run dev```\n\nThis will run a server so you can run the game in a browser.\n\nOpen your browser and enter localhost:3000 into the address bar.\n\nAlso this will start a watch process, so you can change the source and the process will recompile and refresh the browser.\n\n\n## Build for deployment:\n\nRun:\n\n```npm run deploy```\n\nThis will optimize and minimize the compiled bundle.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkholski%2Fphaser3-es6-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnkholski%2Fphaser3-es6-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkholski%2Fphaser3-es6-webpack/lists"}