Day2_2 porting_games


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Day2_2 porting_games

  1. 1. PORTING TO NOKIA ASHA Cao Phong Developer Tech Support Manager Aug 07, 2013
  2. 2. CONTENTS UX Overview from a porting perspective Developer Offering Java ME apps New, updated and removed APIs LCDUI, LWUIT changes SDK Manager Porting from Android Game development introduction
  3. 3. UX EVOLUTION 3” QVGA screen © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  4. 4. 3” QVGA SCREEN © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  6. 6. NOKIA ASHA API OVERVIEW © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  7. 7. CHANGED / REMOVED APIS API CHANGE JSR-75 (PIM) No support for To-Do list JSR-177 (Security and Trust Services) No support for SATSA-APDU JSR-234 (Adv Multimedia supplements) Added: imageencoding/postprocessing, tuner Removed: audio3d, music Nokia UI API – Category Bar Max of 4 icons Nokia UI API – Gesture API Added double-tap gesture Nokia UI API – Popup List API No list dialog Nokia UI API – Sound API No (use instead) © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  8. 8. NEW ASHA JAVA APIS © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  9. 9. COMPATIBILITY? Source & binary compatible – xx years old Java ME apps run on Nokia Asha 1.0 phones! Downwards compatibility – Check API support of target phones – Lowest common denominator: → Nokia Asha SDK compiled app runs on old phones
  10. 10. PORTING All Java ME apps should run on full touch phone – High-Level UI – Adapts automatically – Components include touch-support – Check layout – New UI components (CategoryBar, etc.) don’t have to be used – Low-Level UI – New screen size & aspect ratio (but: most Java apps already flexible here) – Touch supported in Java ME since many years New APIs for Internationalization, Multitouch, Pinch, CategoryBar & Sensors – Only work on new phones – Careful app design even keeps downwards compatibility
  11. 11. PORTING Non-touch Touchandtype Fulltouch Non-touch app with high-level UI (LCDUI): automatically adapts Asha
  12. 12. DYNAMIC API USAGE Single code base for different phones – Code that uses new APIs – Externalize to extra class – Check API support at runtime – Instantiate class if supported – Different methods for checking available
  13. 13. EXAMPLE: DOUBLETAP GESTURE Gesture API – Introduced in Touch & Type – Full Touch added Pinch gesture – New Nokia Asha added Doubletap gesture – Query support at runtime // Doubletap gesture if (GestureInteractiveZone.isSupported(GestureInteractiveZone.GESTURE_DOUBLE_TAP)) { // Gesture is supported - register class as listener GestureRegistrationManager.setListener(this, this); // Register for doubletap gesture gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_DOUBLE_TAP); GestureRegistrationManager.register(this, gestureZone); }
  14. 14. EXAMPLE: OPTIONAL MULTITOUCH Encapsulate API using code to separate class Check support and instantiate on demand public class MultitouchManager implements MultipointTouchListener { public MultitouchManager(MainCanvas canvas) { MultipointTouch mpt = MultipointTouch.getInstance(); mpt.addMultipointTouchListener(this); } public void pointersChanged(int[] pointerIds) { /* ... */ } } if (System.getProperty("") != null) { // API is supported: Can implement multipoint touch functionality multiManager = new MultitouchManager(this); useMultitouch = true; } protected void pointerPressed(int x, int y) { if (!useMultitouch) { // Handle touch event // on single-touch phone } } In MainCanvas class (extends Canvas) Hint: only handle Canvas.pointerPressed() on single touch phones
  15. 15. EXAMPLE: API AVAILABILITY No System property for the API version? – Check Class availability – ClassNotFoundException? → API not supported // Virtual keyboard support try { // Check if class is available Class.forName(""); vkbManager = new VkbManager(this); useVkb = true; } catch (ClassNotFoundException e) { // Class not available: running app on Java Runtime < 2.0.0 phone. // -> no Virtual Keyboard API support. useVkb = false; } catch (Exception e) { }
  16. 16. NEED FOR THREADS IN COMMAND ACTION Protected methods – From commandAction() – = event dispatch thread – Asha Platform: Throws SecurityException “Blocking call performed in the event thread” → Call from extra thread!
  17. 17. public class ProtectedCallAsha extends MIDlet implements CommandListener, Runnable { private Display display; private Form mainScreen; private Command execute; private Command exitCmd; Thread thread; protected void startApp() throws MIDletStateChangeException { … //The initialization screen with the Commands } public void commandAction(Command cmd, Displayable display) { // Direct call to the protected method from commandAction is not allowed on Asha software platform 1.0 if (cmd == execute) { thread = new Thread(this); thread.start(); } if (cmd == exitCmd) { notifyDestroyed(); } } public void run() { //The protected method call is executed within a Thread try { // for example: QualifiedCoordinates coordinates = location.getQualifiedCoordinates(); } catch (Exception exception) { mainScreen.append("Exception: " + exception.getMessage() + "n"); } } }
  19. 19. 3” QVGA SCREEN © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  20. 20. TOOL- AND STATUSBARS Canvas in full screen mode with status bar: 240 x 302 (320-18) pixels. Canvas not in full screen mode: 240 x 262 (320-18-40) pixels.
  22. 22. PRACTICAL ISSUES - CLIPPING public void paint(Graphics g) { int width = getWidth(); int height = getHeight(); g.setColor(0xFFFFFF); g.fillRect(0, 0, width, height); g.setColor(0x000000); g.drawLine(0, height/2, width, height/2); g.drawLine(width/2, 0, width/2, height); g.setColor(0xFF0000); g.drawString("Absolute String", 120, 151-(font.getHeight()/2), Graphics.TOP | Graphics.HCENTER); g.setColor(0x00FF00); g.drawString("Relative String", getWidth() / 2, (getHeight() / 2) - (font.getHeight() / 2), Graphics.TOP | Graphics.HCENTER); }
  23. 23. USING: VIRTUAL KEYBOARD Show keyboard Hide keyboard © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl(); vkbControl.launch(VirtualKeyboard.SYSTEM_KEYBOARD, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE); vkbControl.dismiss();
  24. 24. USING: VIRTUAL KEYBOARD © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa public class MainCanvas extends Canvas implements KeyboardVisibilityListener { private int screenHeight; private int visibleHeight; public MainCanvas() { setFullScreenMode(true); screenHeight = getHeight(); // Original screen height == 320 visibleHeight = screenHeight; // No VKB visible VirtualKeyboard.setVisibilityListener(this); } public void showNotify(int keyboardCategory) { // VKB now visible -> visibleHeight == 142 (or not, NO HARDCODING!) visibleHeight = screenHeight - VirtualKeyboard.getHeight(); } public void hideNotify(int keyboardCategory) { // VKB now hidden -> visibleHeight == 320 visibleHeight = screenHeight; } } visibleHeight ~142 visibleHeight == 320
  25. 25. PRACTICAL ISSUES – VIRTUAL KEYBOARD if (keyboardType.equals("OnekeyBack") || keyboardType.equals("None")) { // Series 40 full touch or Nokia Asha software platform detected; } == “OnekeyBack”
  27. 27. BACK STEPPING Hierarchical navigation flow Skipped elements – Options / context menus – Dialogs – Notification Panel – Pickers Long-press closes current app
  28. 28. BACK BEHAVIOUR HW back key – must have – App main level: exit app – App sub level: back to upper hierarchy level No SW back button allowed One exception: games – SW button same behaviour as HW back key - HW button can pause
  29. 29. BACK COMMANDS Type “BACK” command: mapped to HW key – Not visible on screen CategoryBar: automatic back command – Invisible on Asha Platform → mapped to HW keycmdBack = new IconCommand("Back", Command.BACK, 3, IconCommand.ICON_BACK); frmMain.addCommand(cmdHelp);
  30. 30. HW KEY → BACK COMMANDS No back command, no category bar: Default system dialog to close the app. Category bar in use (also w/o own back command): Callback to CategoryBar listener with “back” code (-1). Traditional back command added: Not visible on screen, executed via HW key.
  31. 31. EXITING THE APP 3 options – Long-press on back HW button – Swiping out app – Manually within app public void exit() { destroyApp(true); notifyDestroyed(); }
  32. 32. BACK AND EXIT COMMAND COMBINATIONS • If MIDlet has Exit Command implemented, pressing back key closes the MIDlet. • If MIDlet has Back Command implemented, pressing back key handles the Back Command. • If MIDlet has Back and Exit Commands implemented, Back command is mapped to the back key and Exit Command to the option menu. • If Exit Command is mapped to the back key, it is normally handled by using commandAction() method (it is possible, for example, to show confirmation dialog before exiting). • MIDlet is closed by pressing back key, even if the Exit Command is not implemented. • MIDlets can be closed also by swiping horizontally across the screen. • If there is a custom implementation of the back command, the only way to close the MIDlet is to swipe the screen. • The back key can terminate the MIDlet only if a back or an exit command have not been added to the current displayable. © 2013 Nokia DevelopingForTheNewAshaPlatform.pptx v. 0.2 2013-04-20 Attila Csipa
  34. 34. FEATURESET/RANGE COMPARISON © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa Feature Android Phone Series 40 Touch Phone CPU 600+ MHz 200-1000 MHz Display tech Capacitive Resistive or Capacitive Touch interaction Multi-point touch Single-touch and Multi-point touch * Display resolution 240x320 upwards 240x320, 240x400 Sensors GPS, Proximity, Acceleration GPS, Acceleration * Multitasking Yes No Background processing Yes No Low-level API access Yes Limited UI Definition Declarative or programmatical Programmatical Ready-to-use UI components Android UI Standard LCDUI, LWUIT Battery life Fair Excellent Development platforms Windows, Mac, Linux Windows IDEs Eclipse Eclipse, Netbeans Application size limitations 50MB + 4GB 2MB + Persistent Storage
  35. 35. TOOLING SUPPORT © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa Android Series40 Officially supported IDEs Eclipse/IntelliJ Eclipse and NetBeans IDE Emulator Multiple profiles One profile per SDK Emulator debugging Yes Yes On-device debugging Yes Yes Remote device access No* Yes (RDA)
  36. 36. MEMORY IS GOLD On Series 40 Memory Limitations: Application JAR file size can’t exceed 5 MB (2 for FT) Java Heap Size is 2 to 4 MB. Use Nokia Device Matrix for checking exact values: Option: download of needed resources and caching in RMS © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  37. 37. WILL THE REAL JAVA PLEASE STAND UP? © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa • Android code runs on the Dalvik virtual machine, which in practice is able to handle most of the standard Java SE code. • Ashas are based on the commonly used Java ME and MIDP 2.0 specifications • Difference between the two is the version of the Java language used: Android supports Java 1.6+, but Series 40 runs on Java 1.3. • The Java ME class library is relatively thin compared to the "desktop" flavour of Java, which means in some cases additional code must be included, e.g. for String or image manipulation operations.
  38. 38. GOOD PORTING CANDIDATES • Content-intensive applications, showing lots of textual content and making use of vertical scrolling. • Single-purpose tools utilizing network connectivity: Content aggregators, RSS/News readers; Location-aware applications featuring maps. • Various business applications. • Casual games (puzzle, 2D arcade), children's apps (drawing, coloring, touch interaction, soundboards). © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  39. 39. API COMPARISON © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  40. 40. © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa Topic Handling in Android Handling in Series 40 Touch input View#onTouchEvent,GestureDetector pointerPressed, pointerDragged, pointer Released (Canvas, CustomItem),Gesture InteractiveZone for receiving GestureEvent objects that define the type of the gesture Google Maps in Android and Nokia Maps in Java ME MapView MapCanvas, initialised with a Display object Sensors SensorManager, updates viaListener SensorManager, open a Connection and then get updates via Listener Network connections HttpUrlConnection, Apache HTTP Client HttpConnection Messaging SmsManager for sending text messages Sending a TextMessage into a MessageConnection (Wireless Messaging API) File access Many methods for accessing the file system in the Context class Operations via FileConnection (FileConnection API) Persistent Storage Activity#onSaveInstanceState,SharedPre ferences Persistent storage access via the RecordStore class Databases for personal information management (PIM) A number of ContentProviderclasses for various data sources Accessing contact lists, calendars, and to-do lists via the Personal Information Management (PIM) API Multimedia playback MediaPlayer (audio+video),SoundPool, J etPlayer General-purpose Player class (created using Manager) for audio and video
  41. 41. UI PORTING © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  42. 42. NAVIGATION Tabs = Category bar © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  43. 43. NAVIGATION Dashboard navigation via Custom Grid layouts © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  44. 44. BACK BUTTON Android uses HW back key Asha uses bottom-right icon Full Touch © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  45. 45. UI ELEMENT EQUIVALENTS For a detailed list, see!porting-from- android-to-series-40/android-ui-to-s40.html (for Full Touch at the moment, but also applicable to new Asha due to API similarities) © 2013 Nokia Porting to Nokia Asha v1.0 March 8, 2013 Attila Csipa
  47. 47. GAMES ON ASHA Games are most popular downloads in Nokia Store Commercialization of games is easier comparing to other types of apps Asha supports both 2D and 3D game development with dedicated APIs, however, 3D should be used cautiously (performance!)
  48. 48. 2D GRAPHICS FOR GAMES Game API – part of the standard MIDP 2.X Package Contains only 5 classes: – GameCanvas – Layer – LayerManager – Sprite – TiledLayer
  49. 49. GAMECANVAS • Double buffered • Convenient for minimizing code of game loop • Extends the Canvas class, but provides more control over the painting cycle and threading • GameCanvas.getGraphics returns a new off-screen Graphics object • The returned Graphics object should be re-used • When all graphics are drawn, GameCanvas.flushGraphics() flushes them to the screen
  50. 50. GAME LOOP public class MyCanvas extends GameCanvas implements Runnable { public void run() { Graphics g = getGraphics(); while(true) { // respond to user input // update the game staterespond to key events flushGraphics(); } } }
  51. 51. GRAPHICAL ASSETS • Instead of multiple small images, graphical assets for a game should be represented by a single image or very few images, virtually separated into multiple areas of similar size. • Such approach dramatically reduces memory usage and simplifies management of visual elements – backgrounds, characters, game items.
  52. 52. EXAMPLE OF GRAPHICAL ASSETS Image 1 Image 2
  54. 54. SPRITE Animated element of the game (character) Define Sequence, Delay Flip, Rotate Define Reference Point Detect Collisions
  55. 55. SPRITE - STAR
  57. 57. SPRITE MANAGEMENT The Sprite class dramatically simplifies sprite management – Image image = Image.createImage(“mysprite.png”); – Sprite sprite = new Sprite(image, 5,5); The Sprite class manages movement – sprite.move(10,10); The Sprite class manages collisions – sprite.collidesWith(otherSprite,false); – sprite.collidesWith(tiledLayer,false); – sprite.collidesWith(otherImage,20,20,false);
  58. 58. SPRITE ANIMATION The frames used to create an animated Sprite are provided by a single image file, loaded using an Image object. The Sprite class separates the image into each individual frame of a width and height specified in its constructor and assigns a number to each, starting at 0. The sequence in which the frames are displayed defaults to the order they where drawn in the original image. However, this can be overridden using the method setFrameSequence(int[] sequence), passing to the method an array of integers, representing the order of the frame numbers. To achieve the effect of animation, the current frame being displayed on the sprite must be changed. This is done by calling the methods nextFrame() and prevFrame(). These methods simply select the next or previous frame in the frame sequence. If the nextFrame() method is called at the end of the sequence, the first frame in the sequence is displayed. If the prevFrame() method is called at the start of the sequence, the last frame is displayed.
  59. 59. GAME BACKGROUNDS AND LAYERS Layer – Abstract class, any visual game element LayerManager – Combines layers together, provides viewport TiledLayer – Game areas, backgrounds
  60. 60. TILEDLAYER Tiles are used to create background and foreground sprites Tiles can be composed of sub-images to create arbitrary sprites – Once created the tile works as a whole unit Tiles can be animated to create the illusion of movement – For example, to create the rippling water effect Don’t have Sprite methods
  61. 61. TILES AND LAYERS • LayerManager simplifies tile management: – Image image = Image.createImage(“/mytile.png”); – LayerManager layerManager = new LayerManager(); – TiledLayer tiledLayer = new TiledLayer(cols, rows, image, X, Y); – tiledLayer.fillCells(0,0,cols,rows,1); – layerManager.append(tiledLayer); • LayerManager paints tiles and sprites in the order that they are appended to manage depth ordering. tile1 tile2 tile3 tile4mytile.png new TiledLayer(cols, rows, image, 35, 40); Static tile set
  62. 62. LAYER MANAGEMENT • Manages a series of layers – Appends, inserts and removes layers – Controls how layers are rendered to the screen • View window controls the visible region on the screen – Size (usually fixed to be optimal for the device screen) – Position (used for scrolling user’s view) • Example: – View window 85x85 pixels, located at (20,20) (20,20) 85 85 y x
  63. 63. COLLISION DETECTION Sprite provides methods for detecting collisions with – Sprites – TiledLayers – Images You can detect collisions – At the pixel level (slow but accurate). – Collision detected only if opaque pixels collide – Using Collision rectangles (fast, not as accurate) To define collition detection, use the following methods – collidesWith(Sprite s, boolean pixelLevel) – collidesWith(TiledLayer t, boolean pixelLevel) – collidesWith(Image img, int x, int y, boolean pixelLevel) To define collision rectangle, use the following method – defineCollisionRectangle(int x, int y, int width, int height)
  64. 64. 3D GRAPHICS API JSR-184 (M3G) – Mobile 3D Graphics Object-Oriented 3D Scene Graph based Optional MIDP JSR Very compact API Very fast development Optimized for small memory and budget CPU
  65. 65. LIGHTWEIGHT API, ONLY 30 CLASSES AnimationController AnimationTrack Appearance Background Camera CompositingMode Fog Graphics3D Group Image2D IndexBuffer KeyframeSequence Light Loader Material Mesh MorphingMesh Node Object3D PolygonMode RayIntersection SkinnedMesh Sprite3D Texture2D Transform Transformable TriangleStripArray VertexArray VertexBuffer World
  66. 66. MORE INFORMATION Overview – Downloads – SDK: – LWUIT: Guides – Nokia Asha Design Guidelines: – Porting guide: – Documentation: – Training Videos: – Code Examples:
  67. 67. SPECIAL THANKS Michael Samarin Jukka Silvennoinen Andreas Jakl