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

• उसी पृष्ठ पर सिल्वरलाइट और XNA का उपयोग करना
• XNA में सबसे सरल जेस्चर हैंडलिंग
• XNA कैमरा बेसिक्स

इस लेख का एक उदाहरण स्टास पावलोव की शाम के स्कूल की पहली धारा के लिए आगंतुकों से परिचित हो सकता है।
आइए पहले देखें कि हमें एक आवेदन में सिल्वरलाइट और XNA का उपयोग क्या मिलता है।

यह डेवलपर क्या देता है?

सबसे पहले, गेम डेवलपर्स में निम्नलिखित विशेषताएं हैं:

• सिल्वरलाइट से नियंत्रणों का उपयोग करते हुए त्वरित UI निर्माण
• नेविगेशन सेवा का उपयोग करके पृष्ठों के बीच सुविधाजनक नेविगेशन
• विभिन्न सामाजिक सेवाओं को एकीकृत करने के लिए WebClient का उपयोग करना
• अभिव्यक्ति मिश्रण में एक इंटरफ़ेस बनाना

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

हाउटो: पहला सिल्वरलाइट + XNA एप्लिकेशन विकसित कर रहा है

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

चरण 1. एक परियोजना बनाना और एक इंटरफ़ेस प्रदान करना

एक नया प्रोजेक्ट बनाते समय, आपको "Windows Phone Silverlight और XNA Application" का चयन करना होगा। 2 मेनपेज और गेमपेज पेज के साथ एक नया प्रोजेक्ट बनाया जाएगा।

मेनपेज एक नियमित सिल्वरलाइट एप्लिकेशन पेज है जिस पर "गेम पेज में बदलें" बटन स्थित है, जब क्लिक किया जाता है, तो गेमपेज पेज तदनुसार खुलता है।
GamePage सिर्फ हमारा XNA पेज है। यदि आप इसकी xaml फ़ाइल की सामग्री को देखते हैं, तो पृष्ठ लेआउट के बजाय केवल एक पंक्ति होगी:

<!--No XAML content is required as the page is rendered entirely with the XNA Framework--> 

इस प्रकार, जब हम इस पृष्ठ पर नियंत्रण जोड़ना चाहते हैं, तो हमें इस टिप्पणी को अपने कोड के साथ बदलना होगा, आइए इसे स्टार्ट बटन दबाकर करें।

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated"> <Button Content="Start" Height="71" Name="button1" Width="160" Margin="25,717,295,12" Click="button1_Click" /> </Grid> 

आइए अब हमारी परियोजना शुरू करें, " गेम पेज में बदलें " बटन दबाएं और केवल एक नीली स्क्रीन देखें, हमारा बटन कहीं नहीं है। लेकिन चिंता की कोई बात नहीं है, अब हम इसे ठीक कर देंगे।

फ़ाइल खोलें GamePage.xaml.cs, जिसमें हमारे XNA एप्लिकेशन के सभी तर्क शामिल हैं। सिल्वरलाइट तत्वों को प्रदर्शित करने के लिए, हमें एक विशेष UIElementRenderer ऑब्जेक्ट बनाने की आवश्यकता है:

 UIElementRenderer uiRenderer; 

अब ड्राइंग चक्र में हमें इंटरफ़ेस को प्रस्तुत करने और आकर्षित करने की आवश्यकता है:

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.White); uiRenderer.Render(); spriteBatch.Begin(); spriteBatch.Draw(uiRenderer.Texture, Vector2.Zero, Color.White); spriteBatch.End(); // TODO: Add your drawing code here } 

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

GamePage.xaml

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated"> 

GamePage.xaml.cs

 private void Layout_LayoutUpdated(object sender, EventArgs e) { int width = (int)ActualWidth; int height = (int)ActualHeight; // Ensure the page size is valid if (width <= 0 || height <= 0) return; // Do we already have a UIElementRenderer of the correct size? if (uiRenderer != null && uiRenderer.Texture != null && uiRenderer.Texture.Width == width && uiRenderer.Texture.Height == height) { return; } // Before constructing a new UIElementRenderer, be sure to Dispose the old one if (uiRenderer != null) uiRenderer.Dispose(); // Create the renderer uiRenderer = new UIElementRenderer(this, width, height); } 

अब हमारे प्रोजेक्ट को फिर से चलाएं। जैसा कि आप देख सकते हैं, हमारा बटन अब सही जगह पर दिखाई देता है। चलिए अब खेल का मैदान बनाते हैं।

2. XNA आउटपुट

मान लेते हैं कि हमारा क्षेत्र आकार में 100x100 सेल होगा, प्रत्येक सेल 30x30 पिक्सेल। कुल हमारा क्षेत्र 3000x3000 पिक्सेल का होगा।
एक क्षेत्र वर्ग बनाएँ:

 public class Area { Texture2D point; Rectangle line; public Area(Texture2D point) { this.point = point; } public void Draw(SpriteBatch spriteBatch) { for (int i = 0; i < 100; i++) { line = new Rectangle(i*30, 0, 1, 3000); spriteBatch.Draw(point, line, Color.White); line = new Rectangle( 0, i*30, 3000, 1); spriteBatch.Draw(point, line, Color.White); } } } 

XNA में एक रेखा खींचने का कोई तरीका नहीं है, लेकिन आप किसी भी रंग या बनावट से भरी आयत खींच सकते हैं। यहां हम 100 क्षैतिज और 100 ऊर्ध्वाधर रेखाएं बनाते हैं, जो एक बिंदु बनावट के साथ बाढ़ में 1x1 आकार की काली बिंदी के साथ होती है।

अब चलिए GamePage.xaml.cs में हमारे क्षेत्र को बनाएँ और आरंभ करें:

 Texture2D point; Area area; 

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

 protected override void OnNavigatedTo(NavigationEventArgs e) { // Set the sharing mode of the graphics device to turn on XNA rendering SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true); // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(SharedGraphicsDeviceManager.Current.GraphicsDevice); // TODO: use this.content to load your game content here point = contentManager.Load<Texture2D>("point"); area = new Area(point); // Start the timer timer.Start(); base.OnNavigatedTo(e); } 

अब OnDraw विधि में हमारे क्षेत्र को ड्रा करें:

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue); uiRenderer.Render(); spriteBatch.Begin(); area.Draw(spriteBatch) spriteBatch.End(); spriteBatch.Begin(); spriteBatch.Draw(uiRenderer.Texture, Vector2.Zero, Color.White); spriteBatch.End(); // TODO: Add your drawing code here } 

जैसा कि आप देख सकते हैं, मैं एक अलग स्प्राइट बैच में क्षेत्र आकर्षित करता हूं। ऐसा क्यों है - मैं थोड़ी देर बाद बताऊंगा।

हमारा एप्लिकेशन लॉन्च करें: अब हम अपने बटन फ़ील्ड की प्रशंसा कर सकते हैं।
चलो छोटे कॉस्मेटिक बदलाव करते हैं: बटन के नीचे एक पारदर्शी समर्थन जोड़ें और क्षेत्र को सफेद बनाएं।
GamePage.xaml:

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated"> <Rectangle Height="100" HorizontalAlignment="Left" Margin="0,700,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="480" Fill="#B1000000" /> <Button Content="Start" Height="71" Name="button1" Width="160" Margin="25,717,295,12" Click="button1_Click" /> <Button Content="1 gen" Height="72" HorizontalAlignment="Left" Margin="254,716,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" /> </Grid> 

GamePage.xaml.cs:

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.White); uiRenderer.Render(); ... 

