Voltar para: Games com Phaser + Reactjs

(X, Y, Origin, Velocity, Camera)

Para construir qualquer jogo com o Phaser, é essencial compreender como os objetos são posicionados e movimentados dentro do mundo do jogo.

Antes de pensar em personagens, inimigos ou fases, precisamos entender como o espaço do jogo funciona.

No Phaser, tudo acontece dentro de um sistema de coordenadas 2D, onde cada objeto possui uma posição no plano.

🎯 Objetivos da Lição

Ao final desta aula o aluno será capaz de:

Entender o sistema de coordenadas do Phaser
Compreender como funcionam X e Y
Entender o conceito de Origin (ponto de origem)
Entender Velocity (velocidade)
Compreender como a Camera funciona
Controlar o movimento de objetos no jogo

🧠 O Espaço do Jogo

Todo jogo possui um espaço virtual, onde os objetos são posicionados.

Esse espaço é baseado em um plano cartesiano 2D.

Cada objeto possui duas coordenadas principais:

X → posição horizontal
Y → posição vertical

Essas coordenadas determinam onde o objeto aparece na tela.

📍 Origem do sistema de coordenadas

No Phaser, a origem do sistema de coordenadas fica no canto superior esquerdo da tela.

(0,0) → canto superior esquerdo

Visualmente:

(0,0) ──────────────────→ X
  │
  │
  │
  ↓
  Y

Isso significa:

quanto maior o X, mais à direita o objeto aparece
quanto maior o Y, mais abaixo o objeto aparece

📊 Exemplo de posições

Imagine uma tela de:

800 x 600

Algumas posições possíveis seriam:

Posição	Local
(0,0)	canto superior esquerdo
(400,300)	centro da tela
(800,600)	canto inferior direito

🧍 Posicionamento de objetos

No Phaser, objetos como sprites possuem propriedades:

x
y

Exemplo conceitual:

personagem.x = 100
personagem.y = 200

Isso significa:

100 pixels da esquerda
200 pixels do topo

🧩 Unidade de medida

No Phaser, a unidade utilizada é:

pixels

Isso significa que mover um objeto em 10 unidades significa:

10 pixels

🎯 Origin – Ponto de origem do objeto

Um conceito extremamente importante é o Origin.

O Origin define qual ponto da imagem será usado como referência para posicionamento.

Por padrão, no Phaser:

origin = (0.5 , 0.5)

Isso significa:

o centro da imagem

📊 Exemplo de origin

Imagine um sprite de 100×100 pixels.

Se o origin for:

0.5 , 0.5

a posição X e Y se referem ao centro da imagem.

Visualmente:

      sprite
   ┌─────────┐
   │         │
   │    •    │ ← posição (x,y)
   │         │
   └─────────┘

📌 Outros valores de origin

Origin	Ponto
(0,0)	canto superior esquerdo
(0.5,0.5)	centro
(1,1)	canto inferior direito

Exemplo visual:

(0,0)
┌─────────┐
│•        │
│         │
│         │
└─────────┘

🎮 Por que Origin é importante

Origin influencia:

colisões
posicionamento
rotação
escala
alinhamento visual

Por exemplo, para jogos de plataforma normalmente usamos:

origin = (0.5 , 1)

Assim os pés do personagem ficam alinhados ao chão.

🚶 Movimentação de objetos

Existem duas formas principais de mover objetos:

1️⃣ Movimento manual
2️⃣ Movimento baseado em física

🧠 Movimento manual

O movimento mais simples é alterar a posição diretamente.

Exemplo conceitual:

player.x += 2

Isso faz o personagem se mover 2 pixels para a direita a cada frame.

Problema:

Esse método depende do FPS.

🚀 Velocity – Velocidade com física

Quando usamos o sistema de física do Phaser, os objetos possuem uma propriedade chamada:

velocity

Velocity significa velocidade.

Ela define quanto o objeto se move por segundo.

📊 Exemplo conceitual

player.velocity.x = 200

Significa:

200 pixels por segundo para a direita

Se o valor for negativo:

player.velocity.x = -200

O personagem se move para a esquerda.

🎯 Movimento vertical

player.velocity.y

Define movimento vertical.

Valores positivos:

movem para baixo

Valores negativos:

movem para cima

🧲 Gravidade

Quando a física está ativada, a gravidade afeta a velocidade vertical.

Isso cria comportamentos como:

pulo
queda
plataformas

Exemplo conceitual:

player.velocity.y = -400

Isso cria um pulo para cima.

🎥 Camera – O olhar do jogador

Em muitos jogos o mundo é maior que a tela.

A Camera define qual parte do mundo é visível para o jogador.

A câmera funciona como uma janela.

Imagine o mundo do jogo como um mapa gigante.

A câmera mostra apenas uma parte.

📊 Exemplo visual

MUNDO DO JOGO
┌─────────────────────────────┐
│                             │
│      [ área visível ]       │
│           CAMERA            │
│                             │
└─────────────────────────────┘

🎮 Camera seguindo o jogador

Em muitos jogos de plataforma a câmera acompanha o personagem.

Exemplo clássico:

Super Mario Bros.

A câmera se move conforme o jogador avança pela fase.

🧠 O que a Camera pode fazer

A câmera no Phaser pode:

seguir um objeto
fazer zoom
mover suavemente
tremer (shake)
fazer fade

Esses efeitos aumentam a sensação de impacto no jogo.

🔄 Relação entre Camera e Coordenadas

Importante entender:

posição do objeto ≠ posição na tela

A posição do objeto é relativa ao mundo do jogo.

A câmera define qual parte do mundo aparece na tela.

📦 Mundo do jogo vs Tela

Podemos imaginar assim:

WORLD (mundo do jogo)
      ↓
CAMERA (janela de visão)
      ↓
SCREEN (tela do jogador)

🧠 Conceitos fundamentais fixados

Após essa aula o aluno compreende:

como objetos são posicionados no Phaser
como funciona o sistema X e Y
o papel do Origin
como Velocity controla movimento
como a Camera define o que o jogador vê

Esses conceitos são a base para movimentação e design de fases.

🎓 Conclusão

Todo jogo acontece dentro de um espaço virtual organizado por coordenadas.

No Phaser, compreender o sistema de posicionamento é essencial para criar:

personagens
inimigos
plataformas
cenários
mundos maiores que a tela

Os pilares desse sistema são:

X e Y
definem a posição no mundo

Origin
define o ponto de referência do objeto

Velocity
controla a velocidade de movimento

Camera
define o que o jogador vê

Dominar esses conceitos permite transformar uma tela vazia em um mundo jogável.