We will be using window.requestAnimationFrame since we are using JavaScript, HTML5 and React. You can choose to use the max for best performance or less for better resource allocation. I am sure you have heard of FPS or frames per second.Īll FPS means, for us, is the most amount frames, or re-renders you can have per second, for a certain client, such as a browser like Google Chrome. To sync up our game properly we will use something known as painting frames, or re-painting. If you don’t do this then the game will be laggy (if using reactivity) and it will not behave how you would expect, causing games that can’t actually be completed, and creating users that won’t want to try. When you create 2D games such as platformers, using just about any language, you will need to be using some form of timer, to plan out how fast the stage / platform is moving and to ensure that the users actions are in sync with the rest of the game. No, i’m not talking about painting a pretty picture, literally speaking anyway. Which takes us nicely onto why we are doing this which is… painting. Whilst this will probably feel a little counter intuitive, and this certainly does not apply to all games, but it is important that you understand why this is done for many games, and even some animations. Basically any other way, other than using the state object.
#Should i use html5 as game frontend update
This means you want nothing to happen when you update a variable, we can do this multiple ways, including closures, using this, or let and var variables. Now, for the game we will be developing (a 2D platform game) all you need to do, is the exact opposite of reactivity, when creating 2D JavaScript games and 2D HTML5 games like in this guide.
![should i use html5 as game frontend should i use html5 as game frontend](https://i.ytimg.com/vi/4kgX-_XeHNk/maxresdefault.jpg)
![should i use html5 as game frontend should i use html5 as game frontend](https://docs.unrealengine.com/4.27/Images/SharingAndReleasing/HTML5/GettingStarted/HTML5_Compression_Enabled.jpg)
Those who are used to the lifecycle of frameworks like React or Vue will know that when you update a variable in the state object, the component will then re-render with the changes made to the state object, trying to be as efficient as possible, by only replacing the nodes that have been affected. Let’s begin with some concepts! Lifecycle Very briefly, the kind of game we will be creating will be a platformer, a little bit like flappy bird. Personally, I have used this with React, React Native and VanillaJS.
#Should i use html5 as game frontend how to
So after you will not only be able to develop games with JavaScript and HTML5, you will be able to say, with confidence, that you can create React Hook games too!Īfter you have done with this tutorial on how to develop 2D JavaScript games and 2D HTML5 games, you will be able to take the concepts and apply it to any framework you want. If you don’t know React or React Hooks very well, you don’t need to worry as I will be explaining what each part is doing (even the React). We will be using React, React Hooks, JavaScript, CSS3 and HTML5. So in this JavaScript game / HTML5 game tutorial, we will be using a few tools I live by, all of which are built for normal web development. I highly recommend starting off with 2D (and this tutorial!). I keep mentioning 2D games specifically, this is because 3D games, whilst similar, do have another layer of complexity with things such as Unity. Many people might also mention specific libraries known as game engines, to help you develop the physics, and other things you may need in your game, we won’t be using any here, we will be keeping it nice and simple.įor this reason, in this step by step guide, we will be using regular HTML5 elements in conjunction with JavaScript to build our 2D game. Whilst this is performant, it is not the easiest to understand in comparison to standard HTML5 elements like a div or a span. Many people would now start talking about how to use canvas, and combine it with JavaScript. If you are used to using a framework like React you will have to change the way you may normally write your applications to allow for game development, but I will help walk you through this. It’s not that much different when creating simple 2D JavaScript games or 2D HTML5 games. We usually use these frameworks to make making UI’s or web apps with animations, transitions, and event listeners nice and easy.
![should i use html5 as game frontend should i use html5 as game frontend](https://image.slidesharecdn.com/gic18pavlegoloskokovicfinal-181016091524/95/why-you-should-consider-using-html5-for-your-next-game-project-9-1024.jpg)
We are all used to coding in JavaScript, HTML5, React, React Native, VueJS, AngularJS, VanillaJS, and so on… It’s outside our usual realm of coding so is almost unknown territory, but good news, it’s not as hard as it may seem!