Game Development with ReactJS, CSS, and React Three Fiber

Hi, everybody. My name is Jorge Rubiano. I am a Software Engineer from Colombia. I have a profound passion for technology and programming. I have always believed that the most effective way to learn is by doing and teaching. Feel free to connect with me on Twitter or scan the QR code to explore my personal page. There you will find the games that I will share with you today.

The topic for this conference is game development with React.js, CSS, and Reactfibre. Our agenda is the following. First of all, we are going to talk about React.js. Second, I'm going to share with you the types of games that I have developed with React.js and CSS. I classify these games in three categories. Puzzle games, isometric games, and board games. Next, we are talking about 3.js and Reactfibre. Also, I'm going to share with you some games that I developed with Reactfibre. And finally, I'm going to show you a demo. In that demo, we are going to develop a very simple game with Reactfibre.

Okay, React.js. React.js is an open source frontend JavaScript library for building user interfaces based on components. It's maintained by Meta and a community of individual developers and companies. With React, it's possible to create encapsulated components that handle their own state and turn them into complex user interfaces. Now, my idea is to share with you some of the games that I have developed using only React and CSS.

As I mentioned before, I classify these games in three categories. The first category is puzzle games. A puzzle game is a type of interactive entertainment that challenges players to solve various mental challenges often involving logic, pattern recognition, and critical thinking. These games present players with puzzles or problems that need to be solved in order to progress. Some of the games that I developed in this category are games, for example, Dice Merge, Puzzle Puzzle, and so on. I'm going to share with you two of these games. The first game is Dice Merge. This is a very simple game.

The idea of this game is that we need to drag and drop dices into this grid, and we need to merge the dices with the same color and value. For example, I'm going to—we have this value 1. And here I'm going to merge this value, this dice with this dice. And you can see here that this dice is in this case the value 2. For example, if I drag this here, the next value should be 4, and so on.

As I mentioned before, one important point here is that this game is developed using only CSS. The whole UI, as you can see here, I'm using CSS. And to manage the state of our game, we are using React.

Other game is the popular pulse or puzzle. Basically, the idea of this game is that we need to move balls that have the same color to one container to another container, as you can see here. It's very simple. Basically, we need to know how we organize this information. For example, here I made a mistake. I can move this here. I can move this here. And here. And now we solve that level. Again, this is developed using only CSS for the UI. All the UI is with CSS. And also React.

With React, we manage the state of our game. The second type of game that is possible to develop with React and CSS, at least from my opinion, is isometric games. An isometric game is a table for your game that employs an isometric projection for its graphics, representing a three-dimensional environment in a two-dimensional plane. This perspective creates the illusion of depth and allows players to navigate and interact with the game world from a fixed diagonal viewpoint.

In this category I developed three games, such as Lawn Cat, Cozzle, and Hocus, taking advantage of the isometric perspective. For example, I'm going to show you, in this case, the game named as a Cozzle. Cozzle, this is the game named Cozzle. Basically, as you can see here, we are taking advantage of the isometric perspective. Here, the idea is that we need to move this box from one point to another point, even we have some portals, as you can see here. But again, I want to reiterate that these games are developed using only CSS. All the UI that you can see here was built using CSS, and we managed this type, of course, again, with React.

The other type of games that is possible developed using CSS and React is board games. A board game is a tabletop game typically playing on a flat surface, often with a pre-designed board and pieces of tokens. Board games offer the opportunity to engage in a strategic gameplay, often involving dive roles and card management. The games that I developed, or the board games that I developed with React and CSS, are a version of Parchees and a version of Jansi. Another particular note here is that these games use a backend infrastructure because we can also play in real-time versus other players, in this case using, for example, web sockets. I'm going to share with you these games. The first game is Parchees. With Parchees, we can play to players, for players in real-time, or even we can play offline, in this case, versus a bot. Basically, as you can see here, we have the board that we have for Parchees, but the difference here is that this board is developed using CSS. All the elements, the tokens, the dices that we have here are developed using CSS. But again, all the state for our game, in that case, we are using React. Here we apply the same rules that Parchees has, and we can apply the rules using React. As I mentioned before, I want to show you this because I want to reiterate that it's possible to create these games that are simple games compared with other games using only CSS and React. The other game is a version of Ojansee. As I mentioned before, this game also has, for example, Ojansee, the capability of playing online versus a friend or creating events in private rooms. For example, the idea of Ojansee is basically we have this board and we have five dices. We need to have five dices of the same value to have Ojansee. But if we don't have Ojansee, we can use the combination of these dices to, I don't know, to select one value from our board. For example, I can select this value because I have three dices of the same value.

And again, this game is, the UI of this game is only CSS, and with React, we manage the state of our game. Okay, but when we need to start creating games with 3D, with the 3D experience, as you know, on the web, we have a very popular or very powerful technology, in this case, it's WebGL. If we as a JavaScript developers want to start working with WebGL, we have also different options and different libraries. And one of the most popular libraries to work with WebGL is 3.js. As you know, 3.js is a cross-browser JavaScript library and application programming interface, using to create and display animated 3D computer's graphics in a web browser using, in this case, WebGL.

But I wonder if there was a way to use both React and 3.js together. The answer is ReactiveFiber. ReactiveFiber is what is referred to as a real renderer. The concept behind a renderer is that we write code in JSX and think the data is transformed into something else. In our case, a 3.js scene. ReactiveFiber was created by Paul Henschel, also known by this handle on Twitter. Paul is the founder and manager of PointMandris, this is a collection of open source developers.

Now, my idea is to show you two games I developed using ReactiveFiber. The first game is this type app. This is a very secondhand game. The idea here is that, as you can see here, we need to move over characters. But, for example, the box is in a different place that our character is. As you can see here, I can rotate the whole scenario, because in this case we are using ReactiveFiber to achieve this. And the idea is that we need to move this box to the green floor. Again, for example, we can achieve this because we have the power of ReactiveFiber and also 3DJS at the same time. The other game is a simple game. The name of this game is Colored. The idea is that we need to change the color for the floor. As you can see here, this box has the green color, and we need to change the color when the face of that box is down. And yes, we need to paint the floor. In this case, it's a very simple game, but with this game, the challenge was to validate, first of all, the rotation for our cube, and also to validate when the, in this case, the face is down or is up, basically.

Okay. This is the two simple games that I developed using ReactiveFiber. Now, the idea is to show you a demo. In that demo, we are going to develop a very simple game. In that case, we are going to develop a version, a bowling game, using ReactiveFiber. For this demo, we are going to develop a bowling game. The first component that I'm going to add to game is the, in this case, sorry, the score component. The score component, we need to pass a couple of props. The first prop that we will require is the information for our players.

We can extract that information for the game state variable. Also, we need to know what is the current tour. That is why we have the tour variable as well. And finally, we need a variable that indicates if the ball falls at the end of the bowling lane. That is why we have a ball force variable. This is a boolean, basically.

The other component that we require is a component that shows the state for our pins. That is why we have the state pins. And also, we have, in this case, a drop-in pins variable. This variable basically is a list of pins that show what is the pins that are visible and what are the pins that are not visible. OK.

The next component is a component that shows the different messages for our game. Messages such as, for example, if we have a turkey, if we have, for example, a strike and so on. The next component is the component that shows the final results for our game. That is the gaming statistics. This shows, for example, who was the winner and so on. To do that, we require the information for our players as well. As you can see here, in this moment, we are shown with this component. But we only need to show this component when the game is over. That is why, again, we have the game over variable here. And using conditional rendering, we can validate that this component is only visible when game over is, in this case, true.

Now it's time to start adding the different components for reactive fiber. The first component is the Scene component. Basically, as you can see here, we have a canvas element. This is a component from reactive fiber. And we have a couple of configurations for our camera. And also, we are enabled shadows in our scene. Okay. Now, it's very important we are going to add a couple of lights to our game. Here, we are using two lights.

A directional light with solid configuration and also an ambient light. Now, because we are going to use some models, we are going to use suspense. Remember that when we are using suspense, we can, in this case, pass a 4-ball.

For this particular game, we are using three models. We are using the ball and finally, our pin. Now, inside this, we are going to add the physics component. The physics component is a component from Rippier. With Rippier, we can manage everything related to physics and collisions.

Now, here, I'm going to load our first model that is related to the bowling lane. Also, I'm going to add our pins. And here, for our pins, we require a couple of information. The first thing that I'm going to pass is a key. With this key, we know if it's necessary to restore our pins in our game. Also, I need to know the information to know if the ball falls at the end of the bowling lane. And also, we require an event. With this event, this event returns the list of pins that are not visible or the list of pins that we are dropping down.

Okay. Now, I'm going to add another component for repair. That's the component. With this component, we can see the different colliders that we have in our scene. Also, I'm going to add orbit controls from Drave. With orbit controls, we can manipulate our camera. In this case, we can control the camera. As you can see here, we have the bowling lane. And, also, at the end of our bowling lane, as you can see here, we have our different pins. If I rotate here our model, as you can see here, we have our pins. As you can see here, we can add different colliders as well. Now, these yellow lines are the different colliders that we have in our scene. Okay. We have now the basic for our game.

