A Phaser 3 Jam Template with TypeScript, MatterJS and Webpack
Phaser is a great framework to do your game jam in, giving you an easily sharable HTML5 game while having the power to make your ideas a reality. Kick off your game jam well by being all ready to go with this template. The goal is to let you focus on your game and have all the plumbing you need sorted out. Typescript, code quality, building for itch, various input methods, examples, bootloader, preloader, main game, end screen, credits screen and license screen. Try out the live game to see what you will start with. See the recent updates in the change log
Once you have the template you need to install the dependencies.
npm installWhile you are developing have an auto updating local server
npm run startWhen you are ready to submit, creating a final production build in dist. This also creates a zip archive in itch to upload directly.
npm run buildHead over to phaser.io/learn for tutorials and code examples
This framework has been designed to give you all the pieces you need to get started on your idea and grow with you through the game jam. It also has some extra helpers that you might not normally have time to implement.
Implementing multiple ways of input for your game is always a challenge under pressure. In the ControlManager you can see how keyboard, mouse, touch and gamepad controls have been abstracted out into actions for the game objects to take advantage of.
Use the bootloader to quickly get your game logo on the screen then watch as the loading bar displays while it loads your spritesheets, audio, fonts and json into the game.
The builds for the project are controlled by Webpack. The dev build from npm run start runs locally with no additional webserver required. It hot reloads your changes so you can try out your ideas quickly. When you are ready to submit npm run build creates a dist directory with everything you need. It also creates a game.zip in the itch directory for you to upload straight to itch.io.
To help keep your code clean and working through the jam there are some tools to help avoid the last day spaghetti mess.
eslint will keep your Typescript correct and Prettier will keep it consistent.
To use Prettier and ESLint to auto fix in VSCode, install the ESLint extension in the Extensions tab and add the following lines to .vscode/settings.json:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
jest is there to help you to test any tricky algorithms and husky will make sure you don't end up committing a broken project at an inopportune moment.
The game and end screens are built with different screen sizes in mind. For the text based screens, lay out your text on your main monitor and it will resize it to the user's device while still using your display text.
The code is designed to give you all the pieces you need to give your game jam game a solid structure to build from. This is often something that you don't have time to architect during the jam but will pay off as you come to the end and can still safely modify your code.
Contains everything for the artist and sound designer. The spritesheets are created with TexturePacker. The JSON folder holds the physics shapes for custom objects which are created with PhysicsEditor.
Is where the build output goes. This has all the final files and everything you need to deploy your game.
Will contain a single game.zip for you to upload to itch.io.
Contains the source code. It is broken up by scene
The Bootloader and Preloader get all your assets into the game. It has a loading bar and examples for loading Sprite Sheets, Audio, JSON and Fonts.
The Main Scene is the core game loop. The objects holds the interactive game objects and there are a number of managers to keep the various parts of your code clean as it grows. There is also a UI Scene which overlays text on top of the game.
These scenes are text based for you to tell your player how to play, wrap up the game, credit the developers and meet your licensing requirements.
The extra utilities are game settings and some examples of different types of display text.
Contains the webpage layout and the favicons.
Has the development and production configuration for the builds.
Feel free to submit issues for problems your find or features you would like to see. Create a pull request for something that you implemented during the jam that you wish was in the template.
Toasty created for this project by Jaclyn Kim. Additional imagery from Kenney
Arpent from freepd.com by Kevin MacLeod
Phaser 3 Project Template and Phaser 3 TypeScript/Webpack Project Template
