This is a barebone foundation for a Phaser 3 game project, providing a minimal structure to get started.
phaser-game/ ├── index.html # Main HTML file ├── package.json # Node.js project configuration ├── README.md # This file ├── .gitignore # Files ignored by Git └── src/ ├── main.js # Game configuration and instantiation └── scenes/ ├── BootScene.js # Initial loading/bootstrapping scene └── GameScene.js # Example main game scene
- Node.js and npm installed (needed to run the local development server script).
- Clone or Download: Get the project files.
- Open Terminal: Navigate to the project's root directory (
phaser-barebone/). - Install Dependencies:
This installs the
npm install
servepackage (for local serving) and Phaser (optional, but good practice). - Start Development Server:
or
npm start
This will start a simple web server, typically accessible atnpm run serve
http://localhost:3000or similar. - Open in Browser: Open your web browser and go to the address provided by the
servecommand. You should see the Phaser game running with a basic message from theGameScene.
index.html: The entry point. It contains the HTML structure, includes the Phaser library (via CDN by default), and loadssrc/main.jsas an ES Module.src/main.js: Configures and creates the PhaserGameinstance. It defines the game's dimensions, rendering options, and lists the scenes to be used, starting withBootScene.src/scenes/BootScene.js: The very first scene. Useful for initial setup, showing a loading screen background, or loading a minimal set of assets before transitioning to the main loading scene or game scene.src/scenes/GameScene.js: An example of a main game scene. It includes the standard Phaser scene methods:preload(): Load assets (images, audio, etc.).create(): Set up the game world (create sprites, add text, set up input).update(time, delta): Contains the game loop logic (movement, checks, etc.).
- Add More Scenes: Create new
.jsfiles insrc/scenes/, extendPhaser.Scene, and add them to thescenearray insrc/main.js. Usethis.scene.start('SceneKey')to transition between scenes. - Add Assets: Create subdirectories in an
assets/folder (e.g.,assets/images,assets/audio) and load them in thepreloadmethod of your scenes usingthis.load. - Add Game Logic: Implement game mechanics in the
createandupdatemethods of your scenes. - Build Tools: For larger projects, consider integrating a build tool like Webpack or Parcel for asset bundling, code minification, and hot module replacement. This would involve installing Phaser via npm (
npm install phaser) andimporting it inmain.js, removing the CDN link fromindex.html.
This project is licensed under the MIT License.