Estou criando um motor de jogo!

Introdução a esta grande aventura

Há algumas semanas venho trabalhando regularmente em um projeto que acho que pode ser interessante falar, a criação do meu motor de videogame em JavaScript e HTML5 baseado no canvas.

Você provavelmente está se perguntando por que escolheu HTML5 e JavaScript para criar videogames? A resposta é menos legal que a pergunta, é o concurso de projetos necessários para minha escola (Zone01 Normandie) e o fato de as línguas terem tudo o que é necessário para realizar esse projeto que me levou a escolher essas tecnologias

Mas na verdade essas não são as línguas que eu teria escolhido como base e com certeza irei embarcar em outras aventuras deste tipo com línguas diferentes após a finalização desta.

Arquitetura

Então comecei a trabalhar no design do meu motor de videogame, ele será composto por várias classes incluindo pelo menos duas principais: A classe Game que irá gerenciar toda a área do jogo e a classe GameObject permite gerar os objetos em nossos jogos e fazê-los interagir uns com os outros.

A essas classes adicionarei a classe CollideBox que me permitirá gerenciar as caixas de colisão de todos os objetos.

A classe Game possui um método GameLoop que será executado a cada frame(imagem) do jogo, um método Draw que será chamado durante cada loop do jogo.

Quanto à classe GameObject, ela possui um método Step e um método Draw.
O primeiro executa cada rodada do loop do jogo e o segundo sempre que o método Draw da classe GameLoop é chamado.

Isso permite que você crie jogos teoricamente importando o módulo Engine para um projeto.
Para exibir os sprites, optei por usar a API canva que está integrada ao HTML5 (integrada significa que vem com ela por padrão)
Isso me permitirá exibir todos os sprites e recortar as imagens para criar animações que serão extremamente úteis para mim!

Depois de vários dias, consigo exibir animações, em uma determinada velocidade, e detectar colisões por meio de meus CollideBoxes.
E muitas outras coisas legais que vou deixar vocês verem abaixo:

A classe GameObject

