DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

Phaser running within React + TypeScript

React & Phaser

Phaser running within React + TypeScript

A simple CRA that combines React, TypeScript and Phaser.

Phaser running within React + TypeScript

Authors

Intro

Combine Phaser’s rendering power with React’s UI capabilities. Fork the repository and start writing your game’s core code.

Phaser running within React + TypeScript

Installation

  nvm use && yarn && yarn start
Enter fullscreen mode Exit fullscreen mode

Local Commands

Starting the dev server

  nvm use && yarn start
Enter fullscreen mode Exit fullscreen mode

Testing the UI

  nvm use && yarn test
Enter fullscreen mode Exit fullscreen mode

Building the project

  nvm use && yarn build
Enter fullscreen mode Exit fullscreen mode

Usage

Extend the game’s functionality starting in this file. Check Phaser’s Tutorial for more info how these two functions work.

src/core/init.ts

...
create(): void {}
...
update(): void {}
...
Enter fullscreen mode Exit fullscreen mode

Extend the game’s pre-loader starting in this file. Check Phaser’s Tutorial for more info on loading assets.

src/core/preload.ts

...
preload(): void {}
...
Enter fullscreen mode Exit fullscreen mode

Tech Stack

Environment: TypeScript, ESLint, Prettier, Jest

Client: React, Phaser

Server: Node, Express

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project’s code of conduct.

Acknowledgements

License

MIT

GitHub

View Github

Top comments (0)