Testing out T2D for Android Dev Diary Part #3

Step by step showing how easy it is to get started with T2D Android. If you haven't already done the initial setup steps go to my first Dev Diary blog:
www.garagegames.com/community/blogs/view/22622
The point of this blog is to get someone that has never even thought of doing development with T2D's Android to have a step by step guide (with some humor if it is appropriate).

To leave off we were in the Getting Started Guide with T2D that my last blog mentioned:


Getting Started Guide Link:
github.com/GarageGames/Torque2D/wiki/Getting-Started-Guide

10) Chapter 10 (Pretty Pretty Please can we makes spaceships now?)
The guide tells me I need to create three main objects for this project: Background Image, spaceship, and asteroids. Each of these sceneObjects need their own script file so I went into myModule/scripts directory and created script files for them: background.cs, spaceship.cs, and asteriod.cs. I then need to go to the main.cs file in my base myModule directory and tell it to execute these files. So I open up the main.cs file with Torsion and I add the following code after the other file loading code we added earlier:

exec("./scripts/background.cs");
   exec("./scripts/spaceship.cs");
   exec("./scripts/asteroids.cs");

I then need to create the script information for the background sceneObject. I open up the scripts folder from the base myModule folder in my project and open up the background.cs file in Torsion. I add the following code to it:

function createBackground()
{
   // Create the sprite.
    %background = new Sprite();

    // Set the sprite as "static" so it is not affected by gravity.
    %background.setBodyType( static );

    // Set the object's center to coordinates 0 0 which corresponds to the center of the Scene
    // Remember that our camera is set to point to coordinates 0 0 as well

    %background.Position = "0 0";

    // Set the object's size. Notice that this corresponds to the size of our camera, which was created in
    // scenewindow.cs. The background will thus cover the entirety of our scenewindow.
    %background.Size = "100 75";

    // Set to the furthest background layer.
    %background.SceneLayer = 31;

    // Sets the image to use for our background
    %background.Image = "ToyAssets:skyBackground";

    // Create border collisions.
    %background.createEdgeCollisionShape( -50, -37.5, -50, 37.5 );
    %background.createEdgeCollisionShape( 50, -37.5, 50, 37.5 );
    %background.createEdgeCollisionShape( -50, 37.5, 50, 37.5 );
    %background.createEdgeCollisionShape( -50, -34.5, 50, -34.5 );   

    // Add the sprite to the scene.
    myScene.add( %background );    
}

Looks like it makes a variable that will represent a sprite object. It modifies the bodytype of that sprite object, position, size, sceneLayer, adds a background image to it, adds collision shapes to it and then adds it to the scene I created earlier. The guide goes over in detail what each line does and mentions that an alternative method to creating the background object could have been:

new Sprite(Background);

I need to add the createBackground function call to my myModule main.cs as well. I then need to create the spaceship by adding the following code to the spaceship.cs file:

function createSpaceShip()
{
   // Create the sprite.
    %spaceship = new Sprite(PlayerShip);

    // We want our spaceship to move and be affected by gravity and various forces
    // so we set its BodyType to dynamic
    %spaceship.setBodyType( dynamic );

    // Set the position at the center of our Scene
    %spaceship.Position = "0 0";

    // Set the size.        
    %spaceship.Size = "4 4";

    // Set the layer closest to the camera (above the background)
    %spaceship.SceneLayer = 1;

    // Set the scroller to use an animation!
    %spaceship.Image = "myModule:LoRez_SpaceShip";

    // This creates a box which so that collisions with the screen edges register properly
    // Calling createPolygonBoxCollisionShape() without arguments sets the box to the size of the 
    // sceneobject automatically.
    %spaceship.createPolygonBoxCollisionShape();

    // Add the sprite to the scene.
    myScene.add( %spaceship );   

}

After adding the code I need to tell my myModule create function to create the space ship! So I open up the main.cs file in the base myModule folder and add this code right after createBackground:

createSpaceShip();

I then open up the Asteriods.cs in torsion and add the following code to it:

function createAsteroids(%Number_of_Asteroids)
{

   for(%i=0;%i<%Number_of_Asteroids;%i++)
   {
   // Create the sprite.
    %asteroid = new Sprite();

    %asteroid.setBodyType( dynamic );

    // Set the position.
    %asteroid.Position = "-40" SPC getRandom(-35,35);

    // Set the size.        
    %asteroid.Size = "3 3";

    // Set to the front most layer.
    %asteroid.SceneLayer = 1;

    //Sets the collision shape to a circle with a radius of 1.5 units
    %asteroid.createCircleCollisionShape(1.5);

    //This function determines how bouncy our asteroids will be if collisions occur
    //values between 0.0 and 1.0 should be used in most situations
    %asteroid.setDefaultRestitution(getRandom(0.5,1.1));

    //This sets the horizontal speed of our Asteroids between 15 and 35 towards the right side of the screen
    //Negative values would send them to the left instead
    %asteroid.setLinearVelocity(getRandom(15,35),0);

    //This will make the Asteroids rotate automatically
    %asteroid.setAngularVelocity(getRandom(5,25));

    //Here we assign all created Asteroids to SceneGroup 20. More on this in Chapter 11.
    %asteroid.SceneGroup = 20;

    %asteroid.Image = "ToyAssets:Asteroids";

   //You will notice that the asset file for ToyAssets:Asteroids defines 4 different images
   //in one single file. setImageFrame chooses from one of these images to add variety.
    %asteroid.setImageFrame(getRandom(0,3));

    // Add the sprite to the scene.
    myScene.add( %asteroid );   
   }

}

Now this looks a little different, it looks like I'm creating multiple sprite objects putting them in a group randomly assigning them positions and which asteroid shape to use. It appears to be changing which asteroid I'm looking at by changing the ImageFrame of a sprite sheet of images. I then need to tell the main.cs in the myModule folder to create the Asteroids. To do this I open up the main.cs file in the myModule folder and add the following code after I create the ship:

createAsteroids(20);

There wasn't anymore to the guide for this chapter so I then scrolled down to Chapter Heading "Chapter 11. Handling Collisions":
github.com/GarageGames/Torque2D/wiki/Getting-Started-Guide

11) Chapter 11: (I think I made something but I can't see it when I run it did I do it wrong?)
Ok ,well I saved the changes from chapter 10 and ran the executable but it didn't do anything but show me my pink background. This made me concerned that I wasn't do it right so I scrolled to the top of the getting started guide and decided to download the myT2DProject completed.zip file and compare it against my code base to see what the differences were. I loaded up my compare tool (I use Beyond Compare) and did a rules based comparison of the two code bases. I found that I had malformed the data in the module.taml file and that was causing it to never load past that point. After adding the appropriate changes to the file everything started working like magic! I decided to copy the assets folder and the main.cs file in the base project directory over to the android assets directory to try it out on the phone. It worked great. Blue sky background with my ship showed up just fine. (The asteroids didn't but, I'm sure its just some class of code I didn't put in yet). Anyways on to Handling Collisions. The section starts off with a link to here:
github.com/GarageGames/Torque2D/wiki/Physics-Guide
Which is the Physics Guide for using Box2D style physics in the T2D engine itself. I reviewed the guide to ensure I was familiar with its concepts before I continued. The read was interesting and went over a lot of concepts I felt I would need to better utilize the Box2D scene objects later. The guide tells me that I need to tell the spaceship that it can listen for collisions I do that by adding the following code before the myScene.add(%spaceship); in MyModule --> scripts --> spaceship.cs file:

%spaceship.setCollisionCallback( true );

So I added the code and moved on to learning about the onCollision function and advanced functions. It mentions because when we created the sprite object we gave it a name in the engine we can reuse that name for its class functions so I am asked to add a new function to that same file the spaceship.cs I was just modifying. So I add it to the bottom after the createSpaceShip() function:

function PlayerShip::onCollision( %this, %sceneobject, %collisiondetails )
{
}

The guide explains that the function is tied into the engine calls by default and it will take care of it for me. The guide then explains what each variable means in the new function and moves on to explaining what types of objects a spaceship will be able to collide with: The asteroids and the Invisible Barriers surrounding the background SceneObject. The guide tells me I am going to do something with this function to know if the spaceship collided with either an Asteroid or a Invisible Barrier. The guide then explains the steps of noticing a collision and replacing an asteroid with a particle effect (animation) so to speak. The guide then asks I add the following code to the function PlayerShip::onCollision member function from earlier. So I do:

function PlayerShip::onCollision(%this, %sceneobject, %collisiondetails)
{

   //If we have collided with an object belonging to Scenegroup 20,
   //execute the code between the { ... }
   //If we collide with something else, do nothing
   if(%sceneobject.getSceneGroup() == 20)
   {
   // ParticlePlayer is also derived from SceneObject, we add it just like we've added all the other
   //objects so far
   %explosion = new ParticlePlayer();

   //We load the particle asset from our ToyAssets module
   %explosion.Particle = "ToyAssets:impactExplosion";

   //We set the Particle Player's position to %Sceneobject's position
   %explosion.setPosition(%sceneobject.getPosition());

   //This Scales the particles to twice their original size
   %explosion.setSizeScale(2);

   //When we add a Particle Effect to the Scene, it automatically plays
   myScene.add(%explosion);

   //We delete the asteroid
   %sceneobject.safedelete();

   //We create a new asteroid just like we did at the start of the game!
   createAsteroids(1);  
   }
}

The guide then asks me to run the game and watch it do stuff. I run the game and all I have still is a bluesky background and a playership. Hmm, I'm thinking I did this wrong, I'll need to go look at the asteroid and other functions and taml files to figure it out. Because they are not appearing I would assume it would be a loading issue. So, I opened up my scripts directory and saw that I had labeled "asteriods.cs" instead of "asteroids.cs". I renamed the file and ran the application again. This time the application loaded as intended and I saw asteroids going from the left side of the screen to the right side of the screen. As they crashed into the space ship they showed a explosion particle effect. I am then asked to create random sized asteroids between 3 and 10. I need to open up the scripts --? asteroids.cs and replace the line %asteroid.Size = "3 3" with the following code:

// Set the size.        
      %randomsize = getRandom(3,10);
      %asteroid.Size = %randomsize;

The guide then explains to you what that is doing and tells you to change the collision shape on the asteroids as well so that they are appropriately handled replacing the line of code:

%asteroid.createCircleCollisionShape(1.5);

with the code:

%asteroid.createCircleCollisionShape( (%randomsize*0.85) / 2);

The guide then explains that the restitution of the asteroids diminishes over collisions and they end up floating around in a corner, it recommends that we change the backgrounds invisible collision shapes to have restitution (or bounciness). I open up the scripts --> background.cs and add the following code to it before I add it to the scene:

%background.setDefaultRestitution(1);

I then do another play test to see the asteroids at different sizes and that they are more bouncy. They do seem more bouncy so that apparently did what was intended. I wonder if you can normalize how much or teleport the asteroids to the opposite sides of the so they can just keep moving. (That way you don't have to worry about how much bouncy they have at all. There wasn't anymore to the guide for this chapter so I then scrolled down to Chapter Heading "Chapter 12. Controls":
github.com/GarageGames/Torque2D/wiki/Getting-Started-Guide

12) Controls: "I cans flys my ship now!?"
The control part of the guide starts off explaining different types of inputs and then breaks those down. The guide tells me it won't be talking about right or middle mouse buttons. It then explains that there really is no difference between touch and left mouse button and that there are just three methods tied in the engine for them: onTouchDown, onTouchUp, onTouchDragged. Each touch to the screen (for multitouch) up to how many you have total (I'm guessing you'd want to cap that to five (5) or less but) has a %touchID and a %worldposition. The guide then explains that we need to change our GuiDefaultProfile to support Modal so that we can receive mouse / touchscreen type events. I navigate to myModule --> Gui --> and open the file named guiprofiles.cs and make the following code change:

if(!isObject(GuiDefaultProfile)) new GuiControlProfile (GuiDefaultProfile)
{
   Modal = true;   
};

The guide explains that we have an Input Listener Objects and that we used to make call backs off of the objects already in the scene but now we can move those to a separate file for the sake of organization. It says we need to make a new file called controls.cs and put it here myModule --> Scripts --> controls.cs. I do that and I go back to the myModule --> main.cs and edit it. After the exec's for loading the scene objects I added the following code to the file:

//Load Controls
   exec("./scripts/controls.cs");

I then scrolled down to after the createAsteroids(20); and put in the new control inputmanager code:

new ScriptObject(InputManager);
   mySceneWindow.addInputListener(InputManager);

The guide mentions that it is important to name these objects because you need to ensure proper cleanup and having them attached to a scene object makes that cleanup much easier. The guide then asks me to scroll down in the file to the myModule::destroy method and add the following code to ensure the controls manager gets deleted:

InputManager.delete();

The guide explains that you can have multiple InputManagers listening to the scene at the same time. If you want to disable an input listener then you just call the scene window object and tell it to remove the input listener it added earlier. I'm not going to actually do that so I won't put the code in this walkthrough. I test it on the phone by copying my modules folder to the assets folder in the engine --> compilers --> android --> assets folder and replacing the one I had there. I opened up eclipse and cleaned the project [Because for some reason, every time I open up Eclipse after doing the original compile it shows up unable to compile. So I ran cleanup and the project now shows as being able to compile again] the guide then explains that I can do a point test and get an array of objects under the point, I can then compare the objects to a list and then decide on which ones to act upon. In the example in the guide, I open the controls.cs file in myModule --> Scripts --> control.cs and add the call back function now that I've told the scenemanager to call the scriptobject InputManager. The code looks like this and I added it to the bottom of the file:

function InputManager::onTouchDown(%this, %touchId, %worldposition)
{    
   //We assign the list of objects that were hit to variable %picked
   %picked = myScene.pickPoint(%worldposition);

   //%picked.count is the number of items listed in the %picked variable

   for(%i=0; %i<%picked.count; %i++)
   {

      //When iterating through the list, getWord will return item number %i in variable %picked

      %myobj = getWord(%picked,%i);

      //If this item belongs to SceneGroup 20, we delete it
      if(%myobj.getSceneGroup() == 20)
      {
      %myobj.safedelete();
      }

   }   
}

The guide asks me to run the game again so I do it on the computer and then I copy the files over to the assets directory so I can compile it for android and test it there. Before I load it on android this time, however, I decide to add the code to make it so that the back button exits the game. I had to open the file called main.cs at the base of my project folder and add the following code at the bottom of that file:

function androidBackButton(%val)
{
	if (%val) {
		//Add code here for other options the back button can do like going back a screen.  the quit should happen at your main menu.

		quit();
	}

}

I tested it on the computer and it worked just fine. I loaded it up on the phone and it worked as intended. When I touched the asteroids they disappeared. The graphics were really small so I'm thinking the size three (3) is much too small I had to touch those a couple of times before I was able to get them to go away. The guide explains that I can do two different types of pickpoint functions OOBB or AABB. OOBB is the objects current rotation were AABB is the location only. The guide then mentions the Sandbox module for additional T2D advanced examples. I then learned about how the keyboard works in T2D. You create a ActionMap and then you bind commands to it for the system to listen for. When those binds are pushed on the keyboard there is a makefunction (onDown) and a breakfunction (onUp) I wonder if there is just a function that recieves a val that you just decide what it is. So I open up my myModule --> scripts --> control.cs file and add a new member function to the InputManager script object we declared earlier and it looks like this:

function InputManager::Init_controls(%this)
{
   //Create our new ActionMap
   new ActionMap(shipcontrols);

   // Press "a" to execute "PlayerShip::turnleft();"
   // Release "a" to execute "PlayerShip::stopturn();"

   shipcontrols.bindCmd(keyboard, "a", "PlayerShip.turnleft();", "PlayerShip.stopturn();");
   shipcontrols.bindCmd(keyboard, "d", "PlayerShip.turnright();", "PlayerShip.stopturn();");
   shipcontrols.bindCmd(keyboard, "w", "PlayerShip.accelerate();", "PlayerShip.stopthrust();");

   //Push our ActionMap on top of the stack
   shipcontrols.push();
}

The guide then asks me to go to the myModule --> main.cs file and in the create module member function add the InputManager.Init_controls(); function call. I add the following code after where I add the input listener to the scenewindow:

InputManager.Init_controls();

The guide then explains that after the game is destroyed I need to free that action map so in the same file I scroll down to the MyModule::destroy(%this) member function and add the following above all of the code already present in the method call:

shipcontrols.pop();

Now MyModule::destroy(%this) function looks like this:

function MyModule::destroy( %this )
{
   shipcontrols.pop();
   InputManager.delete();
   destroySceneWindow();
}

The guide tells me that I need to add the player hooks to those functions I just created so I navigate over to the MyModule --> scripts --> spaceship.cs and at the end of the createSpaceShip function but before adding it to the scene (myScene.add( %spaceship ) I added the following code:

//setFixedAngle prevents the spaceship's rotation from being influenced by Collisions and physics forces
   //The spaceship will still bounce when it collides with other objects.
   %spaceship.setFixedAngle(true);

   //create a new variable and set it to false.
   %spaceship.isThrusting = false;

The guide then asks me to add the PlayerShip::accelerate(%this) member function so I add it to the playership file after the onCollision member function I added earlier:

function PlayerShip::accelerate(%this)
{
   //Get the angle of our spaceship. When the ship is pointing upwards, its Angle is 0.
   %adjustedAngle = %this.Angle;

   //Make sure that the angle is always between 0 and 360 degrees
   if(%adjustedAngle < 0) %adjustedAngle *= -1;
   else if(%adjustedAngle > 0) %adjustedAngle = 360-%adjustedAngle;

   //When used as a math operand, % refers to modulo (or modulus) operator
   //This function can be read as %adjusted angle = %adjustedAngle % 360;
   %adjustedAngle %= 360;

   //If we are thrusting, shorten our vector
   if(%this.isThrusting)
   {  
      //Calculate a direction from an Angle and Magnitude
      %ThrustVector= Vector2Direction(%adjustedAngle,35);
   }
   else
   {
      %ThrustVector = Vector2Direction(%adjustedAngle,95);

      //We temporarily remove the Damping of Linear Velocity to allow full power!
      %this.setLinearDamping(0.0);

      //We temporarily increase the Damping of Angular velocity so that the ship turns slower when at full thrust
      %this.setAngularDamping(2.0);
   }

   //Adding our position to the ThrustVector determines the strength of our thrust
   %MywordX = %this.Position.x + %ThrustVector.x;
   %MywordY = %this.Position.y + %ThrustVector.y;  

   //applyLinearImpulse pushes on our spaceship, using %ThrustVector as the impulse vector.
   //The second parameter is the point in the ship's collision shape used to apply the thrust
   %this.applyLinearImpulse(%ThrustVector, "0 0");

   //We are now thrusting, we will set this to false when we release the 'w' key
   %this.isThrusting = true;

   //We create a schedule to repeat this thrust every 100 milliseconds
   %this.thrustschedule = %this.schedule(100,accelerate);   
}

The guide goes over what a majority of the lines do and we move on to learning about schedules.