Всем привет! В этой статье я покажу вам шаг за шагом, как создать простой 2D-физический сценарий с помощью Box2DCreateJS.

Если вы не знаете, что такое Box2DCreateJS, посмотрите эту статью.

Наш сценарий имеет гравитацию и окружен полом, левой и правой стенами и потолком. Кроме того, внутри него мы добавим белый шар, с которым можно будет взаимодействовать с помощью курсора.

К концу статьи вот чего мы добьемся!

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

Импорт Box2DCreateJS

Включим библиотеку Box2DCreateJS в index.html. Для этого включите следующие строки

<!DOCTYPE html>
<html lang="en">
  
    <head>
        ...
        <script src="box2dcreatejs/js/Box2dWeb/Box2dWeb-2.1.a.3.js"></script>
        <script src="box2dcreatejs/js/CreateJS/easeljs-1.0.0.min.js"></script>
    
        <script src="box2dcreatejs/js/Box2DCreateJS/WorldManager.js"></script>
        <script src="box2dcreatejs/js/Box2DCreateJS/Render.js"></script>
        <script src="box2dcreatejs/js/Box2DCreateJS/Entity.js"></script>

        <script src="MyApp.js"></script>
        ...
    </head>
    ...
</html>

Создайте и запустите WorldManager

В файле myApp.js определите переменную _worldManager и создайте ее экземпляр внутри функции initialize. Затем, все еще внутри функции initialize, давайте запустим _worldManager, вызвав функцию start.

this.Box2DCreateJS = this.Box2DCreateJS || {};

(function () {

    function MyGame() {
        this.initialize()
    }

    Box2DCreateJS.MyGame = MyGame

    let _worldManager

    MyGame.prototype.initialize = function () {
        const easeljsCanvas = document.getElementById("easeljsCanvas")
        const box2dCanvas = document.getElementById("box2dCanvas")

        _worldManager = new Box2DCreateJS.WorldManager(
            easeljsCanvas, box2dCanvas, {
                world: new box2d.b2World(new box2d.b2Vec2(0, 10), true)
            }
        )
        _worldManager.start()
  }

}())

Создать функцию gameLogic

В файле myApp.js определите функцию с именем gameLogic (которая пока будет пустой) и добавьте ее вызов в функцию initialize.

this.Box2DCreateJS = this.Box2DCreateJS || {};

(function () {
    ...

    MyGame.prototype.initialize = function () {
        ...
        _worldManager.start()

        gameLogic()
    }

    function gameLogic() {
    }

}())

Создайте ограничения сценария

Холст EaselJS и Box2D имеет ширину 980 пикселей и высоту 500 пикселей.

Чтобы создать ограничения сценария, давайте добавим следующее содержимое в функцию gameLogic. Здесь мы используем _worldManager для создания четырех объектов static Entity: пола, левой и правой стен и потолка. Все они используют один и тот же Render, определенный в переменной const staticRender.

...
function gameLogic() {
    const staticRender = {
        type: 'draw',
        drawOpts: {
            bgColorStyle: 'solid',
            bgSolidColorOpts: { color: 'black' }
        }
    }

    // floor
    _worldManager.createEntity({
        type: 'static',
        x: 490, y: 500,
        shape: 'box',
        boxOpts: { width: 980, height: 10 },
        render: staticRender
    })

    // ceiling
    _worldManager.createEntity({
        type: 'static',
        x: 490, y: 0,
        shape: 'box',
        boxOpts: { width: 980, height: 10 },
        render: staticRender
    })

    // left wall
    _worldManager.createEntity({
        type: 'static',
        x: 0, y: 250,
        shape: 'box',
        boxOpts: { width: 10, height: 500 },
        render: staticRender
    })

    // right wall
    _worldManager.createEntity({
        type: 'static',
        x: 980, y: 250,
        shape: 'box',
        boxOpts: { width: 10, height: 500 },
        render: staticRender
    })
}
...

На картинке ниже показано, как static сущностей размещаются на холсте.

Давайте проверим, как это происходит.

Создать мяч

Давайте теперь создадим мяч, который падает из верхней центральной части экрана. Для этого добавьте следующий код в конец функции gameLogic. Он использует _worldManager для создания dynamic Entity, представляющих мяч.

...
function gameLogic() {
    ...

    // ball
    _worldManager.createEntity({
        type: 'dynamic',
        x: 490, y: 250,
        shape: 'circle',
        circleOpts: { radius: 40 },
        render: {
            type: 'draw',
            drawOpts: {
                bgColorStyle: 'solid',
                bgSolidColorOpts: { color: 'white' },
                borderWidth: 5
            },
        },
        fixtureDefOpts: { restitution: 0.5 }
    })
}
...

На следующем изображении показано, где находится мяч. Этот центр находится ровно посередине холста (x: 490, y: 250). Кроме того, он имеет радиус 40 пикселей.

Проверив, как это до сих пор, вы должны увидеть что-то вроде

Включить курсор для игры с мячом

Теперь давайте включим курсор, чтобы мы могли получить мяч, перетащить его или бросить. Для этого нам нужно включить TouchMouseHandler.js в index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <script src="box2dcreatejs/js/Box2DCreateJS/TouchMouseHandler.js"></script>
        ...
    </head>
    ...
</html>

Затем в myApp.js нам нужно добавить следующую строку. Он использует переменную _worldManager для вызова функции createTouchMouseHandler.

...
MyApp.prototype.initialize = function () {
    ...
    _worldManager.start()
    _worldManager.createTouchMouseHandler()

    gameLogic()
}
...

Давай проверим…

Хороший! Теперь мы можем играть с мячом и бросать его!

Следите за обновлениями

В ближайшие дни я поделюсь серией статей, целью которых является демонстрация обширных возможностей Box2DCreateJS.

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

Исходный код можно найти в Box2DCreateJS GitHub Репозиторий.

Так что следите за обновлениями, чтобы отправиться в захватывающее путешествие в мир разработки игр на JavaScript!