Technology Demo

Skybox Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Spot for images

Intro

This project will show you how to create a simple skybox. Start up a new project and make two folders, called Materials and Textures. Load your six textures for the skybox, one for each side of the cube, into the Textures folder.

Creating the Material

By right clicking on the Materials folder, you can select New > Material. If Material doesn't appear as an option, then go to New > Other. When the new dialog window comes up, go to Other > Material.

Under the Material Wizard, give your material a name. Sky works just fine. Leave the template as Blank and then click Next and Finish. Your new Material will be present in the Materials folder. Before you try to open your material file, go to Window > Preferences. Go to General > Editors > File Associations and select *.material. Under Associated Editors, make sure that the Ogre Script Editor is selected and click Default. Then you can double click on your new Material to open it up in the editor.

material Sky
{
  technique
  {
    pass
    {
      lighting off
      texture_unit
      {
	 cubic_texture Textures/1.jpg Textures/2.jpg Textures/3.jpg Textures/4.jpg Textures/5.jpg Textures/6.jpg separateUV
	 filtering trilinear
      }
    }
  }
}

The first line defines the name of the material. The rest of the information is stored within a technique, which has a pass, and inside of the pass is where we detail the texture and other necessary information. We have to make sure that lighting is off, and then create a texture unit. The six textures will be put into cubic_texture with the parameter "separateUV" at the end. None of these are separated by commas. Set filtering to trilinear, and then the material is done.

Create the Skybox

Creating the skybox only requires a single line of code. In your Root.lua file, under where the camera is created, enter the following line of code:

self:setSkyBox(true,100,luster.resources.Material("Sky"))

Here, true indicates that the skybox is enabled, the 100 indicates the distance, and the third parameter sets the material for the skybox.

To put in some camera movement so we can look around the skybox, add the following event listeners:

self:addEventListener(luster.display.DisplayObject.KEY_DOWN, Function(self, self.onKeyDown))
self:addEventListener(luster.display.DisplayObject.KEY_UP, Function(self, self.onKeyUp))
stage:addEventListener(luster.display.Stage.ENTER_FRAME, Function(self, self.onEnterFrame))

In order to get camera movement working properly, we need to create a few functions. One will handle a key being pressed down, another for when the key is released, and finally one to handle the enter frame event.

Here we use the WASD keys to control movement. If one of the keys is pressed, the boolean for that direction is set to true.

function Root:onKeyDown(key)
	if key == luster.KeyCodes.W then
		self.lookingUp = true
	elseif key == luster.KeyCodes.S then
		self.lookingDown = true
	end
	if key == luster.KeyCodes.A then
		self.lookingLeft = true
	elseif key == luster.KeyCodes.D then
		self.lookingRight = true
	end
end

Here, we say that if a key is released, the boolean connected to that direction will become false.

function Root:onKeyUp(key)
	if key == luster.KeyCodes.W then
		self.lookingUp = false
	elseif key == luster.KeyCodes.S then
		self.lookingDown = false
	end
	if key == luster.KeyCodes.A then
		self.lookingLeft = false
	elseif key == luster.KeyCodes.D then
		self.lookingRight = false
	end
end

And finally, we set up the enter frame event handler that moves the camera based on the key being pressed.

function Root:onEnterFrame()
	if self.lookingUp then
		self.cameraRig:pitch(0.01)
	elseif self.lookingDown then
		self.cameraRig:pitch(-0.01)
	end
	if self.lookingLeft then
		self.cameraRig:yaw(0.01)
	elseif self.lookingRight then
		self.cameraRig:yaw(-0.01)
	end
end