🧒 💅🏻 🧕🏽 फ्लैश पर भौतिकी। AS3 पर Nape में Ragdoll बनाएं 🏈 🙁 🤵🏾

एक फ्लैश पर भौतिकी बनाना आवश्यक था, लेकिन एक छोटी सी बारीकियों के साथ। मंच पर 10 - 15 रेज्डोल (जो लोग नहीं जानते उनके लिए प्रदर्शित करना आवश्यक था। रेज्डोल एक गुड़िया है। मानव शरीर का नकली)। लोकप्रिय Box2D पर इसे लागू करने की कोशिश करने के बाद, मैं निराशाजनक निष्कर्ष पर आया कि Box2D यह नहीं कर सकता। थोड़ा सा Google को अपेक्षाकृत नया Nape () इंजन मिला। जो आम तौर पर इस समस्या को हल करता है।
अपने आश्चर्य के लिए, मुझे हब पर नप उल्लेख नहीं मिला और इसके साथ काम की शुरुआत का वर्णन करने का फैसला किया।
कटौती के तहत, एक रेजडॉल बनाने का वर्णन और Box2D और Nape पर तुलना के लिए उदाहरण, साथ ही उदाहरण के लिए स्रोत कोड।

परियोजना FlashDevelop में बनाई जाएगी। पूर्ण परियोजना का लिंक नीचे दिया जाएगा।
डाउनलोड करना और Nape को प्रोजेक्ट से जोड़ना तुच्छ है, इसलिए मैं इसका वर्णन नहीं करूंगा।

1. संसार का निर्माण।

सबसे महत्वपूर्ण क्षण। कंस्ट्रक्टर में, आपको लाइब्रेरी लोडर को पंजीकृत करने की आवश्यकता है।

public function Main(): void
{
new Boot();
….........................
}

* This source code was highlighted with Source Code Highlighter .

public function Main(): void { new Boot(); …......................... } * This source code was highlighted with Source Code Highlighter .

नपे में दुनिया को तीन वर्गों में वर्णित किया गया है:
यूनिफ़ॉर्मस्पेस एक ऐसी दुनिया है जिसमें ऑब्जेक्ट सो नहीं सकते हैं।
यूनिफ़ॉर्मप्लेस्पेस एक ऐसी दुनिया है जिसमें वस्तुएं सो जाती हैं यदि कोई बल उन पर कार्य नहीं करता है। यह प्रोसेसर संसाधनों को बचाता है।
BruteSpace कोई सीमा नहीं सीमाओं के साथ एक जगह है जहाँ ऑब्जेक्ट सो नहीं सकते हैं।

जैसा कि आप समझ सकते हैं कि सबसे आम यूनिफ़ॉर्मस्पेस है। हम इसके आधार पर परियोजना का निर्माण करेंगे।

// .
var gravity:Vec2 = new Vec2(0, 250);
// . , .
var world:UniformSleepSpace = new UniformSleepSpace( new AABB(0,0, 800, 600), 25, gravity);

* This source code was highlighted with Source Code Highlighter .

// . var gravity:Vec2 = new Vec2(0, 250); // . , . var world:UniformSleepSpace = new UniformSleepSpace( new AABB(0,0, 800, 600), 25, gravity); * This source code was highlighted with Source Code Highlighter .

Box2D के विपरीत, Nape भौतिक दुनिया और स्क्रीन पर छवि के बीच पैमाना नहीं है। सब कुछ पिक्सेल में गणना की जाती है।

यह दुनिया के निर्माण का अंत है। जाहिरा तौर पर इस बारे में कुछ भी जटिल नहीं है।

2. स्थिर शरीर बनाएँ।

हमारे मामले में, यह एक है - यह पृथ्वी है।

एक स्थिर मंच बनाएँ
मापदंडों में हम आकार, स्थान, गति और शरीर के प्रकार के लिए एक सूचक (वास्तविक - स्थिर, गलत - गतिशील) में संकेत देते हैं

physObject = Tools.createBox(400, 500, 700, 20, 0, 0, 0, true , Material.Steel);
world.addObject(physObject); //
addChild(physObject.graphic); //

* This source code was highlighted with Source Code Highlighter .

