Channels ▼
RSS

JVM Languages

Heightmap Terrain Rendering

Source Code Accompanies This Article. Download It Now.


Converting 3D Games to Landscape Mode

Mobile devices such as the Sony Ericsson W550 and W600 Walkman phones support two game-playing styles—portrait and landscape, both specifically designed for gaming and camera use. But while users can change between playing styles, there is no way for a program to detect if a phone is used in portrait or landscape—the Java VM is not aware of any screen configuration changes.

One mobile application developer that has experienced landscape game development first hand is Digital Chocolate (www.digitalchocolate.com/). Digital Chocolate has converted its Mobile Java 3D game Extreme Air Snowboarding 3D to landscape mode. The lessons learned from this development experience helped Digital Chocolate port four more games to the landscape game-play style for Sony Ericsson mobile phones.

Digital Chocolate started the landscape mode porting project for Extreme Air Snowboarding 3D by writing and adding a new canvas implementation to its core gaming library. This implementation, together with changes to Digital Chocolate's core toolkit, handles all the hard work and, if the game is designed properly, the game itself requires few (if any) changes to existing code. The canvas simply receives information whenever the orientation of the screen is changed, and it reacts to this information by enabling/disabling an extra backbuffer, to which the graphics are rendered before drawing them to the screen, and by signaling the game to recalculate screen offsets of graphical elements, tile counts, and other data required for rendering the output.

The game continues to draw into the graphics object it receives as usual, but the canvas implementation rotates the backbuffer by 90 degrees before drawing it to the actual screen graphics object. If the game code is designed to support this feature from the ground up, this is theoretically all that is needed. Most of Digital Chocolate's games have been designed so that they support scalable screen sizes, so porting has been relatively easy.

"For best portability, it's extremely important that the positions of the graphical elements are not hard-coded to fixed-screen locations; instead, locations should be specified relatively to screen edges. Better yet, a percentage scale should be used whenever possible," explains Miikka Kukkosuo, a Digital Chocolate game engineer.

Determining a good layout for screen items requires some extra thinking at the beginning of the development cycle, as rotating the screen radically changes the display's aspect ratio. This poses an extra challenge for the graphic designers, who are often already working with tight graphics memory budgets and have to find an effective way to fit textboxes, score displays, and other items onto the screen. Also, the game components need to be designed so that they won't look bad even if the orientation changes, as usually only one graphics/tile set can be used for each game.

"3D solves many of the graphics scaling issues as it's easier to change the scale of the graphics and field-of-view (FOV) than in 2D. Usually good results can be achieved simply by tweaking the camera aspect ratio and FOV, and by making sure the camera views do not show anything that is not supposed to be seen outside screen borders," Kukkosuo comments.

"So far we haven't had to change anything in the actual 3D scenes, but at some point this may become necessary, as some games can be more sensitive to what's actually seen in the viewport than others," he explains, "If multiple cameras are used, extra care should be taken to make sure that the visibility angles for all the cameras actually get fixed, otherwise some nasty surprises may surface during the game play."

Digital Chocolate discovered that adding landscape mode support to an existing game was relatively easy in both 2D and Mobile Java 3D if the game was well designed from the ground up. Digital Chocolate recommends spending some time to build flexible core classes so that fixed-screen locations and parameters are kept to a minimum. This also enhances the portability of the game to other mobile phones and screen sizes.

Code snippets from the canvas implementation used by Digital Chocolate in the landscape version of Extreme Air Snowboarding 3D are available in the source code download for the June issue of DDJ. Note in the code examples that when the orientation of the screen is changed, the graphics buffer should be reallocated; see the setScreenRotated() method.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video