Making Physics Based Side-Scroller Part 2: Adding animated character that moves

http://overlap2d.com/making-physics-based-side-scroller-part-2-adding-animated-character-that-moves/

 

 

 

Platformer with a Player

Good morning everyone, and as you probably guess in this tutorial we are going to continue where we left before in developing our physics based small platformer.  Assuming you have already gone though Part 1 of the tutorial, you have a working project with an overlap2d scene loaded and proper physics shapes set to the platforms. Next step  as you see from the picture above is to add a playable character!

In this tutorial we are going to:

• Import a sprite animation
• Re-group our scene a bit
• Pseudo Physics
• Create a PlayerController script
  • Implement player moving
  • Implement player jumping
• Create fake gravity
• Do some ray-casting for falling collision

Importing Sprite Animation

I am using a sprite animation of a sheep, that you can download here (Or you can use your own), it is basically several png images with same name and a number of frame at the end. You can import them as a sprite animation directly to the oevrlap2d, just go to import dialog, and then choose sprite animations (make sure not to mistake with spine animations). Then locate animation images and select them all together, and then import. A nice Cute sheep will appear in the right middle panel under other assets.

Put it on the stage. Then right Click on it and choose convert to composite item. This is required because we are planning to attach script to the player, and you can only attach a script to a composite item. Besides later we may put other components inside player to combine with animation. When you click on the animation and it get’s selected in it’s bound box, you can see that animation is slightly off from the bottom, legs are a bit up. Assuming we do not want sheep to be floating in the air, lets get inside the composite item we just created by double clicking on it, and lower the sheep animation few pixels down so legs will touch the bottom bound. While you are inside the composite it is good idea to give animation an ID for later use. this is done from the basic properties panel on top right, choose a unique id like “animation”. Then get one level up from the composite item to the root scene by double clicking on an empty area.

Lastly you need to give an id to the main player composite item as well. I decided to go with “player”

Save your scene, and then export it by clicking Ctrl+E

Re-grouping the scene

In this tutorial we will be handling simple movements like left and right and jumping. There will be no movements on angles, so please remove all the platforms on the scene that are rotated, and leave only horizontal ones, as well as the ground platform, save and export when done. Also remove any dynamic bodies from previous tutorial, we won’t be needing them today. If you run the application now you should see the sheep walking in the air.

Pseudo Physics

There are several approaches on how to move a character inside the platformer. The most simple one is make it a dynamic physics body, and then just apply different forces to it to move. This is good when you need a complex things like you see in Limbo, but you also will have to spend a lot of time in tweaking your physics configuration. On the other hand in games like Super Mario Bros, you can see that character behaves in rather unrealistic ways like stops instantly like there is no inertia and things like that. In this tutorial we are going to explore the second option. To achieve that type of effect, you do not need physics, it should be just a simple code, very light math and collision detection with the world. Luckily for us, we already have a physics world with shapes set up, so we do not need to worry about doing collisions, as we have a ray-casting for that matter. Ray casting is a technique to detect nearby body fixtures. you specify the vector of your ray (point from and point to) and if that vector intersects any of the world fixtures you will get the intersection points. This way if we cast a ray from the bottom of the player we would be able to detect platforms under the character and stop the falling process. Sounds simple? Let’s get to it.

Creating PlayerController script

Our sheep will be controlled by an IScript that we are going to attach to our “player” composite item. This class will handle everything from starting stopping animations, handling input events, simulating pseudo physics and so on. Go ahead and create that class, and implement IScript interface from the runtime. So you would be able to attach that script to a composite item later.

 

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

publicclassPlayerControllerimplementsIScript{       @Override     publicvoidinit(CompositeItem item){       }         @Override     publicvoiddispose(){       }       @Override     publicvoidact(floatdelta){       }   }

The init method is getting composite item in effect, and the act method is called every frame. Make sure to write a constructor that gets GameStage reference and stores it so we can use it later to get the world and do some ray-casting:

 

1 2 3 4 5

privateOverlap2DStage stage;   publicPlayerController(Overlap2DStage stage){     this.stage=stage; }

In the init method store the item for later access from the act.  Besides that inside the init method we can retrieve our animation by id we gave earlier, pause the animation by default and set the origin coordinates for our player for better rotation/scaling.

 

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

privateCompositeItem item;     privateSpriteAnimation animation;       @Override     publicvoidinit(CompositeItem item){         this.item=item;         animation=item.getSpriteAnimationById("animation");           animation.pause();           // Setting item origin at the center         item.setOrigin(item.getWidth()/2,0);     }

Perfect, Go ahead and attach that script to the player composite item from our GameStage like this:

 

1 2	PlayerController player=newPlayerController(this); sceneLoader.getRoot().getCompositeById("player").addScript(player);

Now when you run the application it should compile normally and sheep should not move as the animation is paused. Next step is to listen for key input and move sheep left or right. We do not need any fancy speed calculation techniques here, to have acceleration or deceleration or things like that. It’ls a lot more simpler if A or D keys are pressed we move with constant speed, and if not then player just stays as is. You can either add input listener to the stage or just in act method of player script check for input, as libGDX provides us with that. Here is how:

 

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

privatebooleanisWalking=false; privatefloatmoveSpeed=170f;   @Override publicvoidact(floatdelta){     // Check for control events       booleanwasWalking=isWalking;     isWalking=false;       if(Gdx.input.isKeyPressed(Input.Keys.D)){         // Go right         item.setX(item.getX()+delta*moveSpeed);         item.setScaleX(1f);         isWalking=true;     }     if(Gdx.input.isKeyPressed(Input.Keys.A)){         // Go left         item.setX(item.getX()-delta*moveSpeed);         item.setScaleX(-1f);         isWalking=true;     }       if(wasWalking==true&&isWalking==false){         // Not walking anymore stop the animation         animation.pause();     }     if(wasWalking==false&&isWalking==true){         // just started to walk, start animation         animation.start();     } }

In this code snipped we also scale X to -1 when moving left so the sheep will be looking in the direction it walks to. And we start and stop animation based on our knowledge if player walks or not.

Create fake gravity

You can run the game and move player left or right. Next step is to add pseudo gravity so sheep wall fall down, and jumping so sheep wall jump up! You will need to have a variable to keep current vertical speed, and change it on each frame according to gravity value (not necessarily the real gravity of our set up physics world). When jumped (space pressed) we will immediately make out vertical velocity to be a high value, and then on each frame (act) change our Y coordinate by value of vertical velocity.

 

1 2 3 4 5 6 7 8 9

if(Gdx.input.isKeyJustPressed(Input.Keys.SPACE)){     // Jump     verticalSpeed=460f; }   // Gravity verticalSpeed+=gravity*delta;   item.setY(item.getY()+verticalSpeed*delta);

Also add this class variables

 

1 2	privatefloatgravity=-800f; privatefloatverticalSpeed=0;

You can try this out and jump around, fall and go up, should be fun, but no platform collisions yet, so let’s get to it.

Ray Casting and Collision with ground

First of all let’s implement a method that does the ray-casting, and if a collision is there stops the player from falling further.

 

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

/* Ray cast down, and if collision is happening stop player and reposition to closest point of collision */ privatevoidcheckForCollisions(){     // Ray size is the exact size of the deltaY change we plan for this frame     floatraySize=-(verticalSpeed+Gdx.graphics.getDeltaTime())*Gdx.graphics.getDeltaTime();       // only check for collisions when moving down     if(verticalSpeed>=0)return;       // Vectors of ray from middle bottom     Vector2 rayFrom=newVector2((item.getX()+item.getWidth()/2)*PhysicsBodyLoader.SCALE,item.getY()*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);               return0;         }     },rayFrom,rayTo); }

just call that method every time in act before we move the object by Y coordinate, and now player should fall firmly on the ground and not fall through it.

Final Result

What is remaining is to make some coding to prevent jumping in the air so jump only on the ground, here is the final PlayerController.java class

 

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134

packagecom.underwater.testplatformer;   importcom.badlogic.gdx.Gdx; importcom.badlogic.gdx.Input; importcom.badlogic.gdx.math.Vector2; importcom.badlogic.gdx.physics.box2d.Fixture; importcom.badlogic.gdx.physics.box2d.RayCastCallback; importcom.uwsoft.editor.renderer.Overlap2DStage; importcom.uwsoft.editor.renderer.actor.CompositeItem; importcom.uwsoft.editor.renderer.actor.SpriteAnimation; importcom.uwsoft.editor.renderer.physics.PhysicsBodyLoader; importcom.uwsoft.editor.renderer.script.IScript;   /** * Created by CyberJoe on 10/18/2014. */ publicclassPlayerControllerimplementsIScript{       // Keep GameStage to access world later     privateOverlap2DStage stage;       //Player     privateCompositeItem item;       // Player Animation     privateSpriteAnimation animation;       privatebooleanisWalking=false;     privatebooleanisGrounded=false;       privatefloatmoveSpeed=170f;     privatefloatgravity=-800f;     privatefloatverticalSpeed=0;       publicPlayerController(Overlap2DStage stage){         this.stage=stage;     }       @Override     publicvoidinit(CompositeItem item){         this.item=item;         animation=item.getSpriteAnimationById("animation");           animation.pause();           // Setting item origin at the center         item.setOrigin(item.getWidth()/2,0);     }       @Override     publicvoidact(floatdelta){         // Check for control events           booleanwasWalking=isWalking;           isWalking=false;         if(Gdx.input.isKeyPressed(Input.Keys.D)){             // Go right             item.setX(item.getX()+delta*moveSpeed);             item.setScaleX(1f);             isWalking=true;         }         if(Gdx.input.isKeyPressed(Input.Keys.A)){             // Go left             item.setX(item.getX()-delta*moveSpeed);             item.setScaleX(-1f);             isWalking=true;         }           if(wasWalking==true&&isWalking==false){             // Not walking anymore stop the animation             animation.pause();         }         if(wasWalking==false&&isWalking==true){             // just started to walk, start animation             animation.start();         }           if(Gdx.input.isKeyJustPressed(Input.Keys.SPACE)){             // Jump             if(isGrounded){                 verticalSpeed=460f;                 isGrounded=false;             }         }           // Gravity         verticalSpeed+=gravity*delta;           // ray-casting for collision detection         checkForCollisions();           // set the position         item.setY(item.getY()+verticalSpeed*delta);       }       /*     Ray cast down, and if collision is happening stop player and reposition to closest point of collision      */     privatevoidcheckForCollisions(){         // Ray size is the exact size of the deltaY change we plan for this frame         floatraySize=-(verticalSpeed+Gdx.graphics.getDeltaTime())*Gdx.graphics.getDeltaTime();           // only check for collisions when moving down         if(verticalSpeed>=0)return;           // Vectors of ray from middle bottom         Vector2 rayFrom=newVector2((item.getX()+item.getWidth()/2)*PhysicsBodyLoader.SCALE,item.getY()*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;                   return0;             }         },rayFrom,rayTo);     }       @Override     publicvoiddispose(){       } }

Run the application, jump around and have fun! Compose your level so it will have platforms put in a way so you can reach unreachable areas and so on.

What can be done better?

I was curious on what you guys think could be done better, as I am too new to the box2d thing. So any suggestions are a lot welcome. Here are my highlights/questions:

• We cast just one ray from the middle, meaning player should stay on platform with it’s middle part, which is bad, should we cast 3 rays instead?
• The Box2D seems to be not giving immediate result for ray casting but provides handler, that means that theoretically we can go through object and then come back. Any better solution?
• I was thinking how to move on angled objects, it seems that the best idea is to cast ray from the middle of player by Y coordinate, so it will not get under the object when moving left/right
• For some reason sometimes randomly box2d crashes without an error, do you guys have it? any ideas on how to do it better?

Please leave all your comments/questinos/suggestions in questions in the forums here:  http://overlap2d.com/forums/topic/making-physics-based-side-scroller-tutorial-series/

If you find a bug here, let me know too!

Have fun coding this, and make something cool please :))