Build a Multiplayer Photo Booth

0 of 4 lessons complete (0%)

Scripting a Photobooth – Part 2

You don’t have access to this lesson

Please register or sign in to access the course content.

Now that we have created a way to test our trigger event functions, we can move on to creating a camera that lets us set up photo-op project. A camera, in 3D worlds and games, is how a user gets to see what is going on. Sometimes they are in the same place as the player’s head — a first-person camera, but they can also be floating around behind the player — a third-person camera — and moveable with the mouse, the way they most often are in dot big bang.

Comment the Voxel Frame Changing Code

Comments are a way that we can add information to a script without trying to run it like code. This is useful for when you want to write notes about why a line of code is there. You can also use a comment to temporarily stop running code. All you have to do is type // before any line to turn it into a comment, but there is also a shortcut to do multiple lines at once.

  • Highlight all the code inside of the onTriggerEnter function, and press Ctrl + / (or Cmd + /, on a Mac).
  • Repeat this with the onTriggerExit function.

Make a Variable for the Cameras

At the top of your script is a variable called someNumber, with the value 42. If you look back at the Entity props panel for the green screen, you can see that Some Number is there as well, and it is also 42. Variable will do this automatically in dot big bang, and it lets you adjust values without having to change your code. If we changed Some Number to 100 on the entity props panel, the program would treat it as 100, even though the script would still say 42.

We need one variable for the normal camera that we use in the game, and one for the camera that we’ll use for the photobooth, so delete someNumber and replace it with these two variables:

    oldCamera = new EntityRef()
    newCamera = new EntityRef()

Create a New Function to Swap the Camera

Functions like start and tick and onTriggerEnter and onTriggerExit and built in to dot big bang scripting, and have predetermined times that they run automatically. However, you can make any function you want, but will have to tell the program when to run it, usually at time when one of these predetermined function runs. We’ll create a function called swapCamera, and have it run when the onTriggerEnter and onTriggerExit functions run.

Below the onTriggerExit function, create this new function:

    changeCamera(camera : EntityRef) {
        // find the actual entity from a reference
        const cam = camera.get()
        // save the old camera to our previous camera variable
        this.oldCamera.set(this.game.cameraEntity) 
        // make the game camera the new camera
        this.game.cameraEntity = cam 
    }

Add a Camera Entity

Next, we need to create a new entity for the camera. If press Stop, you can see the default camera that the game already uses to let players look around.

We need a voxel object to create a camera entity. You can search for camera in voxel objects to find this red one, or other options, or to follow along exactly, you can remix this camera icon and use it.

  1. Drag the voxel object into the scene, and rotate it so that it is point at the green screen. We will finetune this later.
  2. Open the Entity props panel.
  3. In the Camera section of the left tool bar of Entity props, click the Add Item button.

Use the New Camera in the Photobooth Script

  1. Select the green screen and open Entity props.
  2. In the Photobooth script, click the to expand and see your camera variables.
  3. In the New Camera property, click the to open the Select an Entity menu.
  4. Pick CameraIcon as the entity and press the Select button.

Call the Swap Camera Function in the Trigger Events

Finally, we want to swap to the new camera when a player enters the trigger, and back to the old camera when a player exits the trigger.

  1. Add this.changeCamera(this.newCamera) to the onTriggerEnter function.
  2. Add this.changeCamera(this.oldCamera) to the onTriggerExit function
  3. In the Entity props menu, in the Entity section, type noraycast into the Tags section.

Adjust the Camera

Walk into your green screen trigger to see how it sets up the scene. You will need to adjust the camera’s position and angle to make it look the way you want to. To do this, we will need to use Advanced mode

  1. At the bottom right of the screen, click the button that says Advanced.
  2. Walk up to the green screen to see how the new camera looks.
  3. In the top right of the screen, notice that there are three camera icons. Click the Fly Camera icon to be able to see the scene from any angle.
  4. Move the camera icon closer or further away, and angle it up or down depending on how you want it to be in the photobooth.
  5. Swap back to the Game Camera with the button at the top to see how your adjustment looks.
  6. Keep repeating this until the scene looks the way you want it to.

Now, Build a Beautiful Scene

Congratulations, you have finished the coding part of this project! From here, you can build the kind of scene you want to take a photo with using voxel objects that you create or have been shared by others. Think of any of these themes for inspiration:

  • Places you want to visit
  • Cool things you have seen before
  • Beautiful nature scenes
  • Your dream room or house
  • Places where it would be impossibly dangerous to go, like inside a volcano. Or Jupiter.

Bonus: Taking a Screenshot

You can save images of your space by taking a screenshot.

  • In Windows, press the PrtSc or Print Screen button. By default, this will copy an image to your clipboard, and you will need to paste it into a image editing program to save it.
  • On Mac, press Shift + Command + 3. The screenshot should save to your desktop.
  • On ChromeOS, press Shift + Ctrl + the Show Windows button, and then click the Screenshot button that appears at the bottom of the screen.