Introdução

A CD Engine é uma game engine simples criada com NodeJs e ElectronJs para originalmente desenvolvedores linux criarem jogos de forma simples utilizando JavaScript mas com um apoio de algumas pessoas o projeto foi escalado para uma engine multi plataforma focada em Linux, Windows e Android.

O propósito da engine é ser simples e focada na criação de jogos 2d para navegadores e sua principal filosofía é ser leve e simples para qualquer pessoa poder aprender a programar nela sem precisar fazer cursos e cursos e também por ser uma engine Brasileira desenvolvida por uma pessoa só, ela tem o propósito de atender a características Brasileiras e ser bem inclusiva.

Primeiros passos

Configurando um novo projeto

A CD Engine usa a linguagem de programação JavaScript e isso faz ela ser simples e leve, para começar seu projeto, basta definir o caminho aonde seus projetos serão salvos depois criar um novo projeto, abrir a pasta de seu projeto e abrir o arquivo game.js no seu editor de códigos favorito e só começar a programar.

Como iniciar um projeto?

Para iniciar seu projeto, basta abrir o programa/apk da engine, abrir o projeto desejado e apertar em run e pronto, seu projeto foi iniciado.

Estruturas

Na CD Engine temos 2 estruturas opicionais mas que podem ser importantes pois ajudam no desenvolvimento, organização e ordem do projeto, temos o onStart que executa comandos assim que o jogo abre e o onUpdate que executa comandos a cada frame do jogo e essas estruturas não dependem da cena, por isso, use com sabedoria.

onStart = ()=>{
	// Quando o jogo abrir
}

onUpdate = ()=>{
	// A cada frame
}

Nodes (objetos)

Na CD Engine utilizamos Nodes que são objetos manipuláveis, nodes podem conter física e sprites para serem visualizados e/ou simulados no mundo do seu jogo.

Para criar um novo Node basta criar uma variável com o nome desejado e atribuir um new Node().

Veja um exemplo :

var NovoObjeto = new Node(
	0, // Posição x
	0, // Posição y
	50, // Largura
	50, // Altura
	"imagem.png", // Sprite do objeto, deve estar na pasta do projeto, caso esteja dentro de uma subpasta, deve-se incluir a pasta
	MainWorld, // Mundo / Cena que o objeto será criado
);

Caso queira removerem um objeto, basta usar a função .remove para a remoção do objeto.

Veja um exemplo :

NovoObjeto.remove(); // Remove o objeto da cena atual

Mundos (Cenas)

Mundos na CD Engine são como cenas, eles servem para diferenciar locais e acontecimentos em seu jogo e de padrão existe o mundo MainWorld que é criado por padrão pela engine, mas você pode criar outros mundos e iniciar eles.

Aqui um exemplo :

const MeuMundo = new World(); // Cria um mundo novo
changeWorld(MeuMundo); // Seleciona o mundo criado e inicia ele
ThisWorld; // Variável que retorna o mundo atual

E você pode alterar a cor de fundo usando o setBackgroundColor. Com essa função você pode escolher uma cor (rgb, rgba, hex, hsls e etc) e definir a cor de seu fundo de forma simples e você pode também escolher uma imagem para ser o fundo do seu jogo.

Os mundos possuem estruturas que podem ajudar no desenvolvimento de seu jogo pois com as estruturas, seu jogo ficará mais organizado e bem estruturado.

Aqui um exemplo :

const MeuMundo = new World();
MeuMundo.onStart = ()=>{
	// Quando a cena iniciar
};

MeuMundo.onUpdate = ()=>{
	// Sempre que a cena estiver em execução
};

MeuMundo.onEnd = ()=>{
	// Quando a cena finalizar
};

Aqui um exemplo :

setBackgroundColor("#f00"); // Cor de fundo mudada para vermelho
setBackgroundSprite("background.png"); // Imagem de fundo mudada
setBackgroundPosition(0,0); // Posição de fundo mudada para x 0 e y 0

Física com Nodes

Como dito anteriormente, podemos usar da física para criar elementos com gravidade ou estáticos para a criação de seu jogo.

Para criar um objeto com física basta adicionarmos o atributo addPhysicbody e definir se ele vai ser estático ou não.

