| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| * Copyright © 2010 Oracle, Inc. All rights reserved. | |
| * Use is subject to license terms. | |
| --> | |
| <html> | |
| <head> | |
| <title>Creating a Web Connected, Multi-Player Mobile Game Using NetBeans - NetBeans IDE Tutorial</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name=">Andrey Korostelev, Ivan Sidorkin" content=""> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <H1>Creating a Web Connected, Multi-Player Mobile Game Using NetBeans</H1> | |
| <div class="articledate" style="margin-left: 0px;">Contributed by Andrey Korostelev and Ivan Sidorkin.</div> | |
| <p>This tutorial shows you how to create a simple mobile game using the Game Builder that is included in NetBeans IDE's Java ME support. The game has two main characters, Duke who is controlled by the player, and James who is managed by the computer. In the final section of the tutorial a web services to enable multiplayer gaming is created. The game project also uses Scalable Vector Graphics (SVG) form components to create a SVG-based UI.</p> | |
| <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/mobilegame.html">Creating a Web Connected, Multi-Player Mobile Game Using NetBeans 6.8</a> tutorial.</p>--> | |
| <h3>Contents</h3> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" | |
| class="stamp" | |
| alt="Content on this page applies to NetBeans IDE 6.9 or later" | |
| title="Content on this page applies to the NetBeans IDE 6.9 or later"> | |
| <div> | |
| <ul> | |
| <li><a href="#reqs" title="Requirements">Requirements</a></li> | |
| <li><a href="#createapp" title="Creating the MIDP Application">Creating a MIDP Application</a></li> | |
| <ul> | |
| <li><a href="#svgcomp" title="Creating SVG UI">Creating SVG UI</a></li> | |
| <li><a href="#connect" title="Connecting SVG Images to SVG Form component in Visual Mobile Designer">Connecting SVG Images to SVG Form Component in Visual Mobile Designer</a></li> | |
| <li><a href="#customize" title="Customizing SVG Form Components">Customizing SVG Form Components</a></li> | |
| <li><a href="#secondsvg" title="Creating, Connecting and Customizing Second SVG Form Component">Creating, Connecting and Customizing Second SVG Form Component</a></li> | |
| <li><a href="#assignaction" title="Assigning Actions to SVG Buttons">Assigning Actions to SVG Buttons</a></li> | |
| </ul> | |
| <li><a href="#creategame" title="Creating the Game">Creating the Game</a></li> | |
| <ul> | |
| <li><a href="#background" title="Background Information">Background Information</a></li> | |
| <li><a href="#createdesignfile" title="Creating Visual Game Design File">Creating Visual Game Design File</a></li> | |
| <li><a href="#createsprite" title="Creating Sprites">Creating Sprites</a></li> | |
| <li><a href="#createlayer" title="Creating a Tyled Layer">Creating a Tyled Layer</a></li> | |
| <li><a href="#createscene" title="Creating a Game Scene">Creating a Game Scene</a></li> | |
| </ul> | |
| <li><a href="#addlogic" title="Adding Application Logic to the UI">Adding Game Logic</a></li> | |
| <ul> | |
| <li><a href="#addgamecanvas" title="Adding GameCanvas to Visual Mobile Designer">Adding GameCanvas to Visual Mobile Designer</a></li> | |
| <li><a href="#addcanvastoworkflow" title="Adding GameCanvas to Application Workflow">Adding GameCanvas to Application Workflow</a></li> | |
| <li><a href="#startthread" title="Starting Game Thread After Switching To GameCanvas">Starting Game Thread After Switching To GameCanvas</a></li> | |
| <li><a href="#initializeui" title="Initializing Game UI">Initializing Game UI</a></li> | |
| <li><a href="#assignsprites" title="Assigning Sprites to Players">Assigning Sprites to Players</a></li> | |
| <li><a href="#playgame" title="Playing Game">Playing Game</a></li> | |
| </ul> | |
| <li><a href="#play" title="Playing with Friends">Playing with Friends</a></li> | |
| <ul> | |
| <li><a href="#startws" title="Starting Web Service">Starting Web Service</a></li> | |
| <li><a href="#createconfig" title="Creating New Configuration">Creating New Configuration</a></li> | |
| <li><a href="#generatews" title="Generating Web Service Client">Generating Web Service Client</a></li> | |
| <li><a href="#startmultiplayergame" title="Using Web Service Client to Start Multiplayer Game">Using Web Service Client to Start Multiplayer Game</a></li> | |
| <li><a href="#rungame" title="Running Game in Emulator">Running Game in Emulator</a></li> | |
| </ul> | |
| <li><a href="#summary" title="Summary">Summary</a></li> | |
| <li><a href="#seealso" title="See Also">See Also</a></li> | |
| </ul> | |
| </div> | |
| <h2><a name="reqs"></a>Requirements</h2> | |
| <p><b>To complete this tutorial, you need the following software:</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software or Resource</th> | |
| <th class="tblheader" scope="col">Version Required</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td> | |
| <td class="tbltd1">Version 6.9 or later</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1"> 6 or 7</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!--<h3>Setting Up the Project Environment</h3> | |
| <p>Download and unzip the <code>mobilegame</code> project file. It creates a subdirectory called <tt>mobilegame</tt> in your projects folder. | |
| For example, on a Linux system, if you have unzipped the project zip file in the <tt>/home/projects</tt> directory, it creates <tt>/home/projects</tt> | |
| <strong>/mobilegame</strong> directory.--> | |
| <h2><a name="createapp"></a> | |
| Creating a MIDP Application</h2> | |
| <p>In this section we create a new Mobile Information Device Profile (MIDP) application using NetBeans Java ME support that includes the | |
| Visual Mobile Designer which simplifies the creation of mobile application workflow.</p> | |
| <ol> | |
| <li>Click the New Project button on the toolbar or select File > New Project from the main menu. </li> | |
| <li>Under Categories select Java ME and under Projects select Mobile Application and click Next. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-select_project.png" rel="lytebox" | |
| title="Selecting Mobile Application in a New Project dialog box"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-select_project-small.png" | |
| alt="Selecting Mobile Application in a New Project dialog box" border=1></a></p> | |
| </li> | |
| <li>Type <tt>MobileGame</tt> as the project name and uncheck the Create Hello MIDlet box and click Finish | |
| to create the project. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-project_name.png" rel="lytebox" | |
| title="Specifying project name in a New Project dialog box"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-project_name-small.png" | |
| alt="Specifying project name in a New Project dialog box" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p>Now you need to define the application workflow with the Visual Mobile Designer as follows: </p> | |
| <ol> | |
| <li>Expand the Source Packages node in the Project tree and select <tt><default package></tt>.</li> | |
| <li>To add a new java package to source packages, right-click the | |
| <tt><default package></tt> node and select <tt>New > Java Package</tt> in the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-create_pkg.png" rel="lytebox" | |
| title="Creating a new java package"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-create_pkg-small.png" | |
| alt="Creating a new java package" border=1></a></p> | |
| </li> | |
| <li>In the New Java Package dialog box enter <tt>game</tt> for the package name and click Finish. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-new-package.png" rel="lytebox" | |
| title="Specifying package name in a New Java Package dialog box"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-new-package-small.png" | |
| alt="Specifying package name in a New Java Package dialog box" border=1></a></p> | |
| </li> | |
| <li>To add a new VisualMIDlet to the <tt>game</tt> package, choose the <tt>game</tt> package in the Project view, then choose File > New File (Ctrl-N). Under Categories, select MIDP. Under File Types, select Visual MIDlet and click Next. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-create_visual_midlet.png" rel="lytebox" title="Adding a visual MIDlet"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-create_visual_midlet-small.png" | |
| alt="Adding a visual MIDlet" border=1></a></p> | |
| </li> | |
| <li> Accept the defaults for the MIDlet and MIDP Class names and click Finish.<br> | |
| The new MIDlet is opened in Visual Mobile Designer's Flow view by default. The <strong>Mobile Device</strong> | |
| element represents the MIDLet. The Visual Mobile Designer is a drag-and-drop interface | |
| that enables adding new displayables and managing the application workflow. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-created_v_midlet.png" rel="lytebox" title="Visual MIDlet created"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-created_v_midlet-small.png" | |
| alt="Visual MIDlet created" border=1></a></p> | |
| </li> | |
| <li>Drag an SVG Form from the SVG Components category of the Palette and drop it in the Flow Designer. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-created_svg_form.png" rel="lytebox" title="SVG Form added"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-created_svg_form-small.png" | |
| alt="SVG Form added" border=1></a></p> | |
| </li> | |
| <li>To make SVG Form the first displayable that is shown on the device screen after the MIDlet is started, | |
| add a connection from the Started action of the Mobile Device to svgForm by dragging the mouse with the | |
| left button pressed from the Started action to the svgForm component | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-connect_device_to_form.png" rel="lytebox" title="Connection added"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-connect_device_to_form-small.png" | |
| alt="Connection added" border=1></a></p> | |
| </li> | |
| <li>The next element to add to the application workflow is the game which cannot display in the Visual Mobile Designer until you import the game classes.<br> This step is described in the <a href="#vmdflow" title="Creating the Application Flow in the Visual Mobile Designer">Creating the Application Flow in the Visual Mobile Designer</a> section of the tutorial.</li> | |
| <li>After the game is finished, we show the winner using another SVG form. Add the second SVG form to the flow view as shown in the following image: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex1-create_2nd_svg_form.png" rel="lytebox" title="Another SVG Form added"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex1-create_2nd_svg_form-small.png" | |
| alt="Another SVG Form added" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> To see the result, you may want to download and unzip the <tt><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-midpapp-created.zip">MobileGame-midpapp-created.zip</a></tt> project file and open the <tt>MobileGame</tt> project in the IDE.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h3><a name="svgcomp"></a>Creating SVG UI</h3> | |
| <p>We can create compelling SVG menus and forms for our MIDP Application by using the tools included in the NetBeans IDE without any need | |
| for external editors. The SVG Composer allows to compose an SVG Form using standard form components and the Visual Mobile Designer | |
| lets you embed a form into the application workflow.</p> | |
| <ol> | |
| <li>To create a new java package intended for SVG menus and forms to source packages, right-click the <tt>Source Packages</tt> node and select <tt>New > Java Package</tt> in the popup menu.</li> | |
| <li>Specify <tt>svg</tt> as the package name and click Finish.</li> | |
| <li>Right-click the <tt>svg</tt> package node and select New > Other in the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-invoke_new_other.png" rel="lytebox" title="New SVG component being added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-invoke_new_other-small.png" alt="New SVG component being added" border=1></a></p> | |
| </li> | |
| <li>In the New File dialog box, select Other > SVG File and click Next. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-create_svg_file.png" rel="lytebox" title="New SVG file being created"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-create_svg_file-small.png" alt="New SVG file being created" border=1></a></p> | |
| </li> | |
| <li>Type <tt>main_form</tt> as the file name and click Finish. The <tt>main_form</tt> is created in the <tt>svg</tt> package and an empty image is opened in SVG Composer. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-main_form_svg_created.png" rel="lytebox" title="New SVG form created"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-main_form_svg_created-small.png" alt="New SVG form created" border=1></a></p> | |
| </li> | |
| <li>Drag and drop the Label component from the Form Components group of the Palette to the image view in the editor | |
| as shown in the following screenshot. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-add_svg_label.png" rel="lytebox" title="Label added to SVG form created"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-add_svg_label-small.png" alt="Label added to SVG form created" border=1></a></p> | |
| <p>In the Navigator window, <tt>id = "label_0"</tt> is added to the <tt>main_form.svg</tt> xml image file.</p> | |
| </li> | |
| <li>Drag and drop two Button Form Components to the SVG form like shown below. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-add_svg_buttons.png" rel="lytebox" title="Buttons added to SVG form created"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-add_svg_buttons-small.png" alt="Buttons added to SVG form created" border=1></a></p> | |
| </li> | |
| <li> | |
| Save your changes by clicking the Save all files button on the toolbar or type <tt>Ctrl+Shift+S</tt>. | |
| </li> | |
| </ol> | |
| <H3><a name="connect"></a>Connecting SVG Images to SVG Form component in Visual Mobile Designer</H3> | |
| <ol> | |
| <li>Open the <tt>VisualMIDlet.java</tt> file created in the previous exercise.</li> | |
| <li> Drag and drop the <tt>main_form.svg</tt> SVG image from project tree to the <tt>svgForm</tt> component in the Flow view | |
| of the Visual Mobile Designer.<br>The <tt>svgButton</tt> and <tt>svgButton1</tt> elements display in the SVG Buttons section | |
| of the <tt>svgForm</tt> component. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-drop_svg_to_form.png" rel="lytebox" title="SVG image added to SVG form"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-drop_svg_to_form-small.png" alt="SVG image added to SVG form" border=1></a></p> | |
| <p>If you select <tt>svgForm</tt> in the Visual Mobile Designer, the elements display in the | |
| <tt>SVG Components</tt> node in the Navigator.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_components_in_navigator.png" rel="lytebox" title="SVG Components in Navigator"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_components_in_navigator-small.png" alt="SVG Components in Navigator" border=1></a></p> | |
| </li> | |
| <li> | |
| You can update the image connected to the svgForm component in the <tt>SVG Image</tt> Properties dialog box.<br> | |
| To open the Properties dialog box, right-click <tt>svgForm</tt> and choose Properties in the popup menu.</li> | |
| <li>Click the ellipsis button (<img src="../../../images_www/articles/71/mobility/mobilegame/ellipsis-button.png">) next to the SVG Image property value, to open the SVG Image dialog box. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_image_in_properties.png" rel="lytebox" title="SVG Image dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_image_in_properties-small.png" alt="SVG Image dialog box" border=1></a></p> | |
| </li> | |
| <li>Switch to the <tt>Recognized SVG Components</tt> tab to see all of the recognized SVG From Components. <br> | |
| Right-click the component row to change its tab order if needed. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_components_change_order.png" rel="lytebox" title="Popup menu for changing components order "> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-svg_components_change_order-small.png" alt="Popup menu for changing components order" border=1></a></p> | |
| </li> | |
| </ol> | |
| <a name="customize"></a> | |
| <h3>Customizing SVG Form Components</h3> | |
| <ol> | |
| <li> | |
| <p>Now switch to the Screen view of Visual Mobile Designer and select <tt>svgForm</tt> from combo-box | |
| like shown in the following screenshot.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-open_screen_view.png" rel="lytebox" title="VMD: Screen view"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-open_screen_view-small.png" alt="VMD: Screen view" border=1></a></p> | |
| <p class="notes"><b>Note:</b> When the <tt>svgForm</tt> preview opens in the editor, it allows you to see an approximate view of | |
| the component on the device screen. </p> | |
| </li> | |
| <li> | |
| <p>To make the Label text more descriptive, select the label in the Screen view and enter <tt>Collect Blocks</tt> as the Text property value in the Properties | |
| view.<br> | |
| The new value displays in the Screen view.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-update_title_text.png" rel="lytebox" title="Label's text property changed"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-update_title_text-small.png" alt="Label's text property changed" border=1></a></p> | |
| </li> | |
| <li> | |
| Select the left button and change its Text property to <tt>Play</tt>.</li> | |
| <li>Select the right button and change its Text property to <tt>Exit</tt>. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-update_exit_btn_text.png" rel="lytebox" title="Button's text property changed"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-update_exit_btn_text-small.png" alt="Button's text property changed" border=1></a></p> | |
| <p class="notes"><b>Note:</b> Since a component selected in the Screen view displays in the Navigator view, the component's instance name displays both in the Properties window and in the Navigator tree.</p> | |
| </li> | |
| </ol> | |
| <a name="secondsvg"></a> | |
| <h3>Creating, Connecting and Customizing Second SVG Form Component</h3> | |
| <ol> | |
| <li> | |
| <p>Repeat steps 3 to 5 from the <a href="#svgcomp">Creating the SVG UI</a> section to create a new SVG Image called <tt>game_result</tt>.</p> | |
| </li> | |
| <li> | |
| <p>Drag and drop two labels and a button to the image as shown in the following screenshot and press <tt>Ctrl+Shift+S</tt> to save your changes.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-game_result_svg.png" rel="lytebox" title="Two labels and a button added to game_result.svg"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-game_result_svg-small.png" alt="Two labels and a button added to game_result.svg" border=1></a></p> | |
| </li> | |
| <li>Open the <tt>VisualMIDlet.java</tt> file.</li> | |
| <li>In the Flow view, drag and drop <tt>game_result.svg</tt> from the Projects tree to the <tt>svgForm1</tt> component to connect the <tt>game_result</tt> with the <tt>svgForm1</tt> component.<br> | |
| In the Flow view, <tt>svgButton2</tt> displays in the <tt>svgForm1</tt> component. <br> | |
| In the Navigator view, <tt>svgButton2</tt> | |
| and two SVG labels display in the MIDP Visual Design > Displayables > svgForm1 node. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-drop_game_result_to_form.png" rel="lytebox" title="game_result.svg added to svgForm1"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-drop_game_result_to_form-small.png" alt="game_result.svg added to svgForm1" border=1></a></p> | |
| </li> | |
| <li>Switch to the Screen view and select <tt>svgForm1</tt>.</li> | |
| <li>Select the upper label and change its Text property value to <tt>The Winner Is:</tt> in the Properties view. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-update_result_screen_title.png" rel="lytebox" title="Screen title added to svgForm1"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-update_result_screen_title-small.png" alt="Screen title added to svgForm1" border=1></a></p> | |
| <p class="notes"><b>Note:</b> You don't need to change the other two SVG elements for this application.</p> | |
| </li> | |
| </ol> | |
| <a name="assignaction"></a><h3>Assigning Actions to SVG Buttons</h3> | |
| <p>Now you can assign actions to the SVG Buttons you have open.</p> | |
| <ol> | |
| <li>In the Flow view of the VisualMIDlet, connect the <tt>svgButton2</tt> action of the <tt>svgForm1</tt> component to the <tt>svgForm</tt>.<br> | |
| This enables a user to open the <tt>main_form</tt> form (<tt>svgForm</tt> component in the Visual Mobile Designer) by clicking the OK button in the <tt>game_result</tt> form (<tt>svgForm1</tt> component in the Visual Mobile Designer). | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-connect_forms.png" rel="lytebox" title="SVG forms connected"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-connect_forms-small.png" alt="SVG forms connected" border=1></a></p> | |
| </li> | |
| <li>Connect the Exit button of the <tt>svgForm</tt> component (<tt>svgButton1</tt> in the Visual Mobile Designer) to the Mobile Device. <br> | |
| This stops the MIDlet after | |
| the Exit button is clicked. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex2-connect_form_exit_to_device.png" rel="lytebox" title="Exit button connected to Mobile Device"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex2-connect_form_exit_to_device-small.png" alt="Exit button connected to Mobile Device" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p>Since click on the Play <tt>svgButton</tt> should start the game, the <tt>svgButton</tt> needs to be connected to the game which | |
| you create in the following exercise.</p> | |
| <p class="notes"><b>Note:</b> To see the result, you may want to download and unzip the <tt><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-svg-ui-created.zip">MobileGame-svg-ui-created.zip</a></tt> project file and open the <tt>MobileGame</tt> project in the IDE.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="creategame"></a> | |
| <h2>Creating the Game</h2> | |
| <p>In this section you create a mobile game based on the MIDP 2.0 Game API.<br> | |
| It takes up 30 minutes to complete.<br> | |
| NetBeans Java ME support provides | |
| the Game Builder module to help create a game framework with the essential visual elements such as TiledLayers, | |
| Sprites, and Scenes so that you can focus on creating the game logic. </p> | |
| <a name="background"></a> | |
| <h3>Background Information</h3> | |
| <p>Visual editing support for the MIDP 2.0 Game API (<a href="http://www.jcp.org/en/jsr/detail?id=178">JSR 178</a>) includes creation and editing of Sprites, TiledLayers, and their arrangement into scenes. The main objective of the <strong>Game Builder</strong> module is to reduce the effort involved in creating common game components.</p> | |
| <ul> | |
| <li><span style="font-weight: bold;">Sprite</span> – The Game Builder treats sprites as a collection | |
| of animated sequences where each sprite can contain a number of sequences. The Sprite Editor enables editing and previewing of | |
| multiple animated sequences.</li> | |
| <li><span style="font-weight: bold;">TiledLayer</span> –<strong> </strong>Game backgrounds are made up | |
| of TiledLayers which are a grid of cells painted with images for each frame. When a new TiledLayer is created it can be edited with | |
| the Game Builder's visual editor. This allows the game producer to modify the contents of the TiledLayer and receive instant visual | |
| feedback on the changes they made. The TiledLayer editor also includes support for animated tiles.</li> | |
| <li><span style="font-weight: bold;">Scene</span> - | |
| Scenes are locations within a game environment that have distinctive visual and even audio characteristics that help to define | |
| the game's look and feel. Each level in a game can have several different scenes. Conversely, a simple game may have only one scene for all of its levels.</li> | |
| </ul> | |
| <p>Before we proceed, take the following steps to open the MobileGame project which contains some additional files that are required:</p> | |
| <ol> | |
| <li>Download the <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-for-creating-game.zip" title="MobileGame-for-creating-game.zip">MobileGame-for-creating-game.zip</a> and unzip the file.</li> | |
| <li>In the IDE, choose File > Close Project to close the MobileGame project created in the <a href="#createapp" title="Creating the MIDP Application">Creating a MIDP Application</a> section of the tutorial. </li> | |
| <li> In the IDE, choose File > Open Project and browse to the folder that contains the unzipped files with the MobileGame project.</li> | |
| <li> Click Open Project.<br> | |
| The MobileGame project displays in the Projects tab of the IDE. </li> | |
| <!-- <p>TODO: describe behaviour in case of unresolved platform</p> --> | |
| </ol> | |
| <a name="createdesignfile"></a> | |
| <h3>Creating Visual Game Design File</h3> | |
| <ol> | |
| <li> | |
| <p>In the Projects view, expand the MobileGame > Source Packages node.</p> | |
| </li> | |
| <li> | |
| <p>Right-click the <tt>game</tt> package node and choose New > Game Builder .</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-new_game_design.png" rel="lytebox" title="Choosing Game Builder"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-new_game_design-small.png" alt="Choosing Game Builder" border=1></a></p> | |
| </li> | |
| <li>In the New File dialog box, accept the default <tt>GameDesign</tt> MIDP Class Name and click Finish. </li> | |
| <li>A <tt>GameDesign.java</tt> file displays in the Game Design view of the Game Builder. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-empty_game_builder.png" rel="lytebox" title="Empty Game Builder"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-empty_game_builder-small.png" alt="Empty Game Builder" border=1></a></p> | |
| </li> | |
| </ol> | |
| <a name="createsprite"></a> | |
| <h3>Creating Sprites</h3> | |
| <p>The game features two sprites: dukeWhite and JamesG.</p> | |
| <p>To create an animated sprite of a walking Duke, complete the following steps:</p> | |
| <ol> | |
| <li> | |
| <p>Click Create Sprite in the the Game Design view.<br>The New sprite dialog box opens.</p> | |
| </li> | |
| <li>Enter <tt>dukeWhite</tt> in the Sprite name text field and choose <tt>images/duke.png</tt> from the Select Image list. | |
| <p class="notes"><b>Note:</b> The list contains all images of the supported type available in the current project. </p> | |
| </li> | |
| <li>Move the sliders to adjust the | |
| tile height and width to 25px and click OK. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_duke_w.png" rel="lytebox" title="dukeWhite in New sprite dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_duke_w-small.png" alt="dukeWhite in New sprite dialog box" border=1></a></p> | |
| <p>The created sprite displays in the Sprite Editor of the Game Builder.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_created.png" rel="lytebox" title="dukeWhite created"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_created-small.png" alt="dukeWhite created" border=1></a></p> | |
| </li> | |
| <li> | |
| You can drag image tiles from the list at the bottom to specific frames of a sequence.<br> | |
| Drag appropriate images to the first four | |
| frames above to get the following sequence: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_seq.png" rel="lytebox" title="Remove in popup menu"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_seq-small.png" alt="Remove in popup menu" border=1></a></p> | |
| </li> | |
| <li> | |
| Four tiles in enough to create the appearance of a walking Duke, therefore remove the three final frames from the sequence. | |
| <br> | |
| Control-click the frames and choose Remove selected frames from the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_remove_frame.png" rel="lytebox" title="Back to Game Design"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-duke_w_remove_frame-small.png" alt="Sequence of sprites" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p>To create the second sprite, JamesG, complete the following steps:</p> | |
| <ol> | |
| <li>In the editor toolbar, choose Game Design in the drop-down list to switch to the Game Design view. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-back_to_game_design_after_duke_w.png" rel="lytebox" title="Back to Game Design"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-back_to_game_design_after_duke_w-small.png" alt="Back to Game Design" border=1></a></p> | |
| </li> | |
| <li>Click Create Sprite to create another sprite. </li> | |
| <li>Enter <tt>JamesG</tt> as a name for a second sprite, select <tt>/images/james.png</tt> from the Select Image list, and adjust the tile size to the width and height of 25px and click OK. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_james.png" rel="lytebox" title="Creating JamesG"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_james-small.png" alt="Creating JamesG" border=1></a></p> | |
| </li> | |
| <li> | |
| In the Sprite Editor of the Game Builder, modify the sprite sequence (like you did for the walking Duke sequence above) by dragging appropriate images to the first four frames above to get the following sequence: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-james_created.png" rel="lytebox" title="JamesG sequence"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-james_created-small.png" alt="JamesG sequence" border=1></a></p> | |
| </li> | |
| <li>Remove the last four frames in the sequence to get the following one: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-james_created-remove-frame.png" rel="lytebox" title="Extra frames removed"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-james_created-remove-frame-small.png" alt="Extra frames removed" border=1></a></p> | |
| </li> | |
| </ol> | |
| <a name="createlayer"></a> | |
| <h3>Creating Tiled Layer</h3> | |
| <ol> | |
| <li> | |
| In the editor toolbar, choose Game Design in the drop-down list to switch to the Game Design view.</li> | |
| <li>Click Create tiled layer to add a new tiled layer to our game.<br> | |
| The New tiled layer dialog box opens.</li> | |
| <li>Type <tt>bricks</tt> as the tiled layer name, select <tt>/images/brick.png</tt> from the Select Image list, and verify that the tile size is 25x25 px. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_bricks_tl.png" rel="lytebox" title="New tiled layer dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_bricks_tl-small.png" alt="New tiled layer dialog box" border=1></a></p> | |
| </li> | |
| <li>Click OK.<br>The Tiled Layer editor displays.</li> | |
| <li>In the Tiled Layer editor, click the Paint mode button (<img src="../../../images_www/articles/71/mobility/mobilegame/ex3-paint_mode_btn.png">) to switch to the paint mode.</li> | |
| <li>Drag several bricks (<tt>brick.png</tt>) from the tiles list at the bottom into the table cells above.<br> | |
| The Tiled Layer with bricks to collect is ready. | |
| <p class="notes"><strong>Note:</strong> Leave the perimeter cells empty, available for creating a border layer later in this tutorial.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-fill_bricks_tl.png" rel="lytebox" title="Bricks in a tiled layer"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-fill_bricks_tl-small.png" alt="Bricks in a tiled layer" border=1></a></p> | |
| </li> | |
| <li>In the editor toolbar, choose Game Design in the drop-down list to switch to the Game Design view.</li> | |
| <li>Click Create tiled layer to add another tiled layer to our game.</li> | |
| <li>In the New tiled layer dialog box, enter <tt>border</tt> as the tiled layer name, select <tt>/images/bord.png</tt> from the Select Image list. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_border_tl_dialog.png" rel="lytebox" title="New tiled layer dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_border_tl_dialog-small.png" alt="New tiled layer dialog box" border=1></a></p> | |
| </li> | |
| <li>Verify that the tile size is 25x25 px and click OK.</li> | |
| <li>In the Tiled Layer editor, click the Enable layer auto-resizing button (<img src="../../../images_www/articles/71/mobility/mobilegame/ex3-enable-btn.png">).<br>This switches off the rows and columns auto add feature when you drag the mouse out of an existing layer.</li> | |
| <li>Draw a square border as shown in the following screenshot: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_border_tl.png" rel="lytebox" title="Square border added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_border_tl-small.png" alt="Square border added" border=1></a></p> | |
| </li> | |
| </ol> | |
| <a name="createscene"></a> | |
| <h3>Creating Game Scene</h3> | |
| <ol> | |
| <li>In the editor toolbar, choose Game Design in the drop-down list to switch to the Game Design view.</li> | |
| <li>Click Create scene.<br>The New Scene dialog box displays.</li> | |
| <li>Enter <tt>level1</tt> as a scene name and click OK. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-create_new_scene.png" rel="lytebox" title="New scene dilog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-create_new_scene-small.png" alt="New scene dilog box" border=1></a></p> | |
| </li> | |
| <li> | |
| To add a tiled layer with bricks to the scene, right-click inside the Game Builder and choose Add tiled layer > bricks from the | |
| popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-add_tl_to_scene.png" rel="lytebox" title="Adding bricks"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-add_tl_to_scene-small.png" alt="Adding bricks" border=1></a></p> | |
| </li> | |
| <li>After the tiled layer with bricks displays, drag it to the top-left corner of the design canvas and press Ctrl + Shift + S.</li> | |
| <li>To add a tiled layer with the border to the scene, right-click inside the Game Builder and choose Add tiled layer > border from the popup menu.</li> | |
| <li>After the tiled layer with the border displays, drag it to the top-left corner of the design canvas and press Ctrl + Shift + S.</li> | |
| <li>To add the Duke sprite to the scene, right-click the canvas and choose Add sprite > dukeWhite from the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-add_duke_w_to_scene.png" rel="lytebox" title="Adding dukeWhite"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-add_duke_w_to_scene-small.png" alt="Adding dukeWhite" border=1></a></p> | |
| </li> | |
| <li>When the sprite is added, move it to the top-left corner of the canvas and press Ctrl + Shift + S.</li> | |
| <li>To add the JamesG sprite to the scene, right-click the canvas and choose Add sprite > JamesG from the popup menu.</li> | |
| <li>Move the JamesG sprite to the bottom left corner of the canvas like in the following screenshot: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex3-scene_is_ready.png" rel="lytebox" title="Scene ready"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex3-scene_is_ready-small.png" alt="Scene ready" border=1></a></p> | |
| </li> | |
| <li>Press Ctrl + Shift + S to save your changes.<br>The scene is done.</li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> To see the result, you may want to download and unzip the <tt><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-game-created.zip">MobileGame-game-created.zip</a></tt> project file and open the <tt>MobileGame</tt> project in the IDE.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="addlogic"></a> | |
| <h2>Adding Game Logic</h2> | |
| <p> | |
| In this section you are going to add gaming logic to manage the behavior of the tiled layers and sprites. You need to create a turn-tased strategy game where Duke and James collect bricks. Each player has five moves per turn. When the bricks are gone, the player with the most bricks collected wins.</p> | |
| <p>Before going further, take the following steps to open the MobileGame project which contains some additional files prepared for this section:</p> | |
| <ol> | |
| <li>Download the <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-for-adding-game-logic.zip" title="MobileGame-for-adding-game-logic.zip">MobileGame-for-adding-game-logic.zip</a> and unzip the file.</li> | |
| <li>In the IDE, choose File > Close Project to close the MobileGame project created in the <a href="#creategame" title="Creating the Game">Creating the Game</a> section of the tutorial. </li> | |
| <li> In the IDE, choose File > Open Project and browse to the folder that contains the unzipped files with the MobileGame project.</li> | |
| <li> Click Open Project.<br> | |
| The MobileGame project displays in the Projects tab of the IDE. </li> | |
| </ol> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-new_pkgs.png" rel="lytebox" title="New packages"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-new_pkgs-small.png" alt="New packages" border=1></a></p> | |
| <p>The project features the following new packages:</p> | |
| <ol type="a"> | |
| <li><tt>logic</tt> - contains classes that manage the game workflow:</p> | |
| <ul> | |
| <li><tt>BricksGameCanvas</tt> - GameCanvas extension that displays on the device screen;</li> | |
| <li><tt>BricksLayerManager</tt> - manages the interaction between the sprites and tiled layers;</li> | |
| <li><tt>GameInfo</tt> - current game session information available to players;</li> | |
| <li><tt>GameThread</tt> - main game thread that runs in a separate thread to avoid interfering with the game UI.</li> | |
| </ul></li> | |
| <li><tt>logic.players</tt> - contains classes for the player interface and its implementations: | |
| </p> | |
| <ul> | |
| <li><tt>Player</tt> - basic player interface;</li> | |
| <li><tt>OwnPlayer</tt> - human player implementation;</li> | |
| <li><tt>PhonePlayer</tt> - player implementation managed by phone's processing power.</li> | |
| </ul> | |
| </li> | |
| </ol> | |
| <a name="addgamecanvas"></a><h3>Adding GameCanvas to Visual Mobile Designer</h3> | |
| <p>The <tt>BricksGameCanvas</tt> which extends the <tt>GameCanvas</tt>, is the main displayable class of the game. | |
| Let's add it into the application workflow using the Visual Mobile Designer.</p> | |
| <p>To use the <tt>BricksGameCanvas</tt> in the Visual Mobile Designer, you need to add it to the Palette as a custom component as follows:</p> | |
| <ol> | |
| <li> | |
| In the Projects view, double-click <tt>game</tt> > <tt>VisualMIDlet.java</tt>.</li> | |
| <li>Right-click inside the Palette area and select Palette Manager from the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-open_palette_manager.png" rel="lytebox" title="Palette Manager selected"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-open_palette_manager-small.png" alt="Palette Manager selected" border=1></a></p></li> | |
| <li>In the Palette Manager dialog box, click Add to Palette.<br> | |
| The Add to Palette Wizard displays with the MobileGame project selected by default. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-add_to_palette_st1.png" rel="lytebox" title="Add to Palette Wizard"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-add_to_palette_st1-small.png" alt="Add to Palette Wizard" border=1></a></p> | |
| </li> | |
| <li> Click Next.</li> | |
| <li>Select <tt>logic.BricksGameCanvas</tt> from the Select Classes list. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-add_to_palette_st2.png" rel="lytebox" title="Selecting class"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-add_to_palette_st2-small.png" alt="Selecting class" border=1></a></p></li> | |
| <li>Click Finish.<br> | |
| The <tt>BricksGameCanvas</tt> component is added to the <tt>Custom</tt> Palette Content group in the Palette Manager dialog box. | |
| </li> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-canvas_in_palette_manager.png" rel="lytebox" title="BricksGameCanvas added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-canvas_in_palette_manager-small.png" alt="BricksGameCanvas added" border=1></a></p> | |
| </li> | |
| <li>Click Close to close the Palette Manager dialog box. | |
| <br>The <tt>BrickGameCanvas</tt> component is added to the Custom section of the Palette. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/mobilegame/ex4-canvas_in_palette.png" alt="BricksGameCanvas added to Palette" border=1></p> | |
| </li> | |
| </ol> | |
| <a name="addcanvastoworkflow"></a><h3>Adding GameCanvas to Application Workflow</h3> | |
| <ol> | |
| <li> | |
| <p>Drag <tt>BrickGameCanvas</tt> from the Palette to | |
| the Flow view of the <tt>VisualMIDlet.java</tt>.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-canvas_on_vd.png" rel="lytebox" title="BricksGameCanvas added to VisualMIDlet.java"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-canvas_on_vd-small.png" alt="BricksGameCanvas added to VisualMIDlet.java" border=1></a></p> | |
| <p class="notes"><b>Note:</b> The <tt>alert</tt> element is used to display critical error messages to the user.</p> </li> | |
| <li> | |
| <p>The <tt>BricksGameCanvas</tt> contains a constructor with the <tt>VisualMIDlet</tt> parameter:</p> | |
| <div class="codebox"> | |
| <pre> | |
| <span class="ReservedWord">public</span> <span class="Identifier">BricksGameCanvas</span><span class="Braces">(</span><span class="Identifier">VisualMIDlet</span> <span class="Identifier">midlet</span><span class="Braces">)</span> | |
| </pre> | |
| </div> | |
| <p>To use this constructor in the source code generated by the Visual Mobile Designer, you need to update | |
| the <tt>midlet(1.contructor-1.parameter defined</tt> property of the <tt>BricksGameCanvas</tt>.</p> | |
| <li>Click the ellipsis button (<img src="../../../images_www/articles/71/mobility/mobilegame/ellipsis-button.png">) next to the <tt>midlet(1.contructor-1.parameter defined</tt> property value, to open the custom editor. | |
| </li> | |
| <li>In the Java Expression dialog box, type <tt>this</tt> and press OK.</li> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/mobilegame/ex4-constructor_pass_this.png"></p> | |
| </li> | |
| <li> | |
| The GameCanvas should be open when a user clicks Play | |
| in the svgForm. | |
| <p>To enable this behavior, add a connection from the <tt>svgButton</tt> | |
| action in <tt>svgForm</tt> to the <tt>BricksGameCanvas</tt> displayable item like shown in the following image.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-connect_form_to_canvas.png" rel="lytebox" title="BricksGameCanvas added to VisualMIDlet.java"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-connect_form_to_canvas-small.png" alt="BricksGameCanvas added to VisualMIDlet.java" border=1></a></p> | |
| </li> | |
| </ol> | |
| <a name="startthread"></a><h3>Starting Game Thread After Switching To GameCanvas</h3> | |
| <ol> | |
| <li> | |
| In the editor, click Source, to switch to the Visual Mobile Designer Source view. </li> | |
| <li>Add a new <tt>GameThread</tt> attribute to the <tt>VisualMIDlet</tt> class:<br> | |
| <div class="codebox"> | |
| <pre> | |
| <span class="ReservedWord">private</span> <span class="Identifier">GameThread</span> <span class="Identifier">myGameThread</span><span class="Symbol">;</span> <span class="Comment">//[ex4]</span> | |
| </pre> | |
| </div> | |
| <br>The source code in the editor should look like the following: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-gamethread_attr_added.png" rel="lytebox" title="Attribute added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-gamethread_attr_added-small.png" alt="Attribute added" border=1></a></p> | |
| </li> | |
| <li> | |
| Go back to the Flow view, right-click the <tt>svgButton</tt> in the <tt>svgform</tt>, and choose Go To Source | |
| from the popup menu. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-go_to_src_on_svgbutton.png" rel="lytebox" title="Popup menu"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-go_to_src_on_svgbutton-small.png" alt="Popup menu" border=1></a></p> | |
| In the expanded <tt>getSvgButton()</tt> method source, you need to add the code below to enable the following: | |
| <ul> | |
| <li>Create a new GameThread object that implements Runnable;</li> | |
| <li>Create a new Thread object with GameThread as a parameter; </li> | |
| <li>Start the created thread.</li> | |
| </ul> | |
| </li> | |
| <div class="codebox"> | |
| <pre> | |
| <span class="Identifier">myGameThread</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">GameThread</span><span class="Braces">(</span><span class="Identifier">getBricksGameCanvas</span><span class="Braces">(</span><span class="Braces">)</span>, <span class="Identifier">VisualMIDlet</span>.<span class="ReservedWord">this</span><span class="Braces">)</span><span class="Symbol">;</span><span class="Comment">// [ex4]</span> | |
| <span class="Identifier">Thread</span> <span class="Identifier">gameThread</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">Thread</span><span class="Braces">(</span><span class="Identifier">myGameThread</span><span class="Braces">)</span><span class="Symbol">;</span><span class="Comment">// [ex4]</span> | |
| <span class="Identifier">gameThread</span>.<span class="Identifier">start</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span><span class="Comment">// [ex4]</span> | |
| </pre> | |
| </div> | |
| </li> | |
| <li>Paste the code snippet to replace the <tt>//Some action after switch</tt> comment | |
| after the <tt>switchDisplayable</tt> method invocation as follows:</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-comment_is_replaced.png" rel="lytebox" title="Popup menu"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-comment_is_replaced-small.png" alt="Popup menu" border=1></a></p> | |
| </li> | |
| <li> | |
| Now add the following <tt>stopGame()</tt> method to the end of the | |
| class methods declarations. It stops the Game Thread when requested. | |
| <div class="codebox"> | |
| <pre> | |
| <span class="ReservedWord">private</span> <span class="ReservedWord">void</span> <span class="Identifier">stopGame</span><span class="Braces">(</span><span class="Braces">)</span><span class="Braces">{</span> | |
| <span class="ReservedWord">if</span> <span class="Braces">(</span><span class="Identifier">myGameThread</span> <span class="Symbol">!</span><span class="Symbol">=</span> <span class="ReservedWord">null</span><span class="Braces">)</span> <span class="Braces">{</span> | |
| <span class="Identifier">myGameThread</span>.<span class="Identifier">requestStop</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Braces">}</span> | |
| <span class="Braces">}</span> | |
| </pre> | |
| </div> | |
| <p>The method should look like in the following picture:</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-method_added.png" rel="lytebox" title="Method added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-method_added-small.png" alt="Method added" border=1></a></p> | |
| </li> | |
| <li> | |
| Find the <tt>gameOver</tt> method and add the following: | |
| <div class="codebox"> | |
| <pre> | |
| <span class="Identifier">getSvgLabel2</span><span class="Braces">(</span><span class="Braces">)</span>.<span class="Identifier">setText</span><span class="Braces">(</span><span class="Identifier">winnerName</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">stopGame</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| </pre> | |
| </div> | |
| <p>The method should look as follows:</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-gameover_modified.png" rel="lytebox" title="gameOver modified"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-gameover_modified-small.png" alt="gameOver modified" border=1></a></p> | |
| </li> | |
| <li> | |
| Now add the <tt>stopGame()</tt> invocation to the <tt>destroyApp</tt> method body as follows: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-stopgame_invocation.png" rel="lytebox" title="stopGame invocation added"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-stopgame_invocation-small.png" alt="stopGame invocation added" border=1></a></p> | |
| </li> | |
| <li> | |
| Right-click inside the source editor and choose Fix Imports from the popup menu to correct errors (alternatively, press Ctrl-Shift-I). | |
| </li> | |
| <li>Choose File > Save All to save your changes to the source code.</li> | |
| </ol> | |
| <a name="initializeui"></a><h3>Initializing Game UI</h3> | |
| <p>You need to initialize the game UI parts, created in the GameDesigner, so that you can use them in <tt>BricksLayerManager</tt>.</p> | |
| <ol> | |
| <li>In the Projects view, double-click <tt>logic</tt> > <tt>BricksLayerManager.java</tt> to open the file.</li> | |
| <li>In the editor, find the <tt>public void init()</tt> method located after the constructor.</li> | |
| <li>Paste the following code to the beginning of the <tt>public void init()</tt> method body and remove the <tt>// [ex4 - add here]</tt> comment line:<br> | |
| <div class="codebox"> | |
| <pre> | |
| <span class="Identifier">gameDesign</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">GameDesign</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">dukeSprite</span> <span class="Symbol">=</span> <span class="Identifier">gameDesign</span>.<span class="Identifier">getDukeWhite</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">jamesSprite</span> <span class="Symbol">=</span> <span class="Identifier">gameDesign</span>.<span class="Identifier">getJamesG</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">dukeSprite</span>.<span class="Identifier">defineReferencePixel</span><span class="Braces">(</span><span class="Identifier">dukeSprite</span>.<span class="Identifier">getWidth</span><span class="Braces">(</span><span class="Braces">)</span> / <span class="Numeric">2</span>, <span class="Numeric">0</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">jamesSprite</span>.<span class="Identifier">defineReferencePixel</span><span class="Braces">(</span><span class="Identifier">jamesSprite</span>.<span class="Identifier">getWidth</span><span class="Braces">(</span><span class="Braces">)</span> / <span class="Numeric">2</span>, <span class="Numeric">0</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">dukeSpriteAnimator</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">SpriteAnimationTask</span><span class="Braces">(</span><span class="Identifier">dukeSprite</span>, <span class="ReservedWord">false</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">jamesSpriteAnimator</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">SpriteAnimationTask</span><span class="Braces">(</span><span class="Identifier">jamesSprite</span>, <span class="ReservedWord">false</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">bricksLayer</span> <span class="Symbol">=</span> <span class="Identifier">gameDesign</span>.<span class="Identifier">getBricks</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">wallsLayer</span> <span class="Symbol">=</span> <span class="Identifier">gameDesign</span>.<span class="Identifier">getBorder</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">gameDesign</span>.<span class="Identifier">updateLayerManagerForLevel1</span><span class="Braces">(</span><span class="ReservedWord">this</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">timer</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">Timer</span><span class="Braces">(</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">timer</span>.<span class="Identifier">scheduleAtFixedRate</span><span class="Braces">(</span><span class="Identifier">dukeSpriteAnimator</span>, <span class="Numeric">0</span>, <span class="Identifier">gameDesign</span>.<span class="Identifier">dukeWhiteseq001Delay</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Identifier">timer</span>.<span class="Identifier">scheduleAtFixedRate</span><span class="Braces">(</span><span class="Identifier">jamesSpriteAnimator</span>, <span class="Numeric">0</span>, <span class="Identifier">gameDesign</span>.<span class="Identifier">JamesGseq001Delay</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| </pre> | |
| </div> | |
| <p>The method body should look as follows:</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-init_modified.png" rel="lytebox" title="Method modified"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-init_modified-small.png" alt="Method modified" border=1></a></p> | |
| </li> | |
| <p>The inserted code performs the following actions:</p> | |
| <ul> | |
| <li> | |
| Creates a new instance of the GameDesign with the graphical data you created in the <a href="#creategame" title="Creating the Game">Creating the Game</a> section | |
| </li> | |
| <li> | |
| Stores the Duke and James sprites using the <tt>gameDesign.getDukeWhite()</tt> | |
| and <tt>gameDesign.getJamesG()</tt> | |
| </li> | |
| <li> | |
| Defines the reference pixels for the sprites used in the methods for setting and | |
| retrieving the sprite location<br> | |
| <p class="notes"><b>Note:</b> Examples include <tt>setPosition(x,y)</tt>, <tt>getX()</tt> and <tt>getY()</tt>. By default the reference pixel is the top-left corner coordinates.</p> | |
| </li> | |
| <li>Creates the <tt>SpriteAnimationTask</tt> instances for James and Duke</li> | |
| <li> | |
| Stores the Wall and Brick tiled layers | |
| </li> | |
| <li> | |
| Stores the first scene of <tt>level1</tt> that you created by combining the Sprites and Tiled Layers in the Game Designer | |
| in the <a href="#creategame" title="Creating the Game">Creating the Game</a> section that is returned by <tt>gameDesign.updateLayerManagerForLevel1</tt></li> | |
| </ul> | |
| </li> | |
| </ol> | |
| <a name="assignsprites"></a><h3>Assigning Sprites to Players</h3> | |
| <p>In this step you will assign the Duke and James sprites to players. A static assignment is utilized here | |
| but you are free to make it random or use any other rules you would like. | |
| </p> | |
| <ol> | |
| <li> | |
| <p>In the <tt>BricksLayerManager.java</tt> source code, find the <tt>initPlayers()</tt> method and paste the following code over the <tt>// paste players initialization here</tt> comment: | |
| <div class="codebox"> | |
| <pre> | |
| <span class="Comment">// init player 1</span> | |
| <span class="Identifier">myPlayer1</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">OwnerPlayer</span><span class="Braces">(</span><span class="Identifier">dukeSprite</span>, <span class="Identifier">dukeSpriteAnimator</span>, <span class="Identifier">myGameInfo</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| <span class="Comment">// init player 2</span> | |
| <span class="Identifier">myPlayer2</span> <span class="Symbol">=</span> <span class="ReservedWord">new</span> <span class="Identifier">PhonePlayer</span><span class="Braces">(</span><span class="Identifier">jamesSprite</span>, <span class="Identifier">jamesSpriteAnimator</span>, <span class="Identifier">myGameInfo</span><span class="Braces">)</span><span class="Symbol">;</span> | |
| </pre> | |
| </div> | |
| <p>The result looks like the following:</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-init_players_comment_is_replaced.png" rel="lytebox" title="Method modified"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-init_players_comment_is_replaced-small.png" alt="Method modified" border=1></a></p> | |
| <p class="notes"><b>Note:</b> The pasted code snippet enables the project to: | |
| <ul> | |
| <li>Create the <tt>OwnerPlayer</tt> instance connecting it to the Duke sprite</li> | |
| <li>Create the <tt>PhonePlayer</tt> instance connecting it to the James sprite</li> | |
| </ul></p> | |
| </li> | |
| <li> | |
| Right-click inside the source editor and choose Fix Imports from the popup menu (alternatively, press Ctrl + Shift + I). | |
| </li> | |
| <li>Choose File > Save (alternatively, press Ctrl + S) to save your changes.</li> | |
| </ol> | |
| <a name="playgame"></a><h3>Playing Game</h3> | |
| <p>It's time to test your game.</p> | |
| <ol> | |
| <li> | |
| In the Projects view, right-click the <tt>MobileGame</tt> project node and choose Run With from the popup menu.<br> | |
| The Quick Project Run dialog box displays. | |
| </li> | |
| <li>Choose DefaultCldcPhone1 in the Select Device drop-down list. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-select_emulator.png" rel="lytebox" title=" Quick Project Run dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-select_emulator-small.png" alt=" Quick Project Run dialog box" border=1></a></p></li> | |
| <li>Click OK.<br> | |
| The project builds and the phone emulator launches.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-run_project.png" rel="lytebox" title="Emulator started"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-run_project-small.png" alt="Emulator started" border=1></a></p> | |
| <p class="notes"><b>Note:</b> You need to use the buttons in the phone's UI to launch and play | |
| the game (for example, press the Up and Down arrow keys of the phone emulator to select Play or Exit).</p> | |
| </li> | |
| <li>Select Play and click the button in the middle of the phone emulator to start the game.<br> | |
| The game canvas and game thread start and the device screen displays the following game information: | |
| <ul> | |
| <li>Current player - either You or the Foe </li> | |
| <li>Bricks - the total number on the canvas and the number collected by the active player</li> | |
| <li>Steps left - Steps remaining in the current turn</li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-select_play.png" rel="lytebox" title="Game started"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-select_play-small.png" alt="Game started" border=1></a></p> | |
| Enjoy the game! | |
| </li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> To see the result, you may want to download and unzip the <tt><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-game-logic-added.zip">MobileGame-game-logic-added.zip</a></tt> project file and open the <tt>MobileGame</tt> project in the IDE.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="play"></a> | |
| <h2>Playing with Friends</h2> | |
| <p> | |
| The game you have created allows to compete against the default player mode that runs on your mobile phone. | |
| In this section you extend the game to allow multiple players using a web service that lets you exchange | |
| moves with an opponent on another mobile device. The Java ME Web Service API (<a href="http://www.jcp.org/en/jsr/detail?id=172">JSR 172</a>) support in the NetBeans IDE | |
| helps you to add this extended functionality to your application.</p> | |
| <a name="startws"></a> | |
| <h3>Starting Web Service</h3> | |
| <p>You need to deploy and start a web service to enable multi-player gaming. For testing purposes you will | |
| use your own Web Service that runs locally.</p> | |
| <ol> | |
| <li>Download the <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-for-multiple-players.zip" title="MobileGame-for-multiple-players.zip">MobileGame-for-multiple-players.zip</a> and unzip the file.</li> | |
| <li>In the IDE, choose File > Close Project to close the MobileGame project created in the <a href="#addlogic" title="Adding Game Logic">Adding Game Logic</a> section of the tutorial. </li> | |
| <li> In the IDE, choose File > Open Project and browse to the folder that contains the unzipped files.</li> | |
| <li>Choose <tt>BrickGameWebApplication</tt> and click Open Project.<br> | |
| The <tt>BrickGameWebApplication</tt> project displays in the Projects tab of the IDE. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/mobilegame/ex5-wa_opened.png" alt="Web application in the Projects view" border=1></p></li> | |
| </li> | |
| <li>Right-click the Project node and choose Deploy from the popup menu.<br> | |
| The Application Server starts and the Web Application project is deployed. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-appserver_started.png" rel="lytebox" title="Application server started"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-appserver_started-small.png" alt="Application server started" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p>Before going further, take the following steps to open the <tt>MobileGame</tt> project which contains some additional files required for this section:</p> | |
| <ol> | |
| <li> In the IDE, choose File > Open Project and browse to the folder that contains the unzipped <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-for-multiple-players.zip" title="MobileGame-for-multiple-players.zip">MobileGame-for-multiple-players.zip</a> files with the <tt>MobileGame</tt> project.</li> | |
| <li> Click Open Project.<br> | |
| The MobileGame project displays in the Projects tab of the IDE. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-mobilegame_opened.png" rel="lytebox" title="MobileGame project in the Projects view"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-mobilegame_opened-small.png" alt="MobileGame project in the Projects view" border=1></a></p> | |
| A new WebPlayer implementation is added to the <tt>logic.players</tt> package.<br> The WebPlayer implementation uses the web service client to send your moves to the web service and load the foe's moves. | |
| <p class="notes"><b>Note:</b> The project features files with errors since the code is not yet compilable and needs the web service | |
| you are going to create. </p> | |
| </li> | |
| </ol> | |
| <a name="createconfig"></a><h3>Creating New Configuration</h3> | |
| <p>In this section you create a new project configuration that allows you to have both online and offline versions of the same project.</p> | |
| <ol> | |
| <li>Right click the <tt>MobileGame</tt> project node and choose Properties from the popup menu.<br> | |
| The MobileGame dialog box displays. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-open_props.png" rel="lytebox" title="MobileGame project properties dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-open_props-small.png" alt="MobileGame project properties dialog box" border=1></a></p> | |
| </li> | |
| <li>In the Project Properties dialog box, choose Running in the Category list and select | |
| Add Configuration in the Project Configuration drop-down list.<br> | |
| The Add Configuration dialog box displays.</li> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-add_conf.png" rel="lytebox" title="Add Configuration dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-add_conf-small.png" alt="Add Configuration dialog box" border=1></a></p> | |
| </li> | |
| <li>Enter <tt>OnlineGame</tt> for the new configuration name and click OK.<br>The new project configuration is created and is currently the active configuration.</li> | |
| <li> | |
| In the MobileGame configuration dialog box, select Abilities from the Category menu.</li> | |
| <li> Deselect the "Use Values from DefaultConfiguration" option. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5_online_abilities.png" rel="lytebox" title="Abilities category"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5_online_abilities-small.png" alt="Abilities category" border=1></a></p></li> | |
| <li>Click Add.<br> The Add Ability dialog box displays. | |
| <p class="align-center"> | |
| <img src="../../../images_www/articles/71/mobility/mobilegame/ex5_online_ability.png" alt="Add Ability dialog box" border=1></p></li> | |
| <li>In the Add Ability dialog box, type <tt>ONLINE</tt> as the name and <tt>true</tt> as the value and | |
| click OK.</li> | |
| <li>Click OK to close the MobileGame dialog box.</li> | |
| </ol> | |
| <a name="generatews"></a><h3>Generating Web Service Client</h3> | |
| <p>Let's generate a web service client using the wizard provided by the NetBeans IDE Mobility.</p> | |
| <ol> | |
| <li> | |
| In the Projects view, right-click the <tt>MobileGame</tt> project node and choose New > Java ME Web Service Client from the popup menu.<br> | |
| The New Java ME Web Service client dialog box displays. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-jme_ws_client.png" rel="lytebox" title="New Java ME Web Service client dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-jme_ws_client-small.png" alt="New Java ME Web Service client dialog box" border=1></a></p> | |
| </li> | |
| <li> | |
| In the WSDL URL field, enter <tt>http://localhost:8080/BrickGameWebApplication/BricksWebServiceService?wsdl</tt> and click | |
| Retrieve WSDL.<br> | |
| <tt>BricksWebServiceService.wsdl</tt> is loaded and validated. The Client Name and Package fields are automatically filled out. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_local.png" rel="lytebox" title="BricksWebServiceService.wsdl is loaded and validated"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_local-small.png" alt="BricksWebServiceService.wsdl is loaded and validated" border=1></a></p> | |
| </li> | |
| <li>Enter <tt>BricksWebService</tt> in the Client Name field and <tt>wsclient</tt> in the Package field. | |
| </li> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_name_pkg.png" rel="lytebox" title="Client Name and Package filled out"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_name_pkg-small.png" alt="Client Name and Package filled out" border=1></a></p> | |
| </li> | |
| <li>Click Finish.<br>The Web Service client stub is generated. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_generated.png" rel="lytebox" title="Web Service client stub is generated"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-wsdl_generated-small.png" alt="Web Service client stub is generated" border=1></a></p> | |
| <p class="notes"><b>Note:</b> The <tt>logic.player.WebPlayer.java</tt> is no | |
| longer broken. Otherwise ensure no typos are made in the Web Service Client name or package.</p> | |
| </li> | |
| </ol> | |
| <a name="startmultiplayergame"></a><h3>Using Web Service Client to Start Multiplayer Game</h3> | |
| <p>You are going to use WebPlayer in this section. It generates a Web Service Client that displays player moves with the opponent playing on the other device.</p> | |
| <p>First you need to initialize the game. </p> | |
| <ol> | |
| <li> | |
| <p>In the Projects view, expand the <tt>MobileGame</tt> > <tt>Source Packages</tt> > <tt>logic</tt> node and double-click the <tt>BricksLayerManager.java</tt> file to open it in the source editor.</p> | |
| </li> | |
| <li>Add the following attribute and method code to the <tt>BricksLayerManager</tt> class: | |
| <div class="codebox"> | |
| <pre> | |
| private BricksWebServiceService client = null; | |
| public BricksWebServiceService getMobileClient() { | |
| if (client == null) { | |
| client = new BricksWebServiceService_Stub(); | |
| } | |
| return client; | |
| } | |
| </pre> | |
| </div> | |
| </li> | |
| <li>Find the <tt>initPlayers()</tt> method in the code. Update the method so that it uses a different behavior depending on | |
| the selected project configuration by replacing the four lines where the players are initialized. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-local_players_init.png" rel="lytebox" title="initPlayers method"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-local_players_init-small.png" alt="initPlayers method" border=1></a></p> | |
| <p>Replace the existing code highlighted above with the following:</p> | |
| <pre> | |
| //#if ONLINE == "true" | |
| try { | |
| String id = getMobileClient().initPlayer(""); | |
| int order = 0; | |
| while ((order = getMobileClient().startGame(id)) == 0){ | |
| myWaitingForOpponent = true; | |
| Thread.sleep(500); | |
| } | |
| myWaitingForOpponent = false; | |
| if (order == 1) { | |
| myPlayer1 = new OwnerPlayer(dukeSprite, dukeSpriteAnimator, myGameInfo); | |
| myPlayer2 = new WebPlayer(jamesSprite, jamesSpriteAnimator, myGameInfo, | |
| getMobileClient(), id); | |
| } else { | |
| myPlayer1 = new WebPlayer(dukeSprite, dukeSpriteAnimator, myGameInfo, | |
| getMobileClient(), id); | |
| myPlayer2 = new OwnerPlayer(jamesSprite, jamesSpriteAnimator, myGameInfo); | |
| } | |
| } catch (RemoteException ex) { | |
| myCanvas.errorMsg(ex); | |
| } catch (InterruptedException ex) { | |
| myCanvas.errorMsg(ex); | |
| } | |
| //#else | |
| //# // init player 1 | |
| //# myPlayer1 = new OwnerPlayer(dukeSprite, dukeSpriteAnimator, myGameInfo); | |
| //# // init player 2 | |
| //# myPlayer2 = new PhonePlayer(jamesSprite, jamesSpriteAnimator, myGameInfo); | |
| //#endif | |
| </pre> | |
| The <tt>initPlayers</tt> method should now look as follows: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-players_init_with_ability.png" rel="lytebox" title="initPlayers method updated"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-players_init_with_ability-small.png" alt="initPlayers method updated" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p>Note the following conditional attributes in the pasted code:</p> | |
| <ul> | |
| <li>If the <tt>ONLINE</tt> ability exists and its value equals "true", the first part of the code | |
| registers the Player in the service using the <tt>getMobileClient().initPlayer("")</tt> method. The game is | |
| then started with the <tt>getMobileClient().startGame(id)</tt> invoked in case there is no opponent.</li> | |
| <li>Typically it is better to initialize the game in a separate thread to avoid conflict with the game UI. | |
| In order to simplify this example and reduce the amount of code needed, this procedure is skipped.</li> | |
| <li>After the opponent appears and the game is initialized the Players are connected to Sprites depending on | |
| the playing order chosen.</li> | |
| <li>Notice that that code in the <tt>else</tt> clause is the same as it was before. If the game application is | |
| not online, this part of the code is compiled and used. This means that you must right-click and choose Fix Imports | |
| from the contextual menu for the project to run successfully.</li> | |
| </ul> | |
| <a name="rungame"></a> | |
| <h3>Running Game in Emulator</h3> | |
| <p>You can now run the project with two "remote" players.</p> | |
| <ol> | |
| <li>In the Projects view, right-click the <tt>MobileGame</tt> project node and choose Run With from the popup menu.<br> | |
| The Quick Project Run dialog box displays. | |
| </li> | |
| <li>Choose DefaultCldcPhone1 in the Select Device drop-down list. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex4-select_emulator.png" rel="lytebox" title=" Quick Project Run dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex4-select_emulator-small.png" alt=" Quick Project Run dialog box" border=1></a></p></li> | |
| <li>Click OK.<br> | |
| The project builds and the first instance of the phone emulator launches.</p> | |
| </li> | |
| <li>In the Projects view, right-click the <tt>MobileGame</tt> project node and choose Run With from the popup menu.<br> | |
| The Quick Project Run dialog box displays. | |
| </li> | |
| <li>Choose DefaultCldcPhone2 in the Select Device drop-down list. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-select_emulator.png" rel="lytebox" title=" Quick Project Run dialog box"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-select_emulator-small.png" alt=" Quick Project Run dialog box" border=1></a></p></li> | |
| <li>Click OK.<br> | |
| The project builds and the second instance of the phone emulator launches.<br>You can switch between the emulators and play for both players. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/mobilegame/ex5-two_players.png" rel="lytebox" title="Two emulators"> <img src="../../../images_www/articles/71/mobility/mobilegame/ex5-two_players-small.png" alt="Two emulators" border=1></a></p> | |
| </li> | |
| </ol> | |
| <p class="notes"><b>Note:</b> To see the result, you may want to download and unzip the <tt><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/MobileGame-for-multiple-players-ready.zip">MobileGame-for-multiple-players-ready.zip</a></tt> project file and open the <tt>MobileGame</tt> project in the IDE.</p> | |
| <p><span class="tips">Troubleshooting:</span></p> | |
| <ul> | |
| <li>If you cannot access the web service WSDL, check your network settings. A firewall | |
| or antivirus shield can prevent applications from connecting to the web service. </li> | |
| <li>If the application cannot reach the web service URL, you can deploy the web service to an application server on your own machine.</li> | |
| </ul> | |
| <a name="summary"></a> | |
| <h2>Summary</h2> | |
| <p>This tutorial showed how to create a Java ME game with a SVG-based UI using the NetBeans IDE. It also showed how to connect the application to a web service to enable multi-player gaming.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Creating%20Java%20ME%20Games%20in%20NetBeanse%20IDE">Send Feedback on This Tutorial</a></div> | |
| <br style="clear:both;" /> | |
| <a name="seealso"></a> | |
| <h2>See Also</h2> | |
| <ul> | |
| <li><a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">SVG Rich Components - References</a></li> | |
| <li><a href="http://wiki.netbeans.org/MobilitySVGComponents">Using SVG Rich UI Components</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li> | |
| <li><a href="../../../kb/trails/mobility.html">NetBeans Java ME and Java Card Application Technology Trail</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| </body> | |
| </html> |