Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js App Router, React v.19 deprecates forwardRef, other fixes #3

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Next.js App Router, React v.19 deprecates forwardRef, other fixes #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
af05da6
update deps
ospira Dec 18, 2024
506213e
naming tweaks
ospira Dec 18, 2024
9b39fb4
update deps
ospira Dec 18, 2024
68ae961
no more forwardRef...
ospira Dec 18, 2024
82ef0c8
Update tsconfig.json
ospira Dec 18, 2024
549e928
app router
ospira Dec 19, 2024
8856251
memo() doesn't save that much perf, if at all
ospira Dec 19, 2024
e8c7e50
fin up
ospira Dec 19, 2024
a11b5b0
Update PhaserGame.tsx
ospira Dec 19, 2024
1eed2e2
Update README.md
ospira Dec 19, 2024
b1fe5c3
Update App.tsx
ospira Dec 19, 2024
77ba113
Update README.md
ospira Dec 19, 2024
da6568b
small tweaks for clarity
ospira Jan 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 12 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This is a Phaser 3 project template that uses the Next.js framework. It includes
This template has been updated for:

- [Phaser 3.87.0](https://github.com/phaserjs/phaser)
- [Next.js 14.2.3](https://github.com/vercel/next.js)
- [Next.js 15.1.1](https://github.com/vercel/next.js)
- [TypeScript 5](https://github.com/microsoft/TypeScript)

![screenshot](screenshot.png)
Expand Down Expand Up @@ -38,18 +38,20 @@ Once the server is running you can edit any of the files in the `src` folder. Ne

We have provided a default project structure to get you started. This is as follows:

- `src/pages/_document.tsx` - A basic Next.js component entry point. It is used to define the `<html>` and `<body>` tags and other globally shared UI.
- `src` - Contains the Next.js client source code.
- `src/styles/globals.css` - Some simple global CSS rules to help with page layout. You can enable Tailwind CSS here.
- `src/page/_app.tsx` - The main Next.js component.
- `src/App.tsx` - Midleware component used to run Phaser in client mode.
- `src/game/PhaserGame.tsx` - The React component that initializes the Phaser Game and serve like a bridge between React and Phaser.
- `src/game/EventBus.ts` - A simple event bus to communicate between React and Phaser.
- `src/app` - Contains the Next.js source code, pages.
- `src/app/layout.tsx` - A basic Next.js layout that applies to all pages. It is used to define the `<html>` and `<body>` tags and other globally shared UI.
- `src/app/page.tsx` - Next.js router entry point.
- `src/app/home-page.tsx` - Page component that wraps App.tsx.
- `src/App.tsx` - Top level React component entry point. Wraps DOM UI and the PhaserGame component. State shared between React and Phaser can be set here.
- `src/game/PhaserGame.tsx` - The React component that initializes the Phaser Game and serves like a bridge between React and Phaser. It is loaded client-side only.
- `src/game` - Contains the game source code.
- `src/game/EventBus.ts` - A simple event bus to communicate between React and Phaser.
- `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.
- `src/styles/globals.css` - Some simple global CSS rules to help with page layout. You can enable Tailwind CSS here.
- `public/favicon.png` - The default favicon for the project.
- `public/assets` - Contains the static assets used by the game.

## React Bridge

The `PhaserGame.tsx` component is the bridge between React and Phaser. It initializes the Phaser game and passes events between the two.
Expand Down Expand Up @@ -116,15 +118,9 @@ const ReactComponent = () => {

const phaserRef = useRef<IRefPhaserGame>(); // you can access to this ref from phaserRef.current

const onCurrentActiveScene = (scene: Phaser.Scene) => {

// This is invoked

}

return (
...
<PhaserGame ref={phaserRef} currentActiveScene={onCurrentActiveScene} />
<PhaserGame ref={phaserRef}/>
...
);

Expand All @@ -135,7 +131,7 @@ In the code above, you can get a reference to the current Phaser Game instance a

From this state reference, the game instance is available via `phaserRef.current.game` and the most recently active Scene via `phaserRef.current.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.
You can also attach state or other data handlers to respond to events in Phaser, see `PhaserGame.tsx` and `EventBus.ts`.

## Handling Assets

Expand Down
Loading