×
Namespaces

Variants
Actions
(Difference between revisions)

Graphics scalability approaches for Series 40 Java ME apps

From Nokia Developer Wiki
Jump to: navigation, search
jaaura (Talk | contribs)
(Jaaura -)
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
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= <!-- Format YYYYMMDD -->
+
|creationdate= 20121024
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Jaaura]]
 
}}
 
}}
  
Line 35: Line 35:
 
** Pixel mixing
 
** Pixel mixing
 
** Bilinear interpolation  
 
** Bilinear interpolation  
* Graphics generated/drawn with code - scaling without loss of quality. E.g. http://www.developer.nokia.com/Community/Wiki/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!
+
* 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

Revision as of 07:54, 26 October 2012

This article lists different approaches available for graphics scalability and points to the Series 40 Java ME examples utilizing those techniques.

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

Racer

Explonoid

Frozen bubble

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

WeatherApp

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[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]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

353 page views in the last 30 days.