template-solidjs
v1.0.0
Published
This is a Phaser 3 project template that uses the Solidjs framework and Vite for bundling. It includes a bridge for Solid to Phaser game communication, hot-reloading for quick development workflow and scripts to generate production-ready builds.
Downloads
4
Maintainers
Readme
Phaser Solid TypeScript Template
This is a Phaser 3 project template that uses the Solidjs framework and Vite for bundling. It includes a bridge for Solid to Phaser game communication, hot-reloading for quick development workflow and scripts to generate production-ready builds.
Versions
This template has been updated for:
Requirements
Node.js is required to install dependencies and run scripts via npm
.
Available Commands
| Command | Description |
|---------|-------------|
| npm install
| Install project dependencies |
| npm run dev
| Launch a development web server |
| npm run build
| Create a production build in the dist
folder |
Writing Code
After cloning the repo, run npm install
from your project directory. Then, you can start the local development server by running npm run dev
.
The local development server runs on http://localhost:8080
by default. Please see the Vite documentation if you wish to change this, or add SSL support.
Once the server is running you can edit any of the files in the src
folder. Vite will automatically recompile your code and then reload the browser.
Template Project Structure
We have provided a default project structure to get you started. This is as follows:
index.html
- A basic HTML page to contain the game.src
- Contains the Solid client source code.src/index.tsx
- The main Solid entry point. This bootstraps the Solid application.src/vite-env.d.ts
- Global TypeScript declarations, provide types information.src/App.tsx
- The main Solid component.src/game/PhaserGame.tsx
- The Solid component that initializes the Phaser Game and serve like a bridge between Solid and Phaser.src/game/EventBus.ts
- A simple event bus to communicate between Solid and Phaser.src/game
- Contains the game source code.src/game/main.tsx
- The main game entry point. This contains the game configuration and start the game.src/game/scenes/
- The Phaser Scenes are in this folder.public/style.css
- Some simple CSS rules to help with page layout.public/assets
- Contains the static assets used by the game.
Solid Bridge
The PhaserGame.tsx
component is the bridge between Solid and Phaser. It initializes the Phaser game and passes events between the two.
To communicate between Solid and Phaser, you can use the EventBus.js file. This is a simple event bus that allows you to emit and listen for events from both Solid and Phaser.
// In Solid
import { EventBus } from './EventBus';
// Emit an event
EventBus.emit('event-name', data);
// In Phaser
// Listen for an event
EventBus.on('event-name', (data) => {
// Do something with the data
});
In addition to this, the PhaserGame
component exposes the Phaser game instance along with the most recently active Phaser Scene using a Solid ref.
Once exposed, you can access them like any regular Solid reference.
Phaser Scene Handling
In Phaser, the Scene is the lifeblood of your game. It is where you sprites, game logic and all of the Phaser systems live. You can also have multiple scenes running at the same time. This template provides a way to obtain the current active scene from Solid.
You can get the current Phaser Scene from the component event "current-active-scene"
. In order to do this, you need to emit the event "current-scene-ready"
from the Phaser Scene class. This event should be emitted when the scene is ready to be used. You can see this done in all of the Scenes in our template.
Important: When you add a new Scene to your game, make sure you expose to Solid by emitting the "current-scene-ready"
event via the EventBus
, like this:
class MyScene extends Phaser.Scene
{
constructor ()
{
super('MyScene');
}
create ()
{
// Your Game Objects and logic here
// At the end of create method:
EventBus.emit('current-scene-ready', this);
}
}
You don't have to emit this event if you don't need to access the specific scene from Soilid. Also, you don't have to emit it at the end of create
, you can emit it at any point. For example, should your Scene be waiting for a network request or API call to complete, it could emit the event once that data is ready.
Solid Component Example
Here's an example of how to access Phaser data for use in a Solid Component:
import { IRefPhaserGame } from "./game/PhaserGame";
// In a parent component
const ReactComponent = () => {
let phaserRef; // This will hold the PhaserGame component reference {game, scene}
const onCurrentActiveScene = (scene: Phaser.Scene) => {
// This is invoked
}
return (
...
<PhaserGame ref={phaserRef} currentActiveScene={onCurrentActiveScene} />
...
);
}
In the code above, you can get a reference to the current Phaser Game instance and the current Scene by creating a reference with some variable let phaserRef
and assign to PhaserGame component.
From this state reference, the game instance is available via phaserRef.game
and the most recently active Scene via phaserRef.scene
.
The onCurrentActiveScene
callback will also be invoked whenever the the Phaser Scene changes, as long as you emit the event via the EventBus, as outlined above.
Handling Assets
Vite supports loading assets via JavaScript module import
statements.
This template provides support for both embedding assets and also loading them from a static folder. To embed an asset, you can import it at the top of the JavaScript file you are using it in:
import logoImg from './assets/logo.png'
To load static files such as audio files, videos, etc place them into the public/assets
folder. Then you can use this path in the Loader calls within Phaser:
preload ()
{
// This is an example of an imported bundled image.
// Remember to import it at the top of this file
this.load.image('logo', logoImg);
// This is an example of loading a static image
// from the public/assets folder:
this.load.image('background', 'assets/bg.png');
}
When you issue the npm run build
command, all static assets are automatically copied to the dist/assets
folder.
Deploying to Production
After you run the npm run build
command, your code will be built into a single bundle and saved to the dist
folder, along with any other assets your project imported, or stored in the public assets folder.
In order to deploy your game, you will need to upload all of the contents of the dist
folder to a public facing web server.
Customizing the Template
Vite
If you want to customize your build, such as adding plugin (i.e. for loading CSS or fonts), you can modify the vite/config.*.mjs
file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of package.json
. Please see the Vite documentation for more information.
Join the Phaser Community!
We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄
Visit: The Phaser website and follow on Phaser Twitter Play: Some of the amazing games #madewithphaser Learn: API Docs, Support Forum and StackOverflow Discord: Join us on Discord Code: 2000+ Examples Read: The Phaser World Newsletter
Created by Phaser Studio. Powered by coffee, anime, pixels and love.
The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.
All rights reserved.