Modifying the Viewport

Your viewport is the area of the screen that you use to view the game world. By default, it spans the entire size of your screen, but with a few simple tweaks, you can move and resize it to your liking.

Default Viewport

Like every UI element in WoW, the Viewport is a widget. In this case, the name of the widget is WorldFrame. In order to modify it, we simply create a new tweak with the same name and define its anchors, height, or width. Be aware that the WorldFrame is a special case and not all frame methods will work on it.


				{
					Name = "WorldFrame",
					Points = {
						"TOPLEFT",
						"BOTTOMRIGHT",
					}
				}

For reference, the default look of the Viewport could be represented in Tweaker as such. Optionally, you could specify TOPLEFT and then set a height or width, but topleft and bottomright together ensure that it spans to all four edges of the screen. If the screen is resized, the viewport will resize along with it.

As you'll see in the following screenshots, the top and bottom of your view never change, but the width can. The wider you make your viewport, the more you can see to your left and right.

Traditional 2:1 aspect ratio, top aligned

My Favorite Viewport

Personally, this is my favorite view. On my monitor, it leaves me ample room at the bottom to put my chat window, meters, buttons, minimap, and a few other things, and still leaves a nice amount of space to view the world.


					{
						Name = "WorldFrame",
						Points = {
							"TOPLEFT",
							"TOPRIGHT",
						},
						Height = WorldFrame:GetWidth()/2,
					}

Small Window, More Open Space

A more complex example

As with most anything, there are multiple options for achieving results. Here, I'm adding spacing to the left and right side, but I'm doing it by setting offsets on my points rather than defining a height or width. The advantage here is that those areas now have fixed dimensions, regardless of the resolution.


					{
						Name = "WorldFrame",
						Points = {
							"TOP",
							"LEFT -100 0",
							"RIGHT 100 0",
							"BOTTOM -100 0",
						},
					}

Fillin in the Empty Space

Fill in those empty spaces!

One final, but important note. The "empty" space created by resizing the viewport is generally black, but at times, particularly in doors, you'll see it turn a bluish hue at certain points. Well, that's no good, so your next step is to actually put something in that empty space.

I usually create black panels, but I'm using this ugly shade of red here so that you can actually see the difference. Since "frames" are invisible and can be clicked through by default, I opted to create one over the entire screen surface and then give coordinate points to the textures on it in order to fill in the gaps.

Another option would be to create 3 individual frames that fill the gaps, and each of them would need one texture with the fill color. By default, textures fill their containers.


					local color = "0.32 0.00 0.08"

					Tweaker.RegisterTweaks({
						{
							Name = "WorldFrame",
							Points = {
								"TOP",
								"LEFT 100 0",
								"RIGHT -100 0",
								"BOTTOM 0 100",
							},
						},
						{
							Name = "WorldFrameFilling",
							Points = {
								"TOPLEFT",
								"BOTTOMRIGHT",
							},
							Textures = {
								{
									DrawLayer = "BACKGROUND",
									Texture = color,
									Points = {
										"TOPLEFT",
										"BOTTOM",
									},
									Width = 100,
								},
								{
									DrawLayer = "BACKGROUND",
									Texture = color,
									Points = {
										"TOPRIGHT",
										"BOTTOM",
									},
									Width = 100,
								},
								{
									DrawLayer = "BACKGROUND",
									Texture = color,
									Points = {
										"BOTTOMLEFT",
										"BOTTOMRIGHT",
									},
									Height = 100,
								},
							},
						},
					})