forked from root/public
2 changed files with 88 additions and 0 deletions
@ -0,0 +1,88 @@
|
||||
## make-your-game |
||||
|
||||
As times passes and technology evolves, the human brain has been requesting |
||||
more and more stimuli to keep the brain occupied. Boredom happens whenever |
||||
people don't receive enough of these stimuli. And you are not receiving enough |
||||
of it, so you decide to do **your own game**. And you also decide to just use |
||||
JavaScript as a challenge. |
||||
|
||||
Your game will be for single player only and you will have to create your |
||||
own engine and tools so that the game works. And as you try to search all sort |
||||
of information you start to remember all those [60fps memes](https://pics.me.me/60-fps-59-fps-35518800.png). |
||||
|
||||
### Objectives |
||||
|
||||
Here are some of the features you want to implement on your game: |
||||
|
||||
- Run the game at **60fps** at all time |
||||
- You must not have frame drops! |
||||
- You will use **RequestAnimationFrame** |
||||
- It is very hard to predict performances in JS. So measure performances, |
||||
to know if your code is fast. This will be tested |
||||
|
||||
### Instructions |
||||
|
||||
Animation must have consistent motion, so in order to have a smooth animation (without interruptions or better named: jank animation) you must achieve a special number, [**60fps**](https://blog.algolia.com/performant-web-animations/). |
||||
|
||||
Performance is essential, so that's why you have to aim for less than 60fps, because in 16.7ms (1000ms/60f) the browsers job and your work must be completed in each frame. |
||||
|
||||
Use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to sync your changes |
||||
|
||||
- You can try to reuse memory to avoid jank when the garbage collector pass |
||||
|
||||
Jank animation can be caused by loading too much information, for instance: |
||||
|
||||
- **JavaScript** |
||||
- **Styles** that considers which style apply to which element |
||||
- **Layout** that calculates the geometry of the pages (example: recalculating the width and height of a page) |
||||
- **Painting**, normally when layout is triggered we must repaint. Repainting an element every time it animates |
||||
- **Compositing** that consists on placing the pages together at the end |
||||
|
||||
In order to improve performance we must remove the causes above that are more costly: layout and painting. |
||||
|
||||
The best way to remove layout and painting is to use [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) and [`opacity`](TODO-link) |
||||
|
||||
Removing layout can be done using transform: |
||||
|
||||
```js |
||||
// bad |
||||
// this will trigger the layout to recalculate everything and repaint it again |
||||
box.style.left = `${x * 100}px`; |
||||
|
||||
// good |
||||
// this way its possible to lose the layout |
||||
box.style.transform = `translateX(${x * 100}px)`; |
||||
``` |
||||
|
||||
It is possible to remove painting by adding a layer: |
||||
|
||||
```css |
||||
/* this will take care of the painting by creating a layer and transform it*/ |
||||
#box { |
||||
width: 100px; |
||||
height: 100px; |
||||
.... |
||||
will-change: transform; |
||||
} |
||||
``` |
||||
|
||||
By creating a new layer you can remove painting, but "there is always a tradeoff". If we add to much layers it will increase the **composition** and **update tree**. In conclusion you must promote a new layer only if you now you are going to use it. Performance is the key to a good animation. "Performance is the art of avoiding work". |
||||
|
||||
This project will help you learn about: |
||||
|
||||
- [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
||||
- [Event loop](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/EventLoop) |
||||
- FPS |
||||
- DOM |
||||
- [Jank/stutter animation](https://murtada.nl/blog/going-jank-free-achieving-60-fps-smooth-websites) |
||||
- [Transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)/ [opacity](TODO-link) |
||||
- Tasks |
||||
- JavaScript |
||||
- Styles |
||||
- Layout |
||||
- Painting |
||||
- Compositing |
||||
|
||||
### dev tools |
||||
|
||||
TODO: maybe explain about the dev tool?? |
Loading…
Reference in new issue