But now, it's necessary to add one of the main components here. That is the player component. For our player component, we require a couple of props. First of all, we need a prop that indicates if the current turn for that particular user ends. Also, we need to know if the game is over. That is why we pass the game over a value. Again, this is a boolean at the end of the day. And also, we require an event that returns if the ball falls at the end of the bowling lane. That is why we have the event and the ball falls.

Now, because our player is going to control the camera, we don't require our orbit controls anymore. And also, I removed the information related to the debut component. As you can see here, this is the basic for our game. Meanwhile, I'm going to remove these comments because it's not necessary anymore. And now as you can see here, we have everything. In this case, that's the good thing about working with components. As you can see here, we can understand everything that is working here. As you can see here, we have the information for the score. Here we have the score, the information for our state of the components for our state pins, is this. Our messages, we are going to see what is the game messages component. The game statistics, these components are components that render into the DOM. At the end of the day, these components are HTML. But the component that we have inside is seen, are the components that render inside a canvas element.

Now, as you can see here, I throw the ball, and we have, in this case, a collision between these elements, between the ball and our pins, and here this is the game messages component in action. As you can see, I can move the ball to the right and to the left if I want. And, also, I can throw the ball here. For example, in this case, I have a spare because all the pins are now visible in two turns. But, now, as you can see here, I'm playing alone. The idea now is to add a second player. To do that, I'm going to add... first of all, I'm going to change the color for our ball.

For example, for this particular user, it could be green. And now, I'm going to add our second player. To do that, I'm going to copy and paste this and change the name. For example, player 2, the color could be red, but I'm going to say that this is a bot. That means that we are going to play versus the machine. Okay, I save here. And now, I need to pass this information to our player component. Again, here is only using the thing that we know about React. In this case, we can pass a couple of props. And here, I can extract the information for each bot for the game state variable. Here, I need to know what is the current turn. And here, I extract the information. In this case, the isBot property. Okay, now I can do the same thing for our bottle color. In this case, I can copy and paste here. I indicate the property that, in this case, is the bottle color property. Here, I need to pass this information here. I save, and now I'm going to reload the page again.

Okay, this is all about the game. For example, if you are curious, this is how I manage the state. You know that sometimes we can use some libraries to manage our state. For example, we have reduce, we have a voltio, we have a different options. And for this particular case, because it's a very simple game, I'm not using any library for that. I use a parent component and, from that parent component, I control the different components.

Okay, now, as you can see here, we have our ball. In this case, the ball, as you can see here, is green. I can swipe here, OK? No? OK. Wow! We have a strike, in this case, because we drop all the balls. Now it's the turn for our bot. As you can see here, I am not moving nothing. In this case, the bot takes the decision what is the movement that the bot wants. But, to be honest, this is a random movement. This is not that I'm using something related to artificial intelligence or something like that. No. Because in this case, everything is I'm using 100% random values.

I'm going to show you very quickly what are the most complex components, in my opinion. In that case, it's the player component. As you can see here, inside of the player component, we have a couple of validations. Here, this is the render. In the render, as you can see here, we are using another component from Ray. That component is Rigibody. With Rigibody, as the name implies, we can apply the different information for that particular Rigibody. One of that information is, for example, the collider. Another information related to the mass. And here, as you can see here, I have a ball component. The ball component, at the end of the day, is a component that we are loading inside of our player component. Okay. The other thing that I want to show here is that, for example, we are using a use-frame hook.

Use-frame is a hook from, in this case, a reactive fiber. With this hook, we can validate everything related to the render of our application. For example, here, I'm validating, for example, the position for our camera. As you can see here, our camera follows our player. As you can see here, we validate that action here. And yes, this is a very basic game built using reactive fiber.

My idea with this demo is to show you how easy it is to create these types of games using reactive fiber. If you want to play the final game, you can scan this QR code and play it on your mobile device or even on desktop.

Some conclusions. This kind of games can be developed using various libraries, exclusively react.js. I mean, we can use, for example, 3.js with Vue or, for example, with Spelt. Before diving into reactive fiber, it's recommended to familiarize yourself with how 3.js works, as they share similar concepts. Also, reactive fiber is emerging as a promising option for game development. Some resources, for example, the documentation for 3.js and reactive fiber, and a couple of courses that I think are very important to learn more about React and reactive fiber and 3.js.

Yes, that was my presentation. I want to say thank you so much for your attention. Yes, thank you so much.