📲 🍺 🧑🏽‍🤝‍🧑🏼 Inkscape प्लगइन पर आधारित एक साधारण स्तर का संपादक बनाना 👨🏾‍🔬 ⚓️ 🏷️

प्रविष्टि
मुझे लगता है कि कई प्रोग्रामर ने अपना गेम बनाने की कोशिश की है या किया है। आमतौर पर यह प्रक्रिया उस क्षण के लिए आती है जब सब कुछ का मुख्य भाग लिखा जाता है, और आपको भवन स्तर, खेल के दृश्य आदि बनाने की आवश्यकता होती है। यदि आप तैयार समाधानों का उपयोग करते हैं, तो बॉक्स से बाहर - उदाहरण के लिए, एकता, तो कोई समस्या नहीं है। लेकिन लाइसेंस के साथ समस्याएं हो सकती हैं, विभिन्न प्लेटफार्मों के लिए समर्थन - शायद कोई लिनक्स / मैक के लिए कुछ करने की कोशिश करना चाहता है, जहां सही समाधान खोजना हमेशा संभव नहीं होता है। हां, और शुरुआत के लिए यह अधिक दिलचस्प है कि खुद के लिए अनुकूलित, कार्यक्षमता विकसित करने और निर्माण करने में आसान, अपने स्वयं के कुछ का उपयोग करने के लिए igrodelov। खुद के लिए, मुझे अपने खुद के छोटे इंकस्केप प्लगइन को लिखने के रूप में एक समाधान मिला।
अपने खाली समय में मुझे AS3 में लिखी अपनी लाइब्रेरी में खुदाई करने में दिलचस्पी है - हाँ, हाँ, फ्लैश: डी। लाइब्रेरी बॉक्स 2 डी भौतिकी इंजन के लिए एक आवरण के रूप में मौजूद है, यह उपयोगी सब कुछ का एक गुच्छा का उपयोग करता है - अपनी खुद की राज्य-मशीन, प्रोग्राम एनीमेशन के लिए ट्विनर्स के लिए छोटे रैपर और एक कण प्रणाली। सिद्धांत रूप में, कुछ खेलने योग्य, छोटे और स्टाइलिश अपने स्वाद के लिए किया जा सकता है। चूंकि मुझे ओपनसोर्स और सुविधा पसंद है, इसलिए मैं FlashDevelop में कार्यक्रम करता हूं। स्वाभाविक रूप से, ग्राफिक्स संपादक नहीं है। और यह अपने स्वयं के मापदंडों के साथ वस्तुओं को बनाने में शायद ही मदद करेगा। मुझे Inkscape, इसकी प्रतिरूपता, प्लग-इन और स्वयं SVG के लिए - XML खुद, पार्सिंग के लिए आसान याद आया। मैंने Inkscape के लिए एक प्लगइन लिखने का फैसला किया।

समस्याओं
"के बारे में" जानकारी के लिए खोज शुरू, मैं बहुत कम पाया, "हैलो वर्ल्ड प्लगइन" का एक पूरा उदाहरण है, और बाकी सब कुछ खराब संरचित है, और अंग्रेजी में है। और प्लगइन्स के लिए स्क्रिप्टिंग भाषा के रूप में अजगर। कार्यात्मक और टाइप्ड नहीं, डरावनी। आप रूबल में प्लगइन्स लिख सकते हैं, कोशिश नहीं की है। लेकिन उदाहरण की जांच करने और इंकस्केप के साथ स्थापित तैयार किए गए मॉड्यूल को देखा, तो मुझे महसूस हुआ कि सब कुछ इतना बुरा नहीं है। आपको केवल परतों और आकारों के साथ काम करने के लिए सही तरीके खोजने की ज़रूरत है, यह निर्धारित करें कि आप वास्तव में क्या करना चाहते हैं, और इसे प्रोग्राम करें। अगला, पारसीम आवेदन में, तैयार एसवीजी / एक्सएमएल - चूंकि सभी भाषाओं में इस तरह के उद्देश्यों के लिए उत्कृष्ट उपकरण हैं, हम जहां आवश्यक होते हैं - मुझे एक विशेष निर्माता है, और मैं कर रहा हूं।

समाप्त एसवीजी संरचना
मैंने एसवीजी में प्रत्येक स्तर को एक अलग परत के रूप में निर्धारित करने का निर्णय लिया, प्लगइन बनाते समय इस पर विचार करना महत्वपूर्ण है। भौतिक वस्तु संसारों को गोल, चौकोर और जटिल (एक उत्तल बहुभुज या कई आकार में कई प्रकार के बहुभुज) - Box2D आवश्यकताओं के रूप में लिया जा सकता है। और निश्चित रूप से, मापदंडों का एक गुच्छा - दोनों भौतिक और हमारा। ऑब्जेक्ट एसवीजी के लिए हमेशा की तरह चलते हैं, आम तौर पर संपादक में प्रदर्शित होते हैं और कस्टम टैग और मापदंडों का एक गुच्छा होता है। विभिन्न प्रकार के शरीर को उजागर करना सुविधाजनक है - गतिशील, स्थिर, उन्हें विभिन्न रंगों में उजागर करना। अब तक, केवल गोल निकायों और वर्ग के लिए समर्थन लागू किया गया था।
महत्वपूर्ण : अंतिम एसवीजी को स्थानांतरित करने और घुमाने के लिए इनक्सस्केप के संचालन के दौरान, निकायों के पैरामीटर सीधे नहीं बदलते हैं। सब कुछ रोटेशन के लिए परिवर्तन मैट्रिक्स मैट्रिक्स और शरीर को स्थानांतरित करने के लिए अनुवाद संपत्ति के माध्यम से जाता है। स्वाभाविक रूप से, इस तरह के डेटा को पार्स करते समय, आपको थोड़ा सा मैट्रिक्स गणित लागू करने की आवश्यकता होती है।

प्लगइन संरचना
Inkscape के प्लगइन में दो भाग होते हैं, दो फाइलें - उदाहरण के लिए, my_super_plugin.py और my_super_plugin.inx । My_super_plugin.inx फ़ाइल विशेष XML टैग्स के सेट के रूप में मौजूद है, जो जावा में सेम के समान है। यह प्लगइन के जीयूआई विंडो, डेटा इनपुट पैरामीटर, बटन प्रकार आदि को सेट करता है। नीचे दिया गया स्क्रीनशॉट "मेरे दिमाग की उपज" दिखाता है।

My_super_plugin.py फ़ाइल SVG फ़ाइल के साथ काम करने के लिए वास्तविक स्क्रिप्ट सेट करती है। स्क्रिप्ट इसे इनपुट पर ले जाती है, आवश्यक कार्रवाई करती है और इसे आउटपुट पर भेजती है, इंकस्केप सब कुछ आकर्षित करता है। तेज और सुंदर। जैसा कि मैं इसे समझता हूं, स्क्रिप्ट में, कोड और इंकस्केप इंकमेक्सहोम मॉड्यूल के माध्यम से जुड़े हुए हैं। संपादक के लिए दस्तावेज़ीकरण के आधिकारिक पृष्ठों पर, my_super_plugin.py और my_super_plugin.inx के लिए आवश्यक डेटा प्रकारों (नीचे दिए गए लिंक) को समझाया गया है ।

आईएनएक्स
मैंने अपनी .inx फ़ाइल का कोड फैलाया है:

कोड

<inkscape-extension> <_name>PF Editor</_name> <id>org.pf.inkscape.plugins.pf_plugin</id> <dependency type="executable" location="extensions">pf_plugin.py</dependency> <dependency type="executable" location="extensions">inkex.py</dependency> <param name="layer_name" type="string" _gui_text="Layer name">Game objects</param> <param name="obj_name" type="string" _gui_text="Object name">Object1</param> <param name="obj_width" type="int" _gui-text="Width" min="10" max="12000">30</param> <param name="obj_height" type="int" _gui-text="Height" min="10" max="12000">30</param> <param name="obj_radius" type="int" _gui-text="Radius" min="10" max="12000">30</param> <param name="obj_posX" type="int" _gui-text="PosX" min="0" max="12000">30</param> <param name="obj_posY" type="int" _gui-text="PosY" min="0" max="12000">30</param> <param name="obj_density" type="float" _gui-text="Density" min="0" max="1">0.5</param> <param name="obj_friction" type="float" _gui-text="Friction" min="0" max="1">0.5</param> <param name="obj_restitution" type="float" _gui-text="Restitution" min="0" max="1">0.5</param> <param name="obj_isSensor" type="boolean" _gui-text="Sensor body">false</param> <param name="obj_isRotable" type="boolean" _gui-text="Rotable body">false</param> <param name="obj_type" type="enum" _gui-text="Object type"> <_item value="SQUARE">Square</_item> <_item value="CIRCLE">Circle</_item> </param> <param name="obj_d_type" type="enum" _gui-text="Static/Dynamic"> <_item value="STATIC">Static</_item> <_item value="DYNAMIC">Dynamic</_item> </param> <param name="obj_hasImage" type="boolean" _gui-text="Has image">false</param> <effect> <object-type>all</object-type> <effects-menu> <submenu _name="PF Plugins"/> </effects-menu> </effect> <script> <command reldir="extensions" interpreter="python">pf_plugin.py</command> </script> </inkscape-extension>

