Tutorial: simple fade in/out

[shooter 1,422]

Newborn has asked me to put a short scripting tutorial out, specifically related to fading things in / out. So here it is

 

This should hopefully give you guys a good base to start some of your own lua scripting.

 

I'm going to keep it really simple, once you've got a basic idea, you can look around at scripts in Reflex to base your own scripts off

 

 

 

We'll make a ShooterTeamDisplay.lua script which displays your current team in team games. It'll fade up/down when you change teams.

 

1. Close Reflex.exe, and create a new file reflexgamebaseShooterShooterTeamDisplay.lua

require "base/internal/ui/reflexcore"

ShooterTeamDisplay =
{
};
registerWidget("ShooterTeamDisplay");

--
function ShooterTeamDisplay()
end

2. Load Reflex.exe, check the console to ensure there were no lua syntax errors. If you get an error (like i've shown below), you must close Reflex, fix the error, and re-launch.

^^ BAD!

 

 

3. By now you should have a script loaded and Reflex running, now for the fun part Let's get a game going first, create a local TDM server. And put yourself into play mode.

 

 

4. Make our new script visible! Enter into console:

ui_show_widget ShooterTeamDisplay
ui_set_widget_anchor ShooterTeamDisplay 0 1 (this will anchor to middle, bottom)
ui_set_widget_offset ShooterTeamDisplay 0 -200 (this will offset it by 0, -200) => so we're 200 units off bottom of screen

5. But we see nothing! That's because our draw function doesn't do anything yet! Update the draw function in the script to:

function ShooterTeamDisplay:draw()
-- grab player camera is watching
local player = getPlayer();
if not player then
-- no player, early out
return;
end

-- lookup player team index, and the team name
local playerTeam = player.team;
local teamName = world.teams[playerTeam].name;

-- setup font
nvgFontSize(30);
nvgFontFace(FONT_HUD);
nvgTextAlign(NVG_ALIGN_CENTER, NVG_ALIGN_MIDDLE);

-- print team name
local x = 0;
local y = 0;
nvgFillColor(Color(255, 255, 255));
nvgText(x, y, teamName);
end

6. Now hit save, and you should instantly see something like:

 

 

7. So now let's jazz it up a bit, we'll make it fade in/out when changing team, and give it a blurred font background, comments are in the code.

require "base/internal/ui/reflexcore"

ShooterTeamDisplay =
{
shownTeam = nil;
shownIntensity = nil;
};
registerWidget("ShooterTeamDisplay");

--
function ShooterTeamDisplay:draw()
-- grab player camera is watching
local player = getPlayer();
if not player then
-- no player, early out
return;
end

-- check we are in a team game, if not then early out
local mode = gamemodes[world.gameModeIndex];
if not mode.hasTeams then
return;
end

-- lookup player team index
local playerTeam = player.team;

-- initialize: if there is no shown team, set it to what player is NOW
if ShooterTeamDisplay.shownTeam == nil then
ShooterTeamDisplay.shownTeam = playerTeam;
ShooterTeamDisplay.shownIntensity = 1;
end

-- basic idea here is, if the player team matches what we are showing, then increase the intensity, up to 1
-- note: deltaTime is the time in seconds since the last frame
if ShooterTeamDisplay.shownTeam == playerTeam then
ShooterTeamDisplay.shownIntensity = math.min(ShooterTeamDisplay.shownIntensity + deltaTime, 1);
else
-- if they do not match, we pull down to 0
ShooterTeamDisplay.shownIntensity = ShooterTeamDisplay.shownIntensity - deltaTime;

-- once we are at 0, then we will copy team over so we DO match, and that will ramp the intensity up next frame
if ShooterTeamDisplay.shownIntensity <= 0 then
ShooterTeamDisplay.shownTeam = playerTeam;
ShooterTeamDisplay.shownIntensity = 0;
end
end

local teamName = world.teams[ShooterTeamDisplay.shownTeam].name;
local intensity = ShooterTeamDisplay.shownIntensity;

-- setup font
nvgFontSize(110);
nvgFontFace(FONT_HUD);
nvgTextAlign(NVG_ALIGN_CENTER, NVG_ALIGN_MIDDLE);

-- print team name blurry background
local x = 0;
local y = 0;
nvgFontBlur(10);
nvgFillColor(Color(0, 0, 0, 255*intensity));
nvgText(x, y, teamName);

-- print team name
nvgFontBlur(0);
nvgFillColor(Color(255, 255, 255, 255*intensity));
nvgText(x, y, teamName);
end

8. Finally, we have a string on screen which fades in/out & shows team name

 

As promised, there's a very simple script to get you started

 

And questions / requests / feedback -- fire away!

 

Cheers guys,

Shooter.

[A. Benz 326]

"ui_set_widget_position" ... offset you mean?

[Bonuspunkt 167]

2. Load Reflex.exe, check the console to ensure there were no lua syntax errors. If you get an error (like i've shown below), you must close Reflex, fix the error, and re-launch.

^^ BAD!

 

 

executing loadconfig game did it fix for me, no need to relaunch the game

[shooter 1,422]

"ui_set_widget_position" ... offset you mean?

oops ty

[byce 71]

Thanks!

[AEon 256]

Shooter,

should I be migrating the into over to the wiki?

[aliasedfrog 44]

executing loadconfig game did it fix for me, no need to relaunch the game

 

If the whateverfilename.lua is broken at the time you launched reflex, There is a chance it won't check if it was updated and dynamically load changes.

Nnot sure the exact circumstances maybe shooter can elaborate on that. 

sometimes just 'loadconfig game' will work, or 'save' the .lua you were editing again will reload what ever changes you made and either display a new error or register for you to display/use the widget.

[shooter 1,422]

hmm it was my understanding if it failed on load it didn't load it again I always had stuff that did work on load though I'll have to check that out.

 

AEon you can put on wiki if you think it's helpful