programming4us
         
 
 
Windows Phone

Windows Phone 7 Game Development : Orthographic Projection (part 2) - Isometric Projection & Pixel-Aligned Projection

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
12/1/2011 9:21:25 AM

3. Isometric Projection

To obtain an isometric projection, we simply need to set the orthographic projection up as described and then rotate the camera so that it looks upon the scene from an angle, instead of straight on.

The effects of this camera rotation can be seen in Figure 4. The two images both display a unit-size cube with an orthographic projection. On the left, the camera is looking directly along the negative z axis, so only the front face of the cube can be seen. On the right, the camera has been moved so that it looks from the point (1, 1, 1) toward the origin point (0, 0, 0). As a result, the cube is now seen with its corner facing toward the camera. Note that the cube's front face (lit in medium gray) is now appearing at the bottom left of the cube; this should help you to visualize how the camera position has moved.

Figure 4. Direct orthographic projection and rotated orthographic projection

The code required to set the camera into this position is shown in Listing 2. This replaces the previous calculation of the view matrix in the game's Initialize function.

Example 2. Setting the camera position for an isometric projection
// Calculate a view matrix (where we are looking from and to) for isometric projection
Matrix view = Matrix.CreateLookAt(new Vector3(1, 1, 1), Vector3.Zero, Vector3.Up);


With the camera so positioned, the world axes are shifted so that they are no longer aligned with the screen axis. Moving an object along the positive x axis will now cause it to move to the right and down on the screen. Moving an object along the positive z axis will cause it to move left and down on the screen, and the positive y axis will move up on the screen.

These positional effects can be seen in Figure 5. The cube labeled A is at position (0, 0, 0), the cube labeled B is at position (0, 1, 0), the cube labeled C is at position (0, 0, 1), and the cube labeled D is at position (2, 0, 0).

Figure 5. Objects in different positions with an isometric projection.

An example of using an isometric projection can be seen in the Isometric project accompanying this chapter. It sets up a grid of unit-size cubes along the x and z planes, and then scales them along the y axis to make them increase and decrease in height. An image from the project can be seen in Figure 6.

Figure 6. The Isometric example project

Using an isometric view of an orthographic projection will be useful in only a minority of games, but for those that do need it, XNA's rich 3D features create a powerful environment for displaying such graphical environments.

4. Pixel-Aligned Projection

We can also use orthographic projections to align the coordinate system exactly to the pixels on the screen. This is generally useful only for 2D rendering, and in many cases will be more easily achieved by simply using XNA's sprite technology instead. As you have seen by now, however, there are features that the 3D rendering environment offers that sprites cannot achieve, such as powerful matrix-based positioning and flexible lighting.

To set up a pixel-aligned projection, we simply need to provide the actual viewport width and height when creating the matrix, as shown in Listing 3. Given a width of 480 and a height of 800, this configuration will create a coordinate system ranging from position (−240, −400) in the screen's bottom-left corner to position (240, 400) in its top-right corner.

Example 3. Creating a pixel-aligned orthographic projection matrix
// Create a pixel-aligned orthographic projection
Matrix projection = Matrix.CreateOrthographic(GraphicsDevice.Viewport.Width,
GraphicsDevice.Viewport.Height, 0, 100);


This works fine, but has put the origin (0, 0) coordinate in the center of the screen. Normally when working with 2D coordinate systems (such as the one used by XNA's sprites), the origin is in the top-left corner, and the positive y axis points toward the bottom of the screen. We can replicate this same system by using a different projection matrix creation function: CreateOrthographicOffCenter.

This function expects six parameters to be passed, as follows and in this order:

  • left: the coordinate to use to represent the left edge of the screen

  • right: the coordinate for the right edge of the screen

  • bottom: the coordinate for the bottom edge of the screen

  • top: the coordinate for the top edge of the screen

  • zNearPlane: the near clipping plane distance

  • zFarPlane: the far clipping plane distance

Any values can be passed for the left, right, bottom, and top coordinates, so we can set the left and top values to be zero, and the right and bottom to be the viewport width and height, respectively. Listing 4 shows an example of setting the projection up in this way.

Example 4. Creating an off-center pixel-aligned orthographic projection matrix
// Create a pixel-aligned orthographic projection with its origin in the top-left
// of the screen.
Matrix projection = Matrix.CreateOrthographicOffCenter
(0, GraphicsDevice.Viewport.Width,
GraphicsDevice.Viewport.Height, 0,
−100, 100);


If you wanted to put the origin (0, 0) coordinate to the bottom left instead, simply swap the bottom and top parameters and the whole display will flip vertically to achieve this.

Other -----------------
- Windows Phone 7 Game Development : Orthographic Projection (part 1) - The Viewing Frustum & Defining the Orthographic Viewing Frustum in XNA
- Windows Phone 7 Game Development : Lighting (part 3) - Adding Lighting to Games
- Windows Phone 7 Game Development : Lighting (part 2) - How XNA Calculates Light Reflections
- Windows Phone 7 Game Development : Lighting (part 1) - Types of Illumination
- Windows Phone 7 : User Interface - Using Panorama and Pivot Controls
- Windows Phone 7 : User Interface - Localizing Your Application
- User Interface : Using the Windows Phone 7 Predefined Styles
- Handling Input on Windows Phone 7 : Touch Input (part 3) - Multi-Point Touch
- Handling Input on Windows Phone 7 : Touch Input (part 2) - Raw Touch with Mouse Events
- Handling Input on Windows Phone 7 : Touch Input (part 1) - Single-Point Touch
- Handling Input on Windows Phone 7 : The Keyboard
- User Interface : Customizing the Soft Input Panel Keyboard to Accept Only Numbers
- User Interface : Detecting Changes in the Theme Template
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 6) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 5) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 4) - Building a Game Lobby
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 3) - Creating a Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 2) - Main Menu and State Management
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 1) - Getting Ready for Networking Development
- User Interface : Using the ApplicationBar Control
 
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.