Aqui um exemplo bem simples de como usar :

Player.addPhysicbody(); // Objeto com física dinâmico
Ground.addPhysicbody(false); // Objeto com física estático

Podemos também definir a velocidade do objeto para poder criar sistemas de pulo e movimento, podemos usar para fazer portas abrirem/fecharem e até mesmo veículos simples, para isso usamos a função defineVelocity para a definição da velocidade, com isso podemos definir a velocidade x e y do objeto desejado e caso não queira mudar o x somente o y e vice-versa, basta adicionar null no local.

Aqui um exemplo :

// Pulo simples apenas com a velocidade y

Player.defineVelocity(
	0, // Velocidade x
	-200 // Velocidade y
);

// Movimento simples apenas com a velocidade x

Player.defineVelocity(
	100, // Velocidade x
	0 // Velocidade y
);

// Pulo simples apenas com a velocidade y sem alterar a velocidade x

Player.defineVelocity(
	null, // Velocidade x
	-200 // Velocidade y
);

// Movimento simples apenas com a velocidade x sem alterar a velocidade y

Player.defineVelocity(
	100, // Velocidade x
	null // Velocidade y
);

Podemos bloquear a rotação de um node também usando o .fixedAngle de forma simples.

Aqui um exemplo :

Player.fixedAngle = true; // Bloqueia a rotação

Caso seu node tenha física aplicada, você recebe uma função para definir a posição do node com física.

Ficaria assim :

Player.definePosition(0,0); // Posição no x 0 e y 0

Você também pode verificar se dois objetos estão colidindo de forma simples usando o checkCollision e definindo uma precisão, quanto menor a precisão, mais preciso.

Aqui um exemplo :

