[Tutorial] - How to create a HUD

[Victor ManuelMR]

How to create a custom HUD.

In this tutorial, you will learn how to create a custom HUD (As if the title of this post has not been spoken before)
Recommended programs for this tutorial:
• Paint.Net

1. Function:
First of all, let's use a TeaScript function called "HUDset". With it you can delete the data from the original HUD, and add bitmaps to create your own.

Basic information about how Bitmap will be created:

If the first parameter is "Bitmap"

Call HUDSet("bitmap", ID, XSource, YSource, Width, Heigth, X, Y, Advanced, Color)

'ID - The ID that will be used to create the HUD. Every time you create a new Bitmap, you will have to change the ID.
'XSource - Position of the HUD rendering point (Starting from the top left corner.). You can use Paint.NET to know where the rendering point is.
'YSource - Same thing as XSource, only in Vertical.
''Width - Size of bitmap clipping Width (represented on the purple line)
"Height - Size of bitmap clipping Height (represented on the green line) :

Explain2.png (574 Bytes) Viewed 1090 times

'X - Bitmap position, where it will be drawn on the screen.
'Y - Bitmap position, where it will be drawn on the screen.
"Advance - • 5001: Shows the NPC in player 1's item box. | • 5002: Shows the NPC in player 2's item box.
"Color - A certain color. The default value is -1 and type 0 to make the bitmap completely transparent. You can use "RGBA(255, 255, 255, 255)" to change the color.

If the frirst parameter is "Text:"

call hudset("text:custom text:",10,600,25,32,128,16,89,-1,-1)

'ID - The ID that will be used to create the HUD. Every time you create a new Bitmap, you will have to change the ID.
'X - Text Position, where it will be drawn on the screen.
'Y - Text Position, where it will be drawn on the screen.
'StartASCII - The starting character code of the font.
'EndASCII - The last character code of the font.
'RowASCII - The number of characters in a row of the font image.
Example, if your font is in this style:

npc-89.png (19.15 KiB) Viewed 1090 times

So:
StartASCII = Decimal 32 - Starts at the Character "Space".
EndASCII = Decimal 128 - Ends at the "DEL" Character
RowASCII = It has 16 characters in a font line.
'ASCII Table :

extend.gif (11.47 KiB) Viewed 1090 times

'NPCID - The ID of the NPC ID that contains the font used.
'Color - A certain color. The default value is -1 and type 0 to make the text completely transparent. You can use "RGBA(255, 255, 255, 255)" to change the color.

For more information visit this Wiki article : https://wohlsoft.ru/pgewiki/Functions_(TeaScript)#HUDSet

2. Graphics:
In addition to the Function, you must have the graphics to be used in the HUD. They are usually organized in this way:

scflash.png (2.91 KiB) Viewed 1090 times

- But how do I know where they will be on the screen?
Simple. You can create an Image 800x600 (which is the size of the SMBX screen), so you can mount your HUD as you see fit:

Base_Da_HUD_Template.gif (2.28 KiB) Viewed 1090 times

3. Mounting the HUD in the Game:
With your SMBX 38A and an empty script within your level. I will explain how the HUD will be created:

Code: Select all

'|||||||||||||||||START SCRIPT||||||||||||||||||||||
do 'Creating a Loop.
call HUDSet("initialize", 0, 0, 0, 0, 0, 0, 0, 0, 0) 'Erasing the data from the Original HUD

'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'Creating the Item Box in the middle:
If Char(1).ID < 2 ' Mario & Luigi
call HUDSet("bitmap", 1, 0, 0, 54, 54, 368, 16, 0, -1) 'Bitmap Item Box.
else 'Peach, Toad and Link
call HUDSet("bitmap", 1, 56, 0, 54, 54, 368, 16, 0, -1) 'NOT Bitmap Item Box.
End
'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

'Bitmap of the NPC that goes is inside the Item Box:
'[Parameters 5 and 6 are marked as 1. To configure as normal size, that if Parameter 9 is like 5001 or 5002]
call HUDSet("bitmap", 2, 0, 0, 1, 1, 380, 28, 5001, -1)
'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

'X icon :
call HUDSet("bitmap", 3, 48, 166, 14, 14, 36, 44, 0, -1)
'Checking the ID of each character:
'Mario:
If Char(1).ID = 0 
call HUDSet("bitmap", 4, 0, 56, 82, 16, 16, 24, 0, -1)
'Luigi:
elseif Char(1).ID = 1
call HUDSet("bitmap", 4, 0, 72, 82, 16, 16, 24, 0, -1)
'Peach:
elseif Char(1).ID = 2
call HUDSet("bitmap", 4, 0, 88, 82, 16, 16, 24, 0, -1)
'Toad:
elseif Char(1).ID = 3
call HUDSet("bitmap", 4, 0, 104, 82, 16, 16, 24, 0, -1)
'Link:
elseif Char(1).ID = 4
call HUDSet("bitmap", 4, 0, 120, 82, 16, 16, 24, 0, -1)
End
'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

'If the characters are Peach, Toad and Link:
If Char(1).id => 2
call HUDSet("bitmap", 5, 62, 166, 16, 16, 98, 24, 0, -1)'X Icon
'Heart system:
Select Case Char(1).hitpoint
   Case = 0 'No Heart (When the player dies)
call HUDSet("bitmap", 6, 16, 150, 16, 16, 116, 24, 0, -1)'HEART - 1    
call HUDSet("bitmap", 7, 16, 150, 16, 16, 134, 24, 0, -1)'HEART - 2    
call HUDSet("bitmap", 8, 16, 150, 16, 16, 152, 24, 0, -1)'HEART - 3   
   Case = 1 '1 Heart
call HUDSet("bitmap", 6, 0, 150, 16, 16, 116, 24, 0, -1)'HEART - 1    
call HUDSet("bitmap", 7, 16, 150, 16, 16, 134, 24, 0, -1)'HEART - 2   
call HUDSet("bitmap", 8, 16, 150, 16, 16, 152, 24, 0, -1)'HEART - 3    
   Case = 2 '2 Hearts
call HUDSet("bitmap", 6, 0, 150, 16, 16, 116, 24, 0, -1)'HEART - 1    
call HUDSet("bitmap", 7, 0, 150, 16, 16, 134, 24, 0, -1)'HEART - 2    
call HUDSet("bitmap", 8, 16, 150, 16, 16, 152, 24, 0, -1)'HEART - 3    
   Case = 3 '3 Hearts
call HUDSet("bitmap", 6, 0, 150, 16, 16, 116, 24, 0, -1)'HEART - 1    
call HUDSet("bitmap", 7, 0, 150, 16, 16, 134, 24, 0, -1)'HEART - 2    
call HUDSet("bitmap", 8, 0, 150, 16, 16, 152, 24, 0, -1)'HEART - 3   
    End Select 'END
else
'Making hearts transparent:
call HUDSet("bitmap", 6, 16, 150, 16, 16, 116, 24, 0, 0) 'HEART - 1    
call HUDSet("bitmap", 7, 16, 150, 16, 16, 134, 24, 0, 0) 'HEART - 2   
call HUDSet("bitmap", 8, 16, 150, 16, 16, 152, 24, 0, 0) 'HEART - 3
call HUDSet("bitmap", 5, 62, 166, 16, 16, 98, 24, 0, 0) 'X Icon
End
'End
'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

'Icon Stars counter:
call HUDSet("bitmap", 9, 80, 150, 16, 16, 298, 24, 0, -1)
'X- Icon:
call HUDSet("bitmap", 10, 48, 166, 16, 16, 316, 26, 0, -1)
'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

'STAR COINS LOGO Icon:
call HUDSet("bitmap", 11, 0, 136, 108, 14, 428, 12, 0, -1)
'Star Coins System:
Select case sysval(starcoincount) 'System Variable: Star Coin Count
   Case 0
call HUDSet("bitmap", 12, 28, 180, 28, 32, 436, 32, 0, -1)'Star Coin 1 OFF
call HUDSet("bitmap", 13, 28, 180, 28, 32, 468, 32, 0, -1)'Star Coin 2 OFF
call HUDSet("bitmap", 14, 28, 180, 28, 32, 500, 32, 0, -1)'Star Coin 3 OFF   
   Case 1
call HUDSet("bitmap", 12, 0, 180, 28, 32, 436, 32, 0, -1)'Star Coin 1 ON      
call HUDSet("bitmap", 13, 28, 180, 28, 32, 468, 32, 0, -1)'Star Coin 2 OFF      
call HUDSet("bitmap", 14, 28, 180, 28, 32, 500, 32, 0, -1)'Star Coin 3 OFF         
    Case 2
call HUDSet("bitmap", 12, 0, 180, 28, 32, 436, 32, 0, -1)'Star Coin 1 ON       
call HUDSet("bitmap", 13, 0, 180, 28, 32, 468, 32, 0, -1)'Star Coin 2 ON      
call HUDSet("bitmap", 14, 28, 180, 28, 32, 500, 32, 0, -1)'Star Coin 3 OFF                  
   Case 3
call HUDSet("bitmap", 12, 0, 180, 28, 32, 436, 32, 0, -1)'Star Coin 1 ON      
call HUDSet("bitmap", 13, 0, 180, 28, 32, 468, 32, 0, -1)'Star Coin 2 ON    
call HUDSet("bitmap", 14, 0, 180, 28, 32, 500, 32, 0, -1)'Star Coin 3 ON    
End Select 'END

'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'COIN Icon:
'Mario, Luigi, Peach and Toad
If Char(1).ID < 4
call HUDSet("bitmap", 15, 64, 150, 16, 16, 556, 16, 0, -1)'
else
call HUDSet("bitmap", 15, 96, 150, 16, 16, 556, 16, 0, -1)'
End    
'X- Icon:
call HUDSet("bitmap", 16, 48, 166, 16, 16, 574, 18, 0, -1)

'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'TIME Icon:
call HUDSet("bitmap", 17, 0, 166, 48, 14, 668, 12, 0, -1)

'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'Numbers that will be used in the HUD. An NPC is used to represent the numbers:
'%2z = 00
'%3z = 000

Call hudset("text:"&Format("%2z",Sysval(Playerhealth)),18,52,44,48,57,1,290,-1,-1)
Call hudset("text:"&Format("%2z",Sysval(starcoincount)),20,330,26,48,57,1,290,-1,-1)
Call hudset("text:"&Format("%2z",Sysval(CoinCount)),21,590,18,48,57,1,290,-1,-1)
Call hudset("text:"&Format("%3z",LVLTimer(Count)),22,669,28,48,57,1,290,-1,-1) 
'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

call sleep(1) 'Delay 1 Frame
loop
'End Loop

I think this was the tutorial, I tried to explain it as easily as possible.
The HUD Level:

HUD SMW Level.zip

(5.69 KiB) Downloaded 221 times