सिल्वरलाइट में खेल चक्र

इस लेख में, मैं सिल्वरलाइट में गेम लूप के उपयोग का वर्णन करूंगा। एक फ़ंक्शन जिसमें एनीमेशन के साथ काम करने और उपयोगकर्ता को संसाधित करने के लिए सभी तर्क होते हैं जो एनीमेशन को प्रभावित करते हैं। मशीन नियंत्रण के उदाहरण से।



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


इस मामले में क्लासिक दृष्टिकोण एक टाइमर बनाने के लिए है और हर बार इसे अपडेट करने के बाद, एनीमेशन तर्क को पुन: लिखें।

सिल्वरलाइट में, ये टाइमर हो सकते हैं:

• System.Windows.Threading.DispatcherTime r - UI थ्रेड में काम कर रहा है
• System.Threading.Timer - एक अलग थ्रेड में काम कर रहा है।

लेकिन सिल्वरलाइट में प्रोग्रामेटिक एनीमेशन को लागू करने के लिए अधिक उपयुक्त वैश्विक रेंडरिंग इवेंट, स्टेटिक क्लास सिस्टम । Windows.edia.CompositionTarget का उपयोग करना होगा।

नमूना कोड, एक सरल गेम लूप:

//   private int _lastTime; private void MainPage_Loaded(object sender, RoutedEventArgs e){ //  ,     CompositionTarget.Rendering += _gameLoopUpdate; _lastTime = Environment.TickCount; } private void _gameLoopUpdate(object sender, EventArgs e){ int currentTime = Environment.TickCount; int frameTime = currentTime - _lastTime; _lastTime = currentTime; //    } 

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

जीवित उदाहरण

उदाहरण के लिए, एक बॉक्स में एक "गेम", एक मशीन बनाएं। कीबोर्ड पर लगे तीर कार को नियंत्रित करते हैं। लेफ्ट, राइट, गैस, रिवर्स / ब्रेक, सब कुछ हर जगह की तरह है।
एक नया सिल्वरलाइट प्रोजेक्ट बनाएं। "MainPage.xaml" खोलें। मुख्य ग्रिड में, जिसका नाम "LayoutRoot" रखा गया है:

 <Grid Margin="12" Background="#FF084E0F"/> <Viewbox IsHitTestVisible="False" Margin="12"> <TextBlock TextWrapping="Wrap" Text=" " Foreground="#FF00228D" RenderTransformOrigin="0.5,0.5" Margin="10,0" Width="129" Height="16"> <TextBlock.RenderTransform> <CompositeTransform Rotation="-35"/> </TextBlock.RenderTransform> </TextBlock> </Viewbox> <Canvas x:Name="ContentPanel" Margin="12"> <TextBlock x:Name="tbInfo" Text="TextBlock" Foreground="White" FontSize="16" /> <Image x:Name="car" Width="70" Source="car.png" Height="35" /> </Canvas> 

आप चित्र का उपयोग कर सकते हैं "car.png" तुम्हारा या यह:


मुख्य बात यह है कि कार की नाक दाईं ओर दिखती है।

एनीमेशन के दौरान आकार देने में समस्याएँ।

कई समस्याएं हैं जो एनिमेटेड वस्तुओं के आकार के कारण एनिमेशन के साथ काम करते समय उत्पन्न हो सकती हैं:

• ऑटो में सेट चौड़ाई या ऊंचाई के आयामों के साथ, रोटेशन के केंद्र में परिवर्तन को ध्यान में नहीं रखा जाता है, क्रमशः रोटेशन के एनीमेशन के साथ समस्याएं हो सकती हैं। निरपेक्ष इकाइयों में आयाम।
• प्रारंभ में, एक्चुअलविदथ और एक्चुअलहाइट शून्य हैं, क्योंकि एक से अधिक वस्तु अभी तक नहीं खींची गई है। अपनी गणना में इस पर विचार करें।

खेल की दुनिया बनाई। तर्क जोड़ें।

कीस्ट्रोक हैंडलिंग

चाबियाँ इतनी सरल नहीं हैं। प्रारंभ में, सिल्वरलाइट एक साथ दबाए गए कुंजी की परिभाषा का समर्थन नहीं करता है, न कि संशोधक की गिनती: Ctrl, Shift, Alt। कीडाउन इवेंट केवल अंतिम कुंजी को दबाता है। यानी एक बार में एक कुंजी दबाना है। उदाहरण के लिए, उन्होंने गैस निचोड़ ली, और गैस करते समय, बाएं मुड़ें नहीं। समाधान के रूप में, Ctrl / Shift और गैस को दोनों हाथों से दबाएं। यह असुविधाजनक है ...

लेकिन सब कुछ इतना बुरा नहीं है, लेकिन अच्छा भी है। इंटरनेट पर ( सिल्वरलाइट में एकाधिक कुंजी का पता लगाना ), एक वर्ग पाया गया कि इस समस्या को हल करता है और यहां तक ​​कि आपको गेम लूप के अंदर कीस्ट्रोक्स को संभालने की अनुमति देता है, जो कीडाउन हैंडलर के अंदर की तुलना में बहुत अधिक सुविधाजनक है।

परियोजना में एक वर्ग जोड़ें:

  //  .    , //   ,  . //         public sealed class KeyHandler { private bool[] isPressed = new bool[256]; private UserControl targetCanvas = null; public void ClearKeyPresses(){ for (int i = 0; i < 256; i++){ isPressed[i] = false; } } public void ClearKey(Key k){ isPressed[(int) k] = false; } public void Attach(UserControl target){ ClearKeyPresses(); targetCanvas = target; target.KeyDown += new KeyEventHandler(target_KeyDown); target.KeyUp += new KeyEventHandler(target_KeyUp); target.LostFocus += new RoutedEventHandler(target_LostFocus); } public void Detach(UserControl target){ target.KeyDown -= new KeyEventHandler(target_KeyDown); target.KeyUp -= new KeyEventHandler(target_KeyUp); target.LostFocus -= new RoutedEventHandler(target_LostFocus); ClearKeyPresses(); } private void target_KeyDown(object sender, KeyEventArgs e){ isPressed[(int) e.Key] = true; } private void target_KeyUp(object sender, KeyEventArgs e){ isPressed[(int) e.Key] = false; } private void target_LostFocus(object sender, EventArgs e){ ClearKeyPresses(); } public bool IsKeyPressed(Key k){ int v = (int) k; if (v < 0 || v > 82) return false; return isPressed[v]; } public bool IsKeyPressed(Key[] keys){ foreach (Key k in keys){ if (this.IsKeyPressed(k)) return true; } return false; } } 

एनीमेशन

निम्न वैश्विक चर को MainPage.xaml.cs में जोड़ें:

 //   private KeyHandler _keyHandler = new KeyHandler(); //       private RotateTransform _rotateHelper = new RotateTransform(); //       private TranslateTransform _translateTransform = new TranslateTransform(); private RotateTransform _rotateTransform = new RotateTransform(); 

हम RenderTransform संपत्ति के माध्यम से कार का एनीमेशन करेंगे। यह घूमने, घूमने आदि के लिए जिम्मेदार है।

क्योंकि रूपांतर वस्तु को उसकी प्रारंभिक स्थिति के सापेक्ष एनिमेट करता है। सुनिश्चित करें कि Canvas.Top और Canvas.Left कार ऑब्जेक्ट (हमारी कार) के लिए सेट नहीं हैं ।