मुझे लगता है कि यहां सब कुछ स्पष्ट है। pf_plugin.py, inkex.py मॉड्यूल के लिए निर्भरता निर्दिष्ट करती हैं - वास्तव में, क्या लोड किया जाएगा। <param name="obj_d_type" type="enum" _gui-text="Static/Dynamic"> में enum प्रॉपर्टी है - एक ड्रॉप-डाउन सूची बाहरी रूप से सेट की गई है। जब आप ओके पर क्लिक करते हैं, तो सभी पैरामीटर इनपुट से पाइथन स्क्रिप्ट पर जाते हैं, ड्रॉप-डाउन सूची में वर्तमान मान भी एक पैरामीटर है। परम नाम मान को अजगर लिपि में होने के रूप में घोषित मापदंडों से मेल खाना चाहिए। अरे हाँ, प्लगइन में नेत्रहीन आप टैब बना सकते हैं - मैंने इसकी कोशिश की, यह मुझे सूट नहीं किया।

PY
अब मैं अपनी स्क्रिप्ट दिखाऊंगा जिसमें फ़ाइल को स्तरों के साथ टैग करने का सारा काम है:

कोड

 import sys sys.path.append('/usr/share/inkscape/extensions') import inkex class PFEditor(inkex.Effect): def __init__(self): inkex.Effect.__init__(self) self.OptionParser.add_option('--layer_name', action='store', type='string', dest='layer_name', default='Game objects', help='Layer name which objects append to') self.OptionParser.add_option('--obj_name', action='store', type='string', dest='obj_name', default='Object', help='Object name') self.OptionParser.add_option('--obj_width', action='store', type='int', dest='obj_width', default=30, help='Object width') self.OptionParser.add_option('--obj_height', action='store', type='int', dest='obj_height', default=30, help='Object height') self.OptionParser.add_option('--obj_radius', action='store', type='int', dest='obj_radius', default=30, help='Object radius') self.OptionParser.add_option('--obj_posX', action='store', type='int', dest='obj_posX', default=30, help='PosX') self.OptionParser.add_option('--obj_posY', action='store', type='int', dest='obj_posY', default=30, help='PosY') self.OptionParser.add_option('--obj_type', action='store', type='string', dest='obj_type', default='SQUARE', help='Object type') self.OptionParser.add_option('--obj_d_type', action='store', type='string', dest='obj_d_type', default='STATIC', help='Static/Dynamic') self.OptionParser.add_option('--obj_density', action='store', type='float', dest='obj_density', default=0.5, help='Density') self.OptionParser.add_option('--obj_friction', action='store', type='float', dest='obj_friction', default=0.5, help='Friction') self.OptionParser.add_option('--obj_restitution', action='store', type='float', dest='obj_restitution', default=0.5, help='Restitution') self.OptionParser.add_option('--obj_isSensor', action='store', type='inkbool', dest='obj_isSensor', default=False, help='Sensor body') self.OptionParser.add_option('--obj_isRotable', action='store', type='inkbool', dest='obj_isRotable', default=True, help='Rotable body') self.OptionParser.add_option('--obj_hasImage', action='store', type='inkbool', dest='obj_hasImage', default=False, help='Body has image') def pfbTypes(self, x): return { 'STATIC' : '#00ff00', 'DYNAMIC' : '#ff0000', 'SQUARE' : 'SQUARE', 'CIRCLE' : 'CIRCLE' }.get(x, 0) def pfbType_SVG(self, x): return { 'SQUARE' : 'rect', 'CIRCLE' : 'circle' }.get(x, 'rect') def concat_style(self, style): # @NoSelf style_str = '' for stl in style: style_str += stl + ':' + style[stl] + ';' style_str = style_str[:-1] return style_str def generate_object(self, w, h, r, x, y, density, friction, restitution, isSensor, isRotable, parent, type, d_type, name, hasImage): # @NoSelf style = { 'fill' : self.pfbTypes(d_type), 'fill-rule' :'evenodd', 'stroke' :'000000', 'stroke-width' :'0px', 'stroke-linecap' :'butt', 'stroke-linejoin' :'miter', 'stroke-opacity' :'0' } attribs = { 'type' : type, 'd_type' : d_type, 'height' : str(h), 'width' : str(w), 'density' : str(density), 'friction' : str(friction), 'restitution' : str(restitution), 'isSensor' : str(isSensor).lower(), 'isRotable' : str(isRotable).lower(), 'hasImage' : str(hasImage).lower(), 'name' : name, 'style' : self.concat_style(style), } if d_type == 'DYNAMIC': attribs['isDynamic'] = 'true' else: attribs['isDynamic'] = 'false' if type == 'SQUARE' : attribs['x'] = str(x); attribs['y'] = str(y); if type == 'CIRCLE' : attribs['cx'] = str(x); attribs['cy'] = str(y); attribs['r'] = str(r); obj = inkex.etree.SubElement(parent, inkex.addNS(self.pfbType_SVG(type), 'svg'), attribs) def effect(self) : layer_name = self.options.layer_name obj_name = self.options.obj_name obj_width = self.options.obj_width obj_height = self.options.obj_height obj_radius = self.options.obj_radius obj_posX = self.options.obj_posX obj_posY = self.options.obj_posY obj_type = self.options.obj_type obj_d_type = self.options.obj_d_type obj_density = self.options.obj_density obj_friction = self.options.obj_friction obj_restitution = self.options.obj_restitution obj_isSensor = self.options.obj_isSensor obj_isRotable = self.options.obj_isRotable obj_hasImage = self.options.obj_hasImage svg = self.document.getroot() d_root = self.document.getroot() layer = None iter = 0 for item in d_root: if (item.attrib.get('id') == 'pf_go_id' and item.attrib.get('level_name') == layer_name): layer = item iter += 1 break if(iter == 0): layer = inkex.etree.SubElement(svg, 'g') layer.set(inkex.addNS('id'), 'pf_go_id') layer.set(inkex.addNS('level_name'), layer_name) layer.set(inkex.addNS('label', 'inkscape'), layer_name) layer.set(inkex.addNS('groupmode', 'inkscape'), 'layer') self.generate_object(obj_width, obj_height, obj_radius, obj_posX, obj_posY, obj_density, obj_friction, obj_restitution, obj_isSensor, obj_isRotable, layer, obj_type, obj_d_type, obj_name, obj_hasImage) effect = PFEditor() effect.affect()

फ़ॉर्म की पंक्तियाँ

self.OptionParser.add_option('--layer_name', action='store',
type='string', dest='layer_name', default='Game objects',
help='Layer name which objects append to')

self.OptionParser.add_option('--layer_name', action='store',
type='string', dest='layer_name', default='Game objects',
help='Layer name which objects append to')

self.OptionParser.add_option('--layer_name', action='store',
type='string', dest='layer_name', default='Game objects',
help='Layer name which objects append to')

आने वाले मापदंडों को निर्दिष्ट करते हैं, उनका प्रकार (.inx मैच के नाम के साथ पैरामीटर नाम)। इसके अलावा, प्रभाव समारोह में, स्क्रिप्ट के लिए डेटा इनपुट चर में crammed है। तब मैं

for item in d_root:
if (item.attrib.get('id') == 'pf_go_id' and item.attrib.get('level_name') == layer_name)

लिए कुछ

for item in d_root:
if (item.attrib.get('id') == 'pf_go_id' and item.attrib.get('level_name') == layer_name)

for item in d_root:
if (item.attrib.get('id') == 'pf_go_id' and item.attrib.get('level_name') == layer_name)

for item in d_root:
if (item.attrib.get('id') == 'pf_go_id' and item.attrib.get('level_name') == layer_name)

: SVG में परतों में id संपत्ति होती है, और वहाँ बिल्कुल 'pf_go_id' , स्तरों के साथ "खुद की परतों" की पहचान की सादगी। यदि परत पहले से मौजूद है, तो हम इसमें नई वस्तुएँ जोड़ेंगे, यदि नहीं, तो एक नई परत बनाएँ, "स्तर", और इसके साथ काम करें। निम्न पंक्तियाँ एक परत बनाती हैं, और पहले से ही जनरेट_बॉजेक्ट फ़ंक्शन के अंदर मैं ऑब्जेक्ट बनाती हैं। मुझे लगता है कि वहां सब कुछ स्पष्ट है।

एसवीजी
और, वास्तव में, उत्पन्न SVG फ़ाइल का एक उदाहरण:

कोड

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="630" height="480" id="svg2" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="levels_tmp.svg"> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.98994949" inkscape:cx="60.920287" inkscape:cy="223.06442" inkscape:document-units="px" inkscape:current-layer="pf_go_id" showgrid="false" inkscape:window-width="1366" inkscape:window-height="716" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <defs id="defs4" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title /> </cc:Work> </rdf:RDF> </metadata> <g id="pf_go_id" level_name="Menu" inkscape:label="Menu" inkscape:groupmode="layer" style="display:inline"> <circle transform="translate(194.95944,151.52288)" sodipodi:ry="40" sodipodi:rx="40" sodipodi:cy="40" sodipodi:cx="40" isSensor="false" isRotable="true" height="10" cy="40" cx="40" friction="0.5" restitution="0.5" style="fill:#00ff00;fill-rule:evenodd;stroke-width:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0" name="Object1" density="0.5" isDynamic="false" width="100" r="40" type="CIRCLE" d_type="STATIC" hasImage="false" id="circle3294" /> <rect id="rect2997" hasImage="false" d_type="DYNAMIC" type="SQUARE" x="4.7976952" y="405.67188" width="100" isDynamic="true" density="0.5" name="Object2" style="fill:#ff0000;fill-rule:evenodd;stroke-width:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0" restitution="0.5" friction="0.5" height="10" isRotable="true" isSensor="false" transform="matrix(0.88912747,-0.45765964,0.45765964,0.88912747,0,0)" /> <rect isSensor="false" isRotable="true" height="10" friction="0.5" restitution="0.5" style="fill:#00ff00;fill-rule:evenodd;stroke-width:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0" name="Object2" density="0.5" isDynamic="false" width="300" y="391.62952" x="173.53809" type="SQUARE" d_type="STATIC" hasImage="false" id="rect3011" /> </g> <g inkscape:groupmode="layer" inkscape:label="Level_1" level_name="Level_1" id="g3027"> <circle id="circle3029" hasImage="false" d_type="DYNAMIC" type="CIRCLE" r="30" width="300" isDynamic="true" density="0.5" name="Object1" style="stroke-linejoin:miter;stroke-opacity:0;fill-rule:evenodd;stroke:000000;stroke-linecap:butt;stroke-width:0px;fill:#ff0000" restitution="0.5" friction="0.5" cx="120" cy="130" height="10" isRotable="true" isSensor="false" /> </g> </svg>

यदि आप इसे संपादक में लोड करते हैं, तो हम कई ऑब्जेक्ट और दो लेयर्स देखेंगे - स्तर मेनू और Level_1। हरे रंग की आकृतियाँ गतिहीन होंगी, लाल चलती होंगी। मेरे पास isSensor बॉडी पैरामीटर है , मैंने इसे उजागर नहीं किया, हालांकि आप नेत्रहीन रूप से पारदर्शिता जोड़ सकते हैं। मेनू लेयर पर, आयतों को घुमाया और घुमाया जाता है - इसलिए मैट्रिक्स और ट्रांसलेशन गुण रेक्ट टैग के अंदर दिखाई देते हैं। जैसा कि आप जानते हैं, वे क्रमशः रोटेशन के लिए जिम्मेदार हैं (और न केवल), और आंदोलन के लिए। पहले से ही लक्ष्य एप्लिकेशन में हम सब कुछ पढ़ते हैं और संसाधित करते हैं। हम मैट्रिस के लिए कक्षाएं लिखते हैं और फार्म के एक मैट्रिक्स समीकरण को हल करते हैं एक्स = बी (: डी)। वहां से हमें निकायों के वास्तविक निर्देशांक और रोटेशन के कोण मिलते हैं। यदि यह दिलचस्प है, तो मैं आपको बताऊंगा कि यह एएस 3 पर कैसे किया जाए, क्योंकि अब यह पद बहुत बड़ा है।

संदर्भ
इंटरनेट पर खोज करके, आप पूरी तरह से पता लगा सकते हैं कि क्या और कहाँ है। आपको एप्लिकेशन के समन्वय प्रणालियों के बीच का अंतर भी देखना होगा, जिसके लिए हम स्तर संपादक और इंकस्केप - एक्सिस, ऑब्जेक्ट्स के केंद्र, रोटेशन कोण लिखते हैं। मुख्य लिंक:
wiki.inkscape.org/wiki/index.php/Script_extensions
wiki.inkscape.org/wiki/index.php/PythonEffectTutorial
wiki.inkscape.org/wiki/index.php/Generating_objects_from_extensions
wiki.inkscape.org/wiki/index.php/INX_extension_descriptor_format
docs.python.org/2/library/xml.etree.elementtree.html
wiki.inkscape.org/wiki/index.php/INX_Parameters
www.w3schools.com/svg/svg_rect.asp
developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Inkscape प्लगइन पर आधारित एक साधारण स्तर का संपादक बनाना

More articles: