Stage Backgrounds

From LuaSTG Wiki
Jump to navigation Jump to search

In this tutorial we'll be using luaSTGExPlus and Visual Studio Code. There will be no editor-related stuff here, everything will be made in code.
We will cover everything needed to create a moving background of a wall with a catwalk. (I won't provide any images since they're not made by me)
During this entire tutorial, it is assumed you have a bit of knowledge about the lua programming language. (you don't need a lot to understand, just standard programming concepts such as functions or objects)

Basic Setup[edit | edit source]

In order to make things easier, I suggest you extract the background.zip file located in game\Library in another folder and when you add something to that folder, just repack the zip file by drag and dropping the new/edited files into it (in the right folder.)

Inside THlib\background, create a new folder named "bigwall", and in the 'background_addon.lua' file, add that line :

Include 'THlib\\background\\bigwall\\bigwall.lua'

And inside the folder you just created, create a file named bigwall.lua, this will be the file containing all of our code.

The background object[edit | edit source]

So, here is the way I do things. You'll need to put those lines in the file.

bigwall_background=Class(object)
function bigwall_background:init()
	background.init(self,false)
	--
	LoadImageFromFile('woods_ground','THlib\\background\\bigwall\\3-2.png')
	SetImageState('woods_ground',,Color(255,255,255,255))
	LoadImageFromFile('wall', 'THlib\\background\\bigwall\\wall.jpg')
	LoadImageFromFile('woodbeam', 'THlib\\background\\bigwall\\wood_beam.jpg')
	LoadImageFromFile('platform', 'THlib\\background\\bigwall\\platform.png')
	--
	Set3D('eye',1.5,0.4,-5)
	Set3D('at',-2,-1.5,0)
	Set3D('up',0,1,0)
	Set3D('z',0.1,16)
	Set3D('fovy',0.8)
	Set3D('fog',2.7,18,Color(255,0,0,0))
	--
	self.speed=0.005
end

So, what does these lines do? First, we create an object named bigwall_background. This is the name you put in the editor (or in code) when you create a stage in the "Set current stage background" node.

In the init function of this object, background.init(self,false) is just to tell the engine that this object should be considered as a stage or spellcard background.
Now, we load our image files using LoadImageFromFile. The path of the image should always be THlib\\background\\bigwall\\your_image, but you can load image from other backgrounds too.

After loading the images, we now set the camera properties, for now, you don't need to know what to put in there, we'll figure it out after putting the wall and the ground, but:

  • The up property is the "proper" angle of the camera, the first value is the camera horizontal rotation, the second is to flip the camera upside down, a negative value will flip it, a positive will not. The last value acts a bit like a multiplier for the rotation of the camera, we can change this value in code if we want a smooth rotation.
  • The z property is what we can call "depth render", those two values are the distance between the origin point and a set value in which the engine will render stuff, those two values should be a positive float/int. The higher, the better, but this can cause performance issues for backgrounds with a lot of stuff happening, so try to render as little things as you can after we figure out the camera angles.
  • The fovy property is the field of view of the camera, the higher, the more you see. But if you go higher than 3.1 the camera will flip upside down.
  • The fog property is pretty much the color of the skybox. The first value is how dense the fog is, the lower the denser. The second value is the distance between the origin point and the origin of the fog. If those two values are the same, then no fog will be rendered but the skybox will still remain whatever color you inputed as a third argument. This a "Color" object needing 4 arguments, the first one being the transparency of the color, and the last three are rgb values (you can find a rgb color picker easily on google)

And the last line is the speed on which the background move.
In luaSTG, the camera does not usually move, instead the entire stage does. The only times when we want to move the camera is to change the angle of view or its position relative to the origin point of the background (like you can see on the UaUP extra stage)


Actually rendering stuff[edit | edit source]

We need to use the Render4V function.

Render4V renders an image using 3d points and 4 vertexes. The texture used will stretch if needed.
Example:

--       image       up left     up right      bottom right  bottom left
Render4V('woodbeam', -2,0.7,dz,  -1.5,0.7,dz,  -2.5,0,dz,  -2.5,0.3,dz)

In bigwall_background:render(), we need to tell it to render stuff into the background, so we put this

function bigwall_background:render()
	SetViewMode'3d'
	background.WarpEffectCapture()
	--
	RenderClear(lstg.view3d.fog[3])
	--
	bigwall_background.renderground(self)
	bigwall_background.renderwalls(self)
	bigwall_background.renderplatforms(self)
	bigwall_background.renderbeams(self)
	bigwall_background.renderpillars(self)
	--
	background.WarpEffectApply()
	SetViewMode'world'
end

SetViewMode is a function taking a string argument, to tell the engine to draw in the background, put "3d" inside of it. Work in progress, I'm tired, time to sleep