Ready2D Engine

Uma engine 2D simples e pronta para uso em JavaScript

Introdução

A Ready2D é uma engine de jogos 2D leve e fácil de usar, desenvolvida para prototipagem rápida e projetos simples. Ela oferece:

Iniciando

Para começar a usar a Ready2D, basta incluir o código da engine em seu projeto HTML:

<script src="ready2d.js"></script>

Ou copie todo o código da engine diretamente em um arquivo JavaScript.

Primeiro Projeto

Aqui está um exemplo básico de como criar um jogo simples:

// Cria uma nova instância da engine
const game = new Engine({
    title: "Meu Primeiro Jogo",
    width: 800,
    height: 600,
    background: "#222"
});

// Cria um sprite
const player = new Sprite({
    x: 0,
    y: 0,
    width: 50,
    height: 50,
    color: "#ff8c42"
});

// Adiciona o sprite à engine
game.add(player);

// Configura a função de atualização
game.onCall = () => {
    // Movimentação simples
    if(KeyInput.right.down) player.x += 2;
    if(KeyInput.left.down) player.x -= 2;
    if(KeyInput.up.down) player.y -= 2;
    if(KeyInput.down.down) player.y += 2;
};

// Configura controles
const KeyInput = {
    right: new KeyInput("ArrowRight"),
    left: new KeyInput("ArrowLeft"),
    up: new KeyInput("ArrowUp"),
    down: new KeyInput("ArrowDown")
};

Classe Engine

A classe Engine é o núcleo da Ready2D, responsável por gerenciar a renderização, sprites e a lógica do jogo.

Construtor

new Engine(config)
config Objeto de configuração com as propriedades:
title Título do jogo (opcional)
width Largura do canvas (opcional, padrão: window.innerWidth)
height Altura do canvas (opcional, padrão: window.innerHeight)
background Cor de fundo (opcional, padrão: "#111")

add(sprite)

Adiciona um sprite à engine para ser renderizado.

sprite Instância da classe Sprite

remove(sprite)

Remove um sprite da engine.

sprite Instância da classe Sprite a ser removida

onCall

Função que é executada a cada frame. Use para implementar a lógica do jogo.

game.onCall = () => {
    // Sua lógica de jogo aqui
};

sprites

Array contendo todos os sprites adicionados à engine.

Classe Sprite

Representa um objeto renderizável no jogo, que pode ser um retângulo colorido ou uma imagem.

Construtor

new Sprite(config)
config Objeto de configuração com as propriedades:
x Posição X (opcional, padrão: 0)
y Posição Y (opcional, padrão: 0)
width Largura (opcional, padrão: 50)
height Altura (opcional, padrão: 50)
color Cor do sprite (opcional, padrão: "transparent")
sprite Caminho para uma imagem (opcional)

x, y

Posição do sprite no mundo.

width, height

Tamanho do sprite.

color

Cor do sprite (se não usar imagem).

vX, vY

Velocidade atual do sprite.

fixed

Se true, o sprite não é afetado pela física.

flip

Objeto com propriedades x e y para inverter o sprite.

clone()

Cria uma cópia exata do sprite e adiciona à engine.

Sistema de Física

A Ready2D inclui um sistema de física simples para colisões e gravidade.

Construtor

new Physics(gravity)
gravity Vetor de gravidade [x, y] (opcional, padrão: [0, 0.1])

add(sprite)

Adiciona um sprite ao sistema de física.

sprite Instância da classe Sprite

update()

Atualiza a física de todos os corpos. Deve ser chamado a cada frame.

const physics = new Physics([0, 0.5]);
game.onCall = () => {
    physics.update();
};

gravity

Vetor de gravidade [x, y]. Pode ser modificado em tempo real.

bodies

Array contendo todos os corpos físicos.

Controle de Câmera

A câmera pode ser controlada através do objeto global Camera.

Camera.point

Objeto com propriedades x e y que define a posição da câmera.

// Mover a câmera para seguir o jogador
game.onCall = () => {
    Camera.point.x = player.x;
    Camera.point.y = player.y;
};

Sistema de Input

A Ready2D oferece um sistema simples para capturar entrada do teclado.

Construtor

new KeyInput(key, callback)
key Tecla a ser monitorada (ex: "ArrowRight")
callback Função chamada quando a tecla é pressionada (opcional)

down

Booleano que indica se a tecla está pressionada.

const KeyInput = {
    right: new KeyInput("ArrowRight"),
    left: new KeyInput("ArrowLeft")
};

game.onCall = () => {
    if(KeyInput.right.down) player.x += 2;
    if(KeyInput.left.down) player.x -= 2;
};

Joystick Virtual

Para jogos mobile, a Ready2D oferece um joystick virtual.

Construtor

new Joystick(x, y, size)
x Posição X do centro do joystick
y Posição Y do centro do joystick
size Tamanho do joystick

direction

Objeto com propriedades x e y (-1 a 1) representando a direção do joystick.

const joystick = new Joystick(100, window.innerHeight - 100, 150);

game.onCall = () => {
    player.x += joystick.direction.x * 2;
    player.y += joystick.direction.y * 2;
};

down

Booleano que indica se o joystick está sendo tocado.

Interface Gráfica

A Ready2D inclui elementos básicos de UI.

Construtor

new Gui(x, y, width, height, color)
x Posição X
y Posição Y
width Largura
height Altura
color Cor de fundo

setText(text)

Define o texto exibido no elemento.

hide()

Esconde o elemento.

show()

Mostra o elemento.

onClick(callback)

Define uma função a ser chamada quando o elemento é clicado.

const button = new Gui(100, 100, 200, 50, "#ff8c42");
button.setText("Clique Aqui");
button.onClick(() => {
    console.log("Botão clicado!");
});

Transições de Cena

A Ready2D permite transições entre diferentes instâncias de Engine.

changeSceneTo(scene, animation)

Muda para uma nova cena com uma transição opcional.

scene Nova instância de Engine
animation Tipo de animação ("linear" ou "fade") 
const menu = new Engine({ background: "#111" });
const game = new Engine({ background: "#222" });

// Mudar para o jogo com transição fade
changeSceneTo(game, "fade");

Exemplos Práticos

Jogo de Plataforma Simples

// Configuração inicial
const game = new Engine({
    title: "Plataforma",
    width: 800,
    height: 600
});

// Jogador
const player = new Sprite({
    x: 0,
    y: 0,
    width: 40,
    height: 60,
    color: "#ff8c42"
});

// Plataforma
const platform = new Sprite({
    x: 0,
    y: 200,
    width: 800,
    height: 20,
    color: "#5f5",
    fixed: true
});

// Física
const physics = new Physics([0, 0.5]);
physics.add(player);

// Controles
const KeyInput = {
    right: new KeyInput("ArrowRight"),
    left: new KeyInput("ArrowLeft"),
    jump: new KeyInput(" ")
};

// Adiciona elementos ao jogo
game.add(player);
game.add(platform);

// Lógica do jogo
game.onCall = () => {
    physics.update();
    
    // Movimentação
    if(KeyInput.right.down) player.x += 3;
    if(KeyInput.left.down) player.x -= 3;
    
    // Pulo
    if(KeyInput.jump.down && testCollision(player, platform)) {
        player.vY = -10;
    }
    
    // Limitar jogador na tela
    if(player.x < 0) player.x = 0;
    if(player.x > game.canvas.width - player.width) {
        player.x = game.canvas.width - player.width;
    }
};