Jogos em Navegadores, Comofas?

Chrysthian Simão

#CapiConf

Oi, eu sou o CH!

Pós-graduado em Desenvolvimento de Jogos para Computador pela Universidade Positivo

 

Trabalhei em uma engine de jogos própria, feita em JS utilizando <canvas> na época que era tudo mato

 

Atualmente arquiteto Front-end na Juno

chrysthian.simao@gmail.com

https://github.com/chrysthian

Antes de começar...

  • Quem aqui joga (jogos de qualquer tipo)?
  • Quem tentou entender como jogos funcionam a fundo?
  • Quem aqui quis fazer ou já fez um jogo (digital ou não) ?

Overview

Overview

Diagrama

(calma, ta turubem)

Talk is cheap

Show me the code

Voce vai precisar de:

 

 

https://github.com/chrysthian/capiconf2020

Talk is cheap

Show me the code

Talk is cheap

Show me the code

git clone https://github.com/chrysthian/capiconf2020.git
npm install
npm start

Legenda

Para facilitar o entendimento eu vou colocar no canto inferior direito dos slides essa legenda, pra saber que parte do código estamos mexendo

<canvas>, Pixi, 60 FPS

React, UI, Virtual DOM, redux, store

Diagrama React

Redux

Redux

No react é bem comum utilizar uma página JSX para consultar o Store do redux

import { connect } from 'react-redux'

function Topbar(props) {
  return (
    <Container>
      Score: {props.score}
    </Container>
  )
}

const mapStateToProps = store => ({
  score: store.score.value
})

export default connect(mapStateToProps, null)(Topbar)

Redux

No entanto o redux merece uma menção honrosa porque embora normalmente seja utilizado para ser uma fonte de verdade de uma aplicação React, ela pode ser utilizada fora do React

import { store } from 'store'
import { keyDown, keyUp } from 'saga/input/inputAction'

// para consultar valores
store.subscribe(() => {
  this.keyboard = store.getState().keyboard
  this.mouse = store.getState().mouse
})

//para disparar actions
store.dispatch(keyDown(this.keyboard.pressed))

Mas como ligamos o <canvas> com a camada de UI em React? Há dois ciclos de render distintos, que precisam ser executados em velocidades igualmente distintas

60 FPS

Conforme necessidade do DOM / Virtual DOM

Redux

Mantemos os ciclos de render separados e sincronizamos, quando necessário, utilizando o Redux Saga

Redux

<Canvas> e a Three.js

http://carvisualizer.plus360degrees.com/threejs/
http://stars.chromeexperiments.com/
http://david.li/fluid/

https://www.rpgmakerweb.com/products/rpg-maker-mz 

Diagrama Canvas

Game Loop

while(!gameOver){
  update()
  render()
}

Game Loop

É tipo isso, só que super rápido!

60 FPS = 16ms por frame

Fórmulas

Então para um movimento suave e consistente:


 deslocamento por frame = pixels por segundo * (1 / FPS)

const DEG2RAD = Math.PI / 180
const RAD2DEG = 180 / Math.PI

export const degToRad = degrees => {
  return degrees * DEG2RAD
}

export const radToDeg = radians => {
  return radians * RAD2DEG
}

Fórmulas

Para a distância entre objetos (2D)

Familiar? pois é, trigonometria

const dx = objA.x - objB.x

const dy = objA.y - objB.y

Math.sqrt(dx * dx + dy * dy)

Fórmulas

Para a sua alegria na manhã de sábado, a classe Vector3 dentro do projeto tem cálculo de distância pronto

 

É um pouco mais complexo por ser em 3D, mas funciona pra 2D também, só o eixo Z ter o mesmo valor nos dois vetores

 

Are you ready to rumble?

Quero aprender mais

A base que matemática e física são essenciais

vetores, trigonometria e matrizes são bons pontos de partida

 

Na próprio fonte do projeto tem uma classe Vector3, que deve ajudar com o pontapé inicial

Quero aprender mais

Para resolver colisões de forma mais esperta e otimizada que nós usamos, estude uma biblioteca de física.

 

Claro, que ela vai usar vetores, então a base matemática vai precisar estar lá para calibrar a sua lib.

 

Como sugestão, da uma olhada na matter.js

Quero aprender mais

Shaders, sabe aqueles efeitos visuais impressionantes? Pois é, códigos enviados para rodar na placa de vídeo

 

https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders

 

https://webgl-shaders.com/

Arte é o processo ou produto de utilizar elementos deliberadamente de forma que afete sentidos e emoções

 

Jogos são uma experiência estrutural, com regras e objetivos, que é cativante

Jogos e arte

Dicas do CH

  • Não se torne um "estudante profissional de jogos"
     
  • Faça jogos, até o final, termine projetos ao invés de criar vários esqueletos inacabados
     
  • Mantenha o foco, tente manter a motivação, principalmente trabalhando solo ou de forma "true indie"
     
  • Se possível, encontre uma comunidade, troque ideias, protótipos, projetos
     
  • Se desafie 

Obrigado!

chrysthian.simao@gmail.com

https://github.com/chrysthian

#CapiConf

Made with Slides.com