Prezentace k přednášce, která se konala v neděli 2.12. na konferenci MS Fest 2012. Téma: zajímavé tipy pro 2D grafiku, úvod do 3D grafiky.

1. Tipy a triky
pro vývoj her v XNA
Tomáš Slavíček
MVP XNA/DirectX, MS Student Partner
@tomasslavicek http://tomasslavicek.cz

2. 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

3. Rychlé opakování XNA
• herní smyčka, Content Pipeline,
SpriteBatch, SpriteFont…

4. XNA – situace
• desktop PC • Windows 8 / RT
• Xbox 360 • Windows Phone 8
• Windows Phone 7 • PS Vita
• přehrávače Zune • Android
• iOS, Mac…
• Linux…

5. Zdroje o XNA
• rozcestník na SmartMania.cz
http://bit.ly/xna_smartmania

6. Další literatura
• XNA 3.0 Game Programming Recipes, Riemer
Grootjans
http://amzn.to/T9rUn8
• 3D Graphics with XNA Game Studio 4.0, Sean James
http://amzn.to/QDw8Ir
• Moderní počítačová grafika, Jiří Žára a kol.
http://bit.ly/modernigrafika

7. 1/3
Rychlejší načítání textur
• pomocí Content Pipeline
• převod do .xnb
• bez komprese, pokud není velikost ^2
= větší velikost, delší načítání
• nebo přes Stream
• obrázky přímo kopírovány do /bin

8. 2/3
Příklad: načítání textur
• 50 kB PNG obrázek, 800x480 px
• převedeno Content Pipeline: 1.5 MB
• 6 obrázků, na Windows Phone:
• 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

9. 3/3
Rychlejší načítání textur
• BuildAction: none, Copy: if newer
• pomocná komponenta Operations
• premultiplied alpha!
Texture2D file = null;
using (Stream s = TitleContainer.OpenStream(fileName))
{
file = Texture2D.FromStream(device, s);
}

10. 1/3
Tiled grafika
• jeden obrázek = SpriteSheet
• hra se skládá z výřezů
• proč?

11. 2/3
Tiled grafika
• jeden obrázek = SpriteSheet
• hra se skládá z výřezů
• optimalizace rychlosti vykreslování

12. 3/3
Tiled grafika
• Tiled editor mapeditor.org
• SpriteSheet packer
spritesheetpacker.codeplex.com

13. 1/2
Vykreslování do textury
• příklady:
• generování grafiky za běhu
• vlastní SpriteSheet packer? 
• WP7: vykreslení Live tile,
uložení screenshotu…

14. 2/2
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;

15. 1/2
Zrcadlové převrácení
• jak vykreslit celou hru zrcadlově
převráceně?
• např. podpora psaní zprava doleva
v aplikaci na zápisky

16. 2/2
Zrcadlové převrácení
• odpověď:
• vykreslit vše do jiné textury
• předat parametr SpriteEffects.FlipHorizontally
spriteBatch.Draw(texture, rectangle, null,
Color.White, 0f, Vector2.Zero,
SpriteEffects.FlipHorizontally, 0f);

17. Zakázání vyhlazování
• nastavení spriteBatch.Begin()
• parametr SamplerState.PointClamp
spriteBatch.Begin(SpriteSortMode.FrontToBack,
BlendState.AlphaBlend, SamplerState.PointClamp,
null, null);

18. Intermezzo: otázky?
• než se přesuneme ke 3D

19. Od 2D ke 3D
x y
y x
z

20. 3D grafika
• objekty jsou ve světových souřadnicích
• = náš virtuální svět
• díváme se na něj kamerou

21. Typy kamer
• podle pohledu:
• shora, našikmo, zboku, izometrická…
• FPS střílečka, strategie…
• podle projekce:
• perspektivní, ortografická

22. 1/2
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

23. 2/2
Vlastnosti kamer
• view matrix, projection matrix
zdroj: http://robertokoci.com/world-view-projection-matrix-unveiled/

24. Vlastnosti každého objektu
• pozice, otočení, zkosení…
• -> world matrix
final = world * view * projection
world = scale * shear * rotation * translation
násobení matic

25. 1/3
Ukázka: jednoduchá kamera
• obecný interface ICamera
interface ICamera
{
Matrix ViewMatrix { get; }
Matrix ProjectionMatrix { get; }
void Initialize();
void ChangeOrientation(DisplayOrientation orient);
}

26. 2/3
Ukázka: jednoduchá kamera
• nastavení pohledu
viewMatrix = Matrix.CreateLookAt(position,
position + targetDirection, upVector);
• nastavení projekce
projectionMatrix =
Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4,
device.Viewport.AspectRatio,
nearPlaneDistance, farPlaneDistance);

27. 3/3
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

28. Ukázka: objekt pro modely
• načtení modelu: Content Pipeline
• parametry:
• pozice, otočení…  world matrix
• osvětlení, průhlednost
vržený stín…
• bounding sphere / box
• ID…

29. 1/2
Screen2DCamera
• skládání geometrie z vertexů a indexů
• 3D kamera jakoby „2D“

30. 2/2
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);

31. 1/2
„Vektorové kreslení“
• můžeme objekt poskládat z trojúhelníků
• vertexy, indexy

32. 2/2
„Vektorové kreslení“
• typy:
• VertexPositionColor
• VertexPositionNormalTexture …
• vykreslování:
• DrawPrimitives
• DrawIndexedPrimitives
• DrawUserIndexedPrimitives …

33. Další CZ zdroje ke 3D
• Seriál na CzechGamer.com, projít si přiložené soubory
http://bit.ly/V5iJ7x
• Skládání transformací – záznam semináře
http://youtu.be/KfGF5-7vydU
• Moje bakalářka – 3D engine
http://bit.ly/Svv5Hi
• Seriál na vbnet.cz (T. Herceg)
http://www.vbnet.cz/kategorie--16.aspx

34. Ukázka: 3D engine

35. Další akce - seminář
• Vývoj her pro Win8 a WP7,
multiplayer pomocí Windows Azure
10. prosince 2012, T. Slavíček, T. Herceg
http://gds2012.ceske-hry.cz/

36. Děkuji za pozornost!
Tomáš Slavíček
MVP XNA/DirectX, MS Student Partner
@tomasslavicek http://tomasslavicek.cz