fft

Creating a Tactical RPG game with Construct 2 – Part 1

As you can see by the title of this post, this is the first of a series of post detailing my journey to develop a tactical role playing game. Let’s create a game!

First things first! Tactical RPG are games that consists, as the name say, on a Role Playing Game with tactical elements. A very famous one is Final Fantasy Tactics, heard of it?

Here goes a little story about why i’m doing this:

So, a long time ago, i had very good friend called Sega Saturn. By then, it was one of the most powerful video games, before even the playstation ove turned out to be that viral thing. And was during that time that i ended up knowing a game called Super Robot Wars F. It was a japanese game of anime robots fighting each other. For me was all way too crazy and unplayable at first. Don’t judge me, i was a compulsive game buyer back then. If i liked the cover, it was a certain buy.

srwffinalsaturnbox The game cover.

I had really no idea how to play that thing. All menus were in Japanese, everything. I could only see a few english words here and there, like “Press Start” or “Credits” and a few numbers. But that didn’t make me give up, i kept playing for a few hours, and started to understand the mechanic behind it. Its a turn based game, where you had some robots that you can do one or two things when it’s your time to play, and then you need to use another, and another, and another, until all of your robots had moved, or if you find an option in the menu that probably means “Skip your turn”. You could move your robot, and then, afterwards, if within range of any enemy, you could choose an attack.

Here is where things got interesting. I was able to understand that each attack had its own range, power, energy use. Also, not only your position related to the enemy, but the environment, your weapon choice and even buffs would influence in your Hit percentage rate. That opened so much in terms of possibilites for strategies, that kept me replaying the same level over and over just to try different stuff.

Other thing that got me hooked, was the fact that it is an RPG after all. All your robots were able to gain experience and level as they kill enemies and do quests. Then after each stage, you are taken to a screen where you can customize your load-out and also level your robots and drivers. That was really awesome, and it was then that i realized that TRPG was one of the genres that i liked the most.

Let’s Create this Game!

Curious to see the result of the first step? Check the Demo Result of this step!

Log story short, now it’s my time to create a TRPG of my own. We are going to start this using Construct 2. I’m very used to C2 from Scirra. I had done more than a few dozen games for different companies since now, so it would be a nice platform to work with. It’s easy to use, understand, and will also allow me to pass a lot of interesting stuff to even non programmers, which could be able to create something like it.

So, for this i will be using:
– Construct 2 / Business License (Our Game Engine)
– Photoshop CC (To create our assets)

And that’s it. If we use something else along the way, i will go back here and change it.  There is a good reason for me to be using a license C2 version, it’s because the free version, even powerful as it is, wouldn’t allow us to create enough events for our game, so just take that in mind if you are looking to follow me on this journey.

IMPORTANT! THIS IS NOT A TUTORIAL.

You read it right, i’m not doing a tutorial here, but just passing all the process, the thinking, brainstorming, difficulties and everything i will go through the project. But don’t expect me to tell you step by step on how to create that line of code, or how i did that animation, etc.

Ready?

The Engine – Construct 2

The first thing i’m gonna do, is to try to evaluate if the engine will be a good fit for this game we are trying to make. As i have some experience with it, i’m pretty sure is doable, but i want to do some testing to be sure.

The first tricky thing that comes to mind for me, is the grid. Is not complicated to create a grid based game with construct 2, but there is a lot more to it. For example, in these type of game, you have the grid as the background, but each player will have a  “range” of movement based on a lot of different factors. So we will need to adjust the radius based on that.

We will start simple, of course. But is something to have in mind that will be need in the long run.

I don’t want these articles to be too long, so if you guys are having a hard time reading, or are not being bothered by it’s Length, just let me know in the comment section.

Starting the Creation

For the basic setup of Construct 2, i have a couple of behaviors like Platform++ and Rex Move To. They will help along the way with some basic stuff. Even if we don’t use it, i like them, so i will leave them.

For the assets of the game, i’m gonna use some basic stuff. Grabbed a space background a a robot sprite, just for testing and development purposes, not for the final project. I’m not gonna waste time creating arts for now, just what is really necessary for us to keep developing our base prototype and functions.

This is what it looked like. Remember, it’s just two single images so far.

 

First thing i did, was to create one event sheet, that i called “init_events”. Just for the main events, mostly default ones that can be applied to any level. As by default, construct 2 already creates an event sheet for any level, so when i created the Layout 1 for this project, i got a event sheet for it.

Create a Tower Defense Game in a few minutes with our new Tower Defense Level Generator.

DOWNLOAD


Tower Defense Map Generator

So in short, we have now, 2 images, 2 event sheets and one layout.

We are gonna start creating some basic variables in our level event sheet, to store some values we are gonna need. But first, i included the “init_events” event sheet in our level event sheet, so when we create functions over there, it will be loaded in the level.

I was thinking about how i will implement the movement. As i said before, i’m a huge fan of the Super Robot Taisen/Wars saga, so i will try to create something similar.
In the game, when you click in a robot on your turn, if that robot didn’t do any action so far in the turn, you can open a menu with a few options, like move, attack, skill, stats, etc.

For our game, i’m creating a similar menu, with a few dummy options with no function so far, just so we can use the first one, MOVE.

 

Because we are going to need to be able to click on the buttons, only the background is an image. Every option of the menu are text elements of the Construct 2 engine. This way, i can link actions of “click” not by position, but by each text element. Simple enough.

If you are wondering what is that blue square thing there. That is my movement grid. It will “paint” the way that the robot will be able to move to.

The Menu

For this first part, i’m gonna cover just the menu creation, so the text won’t be too long. Like i said, this is no tutorial, but a “guide” per se on my thoughts and logic to the development.

The menu, was pretty simple, but required a few things. The first one, we create an action for when the player clicked on the robot, the menu would open. Simple right? But what if the menu is already open? And if the player is moving or doing another action? Got the point?

We need to cover those possibilities so they game almost “hangs” in there while the player is performing his action. So i created one variable to save the current status of the menu, i called it “menu_open”, with default value of 0.

This is the conditions i’ve set to the menu, to open:
– On left button clicked on Player
– If player is not Moving
– variable menu_open = 0

Those conditions being met, the actions:
– Wait 0 seconds (this is a trick i learned using Constrcut 2, it makes a very fast almost unnoticeable pause, which prevent some events to fire altogether)
– Create the menu background object
– Set the menu background object to the center of the player.

Smart Tip!
We can just put the position of the menu to 0,0 (zero horizontally, X, and zero vertically, Y). That will put the menu right in the middle of the character, BUT we would have one problem. The menu CAN open partially outside the screen, and we don’t want that do we?
Here comes the good part of the code. So we are gonna check if the center of the player, minus the menu half width, is lower than zero. If yes, then it is offscreen. Can’t see the answer yet?
Check this out:
Player.X+(Player.Width/2)-(background_menu_player.Width/2) < 0 ? 0 : Player.X+(Player.Width/2)-(background_menu_player.Width/2)
This is what we call an IF ELSE statement. Very common on programming, and it’s just like PHP here, so if you are familiarized with it, should have no problem.

Let’s break it down a bit: The format of our equation is CONDITION ? TRUE : FALSE. First, we tell the condition, then we tell what will happen if that case scenario is true, and what will happen if that case scenario is false.

So:
If the center of the player, minus half of the menu width is lower than zero, then set it’s X position to zero, else, if its zero or more, just put in the center of the character as we wanted.
The same thing goes to the Y position (remember, we want centered horizontally and vertically.
Player.Y+(Player.Height/2)-(background_menu_player.Height/2) < 0 ? 0 : Player.Y+(Player.Height/2)-(background_menu_player.Height/2)
Same thing, but considering heights and not widths.

Yes, you can make games without knowing that. Sure. But it will make a huge difference if you at least can think logically like a programmer. Understand the concept of function, variable, learn the expressions of Construct 2 and how to select elements and its attributes. Your mind is a powerful weapon, but you need to work on it. So keep learning and studying hard.

At this point, if we click in the player, the menu pops one! Aweeesomeee. Not so much. A few problems:
– It doesn’t close, it is on top of the player and a lot more of the screen, so we are missing important stuff because of it. Sometimes you are going to use the menu to choose and action, but to choose properly, you want to be able to see all of the battlefield, and you can’t do that with a menu hanging over the screen blocking your vision right? Also, we are moving the menu background, but what about those text we had as menu options? They are all over the place and not where they supposed to be.

First things first. Let’s close the bastard. How can we close it without having an “X” button or a “cancel” ? Simple, let’s close it when the user clicks outside. Simple and elegant. But before we do that, we need to know if the menu is open or not, so when the user opens the menu, we need to set that previously created variable named “menu_open” to 1. Here we are using 0 for a negative answer and 1 for a positive.

menu_open = 1 – Menu is open
menu_open = 0 – Menu is closed.

So, user clicks, we check if the variable is 0 (menu is closed), it is? Then lets bring up the menu to the center as above, and set the variable to 1, because the menu is open now.

This is the conditions i’ve set to the menu, to close:
– On left button clicked on Player
– If Cursor is not over the Menu Background
– variable menu_open = 1

We do the following actions:
Destroy the background of the menu, and set the variable menu_open back to 0.

Making a platform game? Check this incredible assets. Grab them today!

DOWNLOAD

Of, so now, we can close and open the menu, without having it hovering outside the window. But the links, are still missing and all over the place.

This is even simpler.

The logic is: On every tick (like on every millisecond or frame) we set the texts to a position relative of the background menu. We could do this ONLY when the menu is being opened? Yes, of course. It would be better performance wise? Sure. So why i did it like this? Calm down wise one, i have a good reason for that.

Remember when i said that the menu is blocking some vision? So to avoid that problem, i put a behaviour in the background called “Drag n Drop” which makes the menu able to be dragged by the cursor. Nice huh? This way, every tick the texts will be in the exactly position, even if you are dragging the menu around.

A good thing to do here, would be to put this block of code, the “on every tick” code, within a group and Disable it by default. You heard me, disable it. This way, that code won’t be running all the time, so when a user tries to open the menu, you can then enable this group, and disable when the menu closes, so no logic is being performed in the background for nothing, wasting resources.

So now, our menu can open, close, keeps inside the layout, and can even be dragged around! Niice!

Curious to see the result? Check the Demo Result of this step!

Bear in mind that we can’t yet test the boundary thing because our Robot still can’t move. But that is a matter for our next article!

Seeya!