platformer. part 1



1,564 visits, 2,078 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Hello! Everyone knows about the lesson "Platform for 5 minutes" which was written for the old program Construct Classic. So, I decided to adapt to the new Construct 2. The lesson is very large so I decided to divide it into parts. This is the first introductory part of the lesson, in which you learn how to create a basic knowledge level and character, his animated and simple movement.

For those who still wonders why the lesson is called "Platform for 5 minutes", although its execution goes from one to N number of hours, say - when do the lesson, learn to do such platformers in 5 minutes!

Important points to consider before making the lesson:

- The lesson is written for the free version of the program Construct 2 Free Edition Release 95 (version can be found in the program by clicking on the exclamation mark in the top right of the program). Therefore, if during the execution of a lesson you have something does not match, then version Construct 2 or above, or below. In that case, look for alternative commands or options.

- When creating sprites calling them the same name as the name of the file. For example, you load a sprite named basis.png, the sprite itself is called a simple basis.

- Carry out the lesson carefully following the points, if something does not check back sprites, names, events, options, etc.

I want to say that I do not know English, so I will not translate the names of options and events literally, as it was in the original class "Platform for 5 minutes."

Went comrades

Run the program Construct 2 free version that you can download from off site. When you start to open a menu where you should click on the Create new Project. Then there are two options: either be a single file, which will contain the entire scene, and so it will be overwritten by the changes, or if you specify a folder that will store your project. In general, I recommend the second option Use a project folder and save the scene in a specific folder.

And so, you have created a new project and before you empty white stage. Now let's create sprites, but for now download all the images and animations that will be needed in this lesson.

And so, we set up the stage itself will not, let's leave it at that. We'll start with the background. On the right are the names of the layers, and there is now the default Layer 1. Rename it to the background by clicking on the name of the right arm, and there rename.

Now create the first sprite of the background. Drag your mouse on the stage again and clicking the right mouse click to insert new object. In the accommodation facility there and clicks on the icon sprite sprite. Then put it in the scene and when the sprite editor opens, there find the folder Load an image from a file.

Select the image with the name background.png and after close sprite editor, it will appear in the scene. So in C2 are sprites. Remember that!

Sprite background put in the top left corner of the stage and pulling the special markers - to scale it to the entire window, which is indicated by dashed lines translucent. It is like a window pane through which we observe the level.

Now we must make sure that this layer never moved when you move your character. In general it is necessary to disable scrolling and makes it so. Crafted background layer and to the left you will see the parameters set layer. There have opposite Paralax put zeros.

Further, where the layers create a new layer by clicking on the layer + and called him a carcass. It add a new sprite image platforma1.png. It will be the same blocks on which to walk character, and that it does not fall through them, we will make them solid hard.

The program Construct 2, in contrast to Construct Classic, to make a solid object, it needs to apply special behavior. So, selecting a sprite platforma1 left are his options. There we are looking for an option Edit behaviors: add / edit. In the next window click on the + icon and then select the behavior of Solid and then add.

All, the list of behaviors can be closed. Now, our platform was solid and the character through it does not fail. Let us emphatically solid platform. To copy a sprite, hold Contrl and mouse drag it to a new position. To sprites exactly the magnet to the grid at the top of the main toolbar, find the tab View and check the box there Snap to grid instead of 32, and both put the value 64.

Now sprite platform will be placed exactly on the cells. Why put option 64? Because sprite 128 pixels horizontally and 64 vertically. That he even got up in the center of the stage, you need to divide the number of pixels in half.

I have laid a solid platform like this:

Now on the same layer create a base for the character sprite named basis and as a picture Upload basis.png. Put the sprite just above solid platforms.

Now apply the behavior Platform, as we did above, and apply another behavior called Scroll To you want to during the movement of the character exactly the camera follows him. This is an alternative function center on me, which was Construct Classic.

You can, by the way, is already running scene and jump a little. To start the scene click on Run Layout icon at the top left. This should open your browser and come here is the window (if it does not, refresh your browser):

Click the arrows to go to the left and right of the keyboard. To jump, press the up arrow. When naprygaetes, close your browser and start to engage in stage design and animation.

Create a new layer named scenery.

Here we will post the scenery and the first scene we have a platform consisting of 3 - frames. Why three? Because it copies the necessary platform to seamlessly and two covering the edges of the plug for beauty.

To do this, create a new layer with the name of a new sprite platforma2. Unpack the archive and select image 000.png. Without closing the sprite editor, below, where the window Animation frames (1) from scratch right mouse click and then on the option Import frames ...

And add the remaining 2 frames with the names and 001.png 002.png. It should look like this:

Without leaving the editor, on the left side, you should be open the animation. Find there an option instead of a 5 speed and set to 0

Why we changed the setting? The fact that there are 3 platforma2 sprite frame and if we run the scene we see that the sprite flashes, and we need him to stand still (not flickering), but we should be able to change it, because in one sprite we have them like 3 immediately (copied sprite and two caps). So we changed the animation speed from 5 to 0 to stop it completely.

Arrange sprite platforma2 to the same place where you are solid platform. You should see the following image.

It's time to use a little stub and decorate alyapistye edges of the pit. To select the most extreme sprite platforma2, standing to the left in front of the pit.

And on the left, in its properties, locate the Initial frame instead of 0 and enter 1.

So you chose the second frame, which is a plug platform. The same is done with extreme platform which is right on the other side of the pit, but instead of one type in option 2, so choosing the third frame, where the cap is directed to the left. You will end up with this:

Now on the same layer create the main character, for this is the place where you are creating a new basis sprite sprite named character, and use the image from the archives of folders standing filename 000.png. Immediately below, add the rest of the animation frames from the same folder standing in this by removing the first empty frame number 0. Further to the right, where the animation, rename the first animation in default standing. Check:

If you are all well, then close the editor, as the speed of the animation stand, we will not change, it should be the default 5. Put your character sprite to the same sprite where is basis.

We need to somehow attach to the base of the character, so that when she moved - he moved behind her. To do this, go to the event by clicking on the tab of Event sheet 1. Then press the right mouse click on the option Add event. There, select System, and then click Every tick. This is an alternative to the command of the Always Construct Classic. On the contrary we created conditions create an action by clicking on the add action. There we find and select the name of the character sprite character and then click Set position to another object. When the window appears, click on the button <click to choose> sprite and select basis. You should get this:

With this event, we stuck to the base of the character sprite. Start the scene and see the motion of moving a character or not.

Thus, the character moves, but there is a problem, we can see the edge of the base sprite and solid platforms where plug, so you have to hide them. Select base sprite named basis. If you select it in the scene does not work because the sprite character, then you can select it in the object of a special panel on the right side at the bottom:

Highlighting sprite basis go to its properties on the left. There looking Initial visibility option in the drop down list and select Invisible. The same goes with a solid platform, select the sprite platforma1 object on the object (in order to select all of its copies), and also set the properties value Invisible. So we will make sprites basis and platforma1 invisible. Running the scene could see this.

And so we see that the base sprite disappeared and no stubs protruding blue platform.

Now crooked character moves, how to ski, and only in one direction. We'll fix that, but first get all of the necessary animation. To do this, select the sprite character and character in its settings, find the Animations and click on edit. Should see the same window as the addition of a sprite:

Right in the mini-window called Animations is a list of all animations. Now there is only one animation called standing. Clicking the right mouse underneath select Add animation. So you create a new animation called Animation 2. Immediately rename it and moving highlight. The following mini-box labeled Animation frames (1), you see the familiar blank frame. Click next to the right arm, and select Import frames ... in the dialog box, locate the folder with the animation of the character and there find the folder moving. Upload all the pictures that were in the folder. You should get 17 frames (0 to 16).

Remove blank frame number 0, highlighting it and clicking delete. In the same way, add two more names to the animation jumping and falling and load them into the corresponding animation of the folders that are in the archive. Remember to remove all empty frames!

As a result, you should get 4 animation. Compare with screenshots:

standing (5 shots, 0 to 4).

moving (16 frames a running character, from 0 to 15).

jumping (8 shots, 0 to 7).

falling (8 shots, 0 to 7).

Remained the final touch, it adjust the playback speed of new animations. Without closing the window for editing sprite animations highlight the name and moving to the left at the top you will see the settings for this animation. Opposite speed set speed of 20 and below, on the contrary option loop, in the drop-down list, select Yes.

And so we had the run animation (moving) played back at 20 frames per second, and by setting Yes, she played in a circle, without stopping.

For animations jumping and falling set exactly the same speed of 20, but the option Loop, in this case, do not touch. Need to jump animation is not repeated.

If you now run the scene that you see no changes as to enable the animation, we need to create a relevant event.

Open the Event sheet 1 and create a new condition. Choosing sprite basis and his team are looking for and click on is moving. That is when the base moves. Now here is we need to add another condition for this condition right click on the mouse and then the command Add another condition.

Then again select the sprite basis and his team are looking for and click on the is on floor. It should look like this.

Next, create the opposite effect: choose a character sprite character and click on the command set animation. In the window Mezhuyev quotes (quotes not delete!) Write the name of the animation moving. That is, when the base is moving and when it is standing on the platform - to enable movement of the character animation.

Now copy this event completely, highlighting it and clicking Contrl. Then invert the condition is moving, selecting it and clicking the right mouse button and select invert. And in Action has a new "moving" the animation "standing" by double-clicking on the action. It should look like this:

So we did the inversion event is moving (when it runs) and now when the character is standing still (not moving), he turned the animation front (standing). You can see this for yourself by running the scene and pressing the arrow keys left and right to run on the platform. If something does not work, check the spelling of the animations in the events.

After the run, will notice that for any direction of your character always looks right. It is necessary to fix it. Unlike Construct Classic, here it is easy to fix using events. But first come out of the events and on any layer, add a new object in the scene, called Keyboard, in order to be able to operate by pressing the events.

Then go back to the event and create a new condition. Select the object and then click the Keyboard team Key is down. Next, open a window in which you just need to click on the button <click to choose> and then press the right arrow key on your keyboard. OK, and then done. So you receive a new condition - when we press the right arrow. Now the action. Choose your character and character on the command Set mirrored. The window in which you want to change the value on Mirrored Not mirrored and click Done. So we created an event - when we press the right arrow key then the character is not reflected, which means looking to the right, as it was by default.

Copy the event and replace the right key, the key to the left and in the action instead of Not mirrored set Mirrored. This way you will make the event in which, when you click the arrow to the left, and his character is reflected sprite begins to look to the left.

Run and run around the stage, you'll see that in moving to the left, the character is reflected (turns), and if you move to the right, then turns back starts to look like before.

It remains to make the jump event for animation (jumping) and falling (falling). We turn to the creation of events and conditions, select the sprite basis and at the team click on is jumping. In an action for the character animation character set "jumping". Then copy the event and change the condition is jumping on the team is falling, and the change in action animation "jumping" to "falling". It should look like this:

Runs the scene and see how pressing the up, the character jumps and its animation is changing and the same thing in the fall.

At the same time, so far, all.


  • Order by
Want to leave a comment? Login or Register an account!