Tipy a triky pro vývoj her v XNA (MS Fest)
-
Upload
tomas-slavicek -
Category
Technology
-
view
887 -
download
6
description
Transcript of Tipy a triky pro vývoj her v XNA (MS Fest)
![Page 1: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/1.jpg)
Tipy a trikypro vývoj her v XNA
Tomáš SlavíčekMVP XNA/DirectX, MS Student Partner
@tomasslavicek http://tomasslavicek.cz
![Page 2: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/2.jpg)
Agenda
• rychlejší načítání textur• vykreslování ze SpriteSheetů• renderování do textury
• 3D snadno a rychle• kamery• „vektorové“ kreslení
• struktura herního engine
![Page 3: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/3.jpg)
Rychlé opakování XNA
• herní smyčka, Content Pipeline,SpriteBatch, SpriteFont…
![Page 4: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/4.jpg)
XNA – situace
• desktop PC• Xbox 360• Windows Phone 7• přehrávače Zune
• Windows 8 / RT• Windows Phone 8• PS Vita• Android• iOS, Mac…• Linux…
![Page 5: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/5.jpg)
Zdroje o XNA
• rozcestník na SmartMania.czhttp://bit.ly/xna_smartmania
![Page 6: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/6.jpg)
Další literatura
• XNA 3.0 Game Programming Recipes, Riemer Grootjanshttp://amzn.to/T9rUn8
• 3D Graphics with XNA Game Studio 4.0, Sean Jameshttp://amzn.to/QDw8Ir
• Moderní počítačová grafika, Jiří Žára a kol.http://bit.ly/modernigrafika
![Page 7: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/7.jpg)
Rychlejší načítání textur
• pomocí Content Pipeline
• nebo přes Stream
• převod do .xnb• bez komprese, pokud není velikost ^2
= větší velikost, delší načítání
• obrázky přímo kopírovány do /bin
1/3
![Page 8: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/8.jpg)
Příklad: načítání textur
• 50 kB PNG obrázek, 800x480 px
• 6 obrázků, na Windows Phone:
• převedeno Content Pipeline: 1.5 MB
• pomocí Content Pipeline: 3000 ms!• přes Stream: 550 ms• velikost ^2, s Dxt kompresí: 450 ms
zdroj: http://jakepoz.com/jake_poznanski__speeding_up_xna.html
2/3
![Page 9: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/9.jpg)
Rychlejší načítání textur3/3
Texture2D file = null;using (Stream s = TitleContainer.OpenStream(fileName)){
file = Texture2D.FromStream(device, s);}
• BuildAction: none, Copy: if newer• pomocná komponenta Operations• premultiplied alpha!
![Page 10: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/10.jpg)
Tiled grafika
• jeden obrázek = SpriteSheet• hra se skládá z výřezů
• proč?
1/3
![Page 11: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/11.jpg)
Tiled grafika
• jeden obrázek = SpriteSheet• hra se skládá z výřezů
• optimalizace rychlosti vykreslování
2/3
![Page 12: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/12.jpg)
• Tiled editor mapeditor.org• SpriteSheet packer
spritesheetpacker.codeplex.com
Tiled grafika 3/3
![Page 13: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/13.jpg)
Vykreslování do textury
• příklady:• generování grafiky za běhu• vlastní SpriteSheet packer? • WP7: vykreslení Live tile,
uložení screenshotu…
1/2
![Page 14: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/14.jpg)
Vykreslování do textury
• XNA 4.0: RenderTarget2D ≅ Texture2D• lze přesměrovat vykreslování
RenderTarget2D texture =new RenderTarget2D(device, size.X, size.Y);
device.SetRenderTarget(texture);device.Clear(Color.White);spriteBatch.Begin();
spriteBatch.End(); device.SetRenderTarget(null);return texture;
2/2
![Page 15: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/15.jpg)
Zrcadlové převrácení
• jak vykreslit celou hru zrcadlově převráceně?
• např. podpora psaní zprava dolevav aplikaci na zápisky
1/2
![Page 16: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/16.jpg)
Zrcadlové převrácení
• odpověď:• vykreslit vše do jiné textury• předat parametr
SpriteEffects.FlipHorizontally
2/2
spriteBatch.Draw(texture, rectangle, null, Color.White, 0f, Vector2.Zero, SpriteEffects.FlipHorizontally, 0f);
![Page 17: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/17.jpg)
Zakázání vyhlazování
• nastavení spriteBatch.Begin()• parametr SamplerState.PointClamp
spriteBatch.Begin(SpriteSortMode.FrontToBack,BlendState.AlphaBlend,
SamplerState.PointClamp,null, null);
![Page 18: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/18.jpg)
Intermezzo: otázky?
• než se přesuneme ke 3D
![Page 19: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/19.jpg)
Od 2D ke 3D
x
y x
y
z
![Page 20: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/20.jpg)
3D grafika
• objekty jsou ve světových souřadnicích• = náš virtuální svět• díváme se na něj kamerou
![Page 21: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/21.jpg)
Typy kamer
• podle pohledu:• shora, našikmo, zboku, izometrická…• FPS střílečka, strategie…
• podle projekce:• perspektivní, ortografická
![Page 22: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/22.jpg)
Vlastnosti kamer
• pozice, směr pohledu, orientace nahoru…
• blízká a vzdálená ořezová rovina
zdroj: http://db-in.com/blog/2011/04/cameras-on-opengl-es-2-x
1/2
![Page 23: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/23.jpg)
Vlastnosti kamer
• view matrix, projection matrix
zdroj: http://robertokoci.com/world-view-projection-matrix-unveiled/
2/2
![Page 24: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/24.jpg)
Vlastnosti každého objektu
• pozice, otočení, zkosení…• -> world matrix
final = world * view * projection
world = scale * shear * rotation * translation
násobení matic
![Page 25: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/25.jpg)
Ukázka: jednoduchá kamera
• obecný interface ICamera
interface ICamera{ Matrix ViewMatrix { get; } Matrix ProjectionMatrix { get; }
void Initialize(); void ChangeOrientation(DisplayOrientation orient);}
1/3
![Page 26: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/26.jpg)
Ukázka: jednoduchá kamera
• nastavení pohledu
• nastavení projekce
viewMatrix = Matrix.CreateLookAt(position,position + targetDirection, upVector);
projectionMatrix =Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4,device.Viewport.AspectRatio,nearPlaneDistance, farPlaneDistance);
2/3
![Page 27: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/27.jpg)
Ukázka: jednoduchá kamera
• viewMatrix = směr• nastavit na začátku• vždy při změně pozice/směru
• projectionMatrix = zkreslení• na začátku• při změně orientace displeje / pohledu
3/3
![Page 28: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/28.jpg)
Ukázka: objekt pro modely
• načtení modelu: Content Pipeline• parametry:• pozice, otočení… world matrix
• osvětlení, průhlednostvržený stín…
• bounding sphere / box• ID…
![Page 29: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/29.jpg)
Screen2DCamera
• skládání geometrie z vertexů a indexů• 3D kamera jakoby „2D“
1/2
![Page 30: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/30.jpg)
Screen2DCamera
• osa X, Y odpovídá X, Y na obrazovce• osa Z = hloubka (který objekt je před / za)
viewMatrix = Matrix.Identity;
projectionMatrix =Matrix.CreateOrthographicOffCenter(
0.5f, (float)width - 0.5f,(float)height - 0.5f, 0.5f,-1000f, 1000f);
2/2
![Page 31: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/31.jpg)
„Vektorové kreslení“
• můžeme objekt poskládat z trojúhelníků
• vertexy, indexy
1/2
![Page 32: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/32.jpg)
„Vektorové kreslení“
• typy:• VertexPositionColor• VertexPositionNormalTexture …
• vykreslování:• DrawPrimitives• DrawIndexedPrimitives• DrawUserIndexedPrimitives …
2/2
![Page 33: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/33.jpg)
Další CZ zdroje ke 3D
• Seriál na CzechGamer.com, projít si přiložené souboryhttp://bit.ly/V5iJ7x
• Skládání transformací – záznam seminářehttp://youtu.be/KfGF5-7vydU
• Moje bakalářka – 3D enginehttp://bit.ly/Svv5Hi
• Seriál na vbnet.cz (T. Herceg)http://www.vbnet.cz/kategorie--16.aspx
![Page 34: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/34.jpg)
Ukázka: 3D engine
![Page 35: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/35.jpg)
Další akce - seminář
• Vývoj her pro Win8 a WP7,multiplayer pomocí Windows Azure
10. prosince 2012, T. Slavíček, T. Herceghttp://gds2012.ceske-hry.cz/
![Page 36: Tipy a triky pro vývoj her v XNA (MS Fest)](https://reader035.fdocument.pub/reader035/viewer/2022062307/555198a7b4c905013a8b4a4f/html5/thumbnails/36.jpg)
Děkuji za pozornost!
Tomáš SlavíčekMVP XNA/DirectX, MS Student Partner
@tomasslavicek http://tomasslavicek.cz