Gmod Lua Draw Precentage of a Circle
From GMod Wiki
Spring to: navigation, search
 | This page has been nominated for deletion. Deletion is due within approximately 30 days from nomination, unless the deletion has been disputed on the talk folio. See more pages nominated for deletion here. Reason for deletion: Non what Garry wants the wiki to be used for Last Edit was made on 11/16/2011 |
Contents
- one THIS PAGE IS STILL Being WRITTEN!
- 2 Installation
- 3 HML
- three.1 Document Structure
- 3.ii Attributes
- iii.2.1 Format
- iii.two.two Collections
- iii.2.3 Inputs
- 3.iii Inline Expressions
- 3.iii.1 Core Lib
- 3.3.two Logic Lib
- iii.three.3 Trig Lib
- iii.3.iv String Lib
- 3.4 Valid Tags
- three.four.1 <hml>
- three.four.2 <rect>
- 3.4.3 <line>
- 3.4.4 <text>
- iii.4.5 <circle>
- 3.iv.6 <condition>
- 3.v Valid Fonts
- 3.five.1 Font Aliases
- iii.6 Case HML document
THIS PAGE IS STILL Beingness WRITTEN!
Come back before long for actual content! -Moggie100
Installation
To install HUD2, create a folder in your addons directory (called whatever you like, but 'HUD2' seems appropriate) and SVN Checkout (using whatever customer you prefer) this address into information technology: http://svn.dagamers.net/wiremodextras/dev/Adv%20HUD%20v2/
For assistance on using Subversion (SVN) see this page: Svn or this thread: http://world wide web.wiremod.com/forum/wiremod-general-conversation/four-wiremod-svn-guide.html or fifty-fifty this thread: http://world wide web.facepunch.com/showthread.php?t=688324 !
HML
HUD Markup Language is based on XML and XML-like languages already out and popular in the wild. These include, merely are non limited to XML itself, and the more usually used DHTML/HTML.
This means that should you lot know whatever of the *ML languages, working with HML should exist second nature, and you can skip over the 'Certificate Structure' part of this page.
Certificate Structure
A HML document formed of a tree-like construction of 'tags', each tag dividing the HUD into finer-grained particular than it'southward parent.
Tags come in THREE forms; OPENING, Closing and EMPTY form.
OPENING and CLOSING, are the near commonly seen forms, equally for each OPENING class a corresponding CLOSING form must be.
Betwixt INNER-MATCHING pairs of OPENING/Endmost tags, one or more child tags may reside, and volition have their surroundings defined past the tag-pair surrounding them.
To those with a more practical heed; given that a tags named 'rect' define a rectangular surface area, the second pair of tags will exist displayed relative to the outer pair.
<rect> <rect></rect> </rect>
This example also conveniently shows both the OPENING and Endmost forms of tags;
OPENING = <tagname> Closing = </tagname>
This leaves only one other form of tag - the EMPTY tag. These accept the form <tagname/> and act exactly the aforementioned every bit <tagname></tagname>, except without having to enter a closing tag.
As one might appreciate, EMPTY tags are empty - they have no kid or inner elements - however, any tag tin exist in EMPTY form, including those which may usually accept child tags, so if your script does not require child tags inside, simply use the EMPTY form.
Attributes
Tags alone only really depict relationships between elements, allowing for positions and sizes to cascade down from parent to kid.
Attributes permit much finer-grained control over how elements are displayed.
Format
Attributes, in full general terms consist of a Proper name followed by a VALUE or EXPRESSION finished with a SEMICOLON (;)
Thus;
<text value= "Hullo, Globe!" ;/>
Would ready the value of 'value' in the tag 'text' to "Howdy, World!".
Collections
Because its convenient to combine several variables into one handy portable entity, HML collections exist. At the moment, they're mainly used for vector and color definitions, following the schema below;
2d = {x, y} 3d = {x, y, z} (mapped to {r,g,b,255 } for colors) 4d = {10, y, z, w} (mapped to {r,g,b,a} for colors)
Although equally -technicly- they can concord whatever type (reserved for later awesomeness), thus you lot -can- do this:
<sometag variable= { "This is a cord",{ 10 %,10 % }, 44 } ; />
...and such... it'll suspension at the moment (aught uses that functionality yet) but information technology is in that location :P
Inputs
As for inputs, anything afterward an @ starting with a CAPITAL LETTER is considered an input, eg;
<circle radius[email protected]Size; pos= 2 @Position; />
Where "@Size" is a number input and "[e-mail protected]" is a 2d vector input.
The prefixes for types are every bit follows:
-
Format Description @InputName number [electronic mail protected] second vector [electronic mail protected] 3d vector [email protected] 4d vector [electronic mail protected] color (mapped to 3d vector) [e-mail protected] colour with alpha (mapped to 4d vector)
Inputs can have math performed on them like any other variable, in reality they arrive-situe replaced and evaluated at runtime, then when they're being calculated they're just a number.
For example;
<hml> <rect starting time= { ( 30-@Input) %,30 % } ; end = { ( xl-@Input) %,forty % } ; /> </hml>
Inline Expressions
While HUD2 doesn't have the power of an E2 bit (and isn't intended to have it!) information technology does support some bones math operations inline with attributes. These are split up (internally) into several libraries, which may be expanded upon in the future, merely currently contain the post-obit functions;
Core Lib
Core functions for mathematical evaluation.
-
Function Instance Description a + b
value= ten+@Input;
Adds two numbers together. a + b
value= "Hi, "+"Globe" ;
Concatenates two strings, or a string and a number. a + b
value= { ten,10 }+{ 10,ten } ;
Adds the ii vectors (accepts whatever form of vector, as long as their depth match!). a - b
value= 10-5 ;
Subtracts i number from another. a - b
value= { 10,ten }-{ 5,v } ;
Subtracts the contents from one vector from the other (accepts any form of vector, as long as their depth match!). a * bvalue= 5 * 5 ;
Multiplies two numbers. a * bvalue= "wibble" * 10 ;
Repeats a cord due north times. a / bvalue= 10 / 2 ;
Divides 'a' by 'b' a ^ b
value= two^x ;
Performs a 'ability' functioning.
Logic Lib
Logical operations - not true mathematics, but useful in programming!
-
Function Example Clarification clamp(value,min,max )
value=clench( @Input,0,100 ) ;
Clamps a number between two bounds. %value= { xxx %,20 % } ;
Calculates a context-based percentage. If Inside a collection, information technology will determine the tag's parent's dimensions and use those, otherwise it will presume a 0-100 range.
Trig Lib
Trigonometric operations - The same operations as Lua itself!
-
Function Example Description sin (N)
value= sin ( @Input) ;
The sine function. cos (N)
value= cos ( 30 ) ;
Cosine function. tan (Due north)
value= tan ( @Input) ;
The tangent function. asin (Northward)
value= asin ( @Input) ;
Arc-Sine function. acos (Due north)
value= acos ( @Input) ;
Arc-Cosine function. atan (N)
value= atan ( @Input) ;
Arc-Tangent function. sinh(Due north)
value=sinh( @Input) ;
Hyperbolic sine function. cosh(Northward)
value=cosh( @Input) ;
Hyperbolic cosine function. tanh(N)
value=tanh( @Input) ;
The Hyperbolic tangent role. atan2 (North)
value= atan2 ( @Input) ;
FIXME! This needs a decent explanation... abs (N)
value= abs ( @Input) ;
Calculates the Accented value of a number, effectively returning the magnitude. ceil (N)
value= ceil ( 0.7 ) ;
Returns '1' in the example here, every bit it rounds UP to the nearest integer. floor (N)
value= floor ( 0.7 ) ;
Returns '0' in the example here. Rounds a number DOWN to the nearest integer. deg (N)
value= deg ( @Input) ;
Converts a value in radians to degrees. rad (N)
value= rad ( 30 ) ;
Converts a number in degrees to radians. exp (N)
value= exp ( @Input) ;
The exponential function. fmod(N)
value=fmod( 10,iii ) ;
The floating-point remainder. frexpm(North)
value=frexpm( thirty.2082 ) ;
Returns the mantissa component of a floating betoken number. [Coming side by side commit!] frexpe(North)
value=frexpe( thirty.2082 ) ;
Returns the exponent component of a floating indicate number. [Coming next commit!] ldexp (N,N)
value= ldexp ( 10,7 ) ;
The ldexp() office takes a normalized number and returns the floating point representation. This is the fractional value multiplied by ii to the power of the exponent. log (Northward)
value= log ( 10 ) ;
Returns the logarithm to a number with the base east (ii.71828...). Also called natural logarithm. log10 (North)
value= log10 ( two ) ;
Returns the logarithm of Northward base 10. pi( )
value=pi( ) ;
Returns 3.141... rand(N)
value=rand( 10 ) ;
Returns a random number betwixt 0 and 'N'. sqrt (Northward)
value= sqrt ( twenty ) ;
Returns the foursquare-root of 'N'.
String Lib
String operations - useful functions for dealing with strings!
-
Office Example Description toByte(Due south,Due north)
value=toByte( "Wibble",1 ) ;
Gets the byte value of the character at 'Northward' in string 'Due south'. toChar(Due north)
value=toChar( @Input) ;
Returns the character defined by the number 'Northward'. length(S)
value=length(s@Input) ;
Returns the length of the supplied cord. toLower(Due south)
value=toLower(south@Input) ;
Converts all the characters in the string 'S' into lowercase form. toUpper(Southward)
value=toUpper(s@Input) ;
Converts all the characters in the string 'S' into uppercase class. reverse(S)
value=reverse(s@Input) ;
Reverses the order of the characters in the string 'Southward'.
Valid Tags
In the current build, the valid tags are as follows;
<hml>
This tag contains your hml document equally a whole, and is required for a HML document to parse.
Reasons for this will become clearer later equally HML develops (and I update this folio...)
<rect>
A graphical primitive, the colour-filled rectangle. It has these attributes:
-
Attribute Description Accepts offset Where on the screen the rectangle starts. 2d/3d vector end Where on the screen the rectangle ends. If used together, stop and outset describe two diagonally opposed corners of the rectangle. 2d/3d vector size An alternative way of sizing the rectangle, the size attribute takes a 2d vector of the rectangle'southward width and summit. 2d/3d vector width Equivalent to setting width with size aspect. number meridian Equivalent to setting height with size attribute. number rounded Whether or not the rectangle edges are rounded. Takes a number for radius, complete omission causes squared corners number color The color of the rectangle. 3d/4d vector border The color of the rectangle border. 3d/4d vector
<line>
Another graphical primitive, the coloured line. Attributes include:
-
Attribute Clarification Accepts start Where the line starts 2d/3d vector finish Where on the screen the line ends. 2d/3d vector colour The colour of the line. 3d/4d vector
<text>
Text to be drawn on the screen.
-
Aspect Description Accepts position Where to position the text. Aliased as "pos" if you prefer a shorter term. 2d/3d vector. value The bodily text to exist displayed. Any colour The colour of the text. 3d/4d vector background The colour of the groundwork. If used, there will be a wordbox around your text in this colour. 3d/4d vector font The font in which text is displayed. No longer bugged, as of rev.161 ! Cord
<circumvolve>
A graphical archaic, the circumvolve. Currently at beta status.
Circles accept no underlaying Lua command, then the algorithm has been written past hand, and uses many tiny rectangles to describe an estimate circumvolve. Notwithstanding, considering this is a adequately complicated piece of code, its quite buggy, but works fine for small radiuses (0 to about 50) beyond which information technology breaks upwards.
-
Attribute Description Accepts position The centre of the circle. second/3d vector radius The radius of the circle. Number color The colour of the circumvolve. 3d/4d vector filled Whether or not the circle is filled with solid colour. Number - Truthful if not 0
<status>
A metatag, using this makes the performance measuring tool of the indicator point to the actor how much rendering power it is expending frame to frame. This can be used for optimising your HUD.
Valid Fonts
If unspecified, HML will default to 'Default' font!
- Default
- DebugFixed
- DebugFixedSmall
- DefaultFixedOutline
- MenuItem
- TabLarge
- DefaultBold
- DefaultUnderline
- DefaultSmall
- DefaultSmallDropShadow
- DefaultVerySmall
- DefaultLarge
- UiBold
- MenuLarge
- ConsoleText
- Marlett
- Trebuchet18
- Trebuchet19
- Trebuchet20
- Trebuchet22
- Trebuchet24
- HUDNumber
- HUDNumber1
- HUDNumber2
- HUDNumber3
- HUDNumber4
- HUDNumber5
- HudHintTextLarge
- HudHintTextSmall
- CenterPrintText
- HudSelectionText
- DefaultFixed
- DefaultFixedDropShadow
- CloseCaption_Normal
- CloseCaption_Bold
- CloseCaption_BoldItalic
- TitleFont
- TitleFont2
- ChatFont
- TargetID
- TargetIDSmall
- HL2MPTypeDeath
- BudgetLabel
- ScoreboardText
Font Aliases
These font names are shortened versions of the fonts in a higher place, for faster, easier to read scripting.
- Bold = DefaultBold
- Underline = DefaultUnderline
- Small = DefaultSmall
- SmallShadowed = DefaultSmallDropShadow
- VerySmall = DefaultVerySmall
- Large = DefaultLarge
- Console = ConsoleText
- LargeHint = HudHintTextLarge
- SmallHint = HudHintTextSmall
- Selected = HudSelectionText
- Stock-still = DefaultFixed
- FixedShadowed = DefaultFixedDropShadow
- Title = TitleFont
- Title2 = TitleFont2
- Chat = ChatFont
Example HML certificate
This is an example HML document describing a bones percentage bar. Nosotros will build it up gradually, to bear witness the workflow.
<hml> </hml>
At present nosotros have an empty HML document.
<hml> <rect beginning= { 35 %,80 % } ; end = { 65 %,83 % } ; color= { 125,125,125,125 } ; > </rect> </hml>
Here nosotros have added the parent rectangle that will concord the rest of our HUD elements for this bar. It is gray and seethrough at 125 in all colour channels.
It is worth noting that any tags within this rectangle tag volition have its 'first' parameter as their origin, and their percentage-sizes divers by the size of the rectangle - thus; if you lot want to identify the progress bar elsewhere, but motility the outer-about rectangle!
<hml> <rect start= { 35 %,fourscore % } ; finish = { 65 %,83 % } ; color= { 125,125,125,125 } ; > <rect start= { 0 %,90 % } ; finish = { @Percent%,10 % } ; color= { 0,255,255 } ;> </rect> </rect> </hml>
At present nosotros have added a kid rectangle which will be our actual percentage bar. It spans from 0% of the parent'southward width on 1 terminate to the value of the Percent input in percent of the parent'south width on the other end, thus giving a visual indicator of the input's value. Information technology leaves ten% of the parent's pinnacle open and viewable on its upper and lower edges (spans from 10% to 90% in superlative), and is colored in cyan.
<hml> <rect starting time= { 35 %,80 % } ; stop = { 65 %,83 % } ; color= { 125,125,125,125 } ; > <rect offset= { 0 %,xc % } ; end = { @Percent%,x % } ; color= { 0,255,255 } ;> <text pos= { 100 %, 0-20 } ; value[email protected]Percent+"%" ; /> </rect> </rect> </hml>
Hither we have added a second indicator to the player of what the Percentage input'south value is: a text that hovers above the end of the percent bar (the text'southward parent) and whose value is the numeric value of the Percentage input, concatenated with a "%" sign. This is also our first example of an empty-style tag, every bit we don't need the text to have children.
For fifty-fifty improve readability, we may too want to marking upwards a scale on the outer rectangle.
<hml> <rect start= { 35 %,lxxx % } ; terminate = { 65 %,83 % } ; color= { 125,125,125,125 } ; > <rect start= { 0 %,90 % } ; end = { @Percent%,10 % } ; color= { 0,255,255 } ;> <text pos= { 100 %, 0-twenty } ; value[email protected]Percent+"%" ; /> </rect> <line commencement= { 50 %,0 % } ; terminate = { 50 %,100 % } ; color= { 0,0,0 } ; /> <text pos= { 48.5 %,100 % } ; value= "50%" ; /> </rect> </hml>
Now we accept a line from {50%,0%} to {50%,100%}, or across the height of the parent rectangle at the exact halfway point of its width. To make this fifty-fifty more unambiguous, it is acompanied by a text that says, you guessed it, "50%". Information technology is non positioned at 50% however. If you lot effort that yourself, you may find that it looks off - the text is not centered on the line. If y'all've understood the instance so far, you could try adding similar line-and-text markers for the 25% and 75% points yourself.
Source: https://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/index3e79.html