Well, as you know, I’ve decided to try to create a sidescrolling platformer. I’ve created a character – one that I really adore – to star in this game, so now it’s time to get some basic movement down. First, I’ll start by saying that I won’t be giving a step-by-step guide on how to use Construct 2, but there may be some useful information in these next few articles for the most extreme beginners.
This is close to what you’ll see when you open a new project for the first time in Construct 2. This is called the layout, a screen that will be used to build your levels, title screen, credits, etc. Initially, when you open a new project, your layout size will be 1280×1024. This isn’t an ideal setting for my game – at least not for my test level – as I will not be building a vertical level. To keep things simple (and more organized) I immediately changed my layout size to 1280×480, a setting that will be fine for creating a small playground to test basic movement.
Also, take notice of the dotted line going down the middle, this line indicates the window size – this setting isn’t displayed in the above image. The window size will normally be the starting point for your game; its default setting is 640×480. I matched the height of my layout to the window’s height to keep things on a horizontal plane – increasing the height means you can create levels a la Super Mario Bros. 3. Of course, you may now realize that increasing the layout’s width will increase the size of your level. Now, let’s quickly create a playground for my character.
Keep in mind; I’m no technical master, so everything you read comes from the eyes of a beginner. These settings will likely change dependant on the platform for which you choose to develop games.
First thing I chose to do was add a background on the first layer – Construct 2 Free Edition supports up to four layers. To add a background, right-click the layout, choose tiled background then click insert. When you do this, your mouse will turn into a set of crosshairs, click the layout and an image editor should open. I filled this in with a sky blue color to keep things simple. Now, you will get a light blue background that needs to be sized to fit your layout. In the properties bar on the right, I changed the size to match my layout size, and positioned it at 0,0. As you can see, this blue image now completely covers the layout. Next, let’s add some solid ground for my character to stand on.
Like before, I’ll be utilizing the tiled background option for my solid ground. I created a tile ready image in Paint.net to make things easy – it’s just as simple as adding it by opening the image after the built-in editor appears. I sized them appropriately to create some platforms for my character to navigate. However, they aren’t solid yet. Every object in Construct 2 can be assigned behaviours, and we need to make this ground solid. This is simple; just click the object you want to work with and select behaviours from the properties bar. To make your ground solid, click the + sign and choose solid from the attributes. There are other options, but you don’t need any more right now. Now, let’s get that character on-screen.
Of course, my character is ready to go, but first, I created a new layer which I called Main and locked what I am naming the BG layer. After doing that, I added my character by choosing to add a Sprite object. Once he’s added to the game, it’s time to assign some behaviour. For my character, I added the Platform and ScrollTo behaviours. Don’t confuse the Platform behaviour with the platforms in your game; instead, Platform behaviour is used to assign platforming abilities to your character, while Solid is used to make your platforms solid – a little odd at first, but not hard to understand. ScrollTo is used to center the camera on your character, without it, the screen will not follow your character. Also, I had to fix the collision polygon as it was a little funky. Construct 2 will automatically set it for you, but it’s not always the best match. I set it to a simple square to keep things easier for me in the long run. You can now preview the game and see how the character moves – the default controls are Left/Right keys to move, and Up to Jump.
There are still a few things left that I wanted to achieve early in this project. While I have no frames of animation ready for my character, I did prepare a jumping sprite, and want to make sure my character looks in the correct direction when he is walking. This is where you need to learn some of the software’s programming functions. Before learning about these functions, I added my jumping sprite as an animation frame of the main character.
I programmed everything I mentioned above in the event sheet that corresponds with the correct layout. While the default controls are assigned to your keyboard, I needed to add a keyboard object – which is conveniently available to the entire project – in order to make the keyboard event appear on the event sheet. To make it look like my character is jumping I clicked Add event and chose the keyboard event, then chose when the key was pressed down, and finally, made sure it happened when I hit the jump (Up arrow) key. After completing those steps I was able to add an action. The action that I want to occur is to display the jumping animation when my character jumps – this sprite is set to frame 1 for now.
Initially, I programmed the animation to end when my character landed, however, that posed a problem. My character would struggle to jump smoothly immediately upon landing. I could jump normally in a second or two, but it would inevitably become an issue during challenging platforming sections, and labeled as poor control. To fix this issue, I decided to reset the animation as the character was falling. Not only does this look a lot cooler, but my control issue was also remedied. Also, I programmed my character sprite to be mirrored upon moving left, and of course, I add to reverse this when the character started to move to the right. I have included a video below to showcase how the character currently moves.
One last thing before I close out today’s entry. Thanks to an article about implementing 2D platformer, I finally found an understanding for the acceleration/deceleration options available for tweaking the player character. These control how quickly your character begins moving, and how they stop. Lower values mean faster movement, otherwise known as “slippery.” Since my tiny character is piloting an enormous robot, I thought it would be appropriate to make the controls a little slippery, not unlike the NES Super Mario Bros. games.
4. Adding Coins
Lee asks: Does [he] have a name? Are you going to give him one? I think his name should be Puddles.
My answer: He doesn’t have a name yet, but I will eventually give him one. Puddles is not a bad suggestion, I will file it away for now!
Ask me questions in the comments below and they’ll get answered in subsequent entries.