Sunday, September 28, 2014

How to install SICStus on Ubuntu

Installing SICStus

In order to download and install SICStus, you will need a license. If you are a student at FEUP, you can use the ones provided to the FEUP community. All the required keys are located in the software repository, so go ahead and connect to VPN-FEUP. If you do not know how to do this, check my previous tutorial.
Afterwards, open following text file:
//software/Publico/Outros/Departamentos/DEI/Sicstus_Prolog/Sicstus_Prolog_4.3/Sictsus_Prolog_Instrucoes_para_download_e _codigos_estudante.txt

Go to SICStus Prolog download page and download the latest version for your system:

When prompted for a user and password, use the ones located on line number 7 from the previously opened text file:

Press CTRL+ALT+T to open the Terminal, navigate to the Downloads folder and extract the downloaded file using the following comand:
cat sp-4.3.0-x86_64-linux-glibc2.5.tar.gz | gzip -cd |tar xf -

Navigate to the extracted folder and run SICStus installer using the command:
sudo ./InstallSICStus

The installer should start. When prompted with the question below, press Enter.

Press Enter again to install SICStus in /usr/local/sicstus4.3.0.

Press Enter again to confirm:

Now you will be prompted to enter some keys. Go to the text file we have previously opened: lines 54 to 57 have the information you need.

Afterwards, since we will not need any extra modules, answer no to the next four questions. In the previous questions, we pressed Enter to answer yes, but to answer no you really need to type no and only then press Enter.

When the installer finishes, it should look something like this:

Installing rlwrap

We are almost done. In order to use the arrow keys and history in SICStus, we will need to install rlwrap: execute the following command on the terminal:
sudo apt-get install rlwrap

Creating a link to SICStus

At this point, in order to run SICStus, we need to open the terminal, navigate to /usr/local/sicstus4.3.0 and only then run sicstus. This is quite exhausting.
At some point, it will be useful to open the terminal and be able to execute SICStus right away just by typing sicstus - this is very easy to achieve.

Open the terminal and type the following command:
sudo ln -s /usr/local/sicstus4.3.0/bin/sicstus /usr/bin/sicstus
After that, you can type sicstus from anywhere and SICStus will start:

To exit SICStus, press CTRL+D.

Running SICStus

You may notice that when you run SICStus, you won't be able to use the arrow keys and weird stuff like ^[[A will start to come up instead:

That's really annoying and that's why we installed rlwrap. The correct way to launch SICStus is to type the following on the terminal:
rlwrap sicstus
That way you will be able to use the arrow keys like expected:

Saturday, September 27, 2014

How to connect to FEUP VPN using Ubuntu

Download this script made by CICA to install all the required tools easily. Right-click it and select Extract Here.

Press CTRL+ALT+T to open the Terminal. Navigate to the Downloads folder and then enter the command: source

After entering the command, the script will begin and a couple of windows will appear. Input your email:

Input your SIGARRA password:

Confirm your SIGARRA password:

Press OK to install all services:

Input your Ubuntu account password:

Press OK:

You may close this window:

And that's it, the script should be finished:

In order to connect to FEUP VPN, press the Wi-Fi status bar icon. Under the list of networks, there should be a submenu named VPN Connections and under that VPN-FEUP. Press VPN-FEUP and a connection will be attempted. When a connection is obtained, the following notification will appear:

You can now access FEUP software repository, samba, and even delegate print jobs to FEUP printers:

Sunday, September 7, 2014

[Minix][Tutorial 11] Adding flappy and the mario pipes

Adding the bird

Download bird-0x114.bmp, edit it and place it inside the res/images folder.

Create a new class named Bird, I mean: create two files: Bird.c and Bird.h. Declare it in the Makefile.

For now, let's just try to make our little bird appear and make it fall.
Our bird will have a x and y coordinates, width, height, a vertical velocity and of course a bitmap image.
To make the little bird fall, I have set a GRAVITY. At each update, the gravity is added to the velocity, which will then be added to the bird's current y location:

Now we need to add a bird to our game state, initialize it and add the respective update, draw and delete method calls:

If you compile, install and run, you should now see flappy falling!

Making flappy jump

Now we need to make little flappy jump. You may have noticed that the bird update method receives an integer named jump. Well, my idea is: when the player presses the space bar on the keyboard, we will call this method with jump = 1, this tells flappy to jump. Otherwise, we just call flappy's update method with jump = 0.

In order to accomplish this, let's modify flappy's update method - if jump == 1, let's modify it's velocity:

Now, let's modify the game state's update method to send jump == 1 when the space bar is released:

By the way, let's change flappy's default start position:

Quick preview

Compile and run. Now when you press the space bar, flappy flies! This is how the game looks like now. Cool isn't it?

Increasing FPS

Our game might be running with a little lag. Let's change that.

In FlappyNix.c:
const int FPS = 60;
const int mouseFPSmult = 1;
In Bird.c:
const int GRAVITY = 1;
const int JUMP_VEL = -12.5;
If you now compile and run the game, it should be much smoother.

Making flappy lose

Since everything is working so good, let's go further and make flappy die when it touches the ground. In order to do that, after each update, we need to check if the bottom of the bird's sprite is below the top of the ground sprite/image - easy, right?

To start, I have created an integer groundY, because we were calculating it in the draw method - and draw methods should not contain any calculation what so ever. I initialize groundY in the constructor:

Furthermore, to check flappy's collision with the ground, I have implemented the gameOver function. For now it only checks if flappy hit the ground - I have created another function for that as well - but once we implement the moving pipes, we will also check if flappy collided with any of them in this function.

Since we are modifying the update function, and I would like to make flappy fly by pressing either the space bar or the left mouse button, let's add that option:

Compile and run the game. You should now be able to use either the space bar or the left mouse button to make flappy fly. If flappy touches the ground, you should lose and go back to the main menu.

Adding the pipes

So we are pretty much almost done! We just need to add the pipes now!

So let's do it! Create Pipe.c, Pipe.h and declare it in the Makefile. This class will represent the pipe with the little gap through which flappy is supposed to fly.

Download top-pipe-0x114.bmp and bottom-pipe-0x114.bmp. Edit and place them inside your res/images folder.

Every pipe will be described by four variables: the x and y coordinates of the top left corner of the gap, and the width and height of each half of the pipe - this is for future convenience. The pipe constructor will have two parameters: the x where the pipe should be created and the ground y coordinate - because the pipe gap location will be randomly generated, we need to know the ground location to set the limit for the random function.

Since we are going to create a lot of pipes, it is not a good idea for each pipe to have it's own images of the top and bottom parts loaded. A better approach is to load those images only once, and use them to draw every pipe, only at different positions - this is known as flyweight, yet another design pattern. We can resolve this using something like a singleton, just like we did for the mouse.

Here is what everything described above looks like:

Ok, now it's time to implement the update, draw and delete methods. I have decided to put some global variables in Utilities.h, so yeah, I have made some changes to the rest of the code - you should be just fine without even having to do them, or if you do have to do them, it will be easy. Here is how the methods I told you to implement look like, as well as the global variables I created:

Ok, let's try to test our game by adding some pipes! Add an array of three pipe pointers in the GameState struct and initialize it like so:

Create a separate function to update and draw the pipes:

Do the same to delete them. Do not forget to delete the bitmaps as well, and even more important, to NULL reassign them:

Quick preview

Compile, install and run. This is what we got so far. How awesome is that?
P.S. - I am terrible at playing this game.

Implementing the pipes generator

We have almost, almost done. We have some pipes moving, but now we have to keep them coming. After that we need to do something about the bird colliding with the pipes, and then our project is finished! So, let's go!

The first step is to change the size of the pipes array. Since the maximum number of visible pipes on the screen is four, let's make the array have five pipes.

Now we have to edit the updatePipes function: when the left most pipe moves off the screen, we have to delete it, shift every pipe on the pipes array one time to the left and finally create a new pipe at the last position of the array. It is that simple!

Try to code this for yourself and only then compare with the screenshot below.

Adding pipe collisions

Fist things first: we need a simple function to detect AABB collisions. I implemented mine in Rectangle:

After that, we need to check if flappy really hit any pipe. Remember the gameOver function where I have previously told you we were going to do that? Well, let's actually do that there and now.

I created an integer variable called flappyHitPipe that is initialized with zero (false).
Then I created a rectangle which corresponds to the bird's image limits - bRect.
I am not quite sure about this one, but I guess we need to check collisions on the first two pipes, because although the first one might be a bit off the screen, flappy might be able to hit the second pipe before the first one is deleted. I do this with a simple for cycle.
Inside the for cycle we will need to check if our flappyHitPipe flag is already true - if it is, there is no need to check for any other collisions - therefore the continue;. If the flag is still false, we create two rectangles - pRect1 and pRect2 - corresponding to the top and bottom halves of the pipe being analysed; we then use the colliding function from Rectangle to check if the bird rectangle - bRect - is colliding either with pRect1 or pRect2 and update the flappyHitPipe flag accordingly. Then, inside the for cycle, I delete pRect1 and pRect2; outside the for cycle I delete the bRect. Finally, I return the flappyHitPipe flag. Here is everything explained above translated to code:

And here is a demonstration of flappy going through the pipes, against the pipes and against the floor. The collisions are working marvelously:

Although, you may have noticed a bug! If we press fast enough to make flappy fly really high, it won't hit the pipes because the pipes are not that high, and you will be able to keep flappy going as long as you wish:

There is a really simple way to solve this: make the collision rectangle of the top half of the pipe start for example at y = -500 and do not let flappy fly higher than this. Highlighted in the following screenshot are the parts of the code I had to modify to resolve this bug:

The end

Phew, what a long and dangerous journey this has been!

These tutorials were great to write and I have learned a lot from them. I really like writing these tutorials, they test my patience. I just hope you have learned anything from them, even if it was just a little bit. The time has come for me to say good bye to this tutorial series and ship on to other projects.

If you would like to get in touch with me directly, go here.

Back to index

Click here to go back to the index post.

Saturday, September 6, 2014

[Minix][Tutorial 10] Creating the game state, adding a moving background and ground

In this tutorial we are going to focus on the development of the game itself, the game state.

Creating the game state

Start by creating GameState.h and GameState.c - do not forget to declare it in the Makefile.

Let's start with small goals, ok? First let's try to put the background scrolling correctly through the screen.
Download this background, export it as a .bmp using R5 G6 B5 with GIMP and place it inside your res/images folder.

The game state should have four methods that every state should have - new, update, draw and delete. Our game state object, for now, should have an integer telling if the state is done/finished, a bitmap pointer to the background and an integer corresponding to the background horizontal position - because the background is going to be moving to the left. Knowing this, try to code GameState.h for yourself. Afterwards, compare it to the my GameState.h below.

Now open GameState.c and try to code everything for yourself - come on, you can do it!

I'll give a little help: in the initialization you have to initialize the background position and actually load the background image; in the update method, you have to update the background position, to make the background slowly move left, and when it has moved enough, reset the position to zero; in the draw method, you just need to draw the background at the right position; and finally in the delete method just delete the background image and free the state.

Easy, right? You should end up having something like this:

Ok, so now we have the game state ready, we just need to add it to every mechanism (function) of our state machine.

Add a new state identifier:

In FlappyNix.c, include the state header file:

Add the state update and draw method calls to each switch case:

Update the change state function as well:

Also update check if state is done and delete current state methods. Notice that I've slightly modified the switch case for the main menu state as well.

Quick preview

If we have done everything correctly so far, when we run the program and press play, we should see the background infinitely scrolling to the left. If we press the ESC key on the keyboard, we should be able to return to the main menu as well. So go ahead, compile, install and run your program. It should look something like this:

Adding the ground

Now that we have the background moving, let's add a moving ground as well. The ground will be moving faster than the background to create a sense of perspective.

Download the ground image, edit it like you have done before and place it inside the res/images folder.
Just like what we did to add the background image, do the same to add the ground image: add a bitmap pointer for the actual image as well as an integer to hold it's horizontal position. After that, initialize them just like you did with the background image:

After that, you just need to update the ground position - I created a separated function for that; draw the ground - make sure you draw it after the background, otherwise it won't show up; add the delete ground bitmap statement in the state delete method. Here's what all of this should look like:

Quick preview

Here is what our game looks like now - the background is moving as well as the ground (but four times faster):

Back to index

Click here to go back to the index post.