Making Physics Based Side-Scroller Part 1: Project Setup

http://overlap2d.com/making-physics-based-side-scroller-project-setup-part-1/#Main_Goals

 

 

This is Part 1 of a tutorial, where we are going to make a side-scroller game together.

Main Goals

The goal is to make a simple game using libGDX, Box2D and Overlap2D Editor for learning purposes. There will be a level with ground, platforms and a playable character who will be walking around. Main character also will be able to shoot bullets which will break surroundings in order to make his way through. We will use Box2D physics simulated world for all the platforms and surroundings, while player itself will not be a physics object. We will write player pseudo-physics ourselves using ray-casting. We will also setup a basic simple UI, using 9patch images.

Goals/Steps for this tutorial

1. Get ready main textures
2. Setup Overlap2D project
3. Import all requested assets
4. Setup physics data in Overlap2D
5. Setup libGDX project
6. Export Overlap2D data into your project assets folder
7. Make short Stage class for things to show
8. Run the physics simulation and enjoy

 

What you will need before you start

• IntelliJ IDEA or Eclipse with Gradle plugin
• Overlap2D Level Editor (request download from main page)
• draw9patch tool, can be found in your Android SDK tools folder (http://developer.android.com/tools/help/draw9patch.html) (optional)

 

Getting ready main textures

Get ready PNG texture files for your project, mainly platforms to be used in your level and some circle to rotate. One of the platforms we will use as a 9patch image, so we can change its width while it still looks good and soesn’t get stretched. Here is the list of images I have.

You can download them from here to follow along if you do not want to use others. (9patch item will be already created there if you can’t get draw9patch tool).

I decided that inside the game we can use platforms of different sizes, so it will be nice to create a 9patch platform. For that, run your draw9patch tool from Android SDK tools directory, and drag and drop platform1.png there, make selections on it like on screenshot below:

Save the file as paltform1.9.png (I know I misspelled it, but what can you do. Too lazy to go back and fix it now, so yeah, just copy/paste the file name, please). It is important to keep the .9 at the end of file name so that the editor will recognize this image as 9patch (note: this step is already done if you are downloading images I provided).

The assets are now ready for import, so it’s time to create Overlap2D project.

 

Setting up Overlap2D project

Run Overlap2D.jar and go to File → New Project. For this project I decided to use a bit bigger resolution like 1280×800: this is a common 7 inch tablet resolution and is also seen on some phones. The reason I am not doing 800×480 is because I will also show you how to do a multiresolution project with Overlap2D (in next tutorial of this series). When you click “New Project” a new project dialog is opened, so you can put all the required data there. Here is the screenshot of my configuration:

Then click “Create New Project” button. An empty project will open up. You do not have any images imported yet so it’s perfect time to import your images we prepared earlier. Go toFile → Import to Library (and yes, I do think we should rename this to just “Import”) and then near the import images text field click on “…” button to select the files to import. Navigate to the folder you have them in and import them (duh!). Importing images takes some time, because Overlap2D not just copies them but also packs them into Atlas Pack file for faster use.

If all was successful, then you should see a list of images on the right middle panel. That means all is good and you can start dragging them to your scene.

Let’s also prepare our ground platform. Drag and drop our 9patch paltform1.9 to your scene from right panel, and then from “Basic Properties” panel on top right set its width to 800. It should change in size at the middle, while the left and right parts remain as-is. When done, select that platform, right-click on it, and from drop down menu select “Group Into Composite” option. Later you would be able to get inside that composite item and add things like rock, grass or other stuff into it. But for now we will leave it as-is, and proceed to setting up our physics environment.

 

Configuring Physics Data

Okay it’s time to setup our meshes. There are several ways to do it. If you want to setup a physics data for an object that is already on the screen, just right-click on it and select “Edit Physics” button from drop down menu, this will bring up the “Edit Physics” dialog. There you can choose if your object is static or dynamic, set its mass, friction, density and so on, and draw the polygon mesh for its fixture shape. You can also right-click on an asset inside the right panel, and select “Edit Physics”. If done so, later every time you drop this asset to the stage you will have physics data copied with it. It is also important to notice that physics data is not saved unless you click “Save Physics Data” inside the edit physics dialog. If you just close it, data is lost.

In this tutorial we need to create physics body for the main big platform, as well as for several others. Right-click on composite item created earlier, and create physics for it by tracing its shape, setting it up as a static body, and setting friction to 1.0.

Note: if you try to just edit physics of 9patch item, it won’t work. You can only setup physics for composite items or simple images for now.

For other platforms just edit physics from the assets panel, with same settings. Take a look at the shapes I made:

For the ball png, I could not use a simple circle shape as we don’t support it yet (sorry about that). Please make sure to leave this one as a “dynamic” body, and add a mass to it, like “1”.

Besides that, set the rest of the settings like restitution, friction and density to “1” as well. This will allow this body to fall down and rotate when hitting things, as well as bounce. You can test it by clicking on “Test” button inside “Physics Editor”.

When you are done setting up physics objects, set up the world properties as well. For that click on an empty space on your stage. That will show you the world properties on top right panel. There, set Gravity Y value to -10.0 and make sure that “Enable Physics” checkbox is checked. Save your project.

Drag and drop some of the items to your stage and create an interesting level where your future character will be able to move. Here is what I managed to get:

 

I put this rotated panel there so a ball will fall on it to showcase dynamic items. Your Overlap2D project setup is ready, let’s get to the coding!

 

Setting up your libGDX application

First get the libGDX setup app from here: http://libgdx.badlogicgames.com/download.html  (Click “Download Setup App”).

After you run it, you should enter some settings, here is the one I used (note: I did not create Android project, because I did not have latest SDK at that moment).

 

This will create a Gradle project in the specified location. I used IntelliJ as IDE so my examples are going to be about doing it with that IDE, but if you use Eclipse it should not be hard as well. So for IntelliJ, run it and then choose “Import Project”. Then select “Import Gradle Project”, on next screen make sure “Use default Gradle wrapper” is selected and hit “Finish”.

This will create your project, but you still need to run the Gradle script to configure it. In IntelliJ got to View → Tool Windows → Gradle.

This will open up a panel on the right; find a “Refresh” icon there and click it. After some crunching your project will be configured and ready to run.

Then in the same right panel in “Desktop” section find the “Run” button and run your project (am I oversimplifying this? Honestly I am just making a long text to get the the end of this image on the right, so things look pretty. Don’t judge).

Okay, you probably got an empty libGDX app running now, with red background and a crazy face on the bottom left. That means you are doing good.

Make sure to get rid of the unnecessary stuff by removing badlogic.jpg from assets folder, then going to TestPlatformer class and deleting sprite batch and the image. Now if you did all right, run the project and you will see a black screen.

 

 

Setting up your project to work with Overlap2D runtime

First of all go to github and locate Overlap2D runtime project: https://github.com/UnderwaterApps/overlap2d-runtime-libgdx

Next download it as ZIP or clone it. Make sure you put the overlap2d-runtime-libgdx-master directory in the same parent directory as your project is.

Now we need to configure Gradle to see Overlap2D runtime. To do that, first open settings.grade in the root of your libGDX project. And add this lines there:

 

1 2	include'desktop','core','Overlap2dRuntime' project(':Overlap2dRuntime').projectDir=newFile(settingsDir,'../overlap2d-runtime-libgdx-master')

Now open build.gradle file and locate part with project(“:core”) {  , change it so it looks like this:

 

1 2 3 4 5 6 7 8 9 10 11 12

project(":core"){     apply plugin:"java"         dependencies{         compile"com.badlogicgames.gdx:gdx:$gdxVersion"         compile"com.badlogicgames.gdx:gdx-box2d:$gdxVersion"         compile"com.badlogicgames.gdx:gdx-freetype:$gdxVersion"         compile"com.badlogicgames.box2dlights:box2dlights:1.2"         compile project(":Overlap2dRuntime")     } }

Now, when you presh the “Refresh all gradle projects” button again, your project will have Overlap2DRuntime as a dependency.

Exporting Overlap2D data to your project assets folder

In order to render your Overlap2D scene inside the empty libGDX project you just built, you will need to export all data to your libGDX project assets folder. To do so simply go to your Overlap2D project and choose File → Export Settings. This will open up “Export Settings” dialog box; click on “…” button to set the path to your libGDX assets folder which is inside “core” folder. Then click on “Save Settings and Export” button.

 

Now when you go to your IntelliJ you will see that assets folder is full with things generated by Overlap2D like the Atlas file with textures, MainScene.dt file with your scene content, and project.dt file with information about resolutions. Now that you have all data ready, only coding is left.

Setup window size

We need to set our window size to the size of or game, which is 1280×800. For that, open DesktopLauncher.java and add config.width, config.height configurations to it:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

packagecom.underwater.testplatformer.desktop;   importcom.badlogic.gdx.backends.lwjgl.LwjglApplication; importcom.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration; importcom.underwater.testplatformer.TestPlatformer;   publicclassDesktopLauncher{ publicstaticvoidmain(String[]arg){ LwjglApplicationConfiguration config=newLwjglApplicationConfiguration();         config.width=1280;         config.height=800; newLwjglApplication(newTestPlatformer(),config); } }

 

Creating GameStage

In order to render Overlap2D scene, you need a stage. Create a GameStage class and extend it from Overlap2DStage. Overlap2DStage will take care of most of the things, like setting up a default resource loader that will load things from your assets folder as if they were exported from Overlap2D directly, like we did. It will also setup all the physics world configurations, and do other required things (I encourage you to check its source to see what is done).

In GameStage constructor we need to do just 3 things.

1. Initialize scene loader
2. load MainScene as an actor
3. put that actor on stage to render

Here is how it’s done:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

packagecom.underwater.testplatformer;   importcom.uwsoft.editor.renderer.Overlap2DStage;     publicclassGameStageextendsOverlap2DStage{       publicGameStage(){           // This will create SceneLoader instance and configure all things like default resource manager, physics e.t.c         initSceneLoader();           // This will load MainScene data from json and make Actors from it         sceneLoader.loadScene("MainScene");           // Get the root actor and add it to stage         addActor(sceneLoader.getRoot());     } }

The last thing to do is to render our stage. This is done by creating its instance in our TestPlatformer class create method. And then later in render method calling stage.act() and stage.draw().

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

packagecom.underwater.testplatformer;   importcom.badlogic.gdx.ApplicationAdapter; importcom.badlogic.gdx.Gdx; importcom.badlogic.gdx.graphics.GL20;   publicclassTestPlatformerextendsApplicationAdapter{       privateGameStage stage;   @Override publicvoidcreate(){         stage=newGameStage(); }   @Override publicvoidrender(){ Gdx.gl.glClearColor(0.8f,0.8f,0.8f,1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);           stage.act();         stage.draw(); } }

That’s it! Go ahead and run the project, if all works well the Overlap2D scene will load, the ball will fall down under the gravity and bounce off things.

Final result screenshot

What’s next

In next tutorial we will add a character to control in this simulated physics environment.

 

Let me know if you completed the tutorial, show off your screenshots and suggest your improvements in Overlap2D forums!