Week 5 Update

Progress:

This week we made a lot of progress toward the user interface of the app. We added some functionality to the buttons and created some visual queues for body selection and launching.

All of the button functionality improvements were already talked about in detail in previous posts this week. Besides attaching some function calls to a few of the buttons (such as adding bodies), we also implemented a slider for adjusting mass.

The next major update was the adding of a visual queue for selection. The selected body gets highlighted. This was done by extending our DynamicSprite class to create a BodyHighlight class. BodyHighlight overrides the update() method so that it can update the location of the highlight sprite to lay on top of the DynamicSprite (which lays over the body). The highlight sprite is basically just a semi-transparent yellow circle with dimensions slightly larger than the body it’s covering. This creates the following effect:

Here, the small body in the bottom of the screen is selected.

The complete code can be found here:

https://github.com/njwidmann/OrbitGame/tree/master/core/src/com/game/nick/orbit

The last major improvement we added was a simulator to predict how a body will be launched. This uses Euler’s method to take into account the forces from all of the other bodies given a specific launch velocity. With every step (TIME_STEP), the position is updated based on the previous step’s velocity and the velocity is updated based on the forces acting on the body in its new (simulated) location. The code responsible can be found here (look at the doSimulation() method:

https://github.com/njwidmann/OrbitGame/blob/master/core/src/com/game/nick/orbit/LaunchSimulation.java

The dots show a simulation of the launch before it happens. 

Future Plans

We’ve mentioned this already but we really need to start focusing on scale and units. We are working on optimizing the scale of the numbers (distance, mass, gravitational constant, etc) so that users can experiment and see realistic results. If we didn’t do this, all of the bodies would be incredibly far away from each other. If you wanted to see multiple planets at the same time, they wouldn’t even be a pixel in diameter. It would also literally take years for a model of the earth to orbit the sun. We also want to add informational menus that will pop up where users can see numbers for velocities, distances, and masses. If we’re going to do this, we need to decide where in our code we want to convert units so that the user is presented with the realistic values. It doesn’t matter if the simulation uses drastically different numbers than the user actually sees as long as the user sees realistic numbers. The main reason we have to do these conversions is because libGDX and box2D have a speed limit of moving bodies 2 units per frame. We just need to decide what these units should be so that it works out the way we need it to.

Moving forward, we also need to finish up the menu and optimize everything for mobile devices. These things are all obviously easier said than done and it’s going to be a lot more work than it looks like on paper. However, we are definitely approaching our deadline and we need to start wrapping things up. I think we’re in good shape.

Getter Methods

When writing a method you must define what it is beforehand. If you define a method as Void it won’t return anything. In order to get a method to return a value you must define the type. The second thing you must do is type return then that variable, at the end of the method. Whenever you call that method to an object it calls that return value. This allows you to use that value in your main method.

A nice way to get instance variables from classes, is to make a getter method that returns that variable. Getter methods are important when you start to make instance variables private. Which means you won’t be able to use that instance variable in your main method. So you can make a getter method for that variable then use it wherever you want. Below is an example when I used getter methods to assign variables age and name.

class Person {

      String name;

      int age;

     

      void speak() {

            System.out.println("My name is:" + name);

      }

      int calculateYearsToRetirement(){

            int yearsLeft = 65 - age;

            return yearsLeft;

      }

      int getAge() {

            return age;

      }

      String getName(){

            return name;

      }

}

public class App {

      public static void main(String[] args){

            Person person1 = new Person();

            person1.name = "joe";

            person1.age = 25;

   

            person1.speak();

           

            int years = person1.calculateYearsToRetirement();

            System.out.println("years till retirements " + years);

            int age = person1.getAge();

            String name = person1.getName();

           

            System.out.println("Name is: " + name);

            System.out.println("Age is: " + age);

      }    

}

Graphics

I am still working on graphics for menu. Now I actually put some codes. But there are three dreadful problems. First one is that I cannot create ui file. I tried to create ui component inside the asset file, but instead of file, new scrip was created, so I deleted. The second problems is that I cannot input the .pack file. I am watching the Youtube video how to create menu icons.https://www.youtube.com/watch?v=WO52F0M_tio
It is definitely helpful, but because the codes we have and the codes he has are different. So it is hard to compare them and put translate his code to the compatible codes for our program.
The last problems are even though I read through instruction or information, I could not fully understood the difference between atlas and table.
So far I made little progress, but I start getting some concept. This is my code so far, it does not work yet.

Menu Progress

I've been working on adding functionality to the menu buttons. The most recent challenge I encountered was adding a slider for people to adjust the mass of a body. Like the buttons, a Slider is a widget included in scene2d ui. It's relatively simple to use once you get it set up. I found an example on the libgdx website and built mine off that model. Here's the code used to create a slider:

Slider slider = new Slider(min, max, step_size, false, skin);

Here, min and max are the minimum and maximum values of the slider and step_size is the step size in between. For example, if min = 0, max = 10, and step_size = 1, then the values you could get from the slider would be {0, 1, 2, 3, ... , 9, 10}. The fourth parameter (false here) corresponds to whether the slider should be displayed vertically. The skin is the reference to the .json file that determines graphics. The skin object is declared like this:

Skin skin = new Skin(Gdx.files.internal("data/uiskin.json"));

In this same example I found, I navigated to uiskin.json to figure out how this worked. It turns out that it's very similar to CSS. The .json file references the .atlas file that contains information for a .png texture atlas. Basically, the .png file is a big picture with a bunch of small pictures stitched together. The .atlas file tells the program where all of those pictures are using coordinates, dimensions, and angles. Then the .json file has entries that look like the below code snippet that tell the program what pictures should be used for what objects (such as slider elements or buttons).

{

"com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle": {
"default-horizontal": { "background": "default-slider", "knob": "default-slider-knob" },
"default-vertical": { "background": "default-slider", "knob": "default-round-large" }

}

I used this to create a slider that can be used to adjust the mass of a selected body. The slider actually adjusts the radius and then the mass is adjusted accordingly using volume and density. The min and max values of the slider are the respective radii of the MIN_MASS and MAX_MASS constants defined in the main file. The step size is 0.01 so that users can adjust to a fine precision. The skin is currently using the same .png file from the example I found as a temporary placeholder until we make our own graphics to replace it.

Here's a screenshot of the slider. Like before, disregard the yellow and blue lines. Those are temporary and just used for debugging.

The example referred to in this post can be seen here:
https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/UITest.java
https://github.com/libgdx/libgdx/tree/master/tests/gdx-tests-android/assets/data
(the second link points to the folder containing uiskin.json, uiskin.png, and uiskin.atlas)

Methods

Today I learned about methods. A method is used to set a behavior for a class. For example with the class person you can create a method to make an object say their name. When writing a method you type (void method_name();{}), with the method_name in lower case. Between the curly brackets you can write code for your method.

After you make your method you can call it in your main class. Since the method has access to the class, you can use the instance variables declared in the class. We can call a method by typing ( name_object.method_name();). Calling a method will run the code in your method.

Below is an example of a method used to calculate the derivative of a function at the point (2,2). First I imported the Math class so I could use it later in my code. Then I made a class called Function with a method productRule. After I created an object called variable, and add data to it. Last I called the method.

import java.lang.Math;

class Function {

     

      int x;

      int y;

      int n;

      int r;

      double derivative;

     

      void productRule(){

            int newn = n-1;

            int newr=r-1;

            derivative = n*Math.pow(x, newn)*Math.pow(y, r)+Math.pow(x,n)*r*Math.pow(y, newr);

            System.out.println("The derivative is: " + derivative);

      }

}

public class Application {

     

      public static void main(String[] args){

            Function variable = new Function();

             variable.x = 2;

             variable.y = 2;

             variable.n = 3;

             variable.r = 3;

             

             variable.productRule();

             

           

           

      }

     

}

     

Putting graphics on the menu bar

Today, I started working on menu graphics. First, I needed to download texture packer tool, and pack all icons or images I am going to use. Unlike putting graphics on the planets, I have to convert the images to .pack files. I have not tried yet, but this is what I understood so far. 

After I convert all the icons or images, I import that file into the program where the button functions are. And I create Skin class and under each button, I define a skin variable by putting the name of the icon. Then the icon will be called from the .pack file.

I am going to try them tomorrow and update how this actually works

Week 4 Progress

Progress

This week we made a lot of progress toward the user interface of the app. One of the first major things we did was implement graphics for the first time. This can be seen in some of the screenshots below as well as some of the earlier posts from this week. We also began working on incorporating an on-screen menu. We’ve created a hierarchical structure with different sub-menus attached to the main menu. Here’s an outline of what that looks like:

• Main Menu
• Add Body Sub-menu
• Add Single Body
• Add Multiple Bodies (matrix)
• Edit Body Sub-menu
• Scale Body
• Change Body’s Velocity
• Change Body’s Orbit
• Make Body Stuck in Place
• Body Info
• Delete Body
• View Options Sub-menu
• Zoom Camera
• Pan Camera
• Reset Camera
• Center Camera on Body
• Settings Sub-menu
• Delete All Bodies
• More Options (Change G, etc…)
• Help
• App Info

      

We just finished putting the menu together on the screen. It works so that when a user taps or clicks the menu button in the bottom right corner, the main menu slides out. Then if they tap the buttons in the main menu corresponding to the different sub-menus, their respective sub-menus slide out above the main menu. This was all done using scene2d.ui tables and button widgets. Information about that can be found in the FAQ on this blog or at these links:

https://github.com/libgdx/libgdx/wiki/Scene2d

https://github.com/libgdx/libgdx/wiki/Scene2d.ui

The second link contains specific information about working with the UI section of scene2d but it is recommended that you review the basics in the first link before visiting the second.

If you’d like to see how we implemented it specifically, our most up-to-date code can be found here:

https://github.com/njwidmann/OrbitGame/tree/master/core/src/com/game/nick/orbit

This is the menu closed. A user can tap menu to have it slide out. The blue lines through the center of the screen are for debugging purposes and won't be present in the final version.

This is the menu opened up. None of the sub-menus are open. Again, disregard the blue lines.

Here's a picture of the menu with one of the sub-menus open. The second row of buttons is the "Edit" sub-menu for editing bodies' properties.

Other Changes

I also found out a much easier way to map the pictures to the bodies. In a post I made a few days ago, I talked about how I needed to create methods to scale from world coordinates to screen coordinates. It turns out though that libgdx sprite batches come with a handy setting called a projection matrix where you can specify a viewport or camera for scale. All I had to do was add the line in bold below to the render loop where the sprites are updated.

public void render(float delta) {

…

… other code not shown ...

...

       batch.begin();

       batch.setProjectionMatrix(camera.combined);

       for(DynamicSprite sprite : sprites) {

           sprite.update();

           sprite.draw(batch);

       }

       batch.end();

…

… other code not shown...

...

}

Then I could make the update() method much simpler in DynamicSprite:

public void update() {

       Vector2 position = getBody().getWorldCenter();

       float radius = getShape().getRadius();

       setSize(radius * 2, radius * 2);

       setPositionCenter(position.x, position.y);

       setOrigin(getWidth() / 2, getHeight() / 2);

       setRotation((float)Math.toDegrees(physicsBody.getAngle()));

}

One more change I made was adding a pause function. This pauses the simulation when people press the P button. In the future, this will also be called whenever the main menu is opened. This was actually really easy and the only thing I had to do was change the time step to 0 inside the render loop:

world.step(TIMESTEP, 6, 2);

You can see all this code in context at the github link above.

Future Plans

The next thing we plan to do is attach functions to all of the buttons in the menu as well as add more graphics. We need to attach graphics to the menu items and also create GUI sliders and arrows and orbit paths for adjusting body properties.

Team Roles

Team roles have continued to be pretty similar. Nick is still doing most of the programming while Ebed and Jiho are focusing on the other main tasks and learning Java. Next week, Jiho and Ebed are going to start doing some more of the programming, starting with adding graphics.