From app to Games: 01 - Introduction and starting up Word Unscramble using ReactJS
From app to games is a series of posts here in the Plastic SCM blog where we are going to share some ideas and challenges faced by an app developer when creating some games. We are going to start by creating games for the web, but later we are going to develop for game engines as well, such as Unity, GameMaker and others. In this first post, we are going to design and start the creation of an anagram game using a top trending web library named ReactJS.
ReactJS is a UI library created by Facebook/Instagram that allows you to create interfaces in a declarative way. As well, everything in it is organized as components and basically, you can assemble them using Javascript. You can create apps for web and for mobile devices using the same ecosystem and experience. That means you can share a lot of Javascript code between platforms (web, mobile, VR and others), but you still need to write some specific views in each one. This is not a huge problem as we are going to discover during this series.
Tools
To create an app for ReactJS, you need to install NodeJS and NPM to prepare your source code and have some tools for helping you during the development process. If you don't have NodeJS installed yet, download it from the official website: nodejs.org. The installer will install both node and NPM in your system. NPM is a package manager for the NodeJS ecosystem. We are going to use it to install all dependencies and other tools.
An easier way of creating React apps is using the create-react-app tool. You can install it using NPM as well. You just need to execute this command in your shell/console:
npm install -g create-react-app
Create-react-app was created by the React team to simplify the creation of new apps and to keep the tooling for this task dry. This way you can focus on creating your apps and you don't waste time fine-tuning precompilers and transpilers. (We are going to use ES6+ features in Javascript and some of them need to be transpiled and prepared for older browsers.)
For an editor, a good choice for web development is VSCode. It's an open source editor created by Microsoft and it's super fast and simple.
The game design: Word Unscramble
An anagram game works by having a set of letters that can be gathered to form a word. It helps increase a persons vocabulary and is pretty amazing when learning a new language. For this version, we designed the main game screen like the following image:
The objective is to find every word in Possible words using the Available letters in the least amount of time. You can assemble words using the keyboard or clicking over each letter. During the assembling of words, each ordered letter is shown and if the player uses the backspace, the letter returns to Available Letters.
Based on this design, we can think about the data we need for each game, for example:
- Possible words and if each one was found or not
- Available letters
- Time
- Score
- Current word (current typing word)
- Total words and total words found
In ReactJS, we can think of this data as the state of a component game because it represents a "picture" of the game at that moment. And the nicest thing in React is that the screen can be mounted and shown just reacting to this piece of data. This way we just need to create ways of mutating the game state and have it represented properly on the screen.
Creating the project
Now it's time to start the project. To do this, you are going to type in your terminal/shell:
create-react-app word-unscramble
After few minutes, you will be informed that the project is set and you can start hacking it :) So, you need to browse to the word-unscramble directory and start your dev server.
cd word-unscramble npm start
npm start will call the script defined as start in package.json (your project descriptor). It is a good practice to set this information for the project and create-react-app already did this for us. If you take a look in package.json, you are going to see the whole description for the project, such as dependencies, project name, scripts, and so on.
After starting your dev server, you are going to see the following screen in your browser:
Notice that in this screen that you are running a website on port 3000. create-react-app already has a built-in web server, so you don't need to setup your own.
What is a component?
If you follow the instructions shown in the previous image, you need to edit src/App.js to get started. Let's check what is inside of it.
In App.js there is a class named App with a method render. The render method returns how the UI (user interface) will look. The structure that is returned by the render method is called JSX. It is a simpler and easier way of representing HTML with Javascript. Yes, this is Javascript (that's why you can see the HTML class as className).
But, what is the render method doing? The render method is returning how your interface is organized and storing it in memory in a tree-like structure called VirtualDOM. Everytime that you need to change something in the UI, you change what is returned by the render method and the VirtualDOM is changed as well. But, how can you see the changes?
From Virtual DOM to Real DOM
All ReactJS's magic happens in another point of your application. Opening src/index.js, you can see the following code:
The index.js is our entry point of the application. Basically, it imports our App (shown before) and tells where in how to render that VirtualDOM. In this case, it's getting an element in the page with id root, and ReactDOM is render our App there.
ReactDOM is in charge of getting the App (still virtualDOM) and translating it to the real DOM (in the browser). This seems costly but it is exactly the opposite. Since handling changes in virtualDOM is done in memory, it happens faster than doing directly in real DOM. And later, ReactDOM tries to sync virtual and real DOM with less interactions - this means in most cases faster.
Preparing the initial game state
All components in React re-render every time you change their internal state or the component receive new data. You are going to see this in practice now.
Our App.js will be for now your main game screen. So, let's define some internal state for it - remember state is like a snapshot of the component in that time.
We changed the <h1> to show this time as well. Save and check your browser window. You will be able to see it rendered in the screen.
Now we can count down the time. To do this, you can hook in a life-cycle method of the component, for example, componentDidMound. This method is called right after the component was mounted in the real DOM - the perfect time to start counting down :)
We created an arrow-function (for now and for the sake of simplicity, it's almost like a regular function) called countDown - inside the method. In Javascript, functions are first class objects, meaning you can store them in variables and constants, and you can pass them along to other methods like what you can do with regular variables.
countDown is checking if the time is greater than zero. If it is, we decrement it by one. Notice that we need to call setState to change the internal state. Later, we use setInterval function (yes, this is pure Javascript) to call countDown every second. As a result, we have this:
But what? I didn't do anything to update the screen
Yes, we know, but you don't have to :) In React, everytime you mutate/change the internal state, the default behaviour is to call the method render. In other words, React will react to every internal state change - that is the beauty of its declarative way of creating apps. For this game, it's perfect since you can focus in two things: building the right internal state and making the UI react to it properly.
What is next?
In the next few posts, we are going to control more of the internal state of the game and adding more features to it. The source code is available here. I'll see you in the next post :)
0 comentarios: