Scene setup and Basic movement

We have defined all the sprites that we need previously, and now we will begin by creating our scene and defining the basic movement for the wizards!.

Adding a sprite onto the scene is fairly simple: Drag and Drop the object that you need, then Drag the object to the place you want to.

Add the background

This should help you in case something goes wrong:

  • Select the background instance you added.
  • Look at the properties window on the left.
  • Change z-order = - 100. (This pushes the background safely behind every other object that we will be adding next).

Add Fire Wizard

  • Drag and Drop the FireWizard object.
  • Select the object.
  • Tick custom size.
  • Change Width = Height = 100.

Add Ice Wizard

Copy the same steps above, your scene should look like this now:

Add the other objects

That was fairly simple, wasn't it? I trust that you won't have any troubles adding the other objects and arranging them as below:

WinnerText object will be changed to the GameOver Layer by using the Properties window on the left.

You can play around with the setup if you want. Try changing the look of the wizards with a different size and see what fits best. Go ahead and play with the numbers!

Events

Events are what define the working of anything in GDevelop. This is where we shall write down the rules and usability of the game. We shall be doing visual programming here, so it does not matter if you do or do not have programming experience.

  • Move over to the NEWSCENE(EVENTS) Tab.

FireWizard Movement

The wizards will only move up or down on the press of certain keys.

Adding Condition

  • Click on the Circular + button.
  • Scroll down to Group option.
  • Rename to “FireWizard”.
  • Right-click on this new group, and click on “Add Sub-event”.
  • Click on the “Add condition” option.
  • Look for “Keyboard / Key Pressed”. (Hint: Always prefer searching over looking manually.)
  • Change Key to Up.
  • Click “Apply”.

It should look like this:

Adding action

  • Click on the “Add action” button.
  • Look for “Top-down movement / Simulate up key press”. (Note: Don't choose Platform behavior action).

  • Click on “Apply”.

Your first event should look like this now:

Now we shall replicate the same process for down movement. It's exactly the same, try doing it yourself. Remember, this time you need to simulate pressing down (Don't forget about top-down movement!). Your event should look like this now:

Great job! Our FireWizard now moves on the screen! Now we'll make our wizard attack.

FireProjectile

  • Go back to NEWSCENE tab where we added our sprites.
  • Select FireWizard and look at the properties window on the left.
  • Find Instance Variables.
  • Click on + button to add a new variable.
  • Rename variable to “Health”.
  • Change Value = 100. It should look like this:

We have successfully added a child variable of our FireWizard object. This will help us know the health of our wizard. Moving on;

  • Move over to NEWSCENE(EVENTS) tab.
  • Create another sub-event under the FireWizard group.
  • Look for “ Common conditions for all objects / Variables / Value of an object's variable”.

Try filling in the blanks by yourself according to what you've done in the previous steps. The action part will remain blank. Compare below:

We shall now make our wizard change animation, as well as fire a projectile on the press of a button. We shall achieve this by adding actions when a button is pressed.

  • Right-click on the event you just created, and click on Add sub-event.
  • Click on Add condition.
  • Look for “Keyboard / Key press”.
  • Change to “Space”.
  • Click “Apply” and click on “Add action”.
  • Look for “Sprite / Animations and images / Change animation(by name)”.
  • Choose object as “FireWizard”.
  • Change animation to “Attack”. (Double quotes are important).

It should look like this:

  • Click on add action of the same event.
  • Look for “ Common actions for all objects / Objects / Create an object ”.
  • Change object to “FireProjectile”.
  • Change X position to “FireWizard.X()+50”.
  • Change Y position to “FireWizard.Y()+30”.
  • Leave layer as blank.

It should look like this:

The X, Y position might seem off to you, and that's understandable. Try keeping them as FireWizard.X() and FireWizard.Y(), and run the game once we are done with this event. The reason will be quite evident to you.

  • Add another action.
  • Look for “Common actions for all objects / Movement / Add a force”.
  • Choose “FireProjectile
  • Change Speed on X-axis = 350
  • Change Speed on Y-axis = 0 (Since they will fire straight and not sideways).
  • Choose Permanent force.
We choose Permanent when the projectile must move until it collides, and instant for moving it for just 1 time frame. In this scenario, we want it to keep moving until it collides with the other wizard, or goes out of the screen. Try making it Instant to notice the change yourself.

It should look like this:

We need to set an attack timer on our wizard. Otherwise, the wizards can attack without pause, which is both unrealistic and unfeasible.

  • Add another condition below our Space key condition.
  • Look for “ Timers and time / Value of a scene timer ”.
  • Change Time in seconds = 0.3 (Try changing this, to what you deem best.)
  • Rename timer to “FireShootTimer”.

It should look like this:

  • Add another action of this same event.
  • Look for “ Timers and time / Reset a scene timer ”.
  • Change name to “FireShootTimer”.

It should look like this:

Finally, we need to just fix our animation after the attack animation is complete.

  • Add a sub-event under Variable Health of FireWizard ≥ 0 .
  • On condition look for “Keyboard / Key released”.

  • On action , look for “ Sprite / Animations and images / Change the animation by name ”.
  • Choose object as “FireWizard”.
  • Change animation to “Idle”.

That were a lot of events and conditions! Make sure you didn't do anything wrong. Check below for one final time:

That's it! We've written all animations for the FireWizard! Try Previewing the Game once and see your FireWizard fire his projectiles! Play around with some the events, change some numbers, I highly encourage that you try things yourself that will give you a much better understanding of everything.

Read the next part of the tutorial here!