Before We Start!
I would just like to say, before we start this tutorial, you will not be creating a game in this tutorial - you will only learn how to use the editor and then add some basic code to make an object move on the screen, setup a timer and a game over event. Tutorials will come in the future where you will make a game from start to finish. You will need to have Visual Studio 2012 installed. Don't forget to keep saving whilst working on the code.What is Rapid2D?
First off before you get into any coding you should know what Rapid2D is. Rapid2D is the first engine that has been specifically created to develop Windows 8 games for all of their current devices.How to get Rapid2D!
To get Rapid2D simply head over to our website (https://www.rapid2d.com/site/page/index.html) and sign up. Once done navigate over to the Downloads tab. On the left hand side of the screen you should see a group called "Categories" which has contained within it three things. You will want to select the first option which is "Rapid2D Engine". Once here you will see 3 options which are; Rapid2D Studio, Rapid2D Pro and Rapid2D Free. For this tutorial you will be using the free version of the engine so go ahead and click on it. From here click the big green download button and read through the terms and agreements. Once you have read through them click on the "Accept and Download" button if you wish to. You should now be greeted with another screen where you can click download then choose your directory you wish to save it to.Installing Rapid2D
Now that you have the engine all that there is left to do is install the engine. To do this navigate to where you saved the file you downloaded in the previous section and double click the installer. A new window will appear and you will be able to choose your destination folder. For this tutorial I am going to leave it at its default setting which is: "C:\Program Files (x86)\Rapid2D". Once you have chosen your directory hit the install button. It should now begin to install, once complete you should see the close button in the lower right hand corner become clickable, so click it.Running Rapid2D
To run Rapid2D you will need to head over to the directory that you installed it in. In our case (unless you chose differently) it will be in: "C:\Program Files (x86)\Rapid2D". Once here double click on the Rapid2D.exe file which has a rocket for its icon image. You will be greeted with a log in screen which requires you to enter your log in details that you created when you signed up to the Rapid2D website earlier on in the tutorial. Once you have entered your log in details hit the log in button and you will be greeted with a window that looks like this:
Example Time!
Now that you are hopefully a little bit more familiar with the engine's user interface you can move onto doing a really simple example. This example will show you numerous things ranging from creating layers, objects, adding textures, applying animation to textures, adding a custom collider to an object, adding a script to an object, creating a simple script and much more. So to begin with before you do anything you will need to download the sprites you will be using in this tutorial which can be found here: . Once done place them somewhere on your computer that you will be able to navigate to with ease.Starting up!
Now that you have everything you need you can progress onto some practical applications. To start with open up your Rapid2D engine and click on the Rocket in the top right hand corner and you should see this menu:
Importing Textures (Images)
Now your window should look like this:
Creating the Game World
Now that you have the textures you want to use, you can start to create the world you will be using. To start with you need to navigate to the "Layers" tab in the Rapid2D engine. We will need two layers which you will call "Foreground" and "Background" so you need to add a layer and edit the name of the default created layer called "FirstLayer". To do this in the layers tab click the text once that reads "FirstLayer" now you should notice a new box named "Layer Info" has appeared to the right of the "Layers" box as shown below:
Adding Objects to the Game World
Now that you have created some layers it's time to create some objects for both of the layers you just created. In this step you will simply create the objects you need for each layer and then in the next stage you will apply some textures to them! So to create an object you first need to select which layer you wish to create an object for. To do this simply click once on the layer you wish to have an object on. In this instance you are going to create what will be the "player" object which is the "Foreground" layer. Now that you have done this you can create an object by looking in the box below labelled "Game Objects". Once again you should be able to see the + and - symbols. All you need to do is hit the + button. Your editor should look something like this now:
Adding Textures to Objects
In this section you will be adding a texture to the new object you just created in the "Background" layer called "background". This is a very simple task as all you need to do is head back into the "Background" layer and select the object "background". From here you can scroll down past all of the options like the "Physics Controls" till you see a new set of options labelled "Images". Now to add a texture you simply need to open up "Project Files" in the bottom right hand corner box and then open up the "Textures" tab and click a few times on "nebulaBackground.png". This as you have already noticed has added the text "nebulaBackground.png" to one of the boxes with the "Images" and the actual texture below. However you may have noticed the object in the "Game World" is still a box and not the texture you have just selected it to use. To apply the texture simply double click on the text "nebulaBackground.png" within the "Images" section. This has now changed the "Game World" slightly as the texture you have given to the "background" object has taken effect. Your editor should look something like this now:
Adding Animation Textures to Objects
Now the reason you haven't given the "Player" object a texture is because you are going to give it an animated texture which is slightly more complicated but it follows the same steps as you did before so go ahead and add the "asteroid.png" to the "Player" object. The first thing you might notice is there are several asteroids on screen. This is because the texture file is actually what is known as a sprite sheet. To make the image actually animate and display one image at any one time you must edit the images settings. To do this navigate to the "Project Files" then head into "Textures" and click on the "asteroid.png" text within the dropdown menu. Once you have done that, click on the "i" button which I have pointed to in the screenshot below:
Adding Object Colliders
Now that you have the "Player" object animation set up you have just a couple more things to do before you can begin to program. The first is you need to give the "Player" object a collider. To do this click on the "Player" object and then scroll down the "Game Object" box till you reach the very bottom and see the "Set Collider Option" which has three circle boxes that are called "Box", "Circle" and "Custom". The "Box" collider is a square collider that will appear in green around your object in the "Game World". "Circle" is as the name says a circular collider which will also appear in green around the object, ideal for things like coins, asteroids and other round objects. Last but not least is the "Custom" collider option which allows you to add and edit points around your object, this means if you have an obscurely shaped texture you can create your own ideal collider. We will be using the "Circle" collider in this example so tick the option for it. Now you might notice that the collider is a bit too small for this object. So in the "Radius" option set it to 1.10 this will then make the collider larger and thus covers more of the object. Your editor should looks similar to the one below:
Creating Scripts
In order to create "Scripts", you need to do one simple thing and that is click the "C++" button located to the left of the "i" button you used earlier. A new window should have opened up, all you need to do is edit the "Class Name" text box. We will use the name "Player" for this so go ahead click create. We have now created a new script. To locate the "Script" you just created head into the "Project Files" dropdown and open up the "Scripts" dropdown. You should now see the one you just created called "Player.cpp".Adding Scripts to Objects
All you need to do now is add the "player.cpp" you created just now to the "Player" object. To do this click on the "Player" object and then scroll down the "Game Object" box till you see "Scripts". All you need to do now is click in the option that says "Name" and then head back through the "Project Files" dropdown and locate your "Script" and just like you did before with the textures double click on the "Player.cpp" and it will add it to the object. Your editor should look something like this now:
Compiling the Project
The last step left is to compile the "Project Files" which is a very simple task. All you need to do is hit the giant "C" button which is to the right of the "Rocket" that you clicked on in the beginning. To help you out there is an image below with an arrow pointing to its location.
Opening your Visual Studio Project
Now you have finished using the editor but it is best not to close it down. All you need to do in this step is head back to where Rapid2D is installed "C:\Program Files (x86)\Rapid2D". Now from here you should see a "Project" folder which is where you need to go, so double click on there. You should see two more folders here called "Example" and "Sample", select "Example" - this is the project you made. From here you will see a number of folders and files that weren't there the first time you came here to add your images. The file you are interested in is called "Exported Projects", simply double click on it and it should load up "Visual Studios 2012" and open up a screen that looks something like this:
Adding Player Movement Code
Now that you have opened up our "Visual Studio Project" you can finally add some code. Remember the "Player.cpp script" you made earlier on? Well it is time to edit that but first you need to navigate to it within "Visual Studio 2012". To navigate to it all you need to do is head into the "Solution Explorer" which is located on the left hand side of the screen as shown below:
bool AtPositionX;
bool IsPressed;
float TouchPointX;
Since you have now declared the variables you need to "initialize" them! To do this you will need to head on over to "UserMain.cpp" and look for void UserMain::Start(), this is where you will be "initializing" the variables you just created. You may have noticed it has a curly brace "{" on the next line, the code and any code you add here after will have to be placed on any line after that but before the closing curly brace "}". So to do this simply add the name of the variable that you created before and follow it up with the "=" sign and then add the key word false if it's a "Boolean" variable or again use the "=" sign and then add 0.0f followed up by a semi colon. The code you should have written will look like this:
IsPressed = false;
AtPositionX = false;
TouchPointX = 0.0f;
Now that the variables have been "Initialized" you can use them. So now you will need to head on over to void UserMain::Update(int64 frameNumber). The variables you just created will be used here however you need to do one more thing before you can, that is you need to create a link to the game object using something called a "pointer", this basically like the name suggests points to an object which enables us to access a few variables that would be otherwise exclusive to the game object you wish to use.
To do this add the following line of code: Player^ player = (Player^)Get("Player"); what it does is it creates a "pointer" to the Player object (the symbol for a pointer in this case is the "^"), and then it gets given a nickname which is player which you will then need to use in the next line of code.
Before you can do anything else to the void UserMain::Update(int64 frameNumber) area, you will need to add in a few more lines of code in another area which is void UserMain::PointerPressed(Rapid2DVector ^ _TouchPoint). This is where to put any code that you will want to be affected by the screen being pressed. What you will want to do here is set IsPressed to true and TouchPointX equal to the built in variable _TouchPoint specifically its x co-ordinate. To do this you will need to use the "->" symbol which allows us to access things that the object contains. So in this case you will write _TouchPoint->x;.
The lines of code you have added should look like this:
IsPressed = true;
TouchPointX = _TouchPoint->x;
Now you will need to do something similar within void UserMain::PointerMoved(Rapid2DVector ^ _TouchPoint). You need to make sure that TouchPointX once again is equal to _TouchPoint->x. The line of code you should have added is:
TouchPointX = _TouchPoint->x;
There are only two more things you will need to do before you can make the "Player Object" move around. Navigate over to void UserMain::PointerReleased(Rapid2DVector ^ _TouchPoint). Here you will need to make sure IsPressed is no longer true and create a pointer called player which points to the Player object exists like you did before. Once you have done that the code you have added should be:
IsPressed = false;
Player^ player = (Player^)Get("Player");
The reason you needed to create player again is because you will need to use it in an "If Statement" which enables us to check if something is happening and if it is you can choose what you want to happen. So in this case you will want to see if the "Player Object's" x position is greater than ">" TouchPointX + 1. If it is then you will want to affect the "Player Object's" speed which you will need to use the "->" symbol again and then add TranslateVelocity(0, 0, 1). The numbers in the brackets are the function's "parameters" which are basically things the function requires in order to operate properly. You are basically seeing if the "Player Object" is at the TouchPointX position and if it is you want it to stop.
The "If Statement" should look like this:
if (player->GetPosition()->x > TouchPointX + 1)
{
player->TranslateVelocity(0,0,1);
}
Now that you have done all of this you are one more line of code away from being able to move the "Player Object"! You will need to head back into the void UserMain::Update(int64 frameNumber) area and below where you set up the [test]player[/test] "pointer" you will need to add the code which will get the "Player Object" to move. Just like before you will need to use player with the "->" symbol however instead of using TranslateVelocity like you did last time, you will need to use SetVelocity which takes two "parameters" which are x and y however you won't be using numbers. Instead of a number for the first "parameter" which is x you will want to use TouchPointX- player->GetPosition()->x. For the y "parameter" you can just use 0).
The code you should have written should look like this:
player->SetVelocity(TouchPointX- player->GetPosition()->x,0);
Now after all that the "Player Object" will finally be able to move when you test the game later. However there are a few other things you should know about and add before testing the project out.
Creating a Timer
One of the things that you might want to use is a "Timer" and it just so happens that there is a "Timer" built into the engine. Setting up a "Timer" couldn't be simpler, just head over to the "UserMain.h" and scroll up to the top of the page and where you can see a line that reads #include "BasicMath.h" and add:
#include "BasicTimer.h"
Then head into the private section where you put the variables like TouchPointX and add the code:
BasicTimer^ timer;
Now we need to head back into UserMain.cpp's UserMain::Start function and add the following line of code:
timer = ref new BasicTimer();
Once done head back over to the "UserMain.cpp" and enter the void UserMain::Update(int64 frameNumber) area once again. Below the code you placed in there before you will want to update the timer by adding the line of code:
timer->Update();
All that is left to do now is a simple "If Statement" which will check if the "Timer's" current time is greater than or equal to ">=" 30 then reset the timer, which basically means if 30 or more seconds have passed we will want to reset the timer back to zero. To do this add the following code:
if (timer->Total >= 30)
{
timer->Reset();
}
In a future tutorial we will cover how to draw variables and timers to the screen to create a HUD.
Creating a Game-Over Sequence
Another thing you will probably want to do is end the game at some point. One of the ways you can do this is by creating a "Game-Over Sequence". In this example the way you will do this is by editing the previously created "If Statements" events so that it will reload the "Scene" after 30 seconds have passed rather than just resetting the timer. To do this head back into the "If Statement" you created in the "Timer" section and above the timer->Reset(); line you wrote you will need to add the same code you wrote when you "initialized" the variables in void UserMain::Start(). Those variables were IsPressed = false;, AtPositionX = false; and AtPositionX = 0.0f;. Obviously when you make a game using the engine you can make a game over image appear on the screen and then do other things you may want it to do.Compiling and Testing
You can now finally see what you have been working towards in action! All you have to do now is test the code to make sure it works by "Compiling" the game which is really easy to do! However before you can debug/compile the game, you will need to change some of the information in some of the drop down boxes to the right of the green play button pointed to in the image below:
