Your SlideShare is downloading. ×
Advanced techniques for development of 2D Windows 8 games
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Advanced techniques for development of 2D Windows 8 games


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.

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Advanced techniques for the development of 2DWindows 8 games using Direct X and C++Markus JostCEO, Lead Programmer, Codebox
  • 2. AgendaRecap first Session 5’Cross-Device UI Design 5’Performance tuning 15’Advanced Techniques 15’Questions 5’
  • 3. Cross-Device UI DesignChapter 1/4
  • 4. The Problem:The Solution:
  • 5. The Problem:The Solution:
  • 6. Illustrating design thoughts by sample
  • 7. Performance tuningChapter 2/4
  • 8. Texture Atlases© Gango Games<?xml version="1.0" encoding="UTF-8"?><!-- Created with TexturePacker><!-- $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. Build-time processing mediaPipeline Direct3D 11:
  • 10. Sprite-BatchingSpriteBatch Sample:
  • 11. The Problem:The Solution:
  • 12. Sample optimizationoptimization
  • 13. Advanced TechniquesChapter 3/4
  • 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. 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. 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. 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.  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. Sample
  • 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. Box2D
  • 22. On Windows 8 Windows Phone 8Or use BitmapFonts
  • 23. Questions?Chapter 4/4