class GameObject{
    constructor(game) { // Initialize the GameObject
        this.x = 0
        this.y = 0 
        this.sprite_img = {file: undefined, col: 1, row: 1, fw: 1, fh: 1, step: 0, anim_speed: 0, scale: 1}
        this.loaded = false
        this.game = game
        this.kill = false
        this.collision = new CollideBox()

        game.gObjects.push(this)

    };
    setSprite(img_path, row=1, col=1, speed=12, scale=1) {
        var img = new Image();
        img.onload = () => {
            console.log("image loaded")
            this.sprite_img = {file: img, col: col, row: row, fw: img.width / col, fh: img.height / row, step: 0, anim_speed: speed, scale: scale}
            this.onSpriteLoaded()
        };
        img.src = img_path


    }
    onSpriteLoaded() {}
    draw(context, frame) { // Draw function of game object
        if (this.sprite_img.file != undefined) {


            let column = this.sprite_img.step % this.sprite_img.col;
            let row = Math.floor(this.sprite_img.step / this.sprite_img.col);

           // context.clearRect(this.x, this.y, this.sprite_img.fw, this.sprite_img.fh);
            context.drawImage(
                this.sprite_img.file,
                this.sprite_img.fw * column,
                this.sprite_img.fh * row,
                this.sprite_img.fw,
                this.sprite_img.fh,
                this.x,
                this.y,
                this.sprite_img.fw * this.sprite_img.scale,
                this.sprite_img.fh * this.sprite_img.scale
            );

            if (frame % Math.floor(60 / this.sprite_img.anim_speed) === 0) {
                // Mise à jour de step seulement à 12 fps
                if (this.sprite_img.step  box.x &&
            this.collision.y  box.y
          )
    }
    onStep()   {};
}   

A aula de jogo

class Game {
    constructor(width = 1400, height = 700) {
        this.gObjects = [];
        this.toLoad = [];
        this.timers = [];
        this.layers = [];
        this.canvas = document.getElementsByTagName("canvas")[0]

        this.canvas.width = width
        this.canvas.height = height
        this.context =  this.canvas.getContext("2d")
        this.context.globalCompositeOperation = 'source-over';
        this.inputs = {};
        this.mouse = {x: 0, y: 0}
        document.addEventListener('keydown', (e) => {
            this.inputs[e.key] = true;
        }, false);
        document.addEventListener('keyup', (e) => {
            this.inputs[e.key] = false;
        }, false);
        document.addEventListener('mousemove', (e) => {
            this.mouse.x = e.x;
            this.mouse.y = e.y;
        })
        document.addEventListener('mouseevent', (e) => {
            switch (e.button) {

            }
        })

    }
    draw(frame) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        console.log( this.canvas.width, this.canvas.heigh)
        for(let i = 0; i  {
            clock  = 1
            for(let i = 0; i 



Certamente há muitos erros de otimização ou outros erros, mas tudo está funcional, 

"Perfeito!" você vai me contar?

Isso seria muito simples.


  
  
  As preocupações


Depois de terminar isso e começar a testar as condições para criar um jogo com esse motor, recebi uma notícia terrível durante uma conversa com um colega.

Imagino que você se lembre de que as escolhas tecnológicas feitas foram feitas para corresponder aos requisitos da minha escola Zone01…

Bem, de fato os idiomas escolhidos eram bons, mas não tinha conhecimento de uma instrução que prejudicasse seriamente o projeto…

Fomos proibidos de usar a biblioteca do Canva!

Como lembrete, esta é a biblioteca que usamos para exibir nossas imagens.


  
  
  O que vem a seguir?


Enquanto escrevo este texto também estou começando a redesenhar completamente esse motor de jogo, sem o uso do canva.

Este devlog está concluído e você terá o resto desta história em breve, não se preocupe.

Para o próximo devlog com certeza tentarei um novo formato.

Esperamos que este conteúdo tenha ajudado você, entretido ou pelo menos educado sobre alguns assuntos. Desejo a você um bom final de dia e boa codificação.


  
  
  DevLogs 1.1: O motor está finalizado, como funciona?



  
  
  Anteriormente


Há alguns meses comecei a criar meu motor de videogame, terminei... Há bastante tempo, e com a ajuda de vários colegas do Zone01 até conseguimos criar um jogo inspirado em Super Mario Bros disponível no meu Página Itch.io.

Decidir o formato de inscrição para este devlog levou muito tempo, e admito que atrasei um pouco ou até mesmo adiei completamente o prazo para escrever este.

Ao tomar pacientemente a desculpa da minha indecisão por não trabalhar neste assunto, encontro-me agora dois meses após a data prevista de lançamento, escrevendo na área de descanso da rodoviária de Rouen enquanto meu trem cancelado me obriga a esperar mais uma hora. 

Então vamos abordar todos os detalhes da arquitetura, esta tendo mudado muito pouco (além da adaptação evitando o uso de telas) desde a primeira parte do meu devlog.

Falaremos, portanto, do projeto realizado, da forma como trabalhámos em equipa e dos problemas que encontrámos.

Veja isso como um feedback sobre este projeto e espero que você possa tirar algumas lições deste texto que o ajudarão em um de seus projetos.


  
  
  O projeto


O projeto era recriar um Super Mario Bros em JavaScript e começar do zero, pelo menos em termos de código.

As especificações eram simples, tínhamos que ter um jogo Mario com vários níveis, uma forma de simplesmente criar novos.

Também tivemos que criar um placar e um menu para ajustar as opções.

As dificuldades deste projeto foram: 

• Rolagem horizontal de elementos na tela
• Otimização de elementos não presentes na tela

Rolagem porque exige que todos os elementos rolem no fundo em relação à posição do jogador.
E otimizar elementos que não são exibidos na tela reduz os recursos necessários para rodar o jogo sem perda de desempenho.

Depois de resolver essas dificuldades publicamos este jogo na minha página itch.io onde você pode até testá-lo.

Assim termina este devlog, agora finalizado poderei escrever sobre outros projetos e/ou outros assuntos.

Se você estiver um pouco interessado no que estou lhe contando, você pode ver meus diferentes projetos (incluindo aqueles neste devlog) no github.

Tenha um bom resto de dia!