विंडोज फोन 7 XNA: पिक्स को मोड़ें या न हिलाएं

नमस्कार प्रिय मित्र।

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

सिद्धांत

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

बेशक, हम सामान्य मैपिंग (हालांकि आप इसे विकृत कर सकते हैं) के साथ शांत प्रकाश व्यवस्था के बारे में बात नहीं कर रहे हैं, लेकिन सिर्फ बेसिकफेक्ट का उपयोग करके आप पिक्सल को कैसे झुका सकते हैं। यह विधि पागलपन के लिए सरल है, लेकिन बेहद प्रभावी है।

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

- क्या करें, लड़का?

याद रखें, किस सिद्धांत से हम 3 डी में कुछ आकर्षित करते हैं, उदाहरण के लिए, एक साधारण सपाट वर्ग? इसे दो त्रिकोणों का उपयोग करके तैयार किया गया है। यह हमारी मदद कैसे कर सकता है? यह सरल है, बहुत सारे त्रिकोण बनाएं, और फिर, बनावट निर्देशांक का उपयोग करके, हम त्रिकोण को "काकबे" को स्थानांतरित करेंगे, जो विरूपण प्रभाव पैदा करता है।

वास्तव में - एक तस्वीर है - 480x800, हम एक 48x80 ग्रिड बनाते हैं (मेरा विश्वास करो, एक सुंदर प्रभाव के लिए - बस सही है)। ग्रिड 3840 तत्वों का एक आयामी आयाम है। यह सभी WP7 पर 3-4 एमएस के बारे में गणना करता है, कम मेष गुणवत्ता के साथ - 1-2 एमएस । लेकिन अगर ग्रिड बहुत छोटा है, तो विरूपण के साथ यह ध्यान देने योग्य होगा कि त्रिकोण अभी भी मौजूद हैं। लेकिन जब ग्रिड 10 गुना छोटा होता है, तो यह ध्यान देने योग्य नहीं है, तुलना के लिए - स्क्रीन पर कदम 3 मिमी = 10 पिक्सेल है। खैर, ठीक है, कुछ मैं एक बातचीत में मिला।

- अरे यार, यही काफी सिद्धांत है, अभ्यास करने जाओ।

अभ्यास

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

सड़क पर जा रहे हैं, सामग्री की तलाश में हैं।

पहले हमें एक बनावट की जरूरत है जिसे हम झुकेंगे, हमारे प्यारे दोस्त से मिलेंगे:


और किसी तरह अजीब है, लेकिन हमें अभी भी एक खाली परियोजना की आवश्यकता है, हम इसे बनाते हैं।

मुझे तुरंत कहना होगा कि WP7 के तहत XNA की एक विशेषता यह है कि डिफ़ॉल्ट रूप से 30 एफपीएस (देशी 60 पीपीएस के बजाय) हैं। लेकिन कुछ मुझे बताता है कि अधिक संभव है; दूसरी ओर, जो हत्यारे की बैटरी की जरूरत है, एक समय हत्यारा नहीं है? इसलिए, हम 30 एफपीएस का उपयोग करेंगे।

एक खाली परियोजना में आप पाएंगे:

// Frame rate is 30 fps by default for Windows Phone. TargetElapsedTime = TimeSpan.FromTicks(333333); // Extend battery life under lock. InactiveSleepTime = TimeSpan.FromSeconds(1); 

एफपीएस के लिए जिम्मेदार लाइन - अपने लिए अनुमान लगाएं।

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

 if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); 

इसलिए, हम एक खाली परियोजना में कुछ भी नहीं छूएंगे, हम प्रोग्रामिंग के लिए आगे बढ़ते हैं और वास्तव में, अभ्यास करते हैं। शुरुआत के लिए - अर्थ और प्यार के साथ Game1 भरें।

चर बनाएं:

 Texture2D background; BasicEffect basicEffect; 

पृष्ठभूमि - हमारी बनावट, अच्छी तरह से, या किसी प्रकार का रेंडरटार्ग।
BasicEffect हमारे नायक को आदिम बनाने के लिए आवश्यक है।

हम सामग्री लोड करते हैं:

 background = Content.Load<Texture2D>("distortion"); 

मैं लगभग भूल गया, इसे निर्माता में डाल दिया:

 graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800; graphics.IsFullScreen = true; 

ताकि वहाँ एक अभिविन्यास था और स्थिति के साथ कोई समस्या नहीं थी।

