Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Advanced techniques for the development of 2DWindows 8 games using Direct X and C++Markus JostCEO, Lead Programmer, Codebo...
AgendaRecap first Session 5’Cross-Device UI Design 5’Performance tuning 15’Advanced Techniques 15’Questions 5’
Cross-Device UI DesignChapter 1/4
The Problem:The Solution:
The Problem:The Solution:
Illustrating design thoughts by sample
Performance tuningChapter 2/4
Texture Atlases© Gango Games<?xml version="1.0" encoding="UTF-8"?><!-- Created with TexturePacker http://texturepacker.com...
Build-time processing mediaPipeline Direct3D 11: http://code.msdn.microsoft.com/windowsapps/Direct3D-Resource-Loading-2540...
Sprite-BatchingSpriteBatch Sample: http://code.msdn.microsoft.com/windowsapps/Direct3D-sprite-sample-97ae6262
The Problem:The Solution:
Sample optimizationoptimization
Advanced TechniquesChapter 3/4
Sample Pseudo Code for setting Transform:Vector<Sprite*> parents = getParentSprites();Matrix translation = Matrix.Identity...
SpriteSheet AnimationCreate animation sequences from an Atlas Pros: High level of detail Easy to implement Cons: Very...
Bone AnimationsCreate animations using a tool (e.g. Flash) combiningbody parts Pros: Way less memory consumption Allows...
3D AnimationsUse 3D Animations made with 3DSMax or any other 3DAnimation Tool Pros: Smooth Animations High Level of Det...
 Used for example for smoke, fire, dust, snow, rain etc. Lots of tiny textures that face the camera Each particle has i...
Sample
ImplementationSs = Vh * Si * sqrt(1/(A + B * De + C *( De2 )))Vh : Viewport heightSi : Initial point sizeDe2 : The Distanc...
Box2Dhttp://www.box2d.org/manual.html
On Windows 8http://code.msdn.microsoft.com/windowsapps/DWriteHelloWorld-760793d2On Windows Phone 8Or use BitmapFontshttp:/...
Questions?Chapter 4/4
Advanced techniques for development of 2D Windows 8 games
Advanced techniques for development of 2D Windows 8 games
Advanced techniques for development of 2D Windows 8 games
Advanced techniques for development of 2D Windows 8 games
Upcoming SlideShare
Loading in …5
×

Advanced techniques for development of 2D Windows 8 games

529 views

Published on

Markus Jost, CEO, Lead Programmer bei Codebox GmbH, stellt auf App Conference Shape fortgeschrittene Techniken für die Entwicklung von 2D Windows 8 Spielen vor.

  • Be the first to comment

  • Be the first to like this

Advanced techniques for development of 2D Windows 8 games

  1. 1. Advanced techniques for the development of 2DWindows 8 games using Direct X and C++Markus JostCEO, Lead Programmer, Codebox GmbHmarkus.jost@codebox.ch
  2. 2. AgendaRecap first Session 5’Cross-Device UI Design 5’Performance tuning 15’Advanced Techniques 15’Questions 5’
  3. 3. Cross-Device UI DesignChapter 1/4
  4. 4. The Problem:The Solution:
  5. 5. The Problem:The Solution:
  6. 6. Illustrating design thoughts by sample
  7. 7. Performance tuningChapter 2/4
  8. 8. Texture Atlases© Gango Games<?xml version="1.0" encoding="UTF-8"?><!-- Created with TexturePacker http://texturepacker.com--><!-- $TexturePacker:SmartUpdate:963678140e0adc4acab0c90e39ea3d54$ --><!--Format:n => name of the spritex => sprite x pos in texturey => sprite y pos in texturew => sprite width (may be trimmed)h => sprite height (may be trimmed)oX => sprites x-corner offset (only available if trimmed)oY => sprites y-corner offset (only available if trimmed)oW => sprites original width (only available if trimmed)oH => sprites original height (only available if trimmed)r => y only set if sprite is rotated--><TextureAtlas imagePath="FlySplash.png" width="512" height="1024"><sprite n="fly_mouth_frame1.png" x="416" y="210" w="56" h="102" r="y"/><sprite n="fly_mouth_frame2.png" x="416" y="106" w="56" h="102" r="y"/><sprite n="fly_mouth_frame3.png" x="416" y="2" w="56" h="102" r="y"/><sprite n="fly_splash_solid.png" x="2" y="2" w="412" h="298"/><sprite n="fly_wings_frame1.png" x="2" y="412" w="228" h="108"/><sprite n="fly_wings_frame2.png" x="232" y="314" w="228" h="108"/><sprite n="fly_wings_frame3.png" x="2" y="302" w="228" h="108"/></TextureAtlas>
  9. 9. Build-time processing mediaPipeline Direct3D 11: http://code.msdn.microsoft.com/windowsapps/Direct3D-Resource-Loading-25406148
  10. 10. Sprite-BatchingSpriteBatch Sample: http://code.msdn.microsoft.com/windowsapps/Direct3D-sprite-sample-97ae6262
  11. 11. The Problem:The Solution:
  12. 12. Sample optimizationoptimization
  13. 13. Advanced TechniquesChapter 3/4
  14. 14. Sample Pseudo Code for setting Transform:Vector<Sprite*> parents = getParentSprites();Matrix translation = Matrix.Identity;foreach(Sprite *s in parents){translation *= s.getTranslationMatrix();}translation *= getTranslationMatrix();SetTranslation(translation);
  15. 15. SpriteSheet AnimationCreate animation sequences from an Atlas Pros: High level of detail Easy to implement Cons: Very High Memory use Low FPS resolution Hand drawn frames take time
  16. 16. Bone AnimationsCreate animations using a tool (e.g. Flash) combiningbody parts Pros: Way less memory consumption Allows many many animations to reuse sametexture parts Runs at max FPS Artists are used to using Flash Fast creation Cons: Low level of details Restrictions in design More work to implement
  17. 17. 3D AnimationsUse 3D Animations made with 3DSMax or any other 3DAnimation Tool Pros: Smooth Animations High Level of Details Depending on LOD, fast production Cons: Doesn’t mix well with 2D GPU intense Also Memory intense due to Animation data
  18. 18.  Used for example for smoke, fire, dust, snow, rain etc. Lots of tiny textures that face the camera Each particle has its own state Position Rotation Scale Color 1 Texture… Using PointSprites, particles have only 1 vertex Usually alpha blended -> performance Avoid filling Particle Sytsems Supported by most GPUs
  19. 19. Sample
  20. 20. ImplementationSs = Vh * Si * sqrt(1/(A + B * De + C *( De2 )))Vh : Viewport heightSi : Initial point sizeDe2 : The Distance from eye to positionA, B, C : User defined valuesfloat fPointSize = 1.0f, fPointScaleB = 1.0f;m_d3dDevice->SetRenderState(D3DRS_POINTSPRITEENABLE, true); //create vertices?m_d3dDevice->SetRenderState(D3DRS_POINTSCALEENABLE, true); //use scale function?m_d3dDevice->SetRenderState(D3DRS_POINTSIZE, *((DWORD*)&fPointSize));m_d3dDevice->SetRenderState(D3DRS_POINTSCALE_B, *((DWORD*)&fPointScaleB));m_d3dDevice->SetRenderState(D3DRS_ALPHABLENDENABLE,true);m_d3dDevice->SetRenderState(D3DRS_SRCBLEND,D3DBLEND_ONE);m_d3dDevice->SetRenderState(D3DRS_DESTBLEND,D3DBLEND_ONE);#define D3DFVF_CUSTOMVERTEX (D3DFVF_XYZ | D3DFVF_PSIZE | D3DFVF_DIFFUSE) structD3DVERTEX { float fX, fY, fZ, fSize; DWORD dwColor; };D3DXCreateTextureFromFile(m_d3dDevice,"texture.png",&pTex);m_d3dDevice->SetTexture(0,pTex);m_d3dDevice->SetStreamSource(0,pVB,0,sizeof(D3DVERTEX));m_d3dDevice->DrawPrimitive(D3DPT_POINTLIST, 0, numPoints);
  21. 21. Box2Dhttp://www.box2d.org/manual.html
  22. 22. On Windows 8http://code.msdn.microsoft.com/windowsapps/DWriteHelloWorld-760793d2On Windows Phone 8Or use BitmapFontshttp://directxtk.codeplex.com/http://www.71squared.com/en/glyphdesigner
  23. 23. Questions?Chapter 4/4

×