Graphics scalability approaches for Series 40 Java ME apps - Revision history

Jaaura: Jaaura - Fixed the year of featured article timestamp

2013-01-30T07:49:46Z

Jaaura - Fixed the year of featured article timestamp

Hamishwillee: Hamishwillee -

2013-01-20T23:10:40Z

Hamishwillee -

Jaaura: Jaaura - /* Introduction */

2013-01-20T20:10:19Z

Jaaura - - Introduction

Jaaura: Jaaura - /* Introduction */

2013-01-20T19:54:15Z

Jaaura - - Introduction

Jaaura: Jaaura - /* Different graphics assets based on the resolution */

2013-01-20T19:42:16Z

Jaaura - - Different graphics assets based on the resolution

Croozeus: Croozeus - /* Introduction */ internal link to Series 40

2013-01-20T14:49:32Z

Croozeus - - Introduction: internal link to Series 40

Croozeus: Croozeus - Added to the FA list

2013-01-20T14:48:01Z

Croozeus - Added to the FA list

Tomi: Tomi -

2013-01-18T13:00:34Z

Tomi -

Trpeki2: Trpeki2 -

2013-01-18T12:44:53Z

Trpeki2 -

Trpeki2: Trpeki2 -

2013-01-18T12:44:09Z

Trpeki2 -

@@ Line 1: / Line 1: @@
 [[Category:Series 40]][[Category:Java ME]][[Category:Graphics]][[Category:UI]][[Category:Series 40 5th Edition (initial release)]][[Category:Series 40 5th Edition FP1]][[Category:Series 40 6th Edition (initial release)]][[Category:Series 40 6th Edition FP1]][[Category:Series 40 Developer Platform 1.0]][[Category:Series 40 Developer Platform 1.1]][[Category:Series 40 Developer Platform 2.0]]
-{{FeaturedArticle|timestamp=20120120}}
+{{FeaturedArticle|timestamp=20130120}}
 {{Abstract|This article lists methods for scaling app graphics to support different screen resolutions and orientations, and links to the Series 40 Java ME examples which utilise those techniques.}}
 {{SeeAlso|[http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/adaptive-design-and-development-on-series-40/adaptive-design-best-practices.html Adaptive design best practices] (Java Library}}

@@ Line 23: / Line 23: @@
 |update-timestamp= <!-- After significant update: YYYYMMDD -->
 |creationdate= 20121024
-|author= [[User:Jaaura]]
+|author= [[User:Tomi_]]/[[User:Jaaura]]
 }}

← Older revision		Revision as of 20:10, 20 January 2013
Line 31:		Line 31:

	This article evaluates (from image quality, performance and when to use point of view) a number of techniques for graphics scalability and points to the Series 40 Java ME examples utilising those techniques. Typically a combination of approaches is used; the best approach depends on the type of app in question.		This article evaluates (from image quality, performance and when to use point of view) a number of techniques for graphics scalability and points to the Series 40 Java ME examples utilising those techniques. Typically a combination of approaches is used; the best approach depends on the type of app in question.
		+
		+	The approaches evaluated include; different graphics assets for different resolutions, runtime scaling of images, drawing graphics with code, filling in spare space, using large background and utilizing vector graphics.

	== Different graphics assets based on the resolution ==		== Different graphics assets based on the resolution ==

@@ Line 30: / Line 30: @@
 [[:Category:Series 40|Series 40]] devices come in a number of different display resolutions, and may also support both portrait and landscape modes. This can pose compatibility, performance and resource problems for app developers unless handled with care. Luckily there are ways to overcome that complexity effectively, while still providing an optimised experience for each resolution and orientation.
-This article lists a number of techniques for graphics scalability and points to the Series 40 Java ME examples utilising those techniques. Typically a combination of approaches is used; the best approach depends on the type of app in question.
+This article evaluates (from image quality, performance and when to use point of view) a number of techniques for graphics scalability and points to the Series 40 Java ME examples utilising those techniques. Typically a combination of approaches is used; the best approach depends on the type of app in question.
 == Different graphics assets based on the resolution ==

@@ Line 78: / Line 78: @@
 </code>
-Using different graphics assets is fast since it does not involve complex algorithms, but on the downside it increases the size of the .jar file. You can, of course, create separate binaries for each resolution, but that is just a compromise — instead of a larger .jar file your maintenance burden is heavier.
+Using different graphics assets is fast since it does not involve complex algorithms, but on the downside it increases the size of the .jar file. You can, of course, do the selection at build time to optimise the jar size and create separate binaries for each resolution, but that is a compromise — instead of a larger .jar file your maintenance burden is heavier.
 == Runtime scaling ==

@@ Line 28: / Line 28: @@
 == Introduction ==
-Series 40 devices come in a number of different display resolutions, and may also support both portrait and landscape modes. This can pose compatibility, performance and resource problems for app developers unless handled with care. Luckily there are ways to overcome that complexity effectively, while still providing an optimised experience for each resolution and orientation.
+[[:Category:Series 40|Series 40]] devices come in a number of different display resolutions, and may also support both portrait and landscape modes. This can pose compatibility, performance and resource problems for app developers unless handled with care. Luckily there are ways to overcome that complexity effectively, while still providing an optimised experience for each resolution and orientation.
 This article lists a number of techniques for graphics scalability and points to the Series 40 Java ME examples utilising those techniques. Typically a combination of approaches is used; the best approach depends on the type of app in question.

@@ Line 130: / Line 130: @@
 |-
 | [http://projects.developer.nokia.com/JMEBattleTank BattleTank] ||
-* [http://projects.developer.nokia.com/JMEBattleTank/wiki#Handlingdifferentresolutions Different graphics sets for different screens and orientationsi]
+* [http://projects.developer.nokia.com/JMEBattleTank/wiki#Handlingdifferentresolutions Different graphics sets for different screens and orientations]
 * Tile based UI, full UI constructed by repeatedly utilising smaller graphical elements
 |-

@@ Line 116: / Line 116: @@
 == Other techniques ==
-Sometimes you may have a need to keep the aspect ratio of your graphics, for instance, if you have a fixed size game level that fits on the screen. In these cases you might end up with excess area on the screen real-estate. To get the best out of this unfortunate situation, you can '''fill the spare area with either a background colour or background image'''. You could also consider utilising the space otherwise if feasible. Both [http://projects.developer.nokia.com/frozenbubble Frozen Bubble] and [http://projects.developer.nokia.com/JMESudokumaster/wiki#Handlingdifferentresolutions Sudokumaste] examples use this technique.
+Sometimes you may have a need to keep the aspect ratio of your graphics, for instance, if you have a fixed size game level that fits on the screen. In these cases you might end up with excess area on the screen real-estate. To get the best out of this unfortunate situation, you can '''fill the spare area with either a background colour or background image'''. You could also consider utilising the space otherwise if feasible. Both [http://projects.developer.nokia.com/frozenbubble Frozen Bubble] and [http://projects.developer.nokia.com/JMESudokumaster/wiki#Handlingdifferentresolutions Sudokumaster] examples use this technique.
 In some games, for instance those belonging to real-time strategy genre, '''the levels are bigger than what fits on the screen''', and the viewport is often scrollable. If the resolution of the targeted devices does not vary too much, you could manage with only one set of graphics. Thus, the level of zoom might only look different on different resolutions. For example, in [http://projects.developer.nokia.com/JRacerExample/wiki/WikiStart#Movingthecaronthetrack Racer game] the track is a single image, but only part of it is shown on the display.