How to make a multiplayer game: UI Elements

This part of the tutorial will help you to add the IceWizard and other necessary elements.

Ice Wizard

The IceWizard is very much similar to the FireWizard and has the exact same animations and behavior. The resources have everything that you will need to complete this step, and I would encourage you to stop right here, and try to add the object all by yourself. I am sure you have all the knowledge to do it, and compare your work with the screenshot below!

Attack Projectiles

We have two kinds of projectiles:

  • Fire projectile
  • Ice projectile

We shall work on the Fire projectile first.

Fire Projectile

This is a simple sprite, which has just one image with no behavior. Your sprite should look like this:

Note: I have left the animation name blank because there is no use for it.

Ice Projectile

Try doing in the same fashion, compare below:

Health Bars

This is a fun task to do! Why? Because we will use PISKEL for this! PISKEL is an interesting tool for us to use, which is going to give us the ability to create game assets ourselves without having to work off of other peoples' work.

  • Create new object.
  • Choose Sprite.
  • Rename to “FireHealth”.
  • Click on + symbol.
  • Click on Edit with PISKEL

You should be here now here:

Our goal is to paint this entire 32×32 area with the color red. Watch below to have a better idea!

Redo the same thing for creating the IceHealth, and this time paint the entire 32×32 area with the color blue.

Delimiters

These are some helper objects that will limit the movement of the wizards. The wizards will move out of the screen if they aren't stopped, and this is where these objects will come into play. We need to create two different sprites.

Top Delimiter

  • Create a new object
  • Choose Sprite
  • Choose image top_delimit.png

It should look like this now:

Bottom Delimiter

Try doing it in a similar fashion as above. Compare below:

Background Image

This image can be anything you want. But make sure it's greater than 800 × 800 resolution(Our game window, by default, is of 800 × 800 ), or else the image won't cover the game window, and would need to be stretched giving it a bad look. Read further here.
This can be changed under
Project Manager → Game Settings → Properties → Window Height & Width.

  • Create a new object.
  • Choose Sprite.
  • Add the image background.jpg
    This is what it should look like now:

Winner Display Text

Before we can add this, we must add a new Layer for our game. Layers allow us to put different instances of objects on the same scene but on different surfaces. This gives us the ability to segregate a control layer, a pause menu layer and so on.

  • Open the layers editor on the top right.

  • Click on the + button to add a new layer.
  • Rename to “GameOver

It should look like this now:

  • Create a new object
  • Choose Text
  • Rename to “WinnerText
  • Change Size = 50
  • Add font file “Kenney Mini Square.ttf
  • Change text to “The winner is:

It should look like this now:

That's it! We've added all the sprites that we would need! On the next page, we will place them on our scene and begin with the events!.

→Read the next part of the tutorial here!