Some of the most classic video games in history such as Super Mario Bros are platformers. Platformers played a gigantic role in the upcoming of the video game industry and remain very popular today with more recent titles such as Hollow Knight being nominated for multiple awards.The KTBYTE Coder now includes the Fisica library, a physics library for Processing made by Richard Marxer. Physics libraries remove the hassle of writing collision-detection code yourself and allow you to start the main development of games much sooner. This article will go through setting up the basics of a platformer such as creating the world, adding a platform, and implementing the player along with movement. You can play the demo and view the code here. By the end of the tutorial you should have a similar program to the one seen in the video down below.
The first step in creating our platformer using Fisica is by adding an “FWorld”, this will hold all of our Fisica entities and keep them updated. The code down below demonstrates how to go about adding an “FWorld” and updating it each frame.
FWorld world; //Declares Fisica world
void setup() {
size(480, 360); //Creates canvas
Fisica.init(this); //Initiates Fisica library
world = new FWorld(); //Instantiates world as FWorld()
world.setEdges(); //Sets edges of the screen to physical border
}
void draw() {
background(30); //Sets background to grey, clears previous content
world.step(); //Moves "world" forward by 1 frame
world.draw(); //Draws all content contained in "world"
}
The FWorld will update all its contained objects by one frame every time “draw()” is called (Which is sixty times per second by default in Processing.) The next step is to implement our platforms. For this we’ll use an “FBox” and the “setStatic()” function to avoid the platform being affected by gravity. You can see the implementation of the code down below.
//Declares Fisica variables
FWorld world;
FBox platform;
void setup() {
size(480, 360); //Creates canvas
Fisica.init(this); //Initiates Fisica library
world = new FWorld(); //Instantiates world as FWorld()
world.setEdges(); //Sets edges of the screen to physical border
platform = new FBox(width, 30);
platform.setPosition(width / 2, height * 0.8);
platform.setStatic(true); //Sets "platform" to static (won't be affected by forces such as gravity
//Adds content to world.
world.add(platform);
}
void draw() {
background(30); //Sets background to grey, clears previous content
world.step(); //Moves "world" forward by 1 frame
world.draw(); //Draws all content contained in "world"
}
At this point your program should look like a dark screen with a white bar through the bottom. The last component we’ll be adding in this portion of the tutorial is the player along with movement. Our player will be a “FBox” and we’ll be using Fisica’s “setVelocity()” along with two boolean variables “left” & “right” to control our player. Lastly, we’ll need a boolean named “onGround” to prevent our player from jumping when they’re in the air.
We’ll start by declaring our player variable along with the variables required to get him moving.
//Declares Fisica variables
FWorld world;
FBox platform;
FBox player;
boolean left, right, onGround;
void setup() {
size(480, 360); //Creates canvas
Fisica.init(this); //Initiates Fisica library
world = new FWorld(); //Instantiates world as FWorld()
world.setEdges(); //Sets edges of the screen to physical border
platform = new FBox(width, 30);
platform.setPosition(width / 2, height * 0.8);
platform.setStatic(true); //Sets "platform" to static (won't be affected by forces such as gravity
player = new FBox(30, 30); //Creates player as FBox with width & height of 30px
player.setPosition(width / 2, height / 8);
//Adds content to world.
world.add(platform);
world.add(player);
}
...
Next we’ll add “keyPressed()” and “keyReleased()” so we can make our player move when we press/hold a key.
void keyPressed() {
//Keeps track if player is moving left or right
if (key == 'a' || key == 'A') {
left = true;
}
if (key == 'd' || key == 'D') {
right = true;
}
if (key == ' ' && onGround) {
player.addForce(0, - (player.getMass() * 10000)); //Makes player jump, jump height is based off of mass
}
}
void keyReleased() {
//Keeps track if player is going left & right, if not it slows down player quickly
if (key == 'a' || key == 'A') {
left = false;
player.setVelocity(player.getVelocityX() * 0.5, player.getVelocityY()); //Reduces player's velocity by half
}
if (key == 'd' || key == 'D') {
right = false;
player.setVelocity(player.getVelocityX() * 0.5, player.getVelocityY()); //Reduces player's velocity by half
}
}
An issue with the code is your player can’t jump as the “onGround” variable is undefined. We’ll need to create a function which will check whether or not our player is touching the platform using the “isTouchingBody()” function. The code for the function can be seen down below. We’ll also need to add a line of code calling this function into the main “draw()” loop.
void platformCheck() {
//Keeps track of if the player touching platform for ease of access
if (player.isTouchingBody(platform)) {
onGround = true;
} else {
onGround = false;
}
}
After you add this you’ll realize that even when you run the code your player doesn’t actually move when you press “A” or “D”. This is because nothing actually is telling our player to move, we’re just setting the left or right variables to true or false. We’ll fix this by adding an IF statement in our “draw()” loop that sets the players velocity if left or right is true. You can see the code added in the draw loop down below.
void draw() {
background(30); //Sets background to grey, clears previous content
platformCheck(); //Detects whether or not player is touching platform.
world.step(); //Moves "world" forward by 1/60th of a second
world.draw(); //Draws all content contained in "world"
if (left) {
player.setVelocity(-100, player.getVelocityY()); //Moves player left
}
if (right) {
player.setVelocity(100, player.getVelocityY()); //Moves player right
}
}
You should now have a basic program with a white square that can walk and jump around. If you run into any issues the full code can be found down below for reference.
//Declares Fisica variables
FWorld world;
FBox platform;
FBox player;
boolean left, right, onGround;
void setup() {
size(480, 360); //Creates canvas
Fisica.init(this); //Initiates Fisica library
world = new FWorld(); //Instantiates world as FWorld()
world.setEdges(); //Sets edges of the screen to physical border
player = new FBox(30, 30);
player.setPosition(width / 2, height / 8);
platform = new FBox(width, 30);
platform.setPosition(width / 2, height * 0.8);
platform.setStatic(true); //Sets "platform" to static (won't be affected by forces such as gravity
//Adds content to world.
world.add(player);
world.add(platform);
}
void draw() {
background(30); //Sets background to grey, clears previous content
fill(255);
text("A & D to move left & right", 10, 15);
text("Space to jump", 10, 30);
platformCheck(); //Detects whether or not player is touching platform.
world.step(); //Moves "world" forward by 1/60th of a second
world.draw(); //Draws all content contained in "world"
if (left) {
player.setVelocity(-100, player.getVelocityY()); //Moves player left
}
if (right) {
player.setVelocity(100, player.getVelocityY()); //Moves player right
}
}
void platformCheck() {
//Keeps track of if the player touching platform for ease of access
if (player.isTouchingBody(platform)) {
onGround = true;
} else {
onGround = false;
}
}
void keyPressed() {
//Keeps track if player is moving left or right
if (key == 'a' || key == 'A') {
left = true;
}
if (key == 'd' || key == 'D') {
right = true;
}
if (key == ' ' && onGround) {
player.addForce(0, - (player.getMass() * 10000)); //Makes player jump
}
}
void keyReleased() {
//Keeps track if player is going left & right, if not it slows down player quickly
if (key == 'a' || key == 'A') {
left = false;
player.setVelocity(player.getVelocityX() * 0.5, player.getVelocityY()); //Reduces player's velocity by half
}
if (key == 'd' || key == 'D') {
right = false;
player.setVelocity(player.getVelocityX() * 0.5, player.getVelocityY()); //Reduces player's velocity by half
}
}
The KTBYTE Coder now includes the Fisica library, a physics library for Processing made by Richard Marxer. Physics libraries remove the hassle of writing collision-detection code yourself and allow you to start the main development of games much sooner. This article will go through setting up the basics of a platformer such as creating the world, adding a platform, and implementing the player along with movement. You can play the demo and view the code here. By the end of the tutorial you should have a similar program to the one seen in the video down below.