[TUT] Drawing shapes and text on screen (Menu, HUD, Message)

One particular fundamental point that wonderful element of mods have is Messages, HUD and/or Menus on the screen, to show information and alternatives.

I will show in this tutorial what i know about drawing things on game screen.

Download the source code of this tutorial here

Native methods

We have some cool strategies that we can call to draw shapes and game textures on screen, they need to be named in a tick or loop, those are the ones that i know how to use:

DRAW_SPRITE_FRONT_BUFF (New: Added 15/11/2013)
DRAW_CURVED_WINDOW
DRAW_FRONTEND_HELPER_TEXT
DRAW_RECT
DRAW_SPRITE

DRAW_SPRITE_FRONT_BUFF (New)

Native.Function.Call("DRAW_SPRITE_FRONT_BUFF", .2, .21, .three, .three, ., 150, 190, 195, 200)

This strategy is fascinating, it draws the actual screen on the specified region, its like a mirror of the reality but not mirrored ^^.

Params:
.2 - X percent of the game screen to be the center of the window, 1. = one hundred%
.21 - Y percent of the game screen to be the center of the window
.three - percent of the screen that will be the width of the window, 1. = full width
.three - % of the screen that will be the height of the window
. - rotation in degrees
150 - Red element of the colour
190 - Green component of the colour
195 - Blue component of the colour
200 - Alpha component of the colour

Result with those params:

DRAW_CURVED_WINDOW

Native.Function.Contact("DRAW_CURVED_WINDOW", .1, .11, .two, .25, 200)

Params:
.1 - X % of the game screen to be the X position of the window, 1. = one hundred%
.11 - Y percent of the game screen to be the Y position of the window
.2 - Width percent of the game screen to be the Width of the window, 1. = one hundred% = full screen width
.25 - Height percent of the game screen to be the Height of the window
200 - Alpha worth, 255 = complete opaque, = complete transparent

Result:

DRAW_FRONTEND_HELPER_TEXT

This strategy will draw game predefined messages on correct bottom corner and will display a important draw (Enter, Delete, Backspace, and so forth.):

Native.Function.Contact("DRAW_FRONTEND_HELPER_TEXT", "ADD_FILTER_CAP", "INPUT_F_ENTER", )

Params:
"ADD_FILTER_CAP" - This is the predefined message, you can find much more in the SCOCL files browsing for the native technique.
"INPUT_F_ENTER" - This will make the "Enter" game display message seems, you can find other examples in SCOCL files.
- Not 100% positive what this does, but if the second call has an number 1 rather of , this message will seem beneath the earlier, if its it will seem in same line.

Outcome with first call with and second get in touch with with :

Outcome with 1st get in touch with with and second get in touch with with 1:

DRAW_RECT

This strategy will draw a rectangle o.O

Native.Function.Get in touch with("DRAW_RECT", .5, .52, .5, .two, 255, one hundred, 50, 150)

Params:
.five - X percent of the game screen to be X center of the rectangle, 1. = 100%
.52 - Y % of the game screen to be Y center of the rectangle,
.five - % of the game screen that will be the Width of the rectangle, 1. = complete width
.two - % of the game screen that will be the Height of the rectangle
255 - Red colour amount
one hundred - Green colour amount
50 - Blue colour amount
150 - Alpha quantity, to 255

Outcome:

DRAW_SPRITE (Primarily based on Michael Wojtanis tip)

This strategy will draw a game texture, it's really intriguing.
This technique needs that we load the TXD and the Texture that will be displayed before contact the approach, we need to do this only one particular time, so, in the Sub New of the project we can load it, in this instance i am loading at international variable declaration but i do not advise this:

Params for LOAD_TXD:

"binoculars" - Name of the TXD exactly where the texture is positioned

Params for GET_TEXTURE:

txd - The ID returned by LOAD_TXD get in touch with

"binoculars" - Name of the texture

Now that we have the texture ID we can proceed and call the draw method in a tick:

Native.Function.Get in touch with("DRAW_SPRITE", tTexture, .two, .1, .1, .09, ., 255, 255, 255, 255)

Params:
tTexture: The texture ID obtained with the previous two strategies
.two - X percent of game screen to be the X of the center of the texture, 1. = one hundred%
.1 - Y percent of game screen to be the Y of the center of the texture
.1 - percent of game screen to be the Width of the texture, 1. = complete width
.09 - % of game screen to be the Height of the texture
. - rotation of the draw in degrees
255 - Red color amount
255 - Green colour amount
255 - Blue color quantity
255 - Alpha quantity

Result:

Making use of OpenIV we can uncover the TXD and Textures names and preview the Textures:

We can draw exciting issues like gun icons, zombie scratch ( i in no way saw this in the game :( ), loading screen photos, and so on.:

Drawing with the PerFrameDrawing event

Be cautious with this technique, i suggest to only use the draw methods inside this occasion because you can trigger game crash or lag if you do heavy factors here, if this occasion stops, the frame drawing stops.

This is the strategy:

Employing the "e" object we will be able to draw rectangles, text, lines and textures (images)

Drawing lines

e.Graphics.DrawLine(200, 10, 200, 500, 5, Color.White) ' white line
e.Graphics.DrawLine(300, 10, 500, 700, ten, Color.FromArgb(one hundred, 255, , )) ' red line with alpha amount at 100

Params:
200 - X initial position
ten - Y initial position
200 - X final position
500 - Y final position
5 - Width of the line
Colour.White - color of the line, you can use Color.FromArgb to have far more control of the color components

Result:

Drawing rectangles

e.Graphics.DrawRectangle(225, 235, 400, 250, Colour.FromArgb(150, , 255, ))

Params:
225 - X that will be the X center of the rectangle
235 - Y that will be the Y center of the rectangle
400 - Width
250 - Height
Color.FromArgb(150, , 255, ) - Colour, in this case a green color with alpha quantity at 150

Result:

Drawing text

e.Graphics.DrawText("This is a text o.O", 20, 30, Color.FromArgb(255, , 255, 255))

Params:
"This is a text o.O" - the text :P
20 - initial X position
30 - initial Y position, left leading corner of text
Colour.FromArgb(255, , 255, 255) - the colour, however the alpha low values only will make the text look a lot more dark

We can modify the font also, but i never know too much about this.

Result:

Drawing sprites (images)

To draw an non game image on screen first we want to read the bytes of this image and create one Texture with those bytes:

We need the import of Program.IO (or we can call Method.IO.File...)
We want the Texture object
We require to study the bytes and produce the Texture object, the path employed is:

. - Outcomes in existing directory, GTAIV.exe/EFLC.exe folder
Scripts - inside current directory, Scripts folder
AnyImage.png - the image file inside Scripts folder, if this file don't exists script will crash simply because of exception at the byte reading:

So, make sure that the image file exists and is readable.

Now that we have the texture loaded we can draw it on screen:

e.Graphics.DrawSprite(myImage, 500, 200, 100, 150, , Colour.FromArgb(150, 255, 255, 255))

Params:
myImage - the Texture object produced ahead of
500 - X center of the image on screen
200 - Y center of the image on screen
one hundred - Width
150 - Height
- Rotation in degrees
Color.FromArgb(150, 255, 255, 255) - Colour, this param is optional, the alpha amount do not will adjust something, you can modify the color elements to receive diverse colour filters

Outcome: