Graphics scalability approaches for Series 40 Java ME apps
(Jaaura -) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Minor subedit) |
||
| (One intermediate revision by one user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:Series 40]][[Category:Java ME]][[Category:Graphics]][[Category:UI]] | [[Category:Series 40]][[Category:Java ME]][[Category:Graphics]][[Category:UI]] | ||
| − | {{Abstract|This article lists | + | {{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 utilize 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}} | |
{{ArticleMetaData <!-- v1.2 --> | {{ArticleMetaData <!-- v1.2 --> | ||
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| Line 9: | Line 9: | ||
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | ||
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| − | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> | + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> |
| − | |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | + | |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> |
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase --> | ||
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
|translated-by= <!-- [[User:XXXX]] --> | |translated-by= <!-- [[User:XXXX]] --> | ||
| − | |translated-from-title= <!-- Title only --> | + | |translated-from-title= <!-- Title only --> |
|translated-from-id= <!-- Id of translated revision --> | |translated-from-id= <!-- Id of translated revision --> | ||
| − | |review-by=<!-- After re-review: [[User:username]] --> | + | |review-by= <!-- After re-review: [[User:username]] --> |
|review-timestamp= <!-- After re-review: YYYYMMDD --> | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
|update-by= <!-- After significant update: [[User:username]]--> | |update-by= <!-- After significant update: [[User:username]]--> | ||
|update-timestamp= <!-- After significant update: YYYYMMDD --> | |update-timestamp= <!-- After significant update: YYYYMMDD --> | ||
| − | |creationdate= | + | |creationdate= 20121024 |
| − | |author= | + | |author= [[User:Jaaura]] |
}} | }} | ||
== Introduction == | == 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 optimized 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 utilizing those techniques. The best approach or typically a combination of approaches, and depends on the type of app in question. | ||
== Different approaches available == | == Different approaches available == | ||
| − | * Different graphics sets for | + | * Different graphics sets for each supported resolution and orientation (this is a very common approach). Selection being made either at build time or at runtime (start-up time), depending on whether MIDlet size or number of builds is more important. |
* Runtime (start-up time) scaling of graphics - scaling images at runtime may lead to poorer quality or require processing time, except for vector graphics. Depends on the method and algorithm used! | * Runtime (start-up time) scaling of graphics - scaling images at runtime may lead to poorer quality or require processing time, except for vector graphics. Depends on the method and algorithm used! | ||
** Pixel mixing | ** Pixel mixing | ||
** Bilinear interpolation | ** Bilinear interpolation | ||
| − | * Graphics generated/drawn with code - scaling without loss of quality. E.g. | + | * Graphics generated/drawn with code - scaling without loss of quality. E.g.[[Draw Gradient in Java ME]]. Code-based graphics can whip up almost anything you can invent, not just linear gradients. More complex shapes require just a bit more code! |
* Scalable vector graphics http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/scalable-2d-vector-graphics-scalable-2d-vector-graphics-examples.html | * Scalable vector graphics http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/scalable-2d-vector-graphics-scalable-2d-vector-graphics-examples.html | ||
* Tile based graphics, full UI constructed by repeatedly utilizing smaller graphical elements | * Tile based graphics, full UI constructed by repeatedly utilizing smaller graphical elements | ||
| Line 73: | Line 75: | ||
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}} | {{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}} | ||
| + | [[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]] | ||
Revision as of 09:29, 29 October 2012
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 utilize those techniques.
See Also
Adaptive design best practices (Java Library
Article Metadata
Contents |
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 optimized 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 utilizing those techniques. The best approach or typically a combination of approaches, and depends on the type of app in question.
Different approaches available
- Different graphics sets for each supported resolution and orientation (this is a very common approach). Selection being made either at build time or at runtime (start-up time), depending on whether MIDlet size or number of builds is more important.
- Runtime (start-up time) scaling of graphics - scaling images at runtime may lead to poorer quality or require processing time, except for vector graphics. Depends on the method and algorithm used!
- Pixel mixing
- Bilinear interpolation
- Graphics generated/drawn with code - scaling without loss of quality. E.g.Draw Gradient in Java ME. Code-based graphics can whip up almost anything you can invent, not just linear gradients. More complex shapes require just a bit more code!
- Scalable vector graphics http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/scalable-2d-vector-graphics-scalable-2d-vector-graphics-examples.html
- Tile based graphics, full UI constructed by repeatedly utilizing smaller graphical elements
- Larger graphic which is either scrollable or only part is shown depending on the screen size and orientation
- Filling edges with background color
Example apps utilizing graphics scalability
BattleTank
- Different graphics sets for different screens and orientations. See how: http://projects.developer.nokia.com/JMEBattleTank/wiki#Handlingdifferentresolutions
- Tile based UI, full UI constructed by repeatedly utilizing smaller graphical elements
Racer
- Larger graphic of which is either scrollable or only part is shown depending on the screen size and orientation. See how: http://projects.developer.nokia.com/JRacerExample/wiki#Movingthecaronthetrack
Explonoid
- Runtime (start-up time) scaling of graphics. See how: http://projects.developer.nokia.com/JMEExplonoid/wiki#Scaling
- Filling edges with background color if different screen aspect ratio
Frozen bubble
- Runtime (start-up time) scaling of graphics. Both pixel mixing (for downscaling) and bilinear interpolation (for upscaling). See how: http://projects.developer.nokia.com/frozenbubble/wiki/implementation#ResizingImages
- Filling edges with background color if different screen aspect ratio
Sudokumaster
- Different graphics sets for different screens and orientations
- Runtime (start-up time) scaling of graphics
- Tile based graphics, full UI constructed by repeatedly utilizing smaller graphical elements
- Filling edges with background color
See how: http://projects.developer.nokia.com/JMESudokumaster/wiki#Handlingdifferentresolutions
PicasaViewer
- Runtime scaling of graphics. See how: http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/adaptive-design-and-development-on-series-40/adaptive-design-best-practices.html;#toc_Scaleimagesatruntime
WeatherApp
- Different graphics sets for different screens and orientations. See how: http://projects.developer.nokia.com/JMEWeatherApp/wiki#Design
