Graphics scalability approaches for Series 40 Java ME apps
This article lists different approaches available for graphics scalability and points to the Series 40 Java ME examples utilizing those techniques.
Article Metadata
Contents |
Introduction
Mobile, incuding Series 40, devices have different display resolutions. Furthermore often portrait and landscape modes needs to be supported. This can pose compatibility, performance and resource problems unless dealt with care. Luckily there are ways to effectively overcome that complexity, yet providing optimized experience on each resolutions and orientations. This article lists different approaches available for graphics scalability and points to the Series 40 Java ME examples utilizing those techniques. The best approach or typically a combination of approaches depends on the type of app in question.
Different approaches available
- Different graphics sets for different resolutions and orientations - very commonly used approach. Selection being made either at build time or at runtime (start-up time), depending what is important, midlet size or number of builds?
- 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
