Advertisement
  1. Code
  2. Game Engines
Code

Build a Cross-Platform ShiVa3D Game: Final Steps & Project Export

by
Difficulty:IntermediateLength:MediumLanguages:

The second tutorial in this three-part series started with "Game Geometry", which was focused on the underlying geometric aspects of the game, and also began demonstrating the steps necessary to build the game in the ShiVa Editor. This final tutorial installment will continue where the prior ShiVa Editor steps left off. It will then demonstrate how to export the game to the iOS or Android platforms.


Also Available in This Series:


This tutorial will continue the discussion started in the previous section entitled "Developing Puzzle with the ShiVa Editor". Here, we will describe importing the HUD components and making the final adjustments on the game progress so far. Then, we will conclude the "Developing Puzzle with the ShiVa Editor" section via a unit test. In the "Authoring Tool" section, we will show how to use the ShiVa Authoring Tool to convert the Puzzle into two different applications, one for Android OS and one for iPad. We will wrap up the series in the section titled "Conclusions".


Step-By-Step Instructions Continued

Import the HUD

Now, we will import the HUD components including fonts, buttons, labels, etc. Proceed to your local directory where you have stored the download archive accompanying this article. Select PuzzleHUD.ste and press Import. When the import is completed, you should see Bell_Gothic_Std_Light and Arial_Unicode_MS in Data Explorer under Puzzle - Resources - Fonts.

Verifying Fonts

Figure 43. Verifying Fonts

Also, in Data Explorer under Puzzle - Resources - Textures, you will see the textures named Bell_Gothic_Std_Light and Arial_Unicode_MS.

Verifying Font Texctures

Figure 44. Verifying Font Textures

At the same time, you should be seeing the HUD components imported via PuzzleHUD.ste. First, under Puzzle - Resources - HUD, observe that you have PuzzleHUD.

Verifying HUD

Figure 45. Verifying HUD

Second, bring up the HUD Editor and the Data Explorer side-by-side. In Data Explorer, double click on PuzzleHUD, which is under Puzzle - Resources - HUD. In the HUD Editor, you will be seeing the following.

Verifying HUD in HUD Editor

Figure 46. Verifying the HUD in the HUD Editor

If you scroll down in the HUD Editor, it should look like this:

HUD Components

Figure 47. HUD Components

A brief explanation of the HUD components is given below. For more details, see the section "Head-Up Display" in the second tutorial of this series.

  • Background, Time and Toolbar are the labels for background color, timer, and toolbar.
  • p11 through p69 are the labels representing the puzzle pieces.
  • Restart, Solve and StartPause are the buttons with labels "New", "Solve" and "Start" (or "Pause", depending on state), respectively.
  • restartAction, solveAction and startPauseAction are the actions triggered upon pressing Restart, Solve and StartPause, respectively.
  • Perform Adjustments

    Having imported all the needed resources, we will now perform some adjustments. Bring up Game Editor and Data Explorer side-by-side. In Data Explorer, under Puzzle - Games, double click Puzzle. The Game Editor should now have the Puzzle game loaded. Notice that the User's Main AIs section is empty under Main tab.

    Game Editor

    Figure 48. Game Editor

    In the Data Explorer, under Puzzle - Resources - AIModels, select PuzzleAI. Drag-and-Drop it to the "User Main AIs" section in the Game Editor, under the Main tab. The User Main AIs section now has PuzzleAI listed.

    Game Editor - Main Tab

    Figure 49. Game Editor - Main Tab

    In the Game Editor, click on the Resources tab. It will look empty. In Data Explorer, under Puzzle - Resources - HUD, select PuzzleHUD and then drag-and-drop it in the Resources section in Game Editor. Similarly, in Data Explorer, under Puzzle - Resources - SoundBanks, select PuzzleSoundBank and drag-and-drop it in the Resources section. The resources tab should look like this.

    Game Editor - Resources Tab

    Figure 50. Game Editor - Resources Tab

    In Data Explorer, under Puzzle - Resources - Textures, select textures p11 through p69 and drag-and-drop them in the Resources section in Game Editor. The resources tab should look like this.

    Game Editor - Textures

    Figure 51. Game Editor - Textures

    Perform Unit Testing

    We are now all set. In order to test our game, click on the Preview button in the ShiVa Editor toolbar. From the menu, select Display > Size > iPad > 768x1024.

    Game Editor - Preview

    Figure 52. Game Editor - Preview

    Also, from the menu select Display > View Mode > Runtime.

    Game Editor - Adjusting Display

    Figure 53. Game Editor - Adjusting Display

    Now, in the menu, press Play. You should see the game starting.

    Game Editor - Starting Preview

    Figure 54. Game Editor - Starting Preview

    Now, you can play the game using mouse-clicks emulating touch events on the screen.


    Exporting The Game For Authoring

    In this section, we will discuss how to export the game from the ShiVa Editor for importing into the ShiVa Authoring Tool.

    Exporting for Android OS

    In the Data Explorer, from Puzzle - Resources - Game, select Puzzle and from right click menu select Export Game.

    Exporting Game

    Figure 55. Exporting Game

    For the "Export name" field, type Puzzle. Choose a local folder to generate the export file (e.g. C:\exports\). Make sure you also select "Runtime Package (.stk)" and Android.

    Exporting Game - Android

    Figure 56. Exporting Game - Android

    Finally, press Export. If you are exporting an archive for the first time from a project, it may take several minutes to complete. When the export has completed, you can press OK to dismiss the dialog.

    Exporting Game - Dismissing the Dialog

    Figure 57. Exporting Game - Dismissing the Dialog

    Exporting for iOS

    Exporting for iOS is very similar. In Data Explorer, from Puzzle - Resources - Game, select Puzzle and from the right click menu, select Export Game. For the "Export name" field, type Puzzle. Choose a local folder to generate the export file (e.g. C:\exports\). Make sure you also select "Runtime Package (.stk)" and iOS (Note: If you intend to use the same folder and export file names for Android OS and iOS exports, make sure that those exports do not overwrite each other.).

    Exporting Game - iOS

    Figure 58. Exporting Game - iOS

    Finally, press Export. When the export has been completed, you can press OK to dismiss the dialog.

    Additional Information

    Due to space considerations, we do not provide an explicit code review for the Puzzle application. All the functions and handlers that come as part of PuzzleAI.ste have detailed comments to describe their particular functionality. The interested reader is referred to those scripts for further details of the code.


    Authoring Tool

    We have developed the Puzzle game without writing any code specific to iOS or Android platforms. We will now use the ShiVa Authoring tool to convert the Puzzle into two different applications, one for Android OS and one for iPad.

    Pre-requisite Files From Download Archive

    In order to follow the instructions below you will need ios-icon-72-72.png, ios-splash-768-1024.png, android-icon-48-48.png and android-splash-480-800.png that are part of the download archive accompanying this article.

    Android Platform

    Bring up the ShiVa Authoring Tool. Select Android tab. Press on the arrow under 'Or get started now...'.

    Authoring Tool - Getting Started for Android

    Figure 59. Authoring Tool - Getting Started for Android

    Step 1 of the Authoring Tool is displayed. For "Application pack", select from your file system the Puzzle.stk file exported from the ShiVa Editor for Android. For "Icon", select the android-icon-48-48.png, which is part of the source archive accompanying this article. For "Startup splashscreen", select the android-splash-480-800.png which is also part of the source archive accompanying this article. Observe that the ShiVa Authoring Tool displays a preview of the image files specified in "Icon" and "Startup splashscreen" selections. Press "Step 2: Authoring" atop the screen.

    Authoring Tool - Step 1 for Android

    Figure 60. Authoring Tool - Step 1 for Android

    Step 2 of the Authoring Tool is displayed. Here, we will create an Android executable file that can be directly installed in an Android device. Select "Authoring type" as "APK Package" (if you want an Eclipse project to be created instead of an executable, select "Project" instead. The Project option has not been tested in this article). For "Bundle identifier", enter com.shiva3d.test. Let "Version" and "Version code" be 1.0.0 and 1, respectively. Press on "Step 3: Build" atop the screen.

    Authoring Tool - Step 2 for Android

    Figure 61. Authoring Tool - Step 2 for Android

    Step 3 of the Authoring Tool is displayed. Select "Build type" as "Development". Since I would like to install the Puzzle into my Android device as part of the build, I've checked the "Install on connected device" checkbox.
    For that option to work, you must have completed the steps in "Prepare The Android Device for Installation" below. If the "Install on connected device" checkbox is not checked, the Authoring Tool will create the Android executable for the Puzzle application in "Output folder", which can be installed later on using the ADB tool in Android.

    Authoring Tool - Step 3 for Android

    Figure 62. Authoring Tool - Step 3 for Android

    Leave "Audio backend" set to "Default". Select "Minimum OS support" as "Android 2.2 (API level: 8)". Define an output folder for the Authoring Tool to store the files it generates during the build process. Let the "Custom post build script" selection remain as the "No script" option. Press the Build button.

    Authoring Tool - Step 3 for Android (Additional Selections)

    Figure 63. Authoring Tool - Step 3 for Android (Additional Selections)

    It will take a while to complete the build. Once the build is completed, you will see a confirmation in the console stating that the build completed successfully.

    Authoring Tool - Build

    Figure 64. Authoring Tool - Build

    If you have selected the "Install on a connected device" option, at this point the Puzzle application has been installed on the connected device. Regardless of whether that option has been checked or not, an Android executable called Puzzle-debug.apk has been created in the output folder you have defined in Step 3.

    iPad Platform

    Bring up the ShiVa Authoring Tool. Select the iPad tab. Press on the arrow under "Or get started now...".

    Step 1 of the Authoring Tool is displayed. For the Application pack, select from your file system the Puuzle.stk file exported from ShiVa Editor for iOS. For Icon, select the ios-icon-72-72.png which is part of the source archive accompanying this tutorial. For Startup splashscreen, select the ios-splash-768-1024.png which is also part of the source archive accompanying this tutorial. Press Step 2: Authoring atop the screen.

    Step 1

    Step 2 of the Authoring Tool is displayed. Here, we will create an Xcode project that can be used for building and installing the application on your iPad device. Select Authoring type as Project. For Bundle identifier, enter com.shiva3d.test. For Provision profile provide the development provisioning profile from Apple Provisioning Portal. For Signing identity provide the developer (or organization) name in the keychain associated with the certificate in your Mac OS development machine. Let Version be 1.0.0. Press on Step 3: Build atop the screen.

    Step 2

    Step 3 of the Authoring Tool is displayed. Select Development as the Build type. Provide an output folder for the Authoring Tool to create an xCode project folder. For example, we define the output folder to be /Users/cocoderkatz/Desktop/tmpiPad. Then, the Authoring Tool will create a folder named /Users/cocoderkatz/Desktop/tmpiPad/Puzzle_iPad.s3dxproj and copy the Xcode project files/folders under that folder. Do not change other options. Press the Build button.

    Step 3

    Once the build is completed, you will see a message in the console that the Authoring tool has created an Xcode project folder and copied the related files in that folder. Now, you can use Xcode to build and run the Puzzle game in an iPad device as you would normally do with other Xcode projects.

    Console

    Conclusions

    In this article, we discussed cross-platform game development for Android tablets and iPad using the ShiVa3D Suite. Although mainly for 3D game development, the ShiVa3D Suite can be used for creating 2D games as well. The sample application studied in this tutorial is a 2D game that is built using HUD (Head Up Display) elements of ShiVa3D.

    • Although we have focused on tablets, the ShiVa3D Suite can be used for developing games for devices with a smaller screen size as well, such as Android phones, iPod touch devices, and the iPhone. For Android phones with an OS version 2.2 or above, the process described for the Authoring Tool would apply without any changes. For the iPod touch and iPhone, choose iPhone instead of iPad when you start the Authoring Tool. The Puzzle game is more suited to tablets because the puzzle pieces appear too small making it difficult to play the game in phones.
    • While authoring the game for the Android platform via the Authoring Tool, we set the Authoring type as an APK Package in Step 2. Instead, if we had set the Authoring type as Project, the tool would generate an Eclipse project for further customization. For example, in Step 1 of the Authoring Tool, the allowed dimensions for the Android launch icon and splash screen images are 48x48 pixels and 480x800 pixels, respectively. By creating an Eclipse project, one could replace those images with ones better suited for tablets. In the Eclipse project created by the Authoring Tool, those images files can be found in res and res/drawable folders.
    • The Puzzle can be enhanced in several different ways. For example, instead of a single image with 6x9=54 pieces, include different images with varying number of puzzle pieces (e.g. one with low difficulty consisting of 4x5=20 pieces and another one with medium difficulty consisting of 5x7=35 pieces). Add an initial screen to let the user choose which image (and thus the difficulty level) they want to play.
    • Recall that you can download entire ShiVa3D Suite freely and develop games for self-learning. However, the free edition is not licensed for commercial purposes and will contain water marks.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.