В этой статье мы научимся создавать объекты в Box2D, рисуя их мышкой!
Будем создавать прямоугольники и круги.
Идея такая: отслеживаем зажатие и движение мыши, запоминаем нужные координаты и создаём физический объект по завершению рисования.
Для большей крутости оставим возможность перетаскивать объекты мышкой, для этого нам потребуется распознавать что под мышкой в момент нажатия, если под ней нет физического объекта, то создаём новый.
А так же сделаем возможность переключаться между созданием прямоугольников и кругов нажатием клавиш «1» и «2».
В результате получился вот такой пример:
Для создания объекта нужно зажать левую кнопку мыши и потянуть. Для переключения типов объектов: клавиша «1» — создавать прямоугольники, «2» — создавать круги.
Полный код примера
package
{
import Box2D.Collision.b2AABB;
import Box2D.Collision.Shapes.b2CircleShape;
import Box2D.Collision.Shapes.b2PolygonShape;
import Box2D.Collision.Shapes.b2Shape;
import Box2D.Common.Math.b2Vec2;
import Box2D.Dynamics.Joints.b2RevoluteJoint;
import Box2D.Dynamics.Joints.b2RevoluteJointDef;
import Box2D.Dynamics.Joints.b2WeldJointDef;
import Box2D.Dynamics.b2Body;
import Box2D.Dynamics.b2BodyDef;
import Box2D.Dynamics.b2DebugDraw;
import Box2D.Dynamics.b2Fixture;
import Box2D.Dynamics.b2FixtureDef;
import Box2D.Dynamics.b2World;
import Box2D.Dynamics.Joints.b2MouseJoint;
import Box2D.Dynamics.Joints.b2MouseJointDef;
import flash.display.DisplayObjectContainer;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.ui.Keyboard;
import net.hires.debug.Stats;
/**
* Для статьи "Box2D: создаём объекты мышкой" cyber-code.ru
* @author Monax
*/
[Frame(factoryClass="Preloader")]
public class Main extends Sprite
{
private const PPM: Number = 30; // pixel per meter - множитель для перевода метров в пиксели
private const MPP: Number = 1 / 30; // meter per pixel - для перевода пикселей в метры
private const VEL_ITERS: int = 10;
private const POS_ITERS: int = 10;
private var _statsParent: Sprite;
private var _debugDrawParent: Sprite;
private var _world: b2World;
private var _mJoint: b2MouseJoint;
// для создания объектов
private var _drawParent: Sprite; // холст для отрисовки рисуемых фигур
private var _creatingObj: Boolean = false; // флаг обозначающий что в данное время происходит создание (рисование) объекта
private var _isCercle: Boolean = false; // создаём круг? если false, то прямоугольник
private var _mpStart: Point = new Point(); // начальная точка создания (позиция нажатия мыши)
private var _mpEnd: Point = new Point(); // конечная точка создания (позиция отжатия мыши)
public function Main():void
{
if (stage) init() else addEventListener(Event.ADDED_TO_STAGE, init);
}
//////////////////////////////////////////////////////////////////////////////////////////
//{ PRIVATE
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// создаём слой для отрисовки физики
_debugDrawParent = new Sprite();
addChild(_debugDrawParent);
// создаём слой для отображения профайлера
_statsParent = new Sprite();
addChild(_statsParent);
var stats: Stats = new Stats();
_statsParent.addChild(stats);
_drawParent = new Sprite();
addChild(_drawParent);
// создаём сцену
createScene();
// организуем слушатели событий
addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDownHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
/**
* Создание всей сцены
*/
private function createScene():void
{
// создание мира
_world = new b2World(new b2Vec2(0, 9.8), true);
// инициализация графики
initDebugDraw(_debugDrawParent);
// создание стен
createWalls();
}
/**
* Полное уничтожение всей сцены
*/
private function destroyScene():void
{
destroyMouseJoint();
// чистим отображение
_debugDrawParent.removeChildren();
// уничтожаем все тела в мире
if (_world)
for (var body: b2Body = _world.GetBodyList(); body; body = body.GetNext())
if (body) _world.DestroyBody(body);
// обнуляем переменную мира
_world = null;
}
/**
* Инициализация debug-отрисовки
*/
private function initDebugDraw(aDDParent: DisplayObjectContainer):void
{
// создаём специальный фон для дебаг отрисовки
// это необходимо, чтобы на этапе дебаг отрисовки срабатывали клики мыши например
var ddFon: Sprite = new Sprite();
var gr: Graphics = ddFon.graphics;
gr.lineStyle(0);
gr.beginFill(0x333333, 1);
gr.drawRect(-1000, -1000, 2000, 2000);
aDDParent.addChild(ddFon);
var ddDummy: Sprite = new Sprite();
aDDParent.addChild(ddDummy);
var debugDraw: b2DebugDraw = new b2DebugDraw();
debugDraw.SetSprite(ddDummy);
debugDraw.SetDrawScale(PPM);
// указываем флаги - что необходимо отрисовывать
debugDraw.SetFlags(b2DebugDraw.e_controllerBit + b2DebugDraw.e_pairBit + b2DebugDraw.e_shapeBit + b2DebugDraw.e_jointBit);
debugDraw.SetFillAlpha(0.5);
_world.SetDebugDraw(debugDraw);
}
/**
* Создание стен по размеру видимой области
* @param aLeft - создать левую стену?
* @param aRight - создать правую стену?
* @param aTop - создать потолок?
*/
private function createWalls(aLeft: Boolean = false, aRight: Boolean = false, aTop: Boolean = false):void
{
var body: b2Body;
var bDef: b2BodyDef;
var shape: b2Shape;
// создание статического прямоугольника. которые будет в роли земли. создаётся по умолчанию
bDef = new b2BodyDef();
shape = b2PolygonShape.AsBox(stage.stageWidth * MPP / 2, 20 * MPP / 2);
bDef.position.Set(stage.stageWidth / 2 * MPP, stage.stageHeight * MPP);
body = _world.CreateBody(bDef);
body.CreateFixture2(shape);
// левая стена
if (aLeft) {
bDef = new b2BodyDef();
shape = b2PolygonShape.AsBox(20 / 2 * MPP, stage.stageHeight / 2 * MPP);
bDef.position.Set(0, stage.stageHeight / 2 * MPP);
body = _world.CreateBody(bDef);
body.CreateFixture2(shape);
}
// правая стена
if (aRight) {
bDef = new b2BodyDef();
shape = b2PolygonShape.AsBox(20 * MPP / 2, stage.stageHeight * MPP / 2);
bDef.position.Set(stage.stageWidth * MPP, stage.stageHeight * MPP / 2);
body = _world.CreateBody(bDef);
body.CreateFixture2(shape);
}
// потолок
if (aTop) {
bDef = new b2BodyDef();
shape = b2PolygonShape.AsBox(stage.stageWidth / 2 * MPP, 20 / 2 * MPP);
bDef.position.Set(stage.stageWidth / 2 * MPP, 0 * MPP);
body = _world.CreateBody(bDef);
body.CreateFixture2(shape);
}
}
/**
* Создаёт физику круга
* @param aWorld - мир бокса
* @param aX - позиция объекта по X (пикс.)
* @param aY - позиция объекта по Y (пикс.)
* @param aRadius - радиус круга (пикс.)
* @param aDensity - плотность
* @param aFriction - трение
* @param aRestitution - упругость
* @return
*/
private function createPhysCircle(aWorld: b2World, aX: Number, aY: Number, aRadius: Number, aDensity: Number = 1.0, aFriction: Number = 1.0, aRestitution: Number = 0.5): b2Body
{
var bDef: b2BodyDef = new b2BodyDef();
var fixDef: b2FixtureDef = new b2FixtureDef();
fixDef.density = aDensity;
fixDef.friction = aFriction;
fixDef.restitution = aRestitution;
fixDef.shape = new b2CircleShape(aRadius * MPP);
bDef.position.Set(aX * MPP, aY * MPP);
bDef.linearDamping = 0.0;
bDef.angularDamping = 0.0;
bDef.type = b2Body.b2_dynamicBody;
var b: b2Body = aWorld.CreateBody(bDef);
b.CreateFixture(fixDef);
return b;
}
//Create standard boxes of given height , width at x,y
/**
* Создаёт физику прямоугольника
* @param aWorld - мир бокса
* @param aX - позиция по x (пикс.)
* @param aY - позиция по y (пикс.)
* @param aW - длина прямоугольника (пикс.)
* @param aH - высота прямоугольника (пикс.)
* @param aDensity - плотность
* @param aFriction - трение
* @param aRestitution - упругость
* @return
*/
private function createPhysBox(aWorld: b2World, aX: Number, aY: Number, aW: Number, aH: Number, aDensity: Number = 1.0, aFriction: Number = 1.0, aRestitution: Number = 0.5): b2Body
{
var bDef: b2BodyDef = new b2BodyDef();
var fixDef: b2FixtureDef = new b2FixtureDef();
fixDef.density = aDensity;
fixDef.friction = aFriction;
fixDef.restitution = aRestitution;
var shape: b2PolygonShape = new b2PolygonShape();
shape.SetAsBox(aW / 2 * MPP, aH / 2 * MPP);
fixDef.shape = shape;
bDef.position.Set(aX * MPP, aY * MPP);
bDef.type = b2Body.b2_dynamicBody;
var b: b2Body = aWorld.CreateBody(bDef);
b.CreateFixture(fixDef);
return b;
}
/**
* Возвращает физ. объект под курсором мыши, если таковой имеется
* @param includeStatic - учитывать статический тела?
* @return объект или null
*/
private function GetBodyAtMouse(includeStatic:Boolean = false): b2Body
{
var mXWorldPhys: Number = mouseX * MPP;
var mYWorldPhys: Number = mouseY * MPP;
var mousePVec: b2Vec2 = new b2Vec2(mXWorldPhys, mYWorldPhys);//записываем текущие координаты курсора
var aabb: b2AABB = new b2AABB(); // создаем прямоугольную область
aabb.lowerBound.Set(mXWorldPhys - 0.001, mYWorldPhys - 0.001); //вокруг курсора мыши
aabb.upperBound.Set(mXWorldPhys + 0.001, mYWorldPhys + 0.001);
var body: b2Body = null;
var fixture: b2Fixture;
function GetBodyCallback(fixture:b2Fixture): Boolean
{
var shape:b2Shape = fixture.GetShape(); //получаем шейп который находится под курсором
// если тело не статическое
if (fixture.GetBody().GetType() != b2Body.b2_staticBody || includeStatic) {
// проверяем находится ли точка-позиция курсора в рамках тела
var inside: Boolean = shape.TestPoint(fixture.GetBody().GetTransform(), mousePVec);
// если да
if (inside) {
body = fixture.GetBody(); //получаем ссылку на тело
return false;
}
}
return true;
}
_world.QueryAABB(GetBodyCallback, aabb); //проверяем на попадание любых тел в область aabb
return body; //возвращаем тело
}
/**
* Уничтожить текущее Mouse соединение
*/
private function destroyMouseJoint():void
{
if (_mJoint)
_world.DestroyJoint(_mJoint); // удаляем соединение
_mJoint = null;
}
// обновление физ. мира
private function updateBox2D(aDTime: Number):void
{
if (_world) {
_world.Step(aDTime, VEL_ITERS, POS_ITERS);
_world.ClearForces();
// рисуем физику с помощью дебаг-рендера
_world.DrawDebugData();
for (var b: b2Body = _world.GetBodyList(); b; b = b.GetNext())
{
// если тело упало слишком низко (1000 пикелей вниз), то уничтожаем его
if (b.GetPosition().y * PPM >= 1000)
_world.DestroyBody(b);
}
trace(_world.GetBodyCount());
}
}
private function updateObjDraw():void
{
_drawParent.graphics.clear();
if (_creatingObj) {
if (_isCercle) {
_drawParent.graphics.beginFill(0x00BBBB, 0.8);
var cx: Number = _mpStart.x;
var cy: Number = _mpStart.y;
var cw: Number = Math.abs(_mpStart.x - _mpEnd.x);
var ch: Number = Math.abs(_mpStart.y - _mpEnd.y);
_drawParent.graphics.drawCircle(cx, cy, Math.max(cw, ch));
_drawParent.graphics.endFill();
}
else {
_drawParent.graphics.beginFill(0x0000BB, 0.8);
var rx: Number = Math.min(_mpStart.x, _mpEnd.x);
var ry: Number = Math.min(_mpStart.y, _mpEnd.y);
_drawParent.graphics.drawRect(rx, ry, Math.abs(_mpStart.x - _mpEnd.x), Math.abs(_mpStart.y - _mpEnd.y));
_drawParent.graphics.endFill();
}
}
}
private function createCurrentObject():void
{
if (_isCercle) {
var cx: Number = _mpStart.x;
var cy: Number = _mpStart.y;
var cw: Number = Math.abs(_mpStart.x - _mpEnd.x);
var ch: Number = Math.abs(_mpStart.y - _mpEnd.y);
var rad: Number = Math.max(1, Math.max(cw, ch));
createPhysCircle(_world, cx, cy, rad);
}
else {
var rw: Number = Math.max(1, Math.abs(_mpStart.x - _mpEnd.x));
var rh: Number = Math.max(1, Math.abs(_mpStart.y - _mpEnd.y));
var rx: Number = Math.min(_mpStart.x, _mpEnd.x) + rw / 2;
var ry: Number = Math.min(_mpStart.y, _mpEnd.y) + rh / 2;
createPhysBox(_world, rx, ry, rw, rh);
}
}
//} private
//////////////////////////////////////////////////////////////////////////////////////////
//{ EVENTS
private function onKeyDownHandler(e:KeyboardEvent):void
{
switch (e.keyCode)
{
case Keyboard.NUMBER_1:
_isCercle = false;
break;
case Keyboard.NUMBER_2:
_isCercle = true;
break;
case Keyboard.P:
_statsParent.visible = !_statsParent.visible;
break;
case Keyboard.R: // пересоздаём сцену
destroyScene();
createScene();
break;
}
}
private function onMouseDown(e:MouseEvent):void
{
// если соединение уже есть, то уничтожаем его
if (_mJoint)
destroyMouseJoint();
// получаем тело под курсором
var body:b2Body = GetBodyAtMouse();
if (body) {
var md:b2MouseJointDef = new b2MouseJointDef(); // создаем настройки соединения
md.bodyA = _world.GetGroundBody(); // один конец крепим к миру
md.bodyB = body; // другой к телу
md.target.Set(mouseX * MPP, mouseY * MPP); // соединение создается от курсора мыши
md.collideConnected = true;
md.maxForce = 3000; // макс. сила которая может быть приложена к телу
_mJoint = _world.CreateJoint(md) as b2MouseJoint; // создаем соединение
body.SetAwake(true); // будим тело
_creatingObj = false;
}
else {
_mpStart.x = mouseX;
_mpStart.y = mouseY;
_creatingObj = true;
}
}
private function onMouseUp(e:MouseEvent):void
{
destroyMouseJoint();
if (_creatingObj) {
createCurrentObject();
_creatingObj = false;
}
}
private function onEnterFrameHandler(e:Event):void
{
update(1 / stage.frameRate);
}
//} events
//////////////////////////////////////////////////////////////////////////////////////////
//{ PUBLIC
public function update(aDTime: Number):void
{
updateBox2D(aDTime);
// обновляем координаты соединения с мышью, если таковое имеется
if (_mJoint) {
var p2:b2Vec2 = new b2Vec2(mouseX * MPP, mouseY * MPP);
_mJoint.SetTarget(p2); //перемещаем соединение за курсором мыши
}
else if (_creatingObj) {
_mpEnd.x = mouseX;
_mpEnd.y = mouseY;
}
updateObjDraw();
}
//} public
}
}
Пояснения по коду (в скобках номера строк):
[366-372]: отслеживание нажатия кнопок «1» и «2» для переключения типа создаваемого объекта;
[405-407]: если под курсором в момент нажатия нету физического тела, то запоминаем позицию как начальную для создания и включаем флаг состояния создания объекта;
[414-417]: если происходит создание объекта, то вызываем функцию создания нарисованного объекта createCurrentObject() и выключаем состояние создания;
[337-354]: функция создания нарисованного объекта, учитывает текущий выбранный объект и на основании этого создаёт либо круг либо прямоугольник с минимальными радиусом или сторонами = 1 пиксель.
Скачать исходники
