Я создаю игровой движок!

Знакомство с этим великим приключением

Уже несколько недель я регулярно работаю над проектом, о котором, как мне кажется, было бы интересно поговорить, — созданием моего движка видеоигр на JavaScript и HTML5 на основе canvas.

Вам, наверное, интересно, почему вы выбрали HTML5 и JavaScript для создания видеоигр? Ответ менее крут, чем вопрос, именно конкурс проектов, необходимых для моей школы (Zone01 Normandie) и тот факт, что в языках есть все необходимое для реализации этого проекта, побудили меня выбрать именно эти технологии

Но на самом деле это не те языки, которые я бы выбрал в качестве основы, и после доработки этого я обязательно предприму другие приключения такого типа с разными языками.

Архитектура

Итак, я приступил к разработке своего движка для видеоигр. Он будет состоять из нескольких классов, включая как минимум два основных: класс Game, который будет управлять всей игровой областью, и класс GameObject, позволяющий генерировать объекты. в наших играх и заставить их взаимодействовать друг с другом.

К этим классам я добавлю класс CollideBox, который позволит мне управлять полями коллизий всех объектов.

Класс Game имеет метод GameLoop, который будет выполняться в каждом кадре (изображении) игры, а также метод Draw, который будет вызываться во время каждого игрового цикла.

Что касается класса GameObject, то у него есть метод Step и метод Draw.
Первый выполняет каждый раунд игрового цикла, а второй — каждый раз, когда вызывается метод Draw класса GameLoop.

Это теоретически позволяет создавать игры, импортируя модуль Engine в проект.
Для отображения спрайтов я решил использовать API-интерфейс canva, встроенный в HTML5 (встроенный означает, что он поставляется с ним по умолчанию)
Это позволит мне отображать все спрайты и перерезать изображения для создания анимации, которая будет мне чрезвычайно полезна!

Через несколько дней я могу отображать анимацию с заданной скоростью и обнаруживать столкновения с помощью CollideBoxes.
И много других приятных вещей, которые я покажу вам ниже:

Класс 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()   {};
}   

Класс игры

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 



Конечно, есть много оптимизаций и других ошибок, но все работает, 

"Идеальный!" ты мне скажешь? 

Это было бы слишком просто.


  
  
  Заботы


После того, как я закончил это и начал прощупывать почву для создания игры на этом движке, во время разговора с коллегой я узнал ужасную новость.

Я думаю, вы помните, что выбранная технология была сделана в соответствии с требованиями моей школы Zone01…

Да, действительно, языки были выбраны хорошо, но я не знал об инструкции, которая серьезно помешала бы проекту…

Нам запретили использовать библиотеку Canva!

Напоминаем, что это библиотека, которую мы используем для отображения наших изображений.


  
  
  Что дальше?


Когда я пишу этот текст, я также начинаю полностью переделывать этот игровой движок без использования канвы.

Этот журнал разработки закончен, и скоро вы узнаете остальную часть этой истории, не волнуйтесь.

В следующем девлоге я обязательно попробую новый формат.

Надеюсь, этот контент помог вам, развлек или, по крайней мере, обучил вас некоторым темам. Желаю вам хорошего завершения дня и хорошего программирования.


  
  
  DevLogs 1.1: Движок доработан, как он работает?



  
  
  Ранее


Несколько месяцев назад я начал создавать свой движок для видеоигр, я закончил его... Довольно давно, с помощью нескольких коллег из Zone01, нам даже удалось создать игру, вдохновленную Super Mario Bros, доступную на моем Страница Itch.io.

Решение о формате этого журнала разработки заняло много времени, и я признаю, что немного задержал или даже полностью отодвинул крайний срок написания этого журнала.

Терпеливо принимая оправдание своей нерешительности за то, что я не работал над этой темой, теперь через два месяца после запланированной даты выпуска я пишу в зоне отдыха автовокзала Руана, в то время как мой отмененный поезд заставляет меня ждать дополнительный час. 

Итак, давайте рассмотрим все детали архитектуры, она изменилась очень мало (кроме адаптации за счет отказа от использования холстов) со времени первой части моего журнала разработки.

Поэтому мы поговорим о реализованном проекте, о том, как мы работали в команде и с какими проблемами столкнулись.

Рассматривайте это как отзыв об этом проекте, и я надеюсь, что вы сможете извлечь из этой статьи некоторые уроки, которые помогут вам в одном из ваших проектов.


  
  
  Проект


Проект заключался в том, чтобы воссоздать Super Mario Bros на JavaScript и начать с нуля, по крайней мере, с точки зрения кода.

Спецификации были простыми: нам нужна была игра про Марио с несколькими уровнями, чтобы можно было просто создавать новые.

Также нам пришлось создать табло и меню для настройки параметров.

Сложностями этого проекта были: 

• Горизонтальная прокрутка элементов на экране
• Оптимизация элементов, отсутствующих на экране

Прокрутка, поскольку она требует, чтобы все элементы прокручивались в фоновом режиме относительно позиции игрока.
А оптимизация элементов, которые не отображаются на экране, сокращает ресурсы, необходимые для запуска игры без потери производительности.

После решения этих проблем мы опубликовали эту игру на моей странице itch.io, где вы даже можете ее протестировать.

Вот и заканчивается этот журнал разработки, теперь я смогу писать о других проектах и/или других темах.

Если вам хоть немного интересно то, что я вам рассказываю, вы можете посмотреть мои различные проекты (включая те, что представлены в этом журнале разработки) на github.

Хорошего остатка дня!