const onUpdate = ()=>{
	if(checkCollision(obj1, obj2, 1) return true; // Retorna true se ojb1 estiver colidindo com obj2
};

Spritesheet

Na CD Engine, podemos criar sprites sheets de forma simples, cada node tem uma variável chamada sheet que é um sub-objeto que tem os atributos da sheet.

Aqui um exemplo completo usando spritesheets :

var Player = new Node(0,0,40,60,"spritesheet.png");
Player.sheet.enabled = true; // Habilita o spritesheet
Player.sheet.x = 0; // Posição x no spritesheet
Player.sheet.y = 0; // Posição y no spritesheet
Player.sheet.width = 40; // Largura da sprite no spritesheet
Player.sheet.height = 60; // Altura da sprite no spritesheet

Câmera

Na CD Engine, colocar um ponto de visualização (câmera) é muito simples, basta você usar o pointView e selecionar o node desejado.

Segue um exemplo :

pointView.node = Player; // Câmera focará no player

Interfaces

Na CD Engine é possível criar interfaces simples para seus jogos como textos e botões para criar sistemas como menu, tela de loading, GUI do jogador e etc.

Para criar essas interfaces é similar ao Node, mas deve-se usar Interface .

Segue-se um exemplo :

var MinhaInterface = new Interface(
	0, // Posição x
	0, // Posição y
	100, // Largura
	50, // Altura
	"#0005" // Cor de fundo
);

MinhaInterface.setText("Não me toque"); // Define o texto da interface

MinhaInterface.addClickEvent(()=>{ // Adiciona evento de quando clicado
	alert("Não me toque!!!");
});

MinhaInterface.setColor("red"); // Define a cor da interface
MinhaInterface.setSprite("imagem.png"); // Define a sprite da interface
MinhaInterface.setText("Hello, World"); // Define o texto da interface

MinhaInterface.hide(); // Esconde a interface
MinhaInterface.show(); // Mostra a interface
MinhaInterface.clicked // Retorna true se a interface estiver sendo clicada com o mouse
MinhaInterface.touched // Retorna true se a interface estiver sendo clicada com o toque

Detectar tecla pressionada

Na CD Engine, você pode verificar se uma tecla foi pressionada usando a variável pressedKeys para verificar se uma tecla desejada foi pressionada, você deve usar um loop para fazer isso, pode ser um requestAnimationFrame (recomendado) ou um setInterval.

Segue um exemplo :

function verificarTeclas(){ // Cria um loop
	requestAnimationFrame(verificarTeclas); // Chama o loop
	if(pressedKeys.includes("d") { // Verifica se a tecla D está sendo pressionada
		Player.defineVelocity(100, null); // Se a tecla estiver sendo pressionada, a velocidade x do objeto Player é definida para 100.
	};
};
requestAnimationFrame(verificarTeclas); // Inicia o loop

Funções

Aqui uma lista de funções da engine que podem ajudar no desenvolvimento de seu projeto :

getRandom(mínimo, máximo); // Retorna um número aleatório com um valor mínimo e um máximo

wait(segundos, () => { // Executa um código após alguns segundos
  console.log("Passaram 2 segundos!");
});

print("Texto", x, y, tamanho, "cor", "Fonte", "estilo", "centralização"); // Escreve algo direto na tela

loadFont("https://example.com/fonts/MyFont.ttf"); // Carrega uma fonte para ser usada no print

Sons

A CD Engine tem suporte a sistemas de sons com e sem loopings que facilita a aplicação de músicas de fundo e efeitos sonoros como morte, pulo, captura de moeda e etc.

Sons devem ser criados fora de extruturas e devem ser executadas dentro de alguma estrutura e de preferência onStart por segurança do JavaScript.

Aqui um bom exemplo :

// Estrutura do som "Sound(caminho do som.mp3, é loop?)"
var som; // Define a variável do som

onStart = ()=>{
	som = new Sound("som.mp3", true); // Cria o som em loop
	som.play(); // Inicia o som
	som.stop(); // Finaliza o som
}

Apoio

Obrigado por escolher a CD Engine, você pode me apoiar entrando no grupo do Whatsapp e/ou doar em meu pix leonardopinezi.ti@gmail.com

Esse projeto dá muito trabalho, cada apoio ajuda muito, muito obrigado <3

Projetos de exemplo

// Cria um jogo simples com um player, um chão e um sistema de movimentação simples com teclado.

var player_sprite = "Defina a sprite do player";

var player;
var ground;

pointView.node = player;

onStart = ()=>{
	player = new Node(0,0,50,50,player_sprite);
	ground = new Node(0,250,500,50,"Defina a sprite do chão");
	player.addPhysicbody();
	ground.addPhysicbody(false);
};


onUpdate = ()=>{
  if(pressedKeys.includes("d")) player.defineVelocity(100,null);
  if(pressedKeys.includes("a")) player.defineVelocity(-100,null);
  if(!pressedKeys.includes("a") && !pressedKeys.includes("d")) player.defineVelocity(0,null);
};

const playerSprite = "player.png";
const groundSprite = "ground.png";

onStart = () => {
  // Criar o jogador
  const player = new Node(200, 100, 50, 50, playerSprite);
  player.addPhysicbody(1); // Corpo dinâmico para o jogador
  pointView.node = player; // Centraliza a câmera no jogador

  // Criar o chão
  const ground = new Node(0, 300, 800, 50, groundSprite);
  ground.addPhysicbody(0); // Corpo estático para o chão

  // Adicionar várias plataformas
  for (let i = 0; i < 5; i++) {
    const platform = new Node(150 * i + 100, 200 - 50 * i, 100, 20, groundSprite);
    platform.addPhysicbody(0); // Corpo estático para as plataformas
  }

  // Adicionar controle ao jogador
  onUpdate = (dt) => {
    const speed = 200;
    const jumpForce = -300;

    // Movimento lateral
    if (pressedKeys.includes("ArrowRight")) {
      player.defineVelocity(speed, null);
    } else if (pressedKeys.includes("ArrowLeft")) {
      player.defineVelocity(-speed, null);
    } else {
      player.defineVelocity(0, null);
    }

    // Pulo (somente se estiver tocando o chão)
    if (pressedKeys.includes("ArrowUp") && Math.round(player.body.velocity[1]) === 0) {
      player.defineVelocity(null, jumpForce);
    }

    // Prevenir que o jogador saia da tela
    if (player.x < 0) player.x = 0;
    if (player.x > canvas.width - player.width) player.x = canvas.width - player.width;
  };
};