Making Physics Based Side-Scroller Part 3: Adding UI and Moving Platforms

http://overlap2d.com/making-physics-based-side-scroller-part-3-adding-ui-and-moving-platforms/

 

Good coding day, awesome ones. Today we are going to do the 3d part of the tutorial on side-scroller. It is going to be a short one, but still important.

Agenda

In this tutorial we are going to:

1. Add new scene (stage) to host game UI
2. put a restart level  button on it and make it work
3. handle inputs on both stages.
4. Add moving platforms and camera

Adding UI scene

First, just a quick disclaimer why your UI needs to be in other scene.

• Because we will move camera around in game, and we do not want our UI to move in opposite direction, or artificially move it with it.
• Because we do not want UI to be affected with lighting system if we use any.

Now that this is clear, let’s go to File > Scene > Create new scene (in overlap2d) and create new scene. I called it UIScene.

This will create an empty scene, with the same resolution as your previous one was. Our current UI is going to be pretty simple, just a button in left top corner that will restart the game.

Creating restart button

For that we will need a 9patch as a background and a ttf font for text. If you were following the tutorial from the beginning, you remember that I shared some images that you imported. There was a 9patch texture called Goldprogress.9.png (I do not even remember why it was named that way…. welp what can you do). It was supposed to be a button background, so go ahead and drag it to the screen, click on it to select it, and in the basic properties area, set it’s width to 348 pixels.

Next we need to use a text label, so we need to import a font first. I went to dafont.com and got VCR OSD Mono (which was 100% free to use). And you can obviously get any. Import it using File >  Import to Library > Import fonts. When done, click on the UI tab in right middle panel, and drag and drop a Label to the scene. Set the size to 72, Align center, and put it in the middle of background image (9patch). Select label and the background together, right click and choose Convert to Button. This will create a “half made” composite item. If you double click on it and get inside you will see it has 3 layers: Default, normal and pressed. Both images are currently on default layer. The pressed and normal layers are to host pressed and normal states of button.

Our text has nothing to do with button pressed state, so first create another layer and name it “text” put it on top of all layers. Then select your label, press Ctrl+X to cut it out, select text layer you created earlier, and Ctrl+V to paste label to that layer in same place.

Now for the states. Cut and paste your background image to the normal layer, then copy it, and paste to the pressed layer, while selected click on the color picker in the basic properties, and select a dark gray tint to kinda darken it a bit. (or you can use another image for that state if you so desire). At the end you should have a composite with empty default layer (you can’t delete it) with normal and pressed backgrounds on their layers, and a text layer with label on it. You can exit your newly created button composite by double clicking on empty space. position your button in top left location of the screen, and give it an ID: restartBtn.

Save and export your project, we are done here. If al is good there should be a UIScene.dt file be added in your assets folder of your libGDX project.

Creating new stage for UI scene

In TestPlatformer java we previously had variable “stage” let’s change it to gameStage for better naming, as we are going to have another stage with name menuStage (add it as well). The important trick here is to remember that gameStage when created called for initSceneLoader method of Overlap2DStage, which create basically a default ResourceManager for you, you do not want to do it again and load all resources for each stage separately for menu stage, because it was already done in game stage. In order to re-use resource manager, we are going to pass it as a parameter to MenuStage constructor. In fact we are going to even pass the entire GameStage to MenuStage, as menu stage would need to call some of it’s methods that we are going to write soon. Bare with me, it’s going to be explained better ahead. For now, let’s just create a new class called MenuStage and extend it from a simple libGDX stage ( we do not need any physics or lights here)

 

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