मुख्य विंडो के निर्माता में भरें:

 public MainPage(){ InitializeComponent(); this.Loaded += MainPage_Loaded; //     var tg = new TransformGroup(); tg.Children.Add(_rotateTransform); tg.Children.Add(_translateTransform); car.RenderTransform = tg; //    _translateTransform.X = 50; _translateTransform.Y = 50; car.MouseLeftButtonDown += car_MouseLeftButtonDown; //    _keyHandler.Attach(this); } 

माउस क्लिक प्रोसेसिंग फंक्शन, अधिकांश भाग के लिए, आपको बस यह दिखाना होगा कि मशीन माउस से घटनाओं को पकड़ती है:

  //       void car_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ _speedPerSecond += 300; } 

जब विंडो प्रदर्शित होती है, तो हम सिल्वरलाइट प्लगइन पर ध्यान केंद्रित करेंगे, अन्यथा यह कीस्ट्रोक्स को नहीं पकड़ेगा। कुछ ब्राउज़रों में, यह मदद नहीं करता है, तो आपको फ़ोकस को मैन्युअल पर सेट करने की आवश्यकता है, अर्थात। बस हमारे खिलौने पर क्लिक करें। इसके अलावा, खेल चक्र तैयार करें।

 private void MainPage_Loaded(object sender, RoutedEventArgs e){ //     ,        System.Windows.Browser.HtmlPage.Plugin.Focus(); //  ,     CompositionTarget.Rendering += _gameLoopUpdate; _lastTime = Environment.TickCount; } 

वैश्विक चर जोड़ें जिन्हें एनीमेशन में उपयोग किया जाएगा:

  //    private Point _direction = new Point(1, 0); //  private double _speedPerSecond ; // /   , >1 ,<1  private double _accelerationRatioPerSec = 0.60; //   private int _lastTime; 

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


अपने कंटेनर की सीमा के साथ कार के चौराहे की गणना करने के लिए: हम कार को मोड़ने वाले आयत की गणना करते हैं, कार के मोड़ के कोण को ध्यान में रखते हैं।


यह खेल के दिल में जाने का समय है, खेल चक्र के कार्य:

  private void _gameLoopUpdate(object sender, EventArgs e){ int currentTime = Environment.TickCount; int frameTime = currentTime - _lastTime; _lastTime = currentTime; //       //          double delta = (double)frameTime / 1000; //       double xCurrentPos = _translateTransform.X; double yCurrentPos = _translateTransform.Y; double currentAngle = _rotateTransform.Angle; //   double addToSpeedPerSec = 300; if (_keyHandler.IsKeyPressed(Key.Up)){ _speedPerSecond += addToSpeedPerSec*delta; } if (_keyHandler.IsKeyPressed(Key.Down)){ _speedPerSecond -= addToSpeedPerSec * delta; } //       double targetAngle = currentAngle; double coefAngle = .5; if (_keyHandler.IsKeyPressed(Key.Right)){ targetAngle += _speedPerSecond * coefAngle*delta; } if (_keyHandler.IsKeyPressed(Key.Left)){ targetAngle -= _speedPerSecond * coefAngle * delta; } //    _rotateHelper.CenterX = car.ActualWidth / 2; _rotateHelper.CenterY = car.ActualHeight / 2; _rotateHelper.Angle = targetAngle; //    _rotateHelper.CenterX = 0; _rotateHelper.CenterY = 0; _direction = _rotateHelper.Transform(new Point(1, 0)); //   _speedPerSecond += (_speedPerSecond*_accelerationRatioPerSec - _speedPerSecond)*delta; // ,       double stepPerFrame = _speedPerSecond * delta; //   double xTargetPos = xCurrentPos + _direction.X * stepPerFrame; double yTargetPos = yCurrentPos + _direction.Y * stepPerFrame; //           Rect borderRect = _rotateHelper.TransformBounds(new Rect(0, 0, car.ActualWidth, car.ActualHeight)); borderRect.X = borderRect.X + xTargetPos; borderRect.Y = borderRect.Y + yTargetPos; //     if (isInContentPanel(borderRect)){ ////     _translateTransform.X = xTargetPos; _translateTransform.Y = yTargetPos; _rotateTransform.Angle = targetAngle; } else{ // ,     _speedPerSecond = 0; } //  tbInfo.Text = string.Format("Speed:{0:F1}", _speedPerSecond); } //    ,    private bool isInContentPanel(Rect shapeBorder){ if (0 <= shapeBorder.Left && shapeBorder.Right <= ContentPanel.ActualWidth) if (0 <= shapeBorder.Top && shapeBorder.Bottom <= ContentPanel.ActualHeight) return true; return false; } 

लूप फ़ंक्शन में निम्न चरण होते हैं:

• मशीन की वर्तमान स्थिति प्राप्त करें
• दबाए गए कुंजी के अनुसार परिवर्तन सेट करें
• लगातार गति को 0 पर रीसेट करें, यह त्वरण एनीमेशन को इतना रैखिक नहीं बनाता है
• चेक करें कि कार बॉक्स से बाहर निकली या नहीं
• हम प्राप्त परिवर्तनों को लागू करते हैं।

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

परिणाम

कार ड्राइव, अधिक या कम जटिल एल्गोरिथ्म के अनुसार तेज करता है। बेशक, आप त्वरण और घुमावों के अधिक प्राकृतिक दिखने वाले एनिमेशन बना सकते हैं, सड़क पार करने वाली बूढ़ी महिलाओं के साथ स्किडिंग, मिसकल्कुलेटिंग टकराव का प्रभाव ... लेकिन यह देखने के लिए पर्याप्त लागू किया गया: जटिल एनीमेशन, गेम लूप में करना बेहतर है।

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

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

"एक बॉक्स में कारों" के लिए स्रोत कोड यहां या उदाहरण पृष्ठ से डाउनलोड किया जा सकता है।

संसाधन:

1. फिजिक्स हेल्पर फॉर ब्लेंड, सिल्वरलाइट, डब्ल्यूपी 7 और फरसेर - सिल्वरलाइट रैपर फारसीर फिजिक्स इंजन फिजिक्स लाइब्रेरी (http://farseerphysics.codeplex.com/) पर। यह उसके कोड में था कि मैंने पाया कि कैसे जटिल एनीमेशन सिल्वरलाइट में संभाला जाता है।
2. सिल्वरलाइट में कस्टम एनिमेशन - एक पेंडुलम के उदाहरण का उपयोग करके एक गेम लूप का उपयोग करना। लेख अंग्रेजी में है।