¡Estoy creando un motor de juego!

Introducción a esta gran aventura.

Desde hace unas semanas trabajo habitualmente en un proyecto del que creo que podría ser interesante hablar, la creación de mi motor de videojuego en JavaScript y HTML5 basado en el canvas.

Probablemente te estés preguntando por qué elegiste HTML5 y JavaScript para crear videojuegos. La respuesta es menos interesante que la pregunta, es el concurso de proyectos necesarios para mi escuela (Zone01 Normandie) y el hecho de que los idiomas tienen todo lo necesario para llevar a cabo este proyecto lo que me llevó a elegir estas tecnologías

Pero en realidad estos no son los idiomas que habría elegido como base y seguramente me embarcaré en otras aventuras de este tipo con diferentes idiomas después de finalizar esta.

Arquitectura

Así que me puse manos a la obra para diseñar mi motor de videojuego, estará compuesto por varias clases incluyendo al menos dos principales: La clase Game que gestionará toda el área de juego y la clase GameObject que te permitirá generar los objetos. en nuestros juegos y hacerlos interactuar entre sí.

A estas clases agregaré la clase CollideBox que me permitirá administrar los cuadros de colisión de todos los objetos.

La clase Game tiene un método GameLoop que se ejecutará en cada cuadro (imagen) del juego, un método Draw que se llamará durante cada bucle del juego.

En cuanto a la clase GameObject, tiene un método Step y un método Draw.
El primero ejecuta cada ronda del bucle del juego y el segundo cada vez que se llama al método Draw de la clase GameLoop.

Esto te permite, en teoría, crear juegos importando el módulo Engine a un proyecto.
Para mostrar los sprites elegí usar la API de canva que está integrada en HTML5 (integrada significa que viene con ella de forma predeterminada)
¡Me permitirá mostrar todos los sprites y recortar las imágenes para crear animaciones que me serán de gran utilidad!

Después de varios días puedo mostrar animaciones, a una velocidad determinada, y detectar colisiones a través de mis CollideBoxes.
Y muchas otras cosas lindas que te dejaré ver a continuación:

La clase 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()   {};
}   

La clase Juego

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 



Ciertamente hay muchos errores de optimización u otros errores, pero todo funciona, 

"¡Perfecto!" ¿Me lo dirás?

Eso sería demasiado simple.


  
  
  las preocupaciones


Después de terminar esto y comenzar a probar las aguas para crear un juego con este motor, me enteré de una noticia terrible durante una conversación con un colega.

Me imagino que recuerdas que las decisiones tecnológicas que tomamos se hicieron para corresponder a los requisitos de mi escuela Zone01…

Bueno, efectivamente, los idiomas elegidos fueron buenos, pero no conocía ninguna instrucción que perjudicara seriamente el proyecto…

¡Se nos prohibió usar la biblioteca de Canva!

Como recordatorio, esta es la biblioteca que utilizamos para mostrar nuestras imágenes.


  
  
  ¿Qué sigue?


Mientras escribo este texto también estoy empezando a rediseñar completamente este motor de juego, sin el uso de canva.

Este blog de desarrollo está terminado y pronto tendrás el resto de esta historia, no te preocupes.

Para el próximo devlog definitivamente probaré un nuevo formato.

Esperamos que este contenido te haya ayudado, entretenido o al menos informado sobre algunos temas. Les deseo un buen final del día y buena codificación.


  
  
  DevLogs 1.1: El motor está terminado, ¿cómo funciona?



  
  
  Previamente


Hace unos meses comencé a crear mi motor de videojuego, lo terminé... Hace bastante tiempo, y con la ayuda de varios compañeros de Zone01 incluso logramos crear un juego inspirado en Super Mario Bros disponible en mi Página de Itch.io.

Decidir el formato para postular a este devlog tomó mucho tiempo y admito que retrasé ligeramente o incluso retrasé por completo la fecha límite para escribir este.

Tomando pacientemente la excusa de mi indecisión para no trabajar en este tema, me encuentro dos meses después de la fecha prevista de lanzamiento escribiendo en la zona de descanso de la estación de autobuses de Rouen mientras mi tren cancelado me obliga a esperar una hora más. 

Así que cubramos todos los detalles de la arquitectura, esta ha cambiado muy poco (aparte de la adaptación al evitar el uso de lienzos) desde la primera parte de mi devlog.

Por tanto, hablaremos del proyecto realizado, de la forma en que trabajamos en equipo y de los problemas que encontramos.

Considere esto como retroalimentación sobre este proyecto y espero que pueda extraer algunas lecciones de este escrito que lo ayudarán en uno de sus proyectos.


  
  
  el proyecto


El proyecto era recrear un Super Mario Bros en JavaScript y empezando desde cero, al menos en cuanto al código.

Las especificaciones eran simples, teníamos que tener un juego de Mario con varios niveles, una manera de simplemente crear nuevos.

También tuvimos que crear un marcador y un menú para ajustar las opciones.

Las dificultades de este proyecto fueron: 

• Desplazamiento horizontal de elementos en la pantalla
• Optimización de elementos no presentes en pantalla

Desplazamiento porque requiere que todos los elementos se desplacen en el fondo en relación con la posición del jugador.
Y optimizar elementos que no se muestran en la pantalla reduce los recursos necesarios para ejecutar el juego sin pérdida de rendimiento.

Después de resolver estas dificultades, publicamos este juego en mi página de itch.io, donde incluso puedes ir y probarlo.

Así termina este devlog, ahora terminado podré escribir sobre otros proyectos y/u otros temas.

Si estás aunque sea un poquito interesado en lo que te estoy contando, puedes ir a ver mis diferentes proyectos (incluidos los de este devlog) en github.

¡Que tengas un buen resto del día!