3. इशारों के साथ काम करें

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

 public void AddDot(int x, int y, Vector2 shift) { DotX = (int)(x / DotSize ); DotY = (int)(y / DotSize ); DotsNow[DotX, DotY] = !DotsNow[DotX, DotY]; } 

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

सबसे पहले, हमें OnNavigatedTo () विधि में जेस्चर समर्थन को सक्षम करने की आवश्यकता है:

 TouchPanel.EnabledGestures = GestureType.Tap | GestureType.FreeDrag; 

अब आप उन्हें OnUpdate लूप में ट्रैक कर सकते हैं:

 private void OnUpdate(object sender, GameTimerEventArgs e) { while (TouchPanel.IsGestureAvailable) { GestureSample gesture = TouchPanel.ReadGesture(); if (gesture.GestureType == GestureType.Tap) { dots.AddDot((int)gesture.Position.X, (int)gesture.Position.Y); } } } 

ऑनड्राव () विधि में स्क्रीन पर हमारे जीवित कोशिकाओं को प्रदर्शित करना न भूलें:

 dots.Draw(spriteBatch); 

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

 i++; if (IsGameStarted && Math.IEEERemainder(i, 15) == 0) { i = 0; dots.Update(); } 

जहाँ IsGameStarted एक ध्वज है जो प्रारंभ बटन पर क्लिक करने पर मूल्य बदलता है। दूसरा होमवर्क गेमटाइम क्लास का उपयोग करके देरी को लागू करना है।
अब हमारे पास पूरी तरह कार्यात्मक खेल है, लेकिन हम मैदान का केवल एक छोटा हिस्सा देखते हैं। चलो इसे क्षेत्र के चारों ओर ले जाने की क्षमता को जोड़कर ठीक करें।

4. कैमरे के साथ काम करें

सरलतम सन्निकटन में, एक कैमरा एक मैट्रिक्स है जिसके साथ हम एक छवि के रूप में एक स्क्रीन पर हमारे खेल की दुनिया को प्रोजेक्ट करते हैं। मैट्रिक्स क्लास में कई प्रासंगिक विधियाँ हैं, उदाहरण के लिए CreateScale (), CreateTranslation (), CreateRotationX ()। बस CreateTranslation () हमें चाहिए। पहले हमें पता चलता है कि हमें अपने खेल की दुनिया को स्थानांतरित करने और मैट्रिक्स बनाने की कितनी आवश्यकता है:

 while (TouchPanel.IsGestureAvailable) { GestureSample gesture = TouchPanel.ReadGesture(); if (gesture.GestureType == GestureType.Tap) { dots.AddDot((int)gesture.Position.X, (int)gesture.Position.Y, totalShift); } if (gesture.GestureType == GestureType.FreeDrag) { shift = gesture.Delta; totalShift += shift; } } matrix *= Matrix.CreateTranslation(totalShift.X, totalShift.Y, 0); 

फिर आपको एक नया प्रक्षेपण आकर्षित करने की आवश्यकता है। ऐसा करने के लिए, स्प्राइट बैच के लिए हमारा मैट्रिक्स पास करें:

 spriteBatch.Begin(SpriteSortMode.Deferred, null, null, null, null, null, matrix); area.Draw(spriteBatch); dots.Draw(spriteBatch); spriteBatch.End(); 

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

 public void AddDot(int x, int y, Vector2 shift) { DotX = (int)(Math.Abs(x-shift.X) / DotSize ); DotY = (int)(Math.Abs(y-shift.Y) / DotSize ); DotsNow[DotX, DotY] = !DotsNow[DotX, DotY]; } 

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

चेशायर बिल्ली

निष्कर्ष

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

एप्लिकेशन स्रोत डाउनलोड करें ।

नए साल की छुट्टियां मनाएं!