Minimal Phaser3 + Create React App template

Last update: Aug 2, 2022

Phaser 3 + Create React App template

image This project was bootstrapped with Create React App.

What's included? - Check the preview

  • Phaser 3 - overlaid canvas with the config in src/PhaserGame.ts and a scene in src/scenes/
  • Create React App - React, TSX, ES6, TypeScript, no need to install bundler, ...etc
  • An example button in src/App.tsx showing how to communicate with Phaser within a React component
  • That's it!

Getting started

Clone the project and in the project directory, you can run:

yarn install or npm install

Install all the packages in create react app + Phaser 3

yarn start or npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn build or npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

GitHub

https://github.com/kevinshen56714/create-react-phaser3-app
Comments
  • 1. Sound question

    Hello Kevin,

    Thank you for this nice demo. Just a little question. Imagine i do some change in the "HelloWorldScene.ts" :

    ...

    preload() { // this.load.setBaseURL('https://labs.phaser.io') this.load.image("logo", "/assets/sprites/phaser3-logo.png"); this.load.image("red", "/assets/particles/red.png"); this.load.audio("music", "/Sound/blaster.mp3"); }

    create() { this.music = this.add.audio("music"); // doesn't work this.music.play(); // of course doesn't work this.createEmitter(); }

    ...

    The error is : "Uncaught TypeError: this.add.audio is not a function"

    I can't figure out what is wrong for making the sound working. Your help is appreciated

    Reviewed by ssommelet21 at 2022-07-06 16:02
  • 2. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-26 14:04
  • 3. Bump node-forge from 1.2.1 to 1.3.0

    Bumps node-forge from 1.2.1 to 1.3.0.

    Changelog

    Sourced from node-forge's changelog.

    1.3.0 - 2022-03-17

    Security

    • Three RSA PKCS#1 v1.5 signature verification issues were reported by Moosa Yahyazadeh ([email protected]).
    • HIGH: Leniency in checking digestAlgorithm structure can lead to signature forgery.
    • HIGH: Failing to check tailing garbage bytes can lead to signature forgery.
    • MEDIUM: Leniency in checking type octet.
      • DigestInfo is not properly checked for proper ASN.1 structure. This can lead to successful verification with signatures that contain invalid structures but a valid digest.
      • CVE ID: CVE-2022-24773
      • GHSA ID: GHSA-2r2c-g63r-vccr

    Fixed

    • [asn1] Add fallback to pretty print invalid UTF8 data.
    • [asn1] fromDer is now more strict and will default to ensuring all input bytes are parsed or throw an error. A new option parseAllBytes can disable this behavior.
      • NOTE: The previous behavior is being changed since it can lead to security issues with crafted inputs. It is possible that code doing custom DER parsing may need to adapt to this new behavior and optional flag.
    • [rsa] Add and use a validator to check for proper structure of parsed ASN.1 RSASSA-PKCS-v1_5 DigestInfo data. Additionally check that the hash algorithm identifier is a known value from RFC 8017 PKCS1-v1-5DigestAlgorithms. An invalid DigestInfo or algorithm identifier will now throw an error.
      • NOTE: The previous lenient behavior is being changed to be more strict since it could lead to security issues with crafted inputs. It is possible that code may have to handle the errors from these stricter checks.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-26 14:01
  • 4. Bump follow-redirects from 1.14.7 to 1.14.8

    Bumps follow-redirects from 1.14.7 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-15 16:17
  • 5. Thanks for the template

    Hi @kevinshen56714 Thanks for the template. CRA is a bit slow on my pc. So I converted this template to use Vite. Vite is a bit faster than webpack.

    Here is repo

    Reviewed by idpokute at 2022-01-18 22:05
A minimal game of Candy Crush in React

Candy Crush in React This project is in support of the tutorial found here To Start This Project npm i Install all the packages you need by running th

Jul 13, 2022
Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.
Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.

Mini-React Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates. Demos A simple running screenshot: Intr

Aug 5, 2022
A minimal operating system created with ReactJS
A minimal operating system created with ReactJS

mindows A minimal Operating System created with React. About This project provides a minimal Windows 10 experience in browser. It runs completely on c

Jul 29, 2022
A joyfully minimal riff on ECS with a focus on Developer Experience.

Everything you're seeing here is likely going to change quite a lot in the near future. I've added some preliminary typo-filled documentation to convey an idea of how this thing ticks, but please don't build anything with it right now that you can't risk to have to rewrite a couple of days later. :-P

Jul 27, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Jul 4, 2022
Create-serverless-api - Create Serverless APIs with no infra configuration
Create-serverless-api - Create Serverless APIs with no infra configuration

Create Serverless API Create Serverless APIs with no infra configuration. It is

Jun 7, 2022
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Jul 29, 2022
An interesting project that can control iRobot Create 2 from a React.js web app, a native mobile app, a wireless Xbox controller, or even a smartwatch

An interesting project that can control iRobot Create 2 from a React.js web app, a native mobile app, a wireless Xbox controller, or even a smartwatch

Mar 1, 2022
Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.
Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Jun 8, 2022
This project was bootstrapped with Chakra UI & Create React App
This project was bootstrapped with Chakra UI & Create React App

This project was bootstrapped with Chakra UI & Create React App

Jul 13, 2022
A Create React App to Test @chakra-ui/storybook-addon
 A Create React App to Test @chakra-ui/storybook-addon

A Create React App to Test @chakra-ui/storybook-addon This project was bootstrapped with Create React App. Steps to reproduce yarn (Install dependenci

Mar 7, 2022
Create A Simple Weather App Using React
Create A Simple Weather App Using React

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jun 13, 2022
Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site"
Example using Cypress to test Create-React-App site running with custom certificate for domain

cypress-local-https Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site" Read the blog post

Dec 21, 2021
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

Memories Front end - React,javascript,html,css Back end- NODE JS Application - This is memory application and it is a simple social media app that all

Jul 30, 2022
Integrating create-react-app with solidity backend using Etherjs or web3js
Integrating create-react-app with solidity backend using Etherjs or web3js

Staking Protocol Frontend The Frontend Implementation This project is the implementation of the web3integration of staking contract to a frontend that

Mar 27, 2022
Bookstore website create the React & Redux part of the app

Bookstore website create the React & Redux part of the app. It was also set up routing using React Router.

Jun 25, 2022
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Aug 11, 2022
Get-random-numbers-lotery - App to create randomic numbers for lotery bet (six numbers sequences)
Get-random-numbers-lotery - App to create randomic numbers for lotery bet (six numbers sequences)

Get-random-numbers-lotery - App to create randomic numbers for lotery bet (six numbers sequences)

Jan 22, 2022
Game-creator - The app with authentication and ability to create different type of games
Game-creator - The app with authentication and ability to create different type of games

Backend: mongDB nodeJS Frontend: pug for JSX stylus react native adaptive design

Feb 19, 2022