लाजर - TImageFragment घटक का उपयोग करते हुए सरल एनीमेशन

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

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

चयनित विषय को जारी रखते हुए, इस लेख में मैं यह दिखाना चाहता हूं कि इस घटक का उपयोग करके लाजर के विकास के वातावरण ( आधिकारिक साइट ) में स्प्राइट्स का एनीमेशन बनाना कितना आसान है।

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

इन तैयार चित्रों में से कई वेब पर मिल सकते हैं - उदाहरण के लिए, यहां इस साइट पर ।

छवि का चयन करें (और तैयार करें)

अपने उदाहरण के लिए, मैंने इस छवि को चुना:

- बहुत ही स्पष्ट रूप से यह फीनिक्स पक्षी अपने पंख फड़फड़ाता है।

जैसा कि आप देख सकते हैं, प्रत्येक पंक्ति में 4 में से प्रत्येक के लिए 4 फ़्रेम होते हैं। केवल ऑफसेटसेट को बदलकर, आप पक्षी को अपने पंखों को फड़फड़ा सकते हैं, और प्रक्षेपण को बदलने के लिए केवल ऑफसेट को बदलने के लिए पर्याप्त है। तर्ज द्वारा फ़्रेमों का यह पृथक्करण एनीमेशन की प्रोग्रामिंग को बहुत सरल करता है।

इस छवि का आकार 384x384 है, और प्रत्येक फ्रेम का आकार 96x96 है। दुर्भाग्य से, इस छवि का प्रत्यक्ष उपयोग हमें कलाकृतियों से परेशान करता है: छवि के कुछ फ़्रेमों को रखा गया है ताकि उनके किनारों को आसन्न फ्रेम पर पड़े, और एनीमेशन के दौरान, पीले स्ट्रोक स्ट्रोक के किनारों पर फ्लैश होते हैं।

इन दोषों को ठीक करने के लिए, मैंने मुफ्त क्रॉस-प्लेटफ़ॉर्म ग्राफिकल एडिटर GIMP ( आधिकारिक साइट ) का उपयोग किया। जो कुछ भी करना था वह उन स्थानों पर छवियों के फैलाने वाले पिक्सेल को हटाने के लिए था जहां वे आसन्न फ्रेम पर गिर गए थे।

सही फ़ाइल इस तरह दिखती है:



- नग्न आंखों के साथ, अंतर अदृश्य हैं, लेकिन कलाकृतियों के बिना दूसरा विकल्प काम करता है।

एक नया प्रोजेक्ट बनाएं

1. "एप्लिकेशन" प्रकार की एक नई परियोजना बनाएं।

डिफ़ॉल्ट रूप से, IDE "Project1" नामक एक प्रोजेक्ट बनाता है, जो तुरंत "Unit1" नामक एक प्रोग्राम मॉड्यूल बनाता है, "" TForm1 "नामक एक वर्ग का वर्णन करता है और" Form1 "नाम के साथ एक उदाहरण की घोषणा करता है।

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

तो, हमारी परियोजना को "प्रोजेक्ट 1" नहीं कहा जाएगा, लेकिन "फीनिक्स" - चयनित स्प्राइट के नाम के अनुसार।

2. हमारे नए प्रोजेक्ट को सहेजें।

