https://github.com/drazail/react-phaser-component

https://github.com/drazail/react-phaser-component

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/drazail/react-phaser-component
• Owner: Drazail
• Created: 2024-10-27T12:26:49.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-10-27T13:51:50.000Z (11 months ago)
• Last Synced: 2025-02-05T15:46:30.682Z (8 months ago)
• Language: TypeScript
• Size: 356 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
this template comes with a easy to use component wrapper for phaser3 and phaser-utility

- App.tsx : the actual react app

- PhaseGame.tsx: Phaser Game component

to add the game to an existing React App, add the phaser component to your page just as you would do with any other component.

```

        


            

        

```


make sure you provide the requiered props, example props are included in ExampleEvents Folder.

- Communication:

    communication between phaser and react are done through an eventBuss, there are four methods of communication you can use:

    - EventHandlers: handlers are passed to the phaser component using the `EventHandlers` prop

        ``

        `EventHandlers` is of type `IEventHandlers` : `{ Name: string; Function : (payload?:any)=>void }[]`

        example:

        ```

        export const EventHandlers:IEventHandlers = [{

            Name: "LogTestText",

            Function: (testText)=>{console.log(testText)}

        }]

        ```

    you can emmit an event by calling `EventBus.emit(eventName, payload)` inside the game. (make sure that the eventName is the same as the `Name` property you set for the eventHandler you want to call).

        ```

        EventBus.emit("LogTestText","this is a test text")

        ```

    Whenever an event is emmited, if there is an `EventHandler` with the same name as the emmited event, the `Function` property of the handler will be automatically called.

        you can find this in use in the example project.

    - whenever the Prop provided to the phaserComponent changes, an event called "PROPS_UPDATED" is fire.

        ``

        `Props` is of type `IProps`: `{[key: string]: any}`

    you can listen to this event by calling:

        `EventBus.on(BaseEvents.PropsUpdated,(props =>{ do stuff })`

    - you can emmit "current-scene-ready" event after a scenes create method (with a delay) to fetch initial props for a scene:

        `setTimeout(()=>{EventBus.emit(BaseEvents.currentSceneReady);},10)`

*** Remember to remove listeners by calling `EventBus.removeListener(EventName)` whenever you are done with the component.

*** there are more examples of eventHandlers, EventNames and props in the ExampleEventHandlers folder