Este é um tutorial curto no qual eu vou te ensinar a criar uma interface do usuário(UI, também conhecido como heads-up display ou HUD) em um layout dedicado que carrega apenas uma vez no jogo. A vantagem de se fazer uma UI assim, ao invés de duplicar os seus objetos de Hud em cada level, é porque quando você quiser fazer alguma alteração você só precisa alterar um layout. Esse sistema também de ajuda a modificar a aparência e se sentir dentro do editor, ao invés de usar eventos para criar sua UI em cada tela de jogo.
Esse tutorial assume no mínimo um conhecimento de iniciante no construct 2, em particular o uso de multiple layouts e de event sheets.
se você quiser fazer o download do capx completo para este tutorial você pode conseguir aqui here (requires Construct 2 r136 or higher).
Overview
In this tutorial we will assign our UI elements (whether they’re text, sprites, 9-patch, tiled backgrounds or anything else) the global property. When an object is set to global it will not be destroyed upon changing layouts, and will continue to the next layout with its same position, instance variables and behaviours intact.
For the purpose of this tutorial, I will assume that you are building a game based around multiple layouts (one per level). If you use another system, this tutorial will still apply, but in the second page where I cover more advanced uses of this feature, you may need to adjust your game accordingly.
Building the foundation
Create three layouts, each with their own event sheet. Call them “Main Menu”, “UI”, and “Level 1”.
In the Main Menu layout, create a text object called “NewGame” and type that text into it. Also create a mouse object.
Now, in your UI layout, rename the default layer to “UI” and create another layer below it called “Game”. Add whatever objects you want to the UI layer, such as text objects called PlayerHealth, PlayerLives and CurrentScore. Position them how you’d like. Now, go to each UI object you’ve created and, in the properties pane, set each object to “Global: yes”.
Select the “UI” layer, and then in the properties pane on, set its Parallax property to 0,0.
Now jump over to your Level 1 layout. Again, set the layers to “UI” and “Game”, and set the “UI” layer’s Parallax property to 0,0. It’s critical that your game layouts and UI layout have the exact same layer structure. It’s also a good habit to get into to create more layers than you need, such as “Background1”, “Background2”, “Game1”, “Game2, etc”.
The events
The logic that we’ll create here tells our game to go from the main menu to the UI screen, pick up the UI elements, and then go to our actual game screens. So let’s do this in these steps:
Starting at your Main Menu, create an event [Mouse: On Left button Clicked on NewGame -> System: Go to “UI”]. This event will differ in your own game, but the point here is to bring the game to the UI layout first, before going off to the game layout.
Next, in UI, create an event [System: On start of layout -> System: Go to “Level 1”]. This will take our player to the game layout itself.
And that’s it! You’ve successfully built a global UI with just two events! The key is understanding the logic, and how global objects work. With them, you could do much more than just UI elements. Players, enemies, weapons and NPCs can all benefit from the global property, as long as these objects are correctly managed. This leads us to our next, entirely optional step…