IT tutorials

Building an Advanced Java Game on Symbian OS (part 2) - Using the Mobile Media API & Using the Scalable 2D Vector Graphics API

1/3/2012 4:03:24 PM

4. Using the Mobile Media API (JSR-135)

Many games do this simply because studies have shown that music helps create a more immersive experience. By interspersing MIDI sequences with periods of silence we can change the 'feel' of the game in a subtle manner which helps maintain player interest.

To do this we use timers, some basic parameters and a random-number generator. We also need to detect when the active sequence has finished by implementing the PlayerListener interface. Whenever the current background music stops we wait for a random (bounded) interval of time and then start the next sequence:

// from PlayerListener
public void playerUpdate(Player player, String event, Object eventData){
if(player == backgroundPlayer1){
activeBackgroundPlayer = backgroundPlayer2;
else if(player == backgroundPlayer2){
activeBackgroundPlayer = backgroundPlayer3;
else if(player == backgroundPlayer3){
activeBackgroundPlayer = backgroundPlayer1;
catch(Exception e){

private void startBackgroundFXTimer(){
TimerTask task = new TimerTask(){
public void run(){
backgroundTimer = new Timer();
backgroundTimer.schedule(task, musicDelay);

5. Using the Scalable 2D Vector Graphics API (JSR-226)

As explained earlier, this game uses a menu system based on the Scalable Vector Graphics API, when it is detected on the device. Figure 8.6a shows the results of a very simple linear menu using scaling and transparency. The best way to get started using JSR-226 is to read [Nokia 2006e] and [Powers 2005].

An SVG image is simply an XML document containing a set of drawing instructions which allows an image to be created using high-level instructions. You can say, for example, 'draw a circle radius 5 at point 2,10'. The main benefits you get by using SVG images instead of traditional raster images is their scalability, ease of manipulation and the fact that they compress extremely well in a JAR since they are just a text document.

The full SVG specification defines support for a wide range of features but not all of these are yet supported on mobile phones. Instead phones support a subset of the specification called SVG-Tiny also referred to as SVG-T. The current version of SVG-T is 1.1 and this is the version currently shipped on Symbian OS 9.x devices. To determine from Java ME what version of SVG-T your phone supports, you can query the system property as follows:

String svgVersion = System.getProperty("microedition.m2g.version");
boolean useSVG = svgVersion.equals("1.1");

In order to read the XML, the SVG-T specification defines a micro-DOM that the implementation of the JSR must provide. This is a small XML parser specifically designed to parse SVG elements. Note that as part of the SVG-T implementation, it should not be considered an XML parser for general use.

There are two ways to create SVG content: SVG images can be created programmatically through a series of API calls but it is far more common to load and manipulate SVG images prepared using a third-party graphics tool such as Adobe Illustrator. If you don't have access to this, a common open-source, free alternative for SVG content creation is Inkscape.

Before you attempt to load or display an SVG image from a MIDlet, you need to convert it to SVG-T format. The S60 3rd Edition SDKs come with an SVG to SVG-T conversion tool which you can use for this. The installer can be found in the \S60Tools\ subdirectory of your SDK root. There are some incompatibilities with support for the 'text' element on the Symbian OS implementation at this stage so it is best to convert any text to a path (a series of line segments and arcs) in Illustrator or Inkscape (see Figure 5) before converting it to SVG-T. The resulting SVG file will be quite a bit bigger, depending on how much text it contains but for simple menus like ours this is not an issue – remember that we don't need to care too much about JAR size on Symbian OS.

Rendering to screen is done with an instance of the ScalableGraphics class. Within our paint() method, we simply bind our Graphics context to our scalable context, directly render SVG images to our canvas and then release our context. By obtaining a handle to the root element of an SVGImage instance we can also directly scale, rotate and translate the image itself as well as change its properties such as its CSS style attribute which defines fills, strokes, color, and so on.

The following code snippets are taken from the BasicSVGMenu-Screen class which forms the base class for all the SVG menus in the game. It is surprising how easy it is to get good effects with very little code.

Figure 5. Converting text objects to paths with Inkscape

public abstract class BasicSVGMenuScreen extends BasicScreen {
protected ScalableGraphics sg;
protected static final float BASE_SCALE = 2.0f;
protected static final float ACTIVE_SCALE = 2.5f;

protected static final float BASE_TRANSPARENCY = 0.70f;
protected static final float ACTIVE_TRANSPARENCY = 0.90f;
// constructor
sg = ScalableGraphics.createInstance();
public void paint(Graphics g){
Graphics context = g;
sg.setTransparency(BASE_TRANSPARENCY); // more transparent
// now render the active item
sg.setTransparency(ACTIVE_TRANSPARENCY); // more opaque

// load SVG content from the JAR file
protected void setImage(String imageName, boolean active){
InputStream svgStream = null;
svgStream = getResourceAsStream(imageName);
image = (SVGImage) (SVGImage.createImage(svgStream, null));

catch(Exception e){
if(svgStream != null){
catch(IOException ioe){} // ignore

public void setActive(boolean active){
SVGSVGElement svgDoc = (SVGSVGElement)
svgDoc.setCurrentScale(ACTIVE_SCALE); // bigger
svgDoc.setCurrentScale(BASE_SCALE); // normal

- Building an Advanced Java Game on Symbian OS (part 1)
- jQuery 1.3 : Simultaneous versus queued effects (part 2) - Working with multiple sets of elements & Callbacks
- jQuery 1.3 : Simultaneous versus queued effects (part 1) - Working with a single set of elements
- iPhone 3D Programming : Crisper Text with Distance Fields (part 3) - Implementing Outline, Glow, and Shadow Effects
- iPhone 3D Programming : Crisper Text with Distance Fields (part 2) - Smoothing and Derivatives
- iPhone 3D Programming : Crisper Text with Distance Fields (part 1) - Generating Distance Fields with Python
- Mapping Well-Known Patterns onto Symbian OS : Singleton
- Mapping Well-Known Patterns onto Symbian OS : Model–View–Controller
- The Anatomy of a Mobile Site : STYLING WITH CSS - CSS Considerations for Mobile & Optimizing CSS
Top 10
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- Microsoft Visio 2013 : Adding photos and changing styles in org charts
- Microsoft Visio 2013 : Altering org chart layout and appearance
- Microsoft Visio 2013 : Using the Organization Chart Wizard with existing data
- Managing Exchange Server 2013 clients : Configuring mail support for Outlook (part 4) - Repairing and changing Outlook mail accounts
- Managing Exchange Server 2013 clients : Configuring mail support for Outlook (part 3) - Configuring Outlook for Exchange, Adding Internet mail accounts to Outlook
Popular tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS