Tipy a trikypro vývoj her v XNA

Tomáš SlavíčekMVP XNA/DirectX, MS Student Partner

@tomasslavicek http://tomasslavicek.cz

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

Rychlé opakování XNA

• herní smyčka, Content Pipeline,SpriteBatch, SpriteFont…

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…

Zdroje o XNA

• rozcestník na SmartMania.czhttp://bit.ly/xna_smartmania

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

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

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

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!

Tiled grafika

• jeden obrázek = SpriteSheet• hra se skládá z výřezů

• proč?

1/3

Tiled grafika

• jeden obrázek = SpriteSheet• hra se skládá z výřezů

• optimalizace rychlosti vykreslování

2/3

• Tiled editor mapeditor.org• SpriteSheet packer

spritesheetpacker.codeplex.com

Tiled grafika 3/3

Vykreslování do textury

• příklady:• generování grafiky za běhu• vlastní SpriteSheet packer? • WP7: vykreslení Live tile,

uložení screenshotu…

1/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;

2/2

Zrcadlové převrácení

• jak vykreslit celou hru zrcadlově převráceně?

• např. podpora psaní zprava dolevav aplikaci na zápisky

1/2

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);

Zakázání vyhlazování

• nastavení spriteBatch.Begin()• parametr SamplerState.PointClamp

spriteBatch.Begin(SpriteSortMode.FrontToBack,BlendState.AlphaBlend,

SamplerState.PointClamp,null, null);

Intermezzo: otázky?

• než se přesuneme ke 3D

Od 2D ke 3D

x

y x

y

z

3D grafika

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

Typy kamer

• podle pohledu:• shora, našikmo, zboku, izometrická…• FPS střílečka, strategie…

• podle projekce:• perspektivní, ortografická

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

Vlastnosti kamer

• view matrix, projection matrix

zdroj: http://robertokoci.com/world-view-projection-matrix-unveiled/

2/2

Vlastnosti každého objektu

• pozice, otočení, zkosení…• -> world matrix

final = world * view * projection

world = scale * shear * rotation * translation

násobení matic

Ukázka: jednoduchá kamera

• obecný interface ICamera

interface ICamera{ Matrix ViewMatrix { get; } Matrix ProjectionMatrix { get; }

void Initialize(); void ChangeOrientation(DisplayOrientation orient);}

1/3

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

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

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…

Screen2DCamera

• skládání geometrie z vertexů a indexů• 3D kamera jakoby „2D“

1/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);

2/2

„Vektorové kreslení“

• můžeme objekt poskládat z trojúhelníků

• vertexy, indexy

1/2

„Vektorové kreslení“

• typy:• VertexPositionColor• VertexPositionNormalTexture …

• vykreslování:• DrawPrimitives• DrawIndexedPrimitives• DrawUserIndexedPrimitives …

2/2

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

Ukázka: 3D engine

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/

Děkuji za pozornost!

Tomáš SlavíčekMVP XNA/DirectX, MS Student Partner

@tomasslavicek http://tomasslavicek.cz