physObject = Tools.createBox(400, 500, 700, 20, 0, 0, 0, true , Material.Steel); world.addObject(physObject); // addChild(physObject.graphic); // * This source code was highlighted with Source Code Highlighter .

Nape में Default.Steel या Material.Wood जैसी डिफ़ॉल्ट सामग्री जोड़ी गई है। जो प्रोटोटाइप और विकास को बहुत सुविधाजनक बनाता है।

इसके अलावा, Box2D के विपरीत, आपको डिफ़ॉल्ट ग्राफिक्स बनाने की आवश्यकता नहीं है। ऑब्जेक्ट में एक ग्राफिक्स प्रॉपर्टी है। यदि आप इसमें ग्राफिक्स स्थापित नहीं करते हैं, तो डिफ़ॉल्ट प्राइमेटिव प्रदर्शित किए जाएंगे।

3. दुनिया का शुभारंभ।
दुनिया को प्रदर्शित करने के लिए, एक ENTER_FRAME हैंडलर बनाएं और उसमें यूनिफ़्लेसेस्पेस उदाहरण के चरण () विधि को कॉल करें।
हम एक पैरामीटर के रूप में सिम्युलेटेड समय को प्रसारित करते हैं (उदाहरण 1 / 30.0)

इस स्तर पर, आप पहले से ही परियोजना शुरू कर सकते हैं और एक वस्तु स्क्रीन पर दिखाई जाएगी - पृथ्वी।

4. रागडोल बनाना।

यहाँ गुड़िया का शरीर कैसा दिखता है

गुड़िया में शारीरिक कनेक्शन को लाल रंग में हाइलाइट किया गया है।

भौतिक इंजन के साथ आगे के काम की सुविधा के लिए, एक एक्टर ऑब्जेक्ट बनाएं, जो भौतिक दुनिया और प्रदर्शित छवि के बीच संबंध का काम करता है।

public class Actor extends EventDispatcher
{
//
protected var _body:PhysObj;
// (, )
protected var _costume:DisplayObject;

public function Actor(myBody:PhysObj, myCostume:DisplayObject)
{
_body = myBody;
_costume = myCostume;

if (_body != null )
{
updateLook();
}
}

public function Update(): void
{
// , ,
if (!_body.sleep)
{
updateLook();
}
}

//
private function updateLook(): void
{
var PosX:Number = _body.px;
var PosY:Number = _body.py;
_costume.x = PosX * Main.SCALE;
_costume.y = PosY * Main.SCALE;
}

}

* This source code was highlighted with Source Code Highlighter .

public class Actor extends EventDispatcher { // protected var _body:PhysObj; // (, ) protected var _costume:DisplayObject; public function Actor(myBody:PhysObj, myCostume:DisplayObject) { _body = myBody; _costume = myCostume; if (_body != null ) { updateLook(); } } public function Update(): void { // , , if (!_body.sleep) { updateLook(); } } // private function updateLook(): void { var PosX:Number = _body.px; var PosY:Number = _body.py; _costume.x = PosX * Main.SCALE; _costume.y = PosY * Main.SCALE; } } * This source code was highlighted with Source Code Highlighter .

आइए, क्लास एक्टर का विस्तार करके मानव शरीर का "हेड" ऑब्जेक्ट बनाएं

public class Head extends Actor
{
public var head:PhysObj;

[Embed(source = '../../../../lib/ragdol.swf' , symbol = 'Ragdoll' )]
public var _headSprite: Class;

public function Head(parent:DisplayObjectContainer , location:Point, dimension:Point, initVel:Point)
{
var radius:Number = dimension.y / 2;

// HEAD -------------------------------------------------------------------------------
var headSprite:Sprite = new _headSprite();
headSprite.scaleX = radius * 2 / headSprite.width;
headSprite.scaleY = radius * 2 / headSprite.height;
//
if (!Main.gebug) parent.addChild(headSprite);

//
head = Tools.createCircle(location.x, location.y, radius, 0, 0, 0, false , true , Main.RagdolMaterial);
//
Main.world.addObject(head);
parent.addChild(head.graphic);

//
super(head, headSprite);
}

}

* This source code was highlighted with Source Code Highlighter .

public class Head extends Actor { public var head:PhysObj; [Embed(source = '../../../../lib/ragdol.swf' , symbol = 'Ragdoll' )] public var _headSprite: Class; public function Head(parent:DisplayObjectContainer , location:Point, dimension:Point, initVel:Point) { var radius:Number = dimension.y / 2; // HEAD ------------------------------------------------------------------------------- var headSprite:Sprite = new _headSprite(); headSprite.scaleX = radius * 2 / headSprite.width; headSprite.scaleY = radius * 2 / headSprite.height; // if (!Main.gebug) parent.addChild(headSprite); // head = Tools.createCircle(location.x, location.y, radius, 0, 0, 0, false , true , Main.RagdolMaterial); // Main.world.addObject(head); parent.addChild(head.graphic); // super(head, headSprite); } } * This source code was highlighted with Source Code Highlighter .

शरीर के सभी हिस्सों का वर्णन उसी तरह किया जाता है।
अंतरिक्ष को बचाने के लिए, मैं यहां सभी भागों का वर्णन नहीं करूंगा। उन्हें तरह तरह से देखा जा सकता है।

एक Ragdoll ऑब्जेक्ट बनाएं जो पूरे शरीर का वर्णन करेगा। उनके बीच का संबंध।

public class Ragdol extends Actor
{
//
public var _actors:Array;
// .
private var pj:PivotJoint;

// . .
public var rost:Number = 200.0;

// . .

public function Ragdol(parent:DisplayObjectContainer , loc:Point, initVel:Point)
{
// . .
var maxBias:Number = 0.1;
var maxForce:Number = 1e+9;

// .

//
_actors.push( new Head(parent, new Point( head_x, head_y ), new Point(0, dhead), new Point(0, 0)));
_actors.push( new Torso1(parent, new Point( torso1_x, torso1_y ), new Point(ttorso, dtorso1), new Point(0, 0)));
_actors.push( new Torso2(parent, new Point( torso2_x, torso2_y ), new Point(ttorso, dtorso2), new Point(0, 0)));
_actors.push( new Torso3(parent, new Point( torso3_x, torso3_y ), new Point(ttorso, dtorso3), new Point(0, 0)));

_actors.push( new ArmLup(parent, new Point( l_arm_up_x, l_arm_up_y ), new Point(tarm, darm), new Point(0, 0)));
_actors.push( new ArmLmid(parent, new Point( l_arm_low_x, l_arm_low_y ), new Point(tarm, darm), new Point(0, 0)));
_actors.push( new ArmRup(parent, new Point( r_arm_up_x, r_arm_up_y ), new Point(tarm, darm), new Point(0, 0)));
_actors.push( new ArmRmid(parent, new Point( r_arm_low_x, r_arm_low_y ), new Point(tarm, darm), new Point(0, 0)));

_actors.push( new LegLup(parent, new Point(l_leg_up_x, l_leg_up_y), new Point(tleg, dleg), new Point(0, 0)));
_actors.push( new LegLlow(parent, new Point(l_leg_low_x, l_leg_low_y), new Point(tleg, dleg), new Point(0, 0)));
_actors.push( new LegRup(parent, new Point(r_leg_up_x, r_leg_up_y), new Point(tleg, dleg), new Point(0, 0)));
_actors.push( new LegRlow(parent, new Point(r_leg_low_x, r_leg_low_y), new Point(tleg, dleg), new Point(0, 0)));

//
//Head to torso1
pj = new PivotJoint(_actors[0].head, _actors[1].torso1, new Vec2(head_x, head_y + dhead/2));
pj.maxBias = maxBias;
pj.maxForce = maxForce;
Main.world.addConstraint(pj);

// .
// . .

super( null , null );

}

}

* This source code was highlighted with Source Code Highlighter .

public class Ragdol extends Actor { // public var _actors:Array; // . private var pj:PivotJoint; // . . public var rost:Number = 200.0; // . . public function Ragdol(parent:DisplayObjectContainer , loc:Point, initVel:Point) { // . . var maxBias:Number = 0.1; var maxForce:Number = 1e+9; // . // _actors.push( new Head(parent, new Point( head_x, head_y ), new Point(0, dhead), new Point(0, 0))); _actors.push( new Torso1(parent, new Point( torso1_x, torso1_y ), new Point(ttorso, dtorso1), new Point(0, 0))); _actors.push( new Torso2(parent, new Point( torso2_x, torso2_y ), new Point(ttorso, dtorso2), new Point(0, 0))); _actors.push( new Torso3(parent, new Point( torso3_x, torso3_y ), new Point(ttorso, dtorso3), new Point(0, 0))); _actors.push( new ArmLup(parent, new Point( l_arm_up_x, l_arm_up_y ), new Point(tarm, darm), new Point(0, 0))); _actors.push( new ArmLmid(parent, new Point( l_arm_low_x, l_arm_low_y ), new Point(tarm, darm), new Point(0, 0))); _actors.push( new ArmRup(parent, new Point( r_arm_up_x, r_arm_up_y ), new Point(tarm, darm), new Point(0, 0))); _actors.push( new ArmRmid(parent, new Point( r_arm_low_x, r_arm_low_y ), new Point(tarm, darm), new Point(0, 0))); _actors.push( new LegLup(parent, new Point(l_leg_up_x, l_leg_up_y), new Point(tleg, dleg), new Point(0, 0))); _actors.push( new LegLlow(parent, new Point(l_leg_low_x, l_leg_low_y), new Point(tleg, dleg), new Point(0, 0))); _actors.push( new LegRup(parent, new Point(r_leg_up_x, r_leg_up_y), new Point(tleg, dleg), new Point(0, 0))); _actors.push( new LegRlow(parent, new Point(r_leg_low_x, r_leg_low_y), new Point(tleg, dleg), new Point(0, 0))); // //Head to torso1 pj = new PivotJoint(_actors[0].head, _actors[1].torso1, new Vec2(head_x, head_y + dhead/2)); pj.maxBias = maxBias; pj.maxForce = maxForce; Main.world.addConstraint(pj); // . // . . super( null , null ); } } * This source code was highlighted with Source Code Highlighter .

5. रेज्डॉल का उपयोग।

सरलतम परीक्षण के लिए, माउस क्लिक हैंडलर जोड़ें।

private function onClick(e:MouseEvent): void
{
_ragdolActors.push( new Ragdol( this , new Point(mouseX, mouseY), new Point(0, 0)));
}

* This source code was highlighted with Source Code Highlighter .

private function onClick(e:MouseEvent): void { _ragdolActors.push( new Ragdol( this , new Point(mouseX, mouseY), new Point(0, 0))); } * This source code was highlighted with Source Code Highlighter .

जो स्क्रीन पर एक रेजडोल जोड़ता है।

काम करने के लिए भौतिक दुनिया के लिए, हम अपडेट हैंडलर का वर्णन करते हैं।

private function update(e:Event): void
{
//
world.step(timeStep);

//
for ( var i: int = 0; i < _ragdolActors.length; i++ ) {

for ( var r: int = 0; r < _ragdolActors[i]._actors.length; r++ ) {
_ragdolActors[i]._actors[r].Update();
}

}

}

* This source code was highlighted with Source Code Highlighter .

private function update(e:Event): void { // world.step(timeStep); // for ( var i: int = 0; i < _ragdolActors.length; i++ ) { for ( var r: int = 0; r < _ragdolActors[i]._actors.length; r++ ) { _ragdolActors[i]._actors[r].Update(); } } } * This source code was highlighted with Source Code Highlighter .

रागडोल बनाने का सबसे सरल उदाहरण खत्म हो गया है।

निम्नलिखित लिंक उदाहरण हैं:
Box2D पर regdol
solverit.ru/swf
regdol nape पर
solverit.ru/swf2

दोनों उदाहरणों के स्रोत समान हैं, विभिन्न भौतिक पुस्तकालयों के अपवाद के साथ। तो प्रदर्शन में अंतर का अनुमान लगाया जा सकता है।

FlashDevelop के लिए प्रोजेक्ट स्रोत
solverit.ru/files/RagdollNape.zip

पीएस बेशक, नप अभी भी बहुत छोटा है। और कुछ समस्याएं हैं, उदाहरण के लिए, गिरने वाली वस्तुओं के साथ, लेकिन उनकी क्षमता बहुत बड़ी है।

फ्लैश पर भौतिकी। AS3 पर Nape में Ragdoll बनाएं

More articles: