01.07.2021 22:18
kornerr 1 2800 Источник

В июне сделал набросок собственного инструмента для дальнейшей разработки "Колобка" с помощью HTML, Matter.js и JSON.


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


Свой поиск "идеального инструмента" для этих целей я начал с довольно известных инструментов GDevelop и Phaser, у каждого из которых я нашёл свои плюсы и минусы: в GDevelop мне не хватало функциональности, в Phaser — скорости разработки.


В конце концов, как это бывает часто в разработке, в какой-то момент хочется написать по-своему и проще. Так я и поступил, решив проверить гипотезу о возможности создать игру "Колобок" лишь с помощью HTML/CSS/JS и Matter.js. Но не делать очередное JS API аля Phaser с другими именами методов, а существенно сократить трудозатраты на создание игры с помощью формата JSON.


Итоговый JSON, который получается в видео, выглядит следующим образом:


{
    заголовок: "Колобку здесь быть",
    изображения: {
        дом: {
            ширина: 2000,
            высота: 600,
            вид: {
                background: "url(р/сцены/изба.jpg)",
            },
        },
    },
    объекты: {
        колобок: {
            x: 100,
            y: 100,
            ширина: 70,
            высота: 70,
            вид: {
                background: "url(р/колобок/колобок_неподвижен.png)",
            },
            физика: {
                isStatic: false,
                inertia: Infinity,
            },
        },
        полСлева: {
            x: 180,
            y: 590,
            ширина: 355,
            вид: {
                background: "url(р/отладка/основа.jpg)",
                display: "none",
            },
        },
        полКрышки: {
            x: 430,
            y: 590,
            ширина: 135,
            вид: {
                background: "url(р/отладка/основа.jpg)",
                display: "none",
            },
        },
        полСправа: {
            x: 1250,
            y: 590,
            ширина: 1500,
            вид: {
                background: "url(р/отладка/основа.jpg)",
                display: "none",
            },
        },
        фундаментПечи: {
            x: 840,
            y: 480,
            ширина: 550,
            вид: {
                background: "url(р/отладка/основа.jpg)",
                display: "none",
            },
        },
    },
    игрок: {
        объект: "колобок",
        скорость: [5, 15],
        клавиши: ["ArrowLeft", "ArrowRight", "ArrowUp"],
    },
    камера: {
        объект: "колобок",
        центрировать: 0.1,
    },
}

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


Посмотрим, как пойдёт дальше. Тем временем, прошу вас посмотреть видео, итоговый JSON и оценить удобство подобного JSON.


P.S.: Список публикаций на текущий момент: