👨🏽‍🌾 👁️ 🐃 लाजर - स्प्राइट एनीमेशन के लिए एक घटक लिखना 👩🏼‍🚀 🚂 ➿

इसके बजाय अग्रदूत

ओडेसा स्कूल में, कंप्यूटर विज्ञान के पाठों में 8 वीं कक्षा के छात्र नि: शुल्क लाजर क्रॉस-प्लेटफॉर्म डेवलपमेंट एन्वायरमेंट ( आधिकारिक साइट ) का उपयोग करते हैं, जो कई डेल्फी द्वारा प्रिय को पसंद करता है और फ्री पास्कल नामक ऑब्जेक्ट पास्कल के संस्करण का उपयोग करता है और वास्तव में प्रोग्रामिंग में प्रवेश करने की प्रक्रिया को सरल करता है।

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

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

लाजर में मानक घटकों के एक सूखे व्यापार सेट के बजाय मज़ेदार ग्राफिक सामग्री प्रदर्शित करने के लिए (डेल्फी में) अतिरिक्त टैब पर 3 घटक हैं:
- TImage (एक मनमाना फ़ाइल से एक चित्र प्रदर्शित);
- TShape (कई पूर्वनिर्धारित ग्राफिक आदिम में से एक का प्रदर्शन);
- TPaintBox (एक कैनवास प्रदर्शित करना, जिस पर आप प्रोग्राम बना सकते हैं)।

एक छात्र के लिए सबसे शानदार बात यह है कि TImage में एक छोटे से स्प्राइट को लोड करना है और इसे स्क्रीन के चारों ओर ले जाने के लिए एक प्रोग्राम लिखना है - माउस / कीबोर्ड इवेंट्स के अनुसार, लूप में स्वचालित रूप से या टाइमर से एक इवेंट द्वारा स्वचालित रूप से।

जैसे ही यह काम करना शुरू करता है, छात्र के पास निम्नलिखित वैध प्रश्न होते हैं: क्या चरित्र को स्थानांतरित करना संभव है? और क्या इसे बनाना संभव है ताकि वह लगातार हमें न देखे, लेकिन उस दिशा में मुड़ जाए जो आंदोलन की दिशा से मेल खाता है?

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

यहां एक उदाहरण छवि है जहां स्प्राइट्स को टेबल के रूप में व्यवस्थित किया जाता है, जिसमें प्रत्येक पंक्ति एक निश्चित प्रक्षेपण से मेल खाती है, और प्रत्येक स्तंभ एक निश्चित एनीमेशन चरण से मेल खाती है:

इतनी तस्वीरें क्यों?

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

दुर्भाग्य से, TImage घटक, जो मानक लाजर (और डेल्फी) वितरण का हिस्सा है, एक छवि के मनमाने टुकड़े को दिखाने की अनुमति नहीं देता है: इसके गुणों को बदलते हुए, हम इसे केवल संपूर्ण छवि, ऊपरी बाएं कोने या इसके मध्य भाग को दिखाने के लिए बाध्य कर सकते हैं। दोनों अक्षों के साथ ऑफसेट और आयामों द्वारा परिभाषित छवि का एक मनमाना टुकड़ा प्रदर्शित करने के लिए, आपको कुछ अन्य घटक की आवश्यकता है। लेकिन, जैसा कि यह निकला, खुद को लाजर में करना मुश्किल नहीं है!

एक नया घटक बनाएँ

घटक बनाने के लिए एक निर्देश के रूप में, मैंने आधिकारिक गाइड का उपयोग किया।

वहाँ सब कुछ पर्याप्त विस्तार से लिखा गया है, दोहराव का कोई मतलब नहीं है। मैं केवल कुछ बिंदुओं पर ध्यान केन्द्रित करूंगा।

1. मानक प्रोजेक्ट विज़ार्ड हमें पैकेज बनाने की पेशकश नहीं करता है, और किसी तरह संपादक तक पहुंच प्राप्त करने के लिए, "नया प्रोजेक्ट" चुनें (रूसी संस्करण में - "नई परियोजना")

और फिर "आवेदन" (रूसी संस्करण में - "आवेदन"):

