Как нарисовать мой мир Box2D, используя HTML5 Canvas вместо Debug Draw?

Question

Я достаточно хорошо знаю холст HTML5, знаю основы и анимацию с использованием циклов и т. Д.

Демонстрация, с которой я работаю: (нажмите для создания фигур) http://henry.brown.name/experiments/box2d/example-canvas.html

Что яЯ не очень знаком с этим Box2D.Я использую порт Box2DWeb, я слышал, что он был новее, чем Box2D-js, я не уверен, что лучше.

Я знаю, как инициализировать «мир», и я могу размещать объекты в мире,Затем я использую Step для анимации мира - однако пока что отображаю его на экране, я только смог заставить его работать с отладочной отрисовкой, поскольку она в основном делает все для вас.

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

Любые советы будут высоко оценены!

Спасибо

Answer 1

Я провел последние несколько дней, пытаясь сделать то же самое.Я нашел учебник Джонни Стрёмберга , который не очень детализирован, но, проанализировав код, я обнаружил, как он получает положение тела:

var b = world.GetBodyList()

GetBodyList () кажется итеративным массивом,поэтому следующее тело доступно через b.m_next.

Затем вы можете использовать

b.GetPosition().x
b.GetPosition().y
b.GetAngle()

для получения координат тела.

РЕДАКТИРОВАТЬ: этот код предназначен для Box2dwebбиблиотека, которую я нашел лучше задокументированной, чем Box2djs

Answer 2

Если вы не знакомы с Box2D, вам следует ознакомиться с документацией по адресу http://www.kyucon.com/doc/box2d/.. Здесь должны быть указаны все необходимые вам свойства. Насколько мне известно, стандартный способ использования Box2D - прикрепить изображение с userData. См. Этот пример учебника по использованию изображений и изображений Canvas.

http://www.jeremyhubble.com/box2d.html

Answer 3

У меня был тот же вопрос. здесь это документация.Вы можете использовать вызовы типа GetBodyList(), GetAngle() и элементы типа m_position, чтобы получить все, что вам нужно, чтобы нарисовать что угодно, используя любую библиотеку, которую вы хотите использовать на холсте.