Halloween KnifeHTML5 Game for Halloween

Construct 3 Settings Menu (Most Common UI Elements) + Source Code

Construct 3 Settings Menu (Most Common UI Elements) + Source Code

Hi guys,

Hope you’re doing well!

Today we are going to talk about one of the fundamental subjects in the game making: User Interface. The role of UI in a game can’t be ignored and without it, a game would be meaningless. UI exists in every part of a game, from play button to level map, HUD, and level is done. In every part of a game, the user needs to see or change the information. Can you imagine the game “Super Mario” without a main menu and HUD? You can’t even start this amazing game without them!

Fortunately, UI has an almost similar rule in all games and the same ordinary things should be done. So learning how to implement it is not difficult. You should only read about UI standards and pay attention to some standard games’ UIs to understand what elements and how you should use them in your game.

If I want to tell you about the place we use UI in the games, I should say that it is necessary everywhere, except in the gameplay. In fact, UI is not a part of gameplay, but gameplay runs among some UI elements. The first place that these elements come from is the home page or main menu. On this page, our goal is to start a game, or maybe using some tools like activating or deactivating the music or SFX. Also, the user may want to see the leaderboard or buy from the shop. The next place that UI has a key role is HUD (the part of the game during gameplay that shows the statistics of the game on the screen – generally on top). In this section, the player observes the important information of the game including coins number or lives numbers. Also, pause and menu buttons are placed in this section so that by clicking on them, users may be transferred to another page or pop-up and they are in the game’s UI too! Finally, the player will win or lose and here we need UI for some buttons of retry or going to the next level again. 

If I want to talk especially about this video, I should say that I have tried to instruct the most important and practical UI elements like Check Box, Radio Button, Toggle Button, Text Area, Progress Bar, Buttons and some more implemented in the settings menu. But you can use them in any place of the game that I have mentioned in the previous paragraph. Eventually, there is the source code of this tutorial for you to use or even develop.

Besides these subjects, you will be familiar with some features in the Construct 3 game engine that can help you so much for making better games in the future, including:

– UI basics

– Three types of button reactions (change frame/change color/change scale) 

– Checkboxes

– Radio Buttons

– Slider Bar

– Progress Bar

– Text Input (Textbox)

– Tween

– Changing Theme (light mode / dark mode)

– Loading Spinner

– Webfonts (woff/woff2 format)

– Loading CSS file

Send Your Email, Get Source Code

For downloading the Source Code of this tutorial, just type your email and send that to get an email from us…

    Be the first one who gets the information about our New Products and Best Offers:

    Visit and join us on Twitter and Linkedin.

    0 0 votes
    Article Rating
    Subscribe
    Notify of
    0 Comments
    Inline Feedbacks
    View all comments
    0
    Would love your thoughts, please comment.x
    ()
    x