बेसिकलीफेक्ट (आरंभ में) :

 basicEffect = new BasicEffect(GraphicsDevice); basicEffect.TextureEnabled = true; //      basicEffect.Projection = Matrix.CreateOrthographicOffCenter(0, 480, 800, 0, 0f, 10f); basicEffect.View = Matrix.Identity; basicEffect.World = Matrix.Identity; 

प्रोजेक्शन - एक दो आयामी विमान (स्क्रीन) पर तीन आयामी वस्तु का मैट्रिक्स प्रक्षेपण।
दृश्य - एक दृश्य का एक मैट्रिक्स, एक कैमरा, यदि आप चाहें।
विश्व - विश्व मैट्रिक्स: रोटेशन, आकार, स्थिति।

हम दृश्य और विश्व -इकाई मैट्रिसेस सेट करते हैं।
और प्रोजेक्शन हम ऑर्थोगोनल प्रक्षेपण को परिभाषित करते हैं, अर्थात्। हमारे पास पूरी तरह से स्क्रीन पर एक आदिम अनुमान होगा। समझाने के लिए आसान है, तो स्क्रीन के सिरों के साथ आदिम के छोर।

तो, अब के लिए, Game1 के साथ, चलो एक नया वर्ग बनाते हैं GridVertexPositionColorTexture , और यहाँ इसकी पूर्ण सूची है (मैं पूर्ण के लिए माफी माँगता हूँ, लेकिन यह टिप्पणियों के साथ है):

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework; namespace GridDistortion { public class GridVertexPositionColorTexture { public VertexPositionColorTexture[] Vertices; //   ,      ,    UV   public short[] Indices; // ,       ,   3D ,   ,    public int Width; //    X public int Height; //    Y public Vector2 CellSize; //       X  Y  public void BuildGeometry(int colums, int rows, Vector2 cellSize) //     { Width = colums; Height = rows; CellSize = cellSize; Vertices = new VertexPositionColorTexture[(Width + 1) * (Height + 1)]; //    Indices = new short[Width * Height * 6]; //      /*    */ for (int i = 0; i < Width + 1; i++) { for (int j = 0; j < Height + 1; j++) { int index = j * (Width + 1) + i; VertexPositionColorTexture vertex = new VertexPositionColorTexture() { Position = new Vector3(new Vector2(i, j) * CellSize, 0f), //   Color = Color.White, TextureCoordinate = GetDefaultUV(index) //   }; Vertices[index] = vertex; } } /*    */ int indexPos = 0; for (int i = 0; i < Width; i++) { for (int j = 0; j < Height; j++) { int v0 = j * (Width + 1) + i; int v1 = j * (Width + 1) + i + 1; int v2 = (j + 1) * (Width + 1) + i; int v3 = (j + 1) * (Width + 1) + i + 1; Indices[indexPos] = (short)v0; Indices[indexPos + 1] = (short)v1; Indices[indexPos + 2] = (short)v2; Indices[indexPos + 3] = (short)v2; Indices[indexPos + 4] = (short)v1; Indices[indexPos + 5] = (short)v3; indexPos += 6; } } } public void Draw(GraphicsDevice graphicsDevice) //     VertexPositionColorTexture { graphicsDevice.DrawUserIndexedPrimitives<VertexPositionColorTexture>(PrimitiveType.TriangleList, Vertices, 0, Vertices.Length, Indices, 0, Indices.Length / 3); } public void ResetUVs() //  UV  { for (int i = 0; i < Vertices.Length; i++) { VertexPositionColorTexture v = Vertices[i]; v.TextureCoordinate = GetDefaultUV(i); Vertices[i] = v; } } public Vector2 GetUV0(int index) //    { return Vertices[index].TextureCoordinate; } public void SetUV0(int index, Vector2 value) //    { Vertices[index].TextureCoordinate = value; } public Vector2 GetDefaultUV(int index) //       { int i = index % (Width + 1); int j = index / (Width + 1); return new Vector2((float)i / Width, (float)j / Height); } } } 

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

सबसे पहले, हम ग्रिड को रीसेट करेंगे, वर्तमान विकृतियों को उस पर लागू करेंगे।
दूसरा हमारे ग्रिड को जेली में बदल देगा, जो कि डिफ़ॉल्ट स्थिति में आने तक उतार-चढ़ाव करेगा।

हम पहला कंट्रोलर लिखेंगे, एक नया सिम्पलग्रिड क्लास और उसकी लिस्टिंग बनाएँगे :

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; namespace GridDistortion { public class SimpleGrid { publicGridVertexPositionColorTexture grid; //    public SimpleGrid(GridVertexPositionColorTexture grid) { this.grid = grid; } public void Update() { swap(); } public virutal void swap() //       { grid.ResetUVs(); } public void Rebellion(Vector2 pos_rebellion, float radius) //         { Vector2 gridSize = new Vector2(grid.Width, grid.Height) * grid.CellSize; //    for (int i = 0; i < grid.Vertices.Length; i++) { Vector2 pos = grid.GetUV0(i) * gridSize; //       Vector2 newPos = pos; Vector2 center = pos_rebellion; //    float distance = Distance(pos, center); //         if (distance < radius) //    ,    ,   { Vector2 dir = pos - center; //    float length = dir.Length(); float minDisplacement = -length; if (dir.Length() != 0) { dir.Normalize(); //   } Vector2 displacement = dir * Math.Max(-100f, minDisplacement); //   ,  -100f —  ,   —   ,   newPos += displacement * (1f - distance / radius) * 0.25f; grid.SetUV0(i, newPos / gridSize); //    } } } public static float Distance(Vector2 vector1, Vector2 vector2) { double value = ((vector2.X - vector1.X) * (vector2.X - vector1.X)) + ((vector2.Y - vector1.Y) * (vector2.Y - vector1.Y)); return (float)Math.Sqrt(value); } } } 

नियंत्रक लिखा है, अब Game1 पर वापस, दो नए चर:

 GridVertexPositionColorTexture grid; SimpleGrid simpleGrid; 

उनका प्रारंभ:

 grid = new GridVertexPositionColorTexture(); grid.BuildGeometry(48, 80, new Vector2(10, 10)); simpleGrid = new SimpleGrid(grid); 

खुद को अपडेट करें :

 simpleGrid.Update(); //    TouchCollection collection = TouchPanel.GetState(); //    foreach (TouchLocation point in collection) { if (point.State == TouchLocationState.Moved) { simpleGrid.Rebellion(point.Position, 100f); //     point.Position   100f } } 

और अंत में, ड्राइंग:

 GraphicsDevice.SamplerStates[0] = SamplerState.LinearClamp; //  Clamp, ..  Wrap-    Reach ,      basicEffect.Texture = background; //     basicEffect.CurrentTechnique.Passes[0].Apply(); //  basicEffect grid.Draw(GraphicsDevice); //   

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

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; namespace GridDistortion { public class ElasticGrid : SimpleGrid { private Vector2[] Velocity; //   public ElasticGrid(GridVertexPositionColorTexture grid) : base(grid) { this.Velocity = new Vector2[(grid.Width + 1) * (grid.Height + 1)]; } public override void swap() { Vector2 gridSize = new Vector2(grid.Width, grid.Height) * grid.CellSize; for (int i = 0; i < grid.Vertices.Length; i++) { //Get the position in pixels Vector2 pos = grid.GetUV0(i) * gridSize; Vector2 pos_default = grid.GetDefaultUV(i) * gridSize; Vector2 dir = (pos_default - pos) / 1.1f; //          1.1f, //Set the new Texture Coordinates grid.SetUV0(i, (pos + Velocity[i]) / gridSize); //   +   Velocity[i] = dir; //     } } } } 

Game1 में ग्रिड नियंत्रक बदलें और विकृतियों का आनंद लें।

यहाँ इस तरह के एक सरल और दिलचस्प दृष्टिकोण है। नियंत्रकों की एक अनंत संख्या हो सकती है, उदाहरण के लिए, लहरों और आवारा के साथ किसी भी शेड के बिना वास्तविक समय में वास्तविक पानी।

एक बार मैं आपके खेल में सुंदरता जोड़ने के लिए अन्य तरीकों का वर्णन करने की कोशिश करूँगा।
यह भी XNA श्रृंखला से 3 डी विषयों पर लेख लिखने की योजना है।
खैर, और एक बोनस के रूप में, अगला लेख संभवत: यह होगा कि आप WP7 पर गेम कैसे लिख सकते हैं, इसे बाजार में मुफ्त में रखें, विज्ञापनों के बिना और गरीबी में बैठें।

सूत्रों को यहां डाउनलोड किया जा सकता है ।

प्रयोग, सृजन; जल्द ही मिलते हैं :-)