2. "पैकेज" मेनू में (रूसी संस्करण में - "पैकेज") निर्देशों के अनुसार आगे की कार्रवाई करते हुए, ऊपरी आइटम "नया पैकेज ..." का चयन करें (रूसी संस्करण में - "नया पैकेज ..."), फ़ाइल नाम और पथ का चयन करें। बचाने के लिए। मैंने अपने नए पैकेज का नाम "गेम" रखा और इसे एक ही नाम के साथ एक अलग फ़ोल्डर में रखा:

मैंने इस उम्मीद के साथ एक अलग लाजर / सीएमपी फ़ोल्डर बनाया कि मेरे पास घटकों के साथ कई अलग-अलग पैकेज हो सकते हैं, और पहले से ही इस फ़ोल्डर में "गेम" फ़ोल्डर बनाया है।

यदि सब कुछ सही ढंग से किया जाता है, तो स्क्रीन पर एक नए (अब तक खाली) पैकेज की एक खिड़की दिखाई देनी चाहिए।

3. निर्देशों के अनुसार फिर से आगे बढ़ना, पैकेज विंडो में एक नया घटक बनाने के लिए, जोड़ें बटन पर क्लिक करें (रूसी संस्करण में - "जोड़ें") और ड्रॉप-डाउन सूची में "नया घटक" चुनें (रूसी संस्करण में - "नया घटक"):

हम पूर्वजों की श्रेणी के रूप में TCustomImage को निर्दिष्ट करते हैं - यह वर्ग वास्तव में TImage घटक को लागू करने के लिए उपयोग किया जाता है, लेकिन इसमें इससे भिन्न होता है कि इसमें प्रकाशित गुण नहीं होते हैं और हमें उन गुणों के सेट को निर्धारित करने की अनुमति देता है जो हमारे घटक के लिए डिजाइनर में उपलब्ध होंगे।

प्रकाशित गुण क्या हैं?

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

घटक के लिए चिह्न (आइकन)

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

सभी क्षेत्रों में भरने के बाद, "नया घटक बनाएं" बटन पर क्लिक करें (रूसी संस्करण में - "एक नया घटक बनाएं")।

नए घटक में कोड जोड़ें।

एक नया घटक बनाने के तुरंत बाद, इसका स्रोत कोड कुछ इस प्रकार है:

unit ImageFragment; {$mode objfpc}{$H+} interface uses Classes, SysUtils, LResources, Forms, Controls, Graphics, Dialogs; type TImageFragment = class(TCustomImage) private protected public published end; procedure Register; implementation procedure Register; begin RegisterComponents('Game', [TImageFragment]); end; end.

जैसा कि अपेक्षित था, वर्ग घोषणा पूरी तरह से खाली है, और कोई भी कार्यान्वयन नहीं है। वह सब "गेम" टैब पर घटक पंजीकरण फ़ंक्शन है।

हमें कई विरासत में प्रकाशित संपत्तियों को जोड़ने की जरूरत है, अपने स्वयं के दो और एक आभासी फ़ंक्शन को फिर से परिभाषित करें। चलो शुरू हो जाओ!

0. आयात अनुभाग में, हमें दो अतिरिक्त मॉड्यूल की आवश्यकता है: एक्स्ट्रोक्रेल्स और LCLProc - उन्हें उपयोग अनुभाग में जोड़ें:

 uses Classes, SysUtils, LResources, Forms, Controls, Graphics, Dialogs, ExtCtrls, LCLProc;

1. एक प्रकाशित गुण सूची जोड़ें, जो पूरी तरह से TImage घटक के समान है, कुछ गुणों को छोड़कर जो आपको छवि के पैमाने और स्थिति को बदलने की अनुमति देते हैं:

  published property AntialiasingMode; property Align; property Anchors; //property AutoSize; property BorderSpacing; //property Center; //property KeepOriginXWhenClipped; //property KeepOriginYWhenClipped; property Constraints; property DragCursor; property DragMode; property Enabled; property OnChangeBounds; property OnClick; property OnDblClick; property OnDragDrop; property OnDragOver; property OnEndDrag; property OnMouseDown; property OnMouseEnter; property OnMouseLeave; property OnMouseMove; property OnMouseUp; property OnMouseWheel; property OnMouseWheelDown; property OnMouseWheelUp; property OnPaint; property OnPictureChanged; property OnPaintBackground; property OnResize; property OnStartDrag; property ParentShowHint; property Picture; property PopupMenu; //property Proportional; property ShowHint; //property Stretch; //property StretchOutEnabled; //property StretchInEnabled; property Transparent; property Visible; end;

अनुनय के लिए, मैंने हटाया नहीं, लेकिन उन गुणों के बारे में टिप्पणी की जो TImage घटक में हैं, लेकिन हमारे नए TImageFragment घटक में हस्तक्षेप करेंगे।

2. क्षैतिज और ऊर्ध्वाधर छवि ऑफ़सेट सेट करने के लिए वर्ग घोषणा में दो नए गुण जोड़ें:

  private FOffsetX: Integer; FOffsetY: Integer; procedure SetOffsetX(AValue: Integer); procedure SetOffsetY(AValue: Integer); published property OffsetX: Integer read FOffsetX write SetOffsetX default 0; property OffsetY: Integer read FOffsetY write SetOffsetY default 0;

और कक्षा के कार्यान्वयन के लिए दो घोषित प्रक्रियाओं को जोड़ना न भूलें:

 implementation procedure TImageFragment.SetOffsetX(AValue: Integer); begin if FOffsetX = AValue then exit; FOffsetX := AValue; PictureChanged(Self); end; procedure TImageFragment.SetOffsetY(AValue: Integer); begin if FOffsetY = AValue then exit; FOffsetY := AValue; PictureChanged(Self); end;

3. हम वर्चुअल फ़ंक्शन डेस्टरेक्ट को फिर से परिभाषित करते हैं:

  public function DestRect: TRect; override;

और इसके कार्यान्वयन को वर्ग के कार्यान्वयन में जोड़ें:

 function TImageFragment.DestRect: TRect; begin Result := inherited DestRect(); if (FOffsetX <> 0) or (FOffsetY <> 0) then LCLProc.OffsetRect(Result, -FOffsetX, -FOffsetY); end;

पैकेज संकलित करें और लाजर का पुनर्निर्माण करें

1. पैकेज विंडो में, "संकलन" बटन पर क्लिक करें (रूसी संस्करण में - "संकलन")। यदि सब कुछ सही ढंग से किया जाता है, तो सफल संकलन के बारे में एक हरे रंग का संदेश संदेश विंडो में दिखाई देगा; यदि नहीं, तो संदेश पीला या लाल होगा।

2. एक ही विंडो में, "उपयोग करें" बटन पर क्लिक करें (रूसी संस्करण में - "उपयोग करें") और ड्रॉप-डाउन मेनू में दूसरा "इंस्टॉल" आइटम चुनें (रूसी संस्करण में - "इंस्टॉल करें")। कार्यक्रम IDE के पुनर्निर्माण और पुनः आरंभ करने की पेशकश करेगा - हम सहमत हैं:

3. पुनरारंभ करने के बाद, टूलबार पर एक नया "गेम" टैब दिखाई देगा, और उस पर - हमारे नए घटक के लिए एक आइकन।

एक आफ्टरवर्ड के बजाय

अगले लेख में लाजर द्वारा - TImageFragment घटक का उपयोग करते हुए एक सरल एनीमेशन, मैंने इस तरह के एक घटक का उपयोग करने के तरीके के बारे में बात की - 5 मिनट में एक विंडो बनाएं जिसमें एनिमेटेड चरित्र अलग-अलग दिशाओं में आगे बढ़ेगा और आंदोलन की दिशा में घूमेगा।

यदि विषय पाठकों के लिए दिलचस्प है, तो मैं इस श्रृंखला को एक लेख के साथ पूरक कर सकता हूं कि कैसे, थोड़ा और समय बिताने के बाद, आप कर सकते हैं, उदाहरण के लिए, कीबोर्ड-नियंत्रित फुटबॉल खिलाड़ियों के एक जोड़े के साथ एक फुटबॉल मैदान।

और अगर पर्याप्त समय और इच्छा है - मैं विभिन्न चरित्र नियंत्रण एल्गोरिदम (उदाहरण के लिए, फुटबॉल खिलाड़ी) लिखने की कोशिश करूँगा और उनके लिए प्रतियोगिताओं की व्यवस्था करूँगा!

लाजर - स्प्राइट एनीमेशन के लिए एक घटक लिखना

इसके बजाय अग्रदूत

एक नया घटक बनाएँ

नए घटक में कोड जोड़ें।

पैकेज संकलित करें और लाजर का पुनर्निर्माण करें

एक आफ्टरवर्ड के बजाय

More articles: