{"id":14963989,"url":"https://github.com/azerion/phaser-ts-boilerplate","last_synced_at":"2025-08-22T00:49:00.325Z","repository":{"id":39787796,"uuid":"80709652","full_name":"azerion/phaser-ts-boilerplate","owner":"azerion","description":"The boilerplate for Phaser 2 we use internally at Azerion","archived":false,"fork":false,"pushed_at":"2022-12-06T14:33:30.000Z","size":24705,"stargazers_count":107,"open_issues_count":15,"forks_count":21,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-30T00:43:09.712Z","etag":null,"topics":["boilerplate","phaser","typescript"],"latest_commit_sha":null,"homepage":"","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":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-02T09:15:40.000Z","updated_at":"2024-05-29T10:50:13.000Z","dependencies_parsed_at":"2023-01-24T02:00:58.766Z","dependency_job_id":null,"html_url":"https://github.com/azerion/phaser-ts-boilerplate","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/azerion%2Fphaser-ts-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-ts-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-ts-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-ts-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azerion","download_url":"https://codeload.github.com/azerion/phaser-ts-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238075284,"owners_count":19412307,"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":["boilerplate","phaser","typescript"],"created_at":"2024-09-24T13:32:26.208Z","updated_at":"2025-02-10T07:31:08.296Z","avatar_url":"https://github.com/azerion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Azerion Phaser Boilerplate\n==========================\n![VerNicelyMadeBanner](http://static.azerion.com/2017/02/OG_header_contact_new.png)\nYet another Phaser Boilerplate, but instead of showing a working toolchain, this is all about fixing bugs, working around browser issues, analytics and advertising. This is the core of every HTML5 Azerion Game :)\n\nDue to this boilerplate having no focus on the toolchain, we also assume in this readme that you have some basic knowledge about [webpack](https://http://webpack.github.io/), [npm](https://www.npmjs.com/) and [TypeScript](https://www.typescriptlang.org/)\n\nGetting Started\n---------------\n\nSo the first thing you'd want to is too clone this game repo and start changing some ID's around in the webpack.base.config.js file.\nWe have some base ID's setup for [google analytics](https://accounts.google.com), [game analytics](http://www.gameanalytics.com/) and [GameDistribution ads](http://gamedistribution.com/)\n\n### Development\nDuring development itself you only need to run 1 command, namely:\n```\nPC@OG:~/Projects/GameName$ npm run dev\n```\n\nIt will starts webpack-dev-server/browsersync and open a browser tab for you.\nThis will make sure that every time a Typescript file has changed, it wil update your project.\n\nA webserver is also started on your local machine on port 3000. You can point your browser to http://localhost:3000, check out your game, and browsersync will refresh your browser every time a change has been made. To check out all the features of BrowserSync you can check out http://localhost:3001\n\n### Production\nFor production builds there are two commands, one that compiles and minifies all the code and assets, and one for writing a version number.\n```\nPC@OG:~/Projects/GameName$ npm run dist\n```\n\n## Development\n\nIt's time to start developing!\nKeep the following guidelines in mind when developing a game.\n\nConfiguration\n=============\n\nSo in order to set up the correct analytics and ads you need to make some accounts at:\n- [google analytics](https://support.google.com/analytics/answer/1008015?hl=en)\n- [game analytics](http://www.gameanalytics.com/docs/faq)\n- [GameDistribution ads](http://gamedistribution.com/api/)\n\nThen get the id's you're given and you can put them in the Constants.\n\n\nCode\n====\n\n### Game logic\n\nIn the ts/Backend folder goes all the logic of the game. This is logic without any front-end or animations linked to it. The idea is that this logic can be copied 1 on 1 to the backend server so that when the game is on the portal, this backend server knows exactly whats going on in the game.\nThis makes online integration a lot easier for the game.\n```\n./ts/Backend\n```\n\n\n### Game States\n\nAny class that extends a Phaser.State should be located in the ts/States folder, also don't forget to register the new state in app.ts :)\n```javascript\n//Here we load all the states, but they shouldn't start automaticly\nthis.state.add(Boot.Name, Boot, false);\nthis.state.add(Fabrique.SplashScreen.Preloader.Name, Fabrique.SplashScreen.Preloader, false);\nthis.state.add(Menu.Name, Menu, false);\nthis.state.add(Gameplay.Name, Gameplay, false);\n```\nAll these files are placed here.\n\n```\n./ts/States\n```\n\n### Data\n\nConfigs, asset names etc. go into\n```\n./ts/Data\n```\n\n### Objects\n\nSometimes, in-game objects are a bit bigger than just a Phaser.Sprite or Phaser.Image.\nIn those cases, we create separate classes for them that extend any of the default Phaser objects (like Phaser.Sprite or Phaser.Button) and place them in the ts/Objecst folder.\n```\n./ts/Data/Objects\n```\n\n### Fabrique\n\nThe ts/Fabrique contains a set of files, that will mostly be re-used utils for other games like a FadeToColor state, and stuff that is needed in order for the TypeScript compiler to find all the references.\nLike Fabrique.IState or Fabrique.IGame\n\nAssets\n======\n\n### Images\nFirst, add the images to this folder:\n\n```\n./assets/images\n```\nThen implement them in code as so:\n\n```javascript\nclass Images {\n //All the separate images needed in the game\n public static Background: string = 'background';\n}\n```\n\nNext you need to add the static image reference to the preloadList as well, so the game knows this image has to be loaded.\n```javascript\nclass Images {\n//All the seperate images needed in the game\npublic static Background: string = 'background';\n\npublic static preloadList: string[] = [\n    Images.Background,\n];\n}\n```\n\nNow the game will automatically load the background image, and all you have to do is use the static reference to add it to the game:\n```javascript\ngame.add.image(\n    100,                // x position\n    100,                // y position\n    Images.Background   // Loaded image reference\n);\n```\n\n### Sound\n\nThis should be located in\n```\n./assets/sound\n```\n\nThe adding and handling of sound is the same as those of images, but the added requirement for audio is that every audio file needs an mp3, ogg and m4a version. This is due to cross-browser support.\n\n\n### Fonts\n\nFonts require files to be in 2 places. \nFirst of all we need a css file that defines a font-face in the css folder\n```\n./assets/css/yourFontFace.css\n```\n\nThen the font files themselves should be place in\n```\n./assets/fonts\n```\n\nWebFonts require a definition in css, apart from any woff/ttf/eot files, thats why fonts are located into folders.\nIdeally every font has woff, eot, svg AND ttf files to make sure it works in every major browser.\n\nOnce that's done you can add the font to the fontloader, which is located in app.ts.\n\n```typescript\n//Load the fonts\nWebFont.load(\u003cWebFont.Config\u003e{\n custom: \u003cWebFont.Custom\u003e{\n     families: ['Century Gothic'],\n     urls: [\n         'assets/css/CenturyGothic.css'\n     ]\n }\n});\n```\nIn the above example there is only one font specified, but this can be extended with an infinite amount of fonts.\n\nThe WebFont.load will be implemented along with update function which will check if fonts have been loaded.\n And if so, the function will update the text to use the loaded fonts.\n\n\n### Atlasses\n\nThis should be located in\n```\n./assets/atlas\n```\nAtlases are images that contain multiple assets in a game. Every atlas image has a corresponding JSON file that tells the Phaser framework where in the atlas each image is located, and what the image's original size should be.\n\nOur atlases are generated with TexturePacker, and we store the .tps config file also in assets/atlas folder.\n\nOther than that atlases are treated and loaded the same as images and audio.\n\nNotable games\n=============\n\nWe have over 100 games made with this boilerplate, here are some of our best titles:\n\n[![Game](https://img.gamedistribution.com/405c00612981466cbc5d9dcef4214811.jpg)][game1]\n[![Game](https://img.gamedistribution.com/070d0680bbe24d5aafa44d8b9b629c2d-512x384.jpeg)][game2]\n[![Game](https://img.gamedistribution.com/f347269e389f432fa5abc257624c8165-512x384.jpeg)][game3]\n[![Game](https://img.gamedistribution.com/a1c4858cc2db451bb97c8e926257b49a-512x384.jpeg)][game4]\n[![Game](https://img.gamedistribution.com/21c1b91ec16c4f1fb6ae5b18ad792f13.jpg)][game5]\n[![Game](https://img.gamedistribution.com/b517c22cc727478aac466e0950fa26e7.jpg)][game6]\n[![Game](https://img.gamedistribution.com/b432cd4fa1bb45d1a072b9eefbcd47dc.jpg)][game7]\n[![Game](https://img.gamedistribution.com/6984522dd6714dd8b92b5285c6bc0ceb.jpg)][game8]\n\nCredits\n=======\n[CSS loader](https://projects.lukehaas.me/css-loaders/) by [@lukehaas](https://twitter.com/lukehaas)\n[phaser-npm-webpack-typescript-starter-project](https://github.com/rroylance/phaser-npm-webpack-typescript-starter-project) by [@rroylance](http://rroylance.github.io/)\nMusic Menu state - Doobly Doo [Kevin MacLeod](http://incompetech.com) [Licensed under Creative Commons: By Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/)\nMusic Gameplay state - Overworld [Kevin MacLeod](http://incompetech.com) [Licensed under Creative Commons: By Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/)\n\nHandy Sources / Links\n=====================\nHere you find a list of libraries used by the games in general. They link to the lib's respective docs\n\n- [phaser-cachebuster](https://github.com/azerion/phaser-cachebuster) A Phaser plugin that allows for assets to be cachebusted by queryparameters\n- [phaser-ads](https://github.com/azerion/phaser-ads) A Phaser plugin for providing nice ads integration in your phaser.io game\n- [phaser-spine](https://github.com/azerion/phaser-spine) A plugin for Phaser that adds Spine support\n- [phaser-i18next](https://github.com/azerion/phaser-i18next) Phaser plugin for translations using i18next\n- [phaser-web-workers](https://github.com/azerion/phaser-web-workers) A simple Phaser plugin that allows you to easily integrate Web Workers in your game\n- [phaser-super-storage](https://github.com/azerion/phaser-super-storage) A cross platform pluggable storage plugin for Phaser.\n- [webfontloader](https://github.com/typekit/webfontloader) A library that allows for 'good' loading of multiple fonts\n- [phaser-nineslice](https://github.com/azerion/phaser-nineslice) A plugin that adds 9 slice scaling support\n- [phaser-input](https://github.com/azerion/phaser-input) An input library that works on canvas and WebGL. Also has mobile support.\n\n[game1]: http://gamedistribution.com/games/bubble-burst\n[game2]: http://gamedistribution.com/games/extreme-bikers\n[game3]: http://gamedistribution.com/games/world-football-kick-2018\n[game4]: http://gamedistribution.com/games/space-blaze-1\n[game5]: http://gamedistribution.com/games/mahjong-dynasty\n[game6]: http://gamedistribution.com/games/moving-up\n[game7]: http://gamedistribution.com/games/christmas-pong\n[game8]: http://gamedistribution.com/games/twisted-city\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-ts-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazerion%2Fphaser-ts-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-ts-boilerplate/lists"}