Hello, I have a training project to repeat the game. I chose FTL. I am unfamiliar with phaser (made a platformer from learn). I have an idea to use Phaser together with React (create an interface (buttons, health bars, popups, etc.)). But I came across the fact that I do not understand how to transfer the values to the Phaser and React honey. I use IonPhaser for Phaser to work in React.
Here is a repository with a game made from the Lern section
Perhaps you can tell me how to transfer values from Phaser to React and vice versa (for example, a counter)
I rewrote the game into Classes, and it became clear where to move, at the moment the reaction displays the Score of the game, but for this I have to call setState inside the ScoreLabel of the class. I think that this can be made easier, but it doesn’t. Well, a reference to the branch
I could not solve the problem, and did not create the ScoreLabel class to record the state, (I thought that the current state value obtained using useState would be passed to the scene, but apparently this is not so. 
on line 59, I increment the counter, and pass the new value to the react component
While I’m not too familiar with react development what I would question is exactly how much you’re really benefitting from embedding phaser into react.
I’ve seen so many incarnations with phaser (and I’m not trying to discourage it) but from people creating huge state management architecture patterns. I personally find most unnecessary. Though I can understand the need to want to use UI elements from various frameworks.
2 Likes
I myself am not sure how good this idea is, I just know how to make an interface using React, and I don’t know how to do it in Phaser (I just started getting to know it).
You suggest creating and listening to events. I think to try this option as well as an implementation using react redux
For the reason you give I would definitely suggest just creating a pure phaser phaser project.
Creating a scene for ui elements can be done at a basic level just using images and communicating between that scene and other scenes.
For example
Game scene could emit a custom death event to the UI scene and the UI scene would decrease the number of hearts within its scene.
@IAleks94 is right. I, personally, would never combine React, Vue or any other library/framework to make a Phaser game. Just images or basic html and javascript with the phaser dom element.
1 Like
I think you(@yannick ) and @Phailser are right, I’m just starting to learn Phaser and I had little idea of how to do UI, now I’m just studying this topic. Many unusual new methods, so I want to do it in a familiar way. Perhaps I will abandon the idea of using React when I get better at Phaser. You used React inside Phaser, but I would like on the contrary, to bring the interface on top of the game, or is this a bad idea?
I don’t like how many classes you have to create for the UI. But I think this is because I generally rarely used classes before. Well, all the same unusual methods, I want to use the good old css and html to create XD buttons and minuses.
And I do not have enough DOM to see the properties of the element, its children / parents. I think this is a matter of habit, you need to get comfortable with a slightly different approach