प्रत्येक परियोजना को एक अलग निर्देशिका में एक नाम के साथ सहेजना उचित है जो परियोजना के नाम से मेल खाता है। बचत प्रक्रिया के दौरान, हम निर्देशिका को सहेजने के लिए निर्दिष्ट करते हैं (यदि आवश्यक हो, हम इसे वहीं बनाते हैं), तो प्रोजेक्ट फ़ाइल का नाम और प्रोग्राम मॉड्यूल का फ़ाइल नाम। मैंने "फीनिक्स" फ़ोल्डर बनाया और प्रस्तावित "प्रोजेक्ट1.एलपीआई" (और प्रस्तावित "यूनिट 1.पास" के बजाय प्रोग्राम मॉड्यूल फाइल ("UnitMain.pas)" के बजाय "फीनिक्स। एलपीआई)") को बचाया।


3. फॉर्म का नाम बदलें और उसका शीर्षक बदलें।

"Form1" ( नाम संपत्ति) नामक नव निर्मित फॉर्म, "TForm1" वर्ग का एक उदाहरण है और इसमें "Form1" ( शीर्षक संपत्ति) शीर्षक शामिल है। फ़ॉर्म की नाम संपत्ति को "फॉर्मैन" में बदलें, और क्लास का नाम बदलकर "TFormMain" हो जाएगा।

कैप्शन की संपत्ति को "फीनिक्स" में बदलें ताकि परियोजना का शीर्षक विंडो शीर्षक में प्रदर्शित हो।

4. परिणामस्वरूप, मुझे यूनिटमैन.पास मॉड्यूल का निम्नलिखित पाठ मिला:

unit UnitMain; {$mode objfpc}{$H+} interface uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs; type TFormMain = class(TForm) private public end; var FormMain: TFormMain; implementation {$R *.lfm} end. 

5. संकलन करें, प्रोजेक्ट चलाएँ (कुंजी <F9>):

स्प्राइट को फार्म पर रखें

यह मानते हुए कि आपने पहले से ही मेरे पिछले लाजर लेख में वर्णित TImageFragment घटक स्थापित किया है - हम स्प्राइट एनीमेशन के लिए एक घटक लिखते हैं , घटक पैलेट पर "गेम" टैब चुनें और फॉर्म में "TImageFragment" घटक जोड़ें।

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

• ऊँचाई और चौड़ाई गुणों को 96 पर सेट करें
• लेफ्ट और टॉप टू 0 पर सेट करें (मेरे स्क्रीनशॉट के साथ मिलान के लिए सुविधाजनक)
• नाम संपत्ति असुविधाजनक "ImageFragment1" से एक सरल और समझने योग्य "स्प्राइट" में बदल जाती है

यदि सब कुछ सही ढंग से किया जाता है, तो घटक छवि का पहला फ्रेम दिखाएगा:


UnitMain मॉड्यूल के पाठ में छोटे बदलाव आएंगे :
- ImageFragment मॉड्यूल का उपयोग अनुभागों में जोड़ा जाता है

 uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ImageFragment; 

- कक्षा घोषणा में एक नई वस्तु दिखाई देगी

  TFormMain = class(TForm) Sprite: TImageFragment; private public end; 

एनीमेशन जोड़ें - विंग फ्लैप

1. प्रपत्र में TTimer वर्ग का एक नया घटक जोड़ें।

यह घटक घटक पैलेट के "सिस्टम" टैब पर स्थित है। आप इसे फॉर्म पर किसी भी सुविधाजनक जगह पर रख सकते हैं, क्योंकि यह एक रनिंग एप्लिकेशन में प्रदर्शित नहीं होता है।

2. जोड़े गए ऑब्जेक्ट का नाम बदलें।

नई ऑब्जेक्ट को स्वचालित रूप से "टाइमर 1" नाम मिलता है, लेकिन हम इसका नाम बदलकर "टिमरलाइव" कर देते हैं। वस्तुओं को ऐसे नाम देना अक्सर सुविधाजनक होता है, जिसमें दो भाग होते हैं: पहला वस्तु के वर्ग को दर्शाता है, और दूसरा इसके उद्देश्य को दर्शाता है।

3. इंटरवल प्रॉपर्टी को 1000 से 100 में बदलें।

बता दें कि इस एनिमेशन के फ्रेम एक-दूसरे को हर 100 मिलीसेकेंड यानी 10 बार प्रति सेकंड बदलते हैं। भविष्य में, इस संपत्ति को पंखों को धीमा करने या तेज करने के लिए बदला जा सकता है - प्रोग्रामर के विवेक पर।

4. एक OnTimer ईवेंट हैंडलर जोड़ें।

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

5. नई प्रक्रिया में कोड की एक पंक्ति जोड़ें।

  Sprite.OffsetX := (Sprite.OffsetX + 96) mod 384; 

इन कार्यों के परिणामस्वरूप, कक्षा की घोषणा कुछ इस तरह दिखनी चाहिए:

  TFormMain = class(TForm) Sprite: TImageFragment; TimerLive: TTimer; procedure TimerLiveTimer(Sender: TObject); private public end; 

और नई प्रक्रिया - OnTimer इवेंट हैंडलर को कुछ इस तरह दिखना चाहिए:

 procedure TFormMain.TimerLiveTimer(Sender: TObject); begin Sprite.OffsetX := (Sprite.OffsetX + 96) mod 384; end; 

एप्लिकेशन को संकलित करने और चलाने के बाद, आप फीनिक्स पक्षी को अपने पंखों को फड़फड़ाते हुए देख सकते हैं।

ऐसा इसलिए होता है क्योंकि टाइमर इवेंट हैंडलर प्रत्येक 100 मिलीसेकंड में चक्रीय रूप से प्रदर्शित टुकड़े के ऑफसेट को बदल देता है, और चयनित फ्रेम को क्षैतिज रूप से स्थानांतरित किया जाता है, जो लोड की गई छवि के शीर्ष रेखा के 4 फ्रेम प्रदर्शित करता है। मॉड ऑपरेशन - विभाजन के शेष भाग को प्राप्त करना - ऑफसेट को छवि आकार से आगे जाने से रोकता है, और परिणामस्वरूप 4 वें फ्रेम को फिर से 1 फ्रेम द्वारा पीछा किया जाता है।

खिड़की के चारों ओर एक स्प्राइट आंदोलन जोड़ें

1. उपयोग अनुभाग में गणित मॉड्यूल जोड़ें

 uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls, ImageFragment, Math; 

2. वर्ग की घोषणा के लिए एक नया चर और स्थिर जोड़ें।

खिड़की के चारों ओर स्प्राइट को स्थानांतरित करने के वेक्टर को बचाने के लिए, टाइप TPoint का एक चर जोड़ें

  private FVector: TPoint; 

उसी स्थान पर, हम आंदोलन की गति के मॉड्यूल को स्थापित करने के लिए एक निरंतर घोषित करते हैं

  const Speed = 10; 

3. TTimer वर्ग के किसी अन्य घटक को प्रपत्र में जोड़ें ।

मैं आपको याद दिलाता हूं: यह घटक घटक पैलेट के "सिस्टम" टैब पर स्थित है।

नए ऑब्जेक्ट को फिर से "Timer1" नाम मिल जाता है, और हम इसका नाम बदल देते हैं - इस बार "TimerMove" पर। दूसरे टाइमर का उद्देश्य स्प्राइट के आंदोलन को नियंत्रित करना है। मैंने दोनों प्रक्रियाओं (एनीमेशन और मूवमेंट) को एक ही टाइमर से नहीं बाँधा, ताकि प्रत्येक टाइमर को अलग-अलग सेट किया जा सके - उदाहरण के लिए, आंदोलन को धीमा किए बिना विंग स्विंग की आवृत्ति को धीमा करने के लिए, और इसी तरह।

4. इंटरवल संपत्ति को 1000 से 100 में बदलें।

बता दें कि इस टाइमर में भी हर 100 मिलीसेकंड यानी 10 बार प्रति सेकेंड फायर किया जाता है। भविष्य में, इस संपत्ति को धीमा करने या स्प्राइट हिलने के तथ्य को प्रस्तुत करने की आवृत्ति को गति देने के लिए भी बदला जा सकता है।

5. एक OnTimer ईवेंट हैंडलर जोड़ें।

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

6. नई प्रक्रिया में कोड की दो लाइनें जोड़ें।

  Sprite.Left := Max(0, Min(Width - Sprite.Width, Sprite.Left + FVector.x)); Sprite.Top := Max(0, Min(Height - Sprite.Height, Sprite.Top + FVector.y)); 

मैक्स () और मिन () फ़ंक्शन के उपयोग से स्प्राइट को फॉर्म (मुख्य एप्लिकेशन विंडो) से बाहर निकलने से रोकता है।
यह इन कार्यों का उपयोग करने के लिए है जिसे हमने गणित मॉड्यूल को उपयोग अनुभाग से जोड़ा है।

7. एक OnKeyPress इवेंट हैंडलर जोड़ें।

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

8. नई प्रक्रिया में कोड की कुछ पंक्तियों को जोड़ें।

  if Key = 'a' then FVector := TPoint.Create(-Speed, 0) else if Key = 'd' then FVector := TPoint.Create(Speed, 0) else if Key = 'w' then FVector := TPoint.Create(0, -Speed) else if Key = 's' then FVector := TPoint.Create(0, Speed) else if Key = ' ' then FVector := TPoint.Create(0, 0); 

इन कार्यों के परिणामस्वरूप, कक्षा की घोषणा कुछ इस तरह दिखनी चाहिए:

  TFormMain = class(TForm) Sprite: TImageFragment; TimerMove: TTimer; TimerLive: TTimer; procedure FormKeyPress(Sender: TObject; var Key: char); procedure TimerLiveTimer(Sender: TObject); procedure TimerMoveTimer(Sender: TObject); private FVector: TPoint; const Speed = 10; public end; 

और नई प्रक्रियाओं - OnTimer और OnKeyPress घटना संचालकों कुछ इस तरह दिखना चाहिए:

 procedure TFormMain.TimerMoveTimer(Sender: TObject); begin Sprite.Left := Max(0, Min(Width - Sprite.Width, Sprite.Left + FVector.x)); Sprite.Top := Max(0, Min(Height - Sprite.Height, Sprite.Top + FVector.y)); end; procedure TFormMain.FormKeyPress(Sender: TObject; var Key: char); begin if Key = 'a' then FVector := TPoint.Create(-Speed, 0) else if Key = 'd' then FVector := TPoint.Create(Speed, 0) else if Key = 'w' then FVector := TPoint.Create(0, -Speed) else if Key = 's' then FVector := TPoint.Create(0, Speed) else if Key = ' ' then FVector := TPoint.Create(0, 0); end; 

एप्लिकेशन को संकलित करने और चलाने के बाद, आप फीनिक्स पक्षी को "ए", "डब्ल्यू", "एस", "डी" कुंजी का उपयोग करके स्क्रीन पर स्थानांतरित कर सकते हैं और इसे स्पेस बार के साथ रोक सकते हैं।

हम स्प्राइट के विभिन्न अनुमानों का उपयोग करते हैं

TFormMain.FormKeyPress प्रक्रिया के अंत में निम्नलिखित कोड जोड़ें

  if FVector.x < 0 then Sprite.OffsetY := 96 else if FVector.x > 0 then Sprite.OffsetY := 192 else if FVector.y < 0 then Sprite.OffsetY := 288 else Sprite.OffsetY := 0; 

विस्थापन वेक्टर के आधार पर ऑफसेट संपत्ति को बदलने से आंदोलन की दिशा में छवि घूमती है।

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

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