Visualizing Stories ​

At this point, you should know how to create a story. Now let's see how you can visualize it.

UI Labs will search for .story modules in your game tree. These will appear as Unknown in the UI Labs explorer if you haven't created a Storybook for them.

We'll talk about storybooks later, for now, open the story you created.

local function story(target)
   local element = Instance.new("TextLabel")
   element.Text = "Hello UI Labs"
   element.Size = UDim2.fromOffset(250, 80)
   element.TextSize = 20
   element.Parent = target

   return function()
	   element:Destroy()
   end
end

return story

local function story(target)
   local element = Instance.new("TextLabel")
   element.Text = "Hello UI Labs"
   element.Size = UDim2.fromOffset(250, 80)
   element.TextSize = 20
   element.Parent = target

   return function()
	   element:Destroy()
   end
end

return story

function story(target: Frame) {
   const element = new Instance("TextLabel");
   element.Text = "Hello UI Labs";
   element.Size = UDim2.fromOffset(250, 80); 
   element.TextSize = 20;
   element.Parent = target;

   return () => {
      element.Destroy();
   }
}

export = story;

function story(target: Frame) {
   const element = new Instance("TextLabel");
   element.Text = "Hello UI Labs";
   element.Size = UDim2.fromOffset(250, 80); 
   element.TextSize = 20;
   element.Parent = target;

   return () => {
      element.Destroy();
   }
}

export = story;

We have our story here!, but it's not centered, and the text is too small. Let's fix that.

Moving your view ​

You can move your canvas around by either:

• Holding Middle Click and dragging.
  
• Holding Ctrl / Command and dragging with Left Click

Great!, but now the text is too small so, what can we do about it?.

Zooming In / Out ​

You can zoom in and out by either:

• Using the magnifying glasses at the side toolbar
• Holding Shift and scrolling Up/Down

Nice!, now we can see our story more clearly.

Resetting the View ​

You can reset the Position and Zoom by Right Click your story preview and selecting Reset Position or Reset Zoom

Using the Game Viewport ​

You can visualize your story in the game viewport.
For this clicking the View on Viewport button in the side toolbar.

Once clicked, UI Labs will move your UI to the game viewport.
Click it again to bring it back.

No position or zoom will be applied here.