publicclassMenuStageextendsStage{       publicMenuStage(finalGameStage gameStage){           //Creatinga a scene loader and passing it a resource manager of game stage         SceneLoader sl=newSceneLoader(gameStage.essentials.rm);           // loading UI scene         sl.loadScene("UIScene");           // adding it's root composite item to the stage         addActor(sl.getRoot());           // Creating restart button, and adding a click listener to it         SimpleButtonScript restartButton=SimpleButtonScript.selfInit(sl.getRoot().getCompositeById("restartBtn"));         restartButton.addListener(newClickListener(){             publicvoidclicked(InputEvent event,floatx,floaty){                 //restarting game when clicked                 gameStage.restart();             }         });     } }

Let me go through this lines of code in more details. First we create a new instance of SceneLoader to load our UI scene.  If used with empty constructor, it would have generated a new resource manager instance for us, but because we already have one in game stage that is already have all the resources loaded in memory, we are going to simply reuse it. It is in essentials.rm

Then we just load the UIScene and add it as actor, as usual.

For the button, first we create the button instance (the iScript) that is self initializing from the restartBtn composite item. (Basically it will create an iScript and attach it to the button). This line will make our button clickable, it will respond to click by changing to pressed state, and we will also have a method to add listeners to it. So we can now go ahead and add a click listener. From there we just call a restart method of game stage (that we haven’t made yet) to restart the game.

Now, next step us to change our TestPlatformer.java so it will have instances of both stages, will draw them both in sequential order, and most importantly will deal well with inputs for both. you see by default the game stage was listening for inputs, now we need to do it with both scenes. For that you can use a nice class that libGDX has, it is called InputMultiplexer. Here is the new code of our TestPlatformer.java

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

publicclassTestPlatformerextendsApplicationAdapter{       privateInputMultiplexer inputMultiplexer;       privateGameStage gameStage;     privateMenuStage menuStage;   @Override publicvoidcreate(){           inputMultiplexer=newInputMultiplexer();           gameStage=newGameStage();         menuStage=newMenuStage(gameStage);           inputMultiplexer.addProcessor(gameStage);         inputMultiplexer.addProcessor(menuStage);           Gdx.input.setInputProcessor(inputMultiplexer); }   @Override publicvoidrender(){ Gdx.gl.glClearColor(0.4f,0.4f,0.4f,1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);           gameStage.act();         gameStage.draw();           menuStage.act();         menuStage.draw(); } }

And finally let’s add the restart method to our GameStage so that the game will actually restart when the button is pressed. This time we’ll keep it simple and just reset the position of the player to initial one. Add this method to GameStage

 

1 2 3

publicvoidrestart(){         player.reset();     }

Then in player controller, add private Vector2 initialCoordinates, and set it to player initial coordinates in init method like so:

 

1	initialCoordinates=newVector2(item.getX(),item.getY());

Finally create the reset method:

 

1 2 3 4 5

publicvoidreset(){         item.setX(initialCoordinates.x);         item.setY(initialCoordinates.y);         verticalSpeed=0;     }

Run the game, and it should work nicely, walk around and press restart, the player should move where it started, and your button should have 2 states when pressed and not, and it should also move with camera no matter where the player is.

 

Moving Platforms

Now that we are done with UI, let’s also have some moving platforms. for that place some platforms on the screen on overlap2d, then add several custom variables to them using basic properties panel. I named them platfromMargin and platfromSpeed. First one is to specify how far platform will go up or down from initial position. and the other to specify speed in pixels per second. I used values like 100 pixel margin and 50 pixel per second for speed. so it will take 8 seconds for platform to complete entire cycle.

When this is done and exported, create a class script to handle the logic for each platform:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

publicclassMovingPlatformimplementsIScript{       privateCompositeItem item;       privatefloatoriginalPosY;       privateintdirection=1;       privatefloatmoveSpeed=50f;     privatefloatmargin=100f;       @Override     publicvoidinit(CompositeItem item){         this.item=item;         originalPosY=item.getY();           if(item.getCustomVariables().getFloatVariable("platformSpeed")!=null)             moveSpeed=item.getCustomVariables().getFloatVariable("platformSpeed");         if(item.getCustomVariables().getFloatVariable("platformMargin")!=null)             margin=item.getCustomVariables().getFloatVariable("platformMargin");     }       @Override     publicvoiddispose(){       }       @Override     publicvoidact(floatdelta){         setY(getY()+direction*delta*moveSpeed);         if(getY()>originalPosY+margin||getY()<originalPosY-margin)direction*=-1;         item.setY(getY());     }       publicfloatgetY(){         Vector2 currPos=item.getBody().getPosition();         returncurrPos.y/PhysicsBodyLoader.SCALE;     }       publicvoidsetY(floaty){         Vector2 currPos=item.getBody().getPosition();         item.getBody().setTransform(currPos.x,y*PhysicsBodyLoader.SCALE,item.getBody().getAngle());     } }

The code is pretty straight forward, we take the configuration values from custom variables, and then move the platform in act method. We change position by changing physics body position first, and then setting actor position to body position while converting between physics and stage coordinates using PhysicsBodyLoader.SCALE value. The actor does not automatically follow physics body, because it is a static body not a dynamic body.

Now in order to attach this script to each platform, add this code to the end of GameStage constructor:

 

1 2 3 4 5

for(IBaseItem item:sceneLoader.getRoot().getItems()){             if(item.getCustomVariables().getFloatVariable("platformSpeed")!=null&&item.isComposite()){                 ((CompositeItem)item).addScript(newMovingPlatform());             }         }

Here we just iterate through the items, of root composite, see if any of them has the platformSpeed custom variable and is a composite item, and if we find any, add a MovingPlatform scrip to that item. That’s it. Now when you run the game some platforms will move, and you can even jump on them.

Now let’s also do some improvements to player controller.

Moving on angled slopes

I am going to post full code on github, but let’s quickly go through some improvements you can do to your player controller. First, we want to move on angled platforms, and right now, if you try, player will fall directly through them. This is happening because we are ray casting from the bottom of the player, and when player moves say right, the ray size is zero as there is no vertical speed, and because ray is now under the platform, no collision is detected. To fix this, we need to cast the ray from the middle of the player.

Here is the new check for collisions method:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/*     Ray cast down, and if collision is happening stop player and reposition to closest point of collision      */     privatevoidcheckForCollisions(){           floatrayGap=item.getHeight()/2;           // Ray size is the exact size of the deltaY change we plan for this frame         floatraySize=-(verticalSpeed+Gdx.graphics.getDeltaTime())*Gdx.graphics.getDeltaTime();           if(raySize<5f)raySize=5f;           // only check for collisions when moving down         if(verticalSpeed>0)return;           // Vectors of ray from middle middle         Vector2 rayFrom=newVector2((item.getX()+item.getWidth()/2)*PhysicsBodyLoader.SCALE,(item.getY()+rayGap)*PhysicsBodyLoader.SCALE);         Vector2 rayTo=newVector2((item.getX()+item.getWidth()/2)*PhysicsBodyLoader.SCALE,(item.getY()-raySize)*PhysicsBodyLoader.SCALE);           // Cast the ray         stage.getWorld().rayCast(newRayCastCallback(){             @Override             publicfloatreportRayFixture(Fixture fixture,Vector2 point,Vector2 normal,floatfraction){                 // Stop the player                 verticalSpeed=0;                   // reposition player slightly upper the collision point                 item.setY(point.y/PhysicsBodyLoader.SCALE+0.1f);                   // make sure it is grounded, to allow jumping again                 isGrounded=true;                 jumpCounter=0;                   return0;             }         },rayFrom,rayTo);     }

I have also modified it so we can double jump in the air, by adding jumpingCount variable and doing this when jumping:

 

1 2 3 4 5 6 7 8

if(Gdx.input.isKeyJustPressed(Input.Keys.SPACE)){             // Jump             if(isGrounded||jumpCounter<2){                 verticalSpeed=jumpSpeed;                 isGrounded=false;                 jumpCounter++;             }         }

The jump counter is re-set when we hit the ground in collider.

Moving Camera with player

Finally, let’s move the camera with the player by adding act method to GameStage:

 

1 2 3 4 5

publicvoidact(floatdelta){         super.act(delta);           ((OrthographicCamera)getCamera()).position.x=player.getActor().getX();     }

 

That’s it for this tutorial, I think we’ve done a lot! And if something does not work you can:

Compare source codes with mine on github or ask in forums.