Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. 3D Blocks
  4. Set Camera Dislay Region for Multi-Camera View

Set Camera Dislay Region for Multi-Camera View

Scheduled Pinned Locked Moved 3D Blocks
1 Posts 1 Posters 875 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

    Introduction

    Usually, we only use one camera in a 3D scene, and we display that camera’s output in the stage window. However, sometimes we may need to show the content of 2 or more cameras. For example, we may use a “Picture-in-Picture” layout to show the content of a second camera in a small overlay window like this:

    5df74b70-6a0a-48ef-90a4-117faa905c58-image.png

     
    To achieve this result, we need to carry out 2 steps:

    1. Use more than one camera in the scene
    2. Set the display region for each camera within the stage window.

     
     

    Add Multiple Cameras

    Each scene has one active camera, but you can add new cameras that are not active. For example, in this program below, we add 2 cameras named “1” and “2”. Camera 1 is at a shorter distance. When camera 2 is added, it is set to be not active, so it will not replace camera 1.

    2667fcd7-e7ea-46d0-9209-079e9d1ad34b-image.png

     
    Also, since no display region has been defined yet, the stage will only show the output of camera 1:

    76fdf0a2-3f50-4c47-ba7a-13529a03cea2-image.png

     

     
     

    Set the Display Region for Each Camera

    To display the output of more than one camera in the stage window, we need to specify a rectangle area in the stage window called “display region”, using the following block:

    dcf79e06-70b5-4733-b22b-3ea0ecbf3b90-image.png

     

    • Bottom % and Left %: These 2 parameters control the position of the bottom left corner of the rectangle region. The “bottom %” is relative to the stage window’s height. For example, if the stage window is 360 units tall, and the “bottom %” is 50%, then the distance between the bottom left corner and the bottom edge of the stage window will be 180. Similarly, the “left %” is relative to the stage window’s width. For example, if the stage window is 480 units wide, and “left % is 25%”, then the bottom left corner is 120 away from the left edge of the stage window.

    • Width % and Height %: These 2 parameters control the width and height of the display region relative to the width and height of the stage window. For example, if “width %” is 50%, and the stage window’s width is 480, then the display region’s width is 240.

    • Border Width and Color: These 2 parameters control the thickness and color of the border around the display region. This border will make it easier for us to find the boundary of the display region.

    • Camera Name: Lastly, this input controls which camera’s output will be displayed in this region. You would need to assign a name to the camera when you add the camera, then use that name in this block.

     
     

    Example 1 - Picture in Picture

    In this example, we display camera 1’s output in the entire stage, then display camera 2’s output in a small overlay window at the bottom center. The overlay window is 40% in width and height relative to the stage window.

    e5cc0c6f-a00f-4cb1-8ba3-2217a9dea4d9-image.png

     
    And here is the result:

    789d4484-46c8-4af2-a406-24c40c2e492e-image.png

     
     

    Example 2 - Left and Right

    In this example, we split the stage window into 2 display regions left and right. Each region is 50% the width of the stage window, with the same height as the stage window.

    9131cffa-2e3d-4792-96e3-212bdecc9d8a-image.png

     
    Here is the result:
    82e75357-7ebe-498b-abdb-1c5d130ec38a-image.png

    1 Reply Last reply
    0
    • CreatiCodeI CreatiCode pinned this topic on

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode