Add a Sample Backdrop

To create a script in dot big bang, you need an entity to put it on. To start this out, we’ll add something to represent the area you want to set up for photos. We’ll use a greenscreen object to start with, but this can be removed or replaced with whatever you want later.

1. Check out this greenscreen voxel object, and click the Remix button to make your own copy.
2. Press Save in the Voxel Editor to save that copy to your voxel objects.
3. In the project where you have started building photobooth scenes, you should now see the green screen. If you don’t, press Save on the project, and then refresh the page.
4. Drag the greenscreen voxel object into your world to create a new entity.
5. Use the yellow sphere widget to size it up to be about twice the size. We want the back to take up most of the screen when a player walks onto it.

Turn off the Flashing Animation

The green screen actually has two versions of itself, a green one, and a blue one. They were made using animation frames in the voxel editor, so by default, it switches quickly between them. You can change this using the Entity props panel.

1. Click on the green screen to select it.
2. Press Shift + Left Arrow to open the Entity props panel.
3. Find the magenta voxel object section, which will be called Green Screen and click the down arrow to expand it.
   • 
4. Uncheck the box next to Play.
5. Slide the Time property left and right to see how you can choose which version you want: the green or the blue.

You should now just see the green screen. We’ll use both colors of the screen for testing in a later step.

Test Colliders

Collision is how we keep the player from being able to walk through walls or fall through the floor in a 3D space. They work by noticing if you are about to walk into an object that should be solid, and then stopping your movement. We’re going to experiment to see how different Collider shapes work.

1. In the Collision Volume section of the Entity props panel, click the down arrow to expand the section.
2. In the Collider property, change the selection from VOXELOBJECT to BOX.
3. Try walking onto the green screen. The BOX collider creates a cube around the green screen that should stop you as soon as you walk up to it.
4. In the Response Type property, change it from STATIC to DYNAMIC.
5. Try walking up to the green screen again. This time, instead of stopping you, it should get pushed when you walk into it. You can press Stop and Play at the top of the screen to set it back to its original position.
6. Change the Collider property back to VOXELOBJECT to make the collision only happen when you are in contact with the actual voxels, and change the Response Type back to STATIC to keep it in the right place.

Create a Trigger

Triggers work the same way as Colliders, except that they don’t stop the player from walking through an object. Instead, you can use triggers send a signal in scripts that a player just entered an area. These signals are called events.

1. In the left side column of the Entity props panel, mouseover the Collision section and press the Add Item icon to add a new collision to the entity.
   • 
2. In the properties of this second collision volume, set the Collider to BOX and the Response Type to TRIGGER.
   

Add a Script

We’re finally set up to start scripting this project!

1. In the left side bar of the Entity props panel, mouseover the Script section and click the to create a new script on the entity.
2. When the script editor pops up, click the tab at the top that says Unnamed resource and change the name to Photobooth and click Save.

Create Trigger Event Functions

Right now your script has two functions, start() and tick(). We don’t need to run any code right away, so we don’t need the start() function, and we don’t need to run any code about 60 times per second, so we won’t need the tick() function. Instead of those, we’ll use functions that correspond to Trigger Events.

Copy or type the code below into your code where the start and tick functions are. You could just change the names of start and tick functions, or delete them and add this between the first { on the top line and the final } at the bottom of the script.

    onTriggerEnter(){

    }
    onTriggerExit(){
        
    }

Make a Variable for the Voxel Object

In a script, you can access all the same components of an entity as you can from the Entity props menu, but we need to use a function to do it.

We’ll add a line of code inside the onTriggerEnter function that creates a label for the voxel object, so that we can change it with code later in the script.

Add the following line in between the { } of the onTriggerEnter function.

        let voxelObject = this.entity.getComponentByType(ComponentType.VoxelObject)

• let is a keyword that we use to say we are making a variable.
• voxelObject is the name of our variable.
• The = is used to say what value we want to give the variable
• this refers to the script itself
• this.entity refers to the entity that this script is part of, in this case, the green screen with two colliders that we have been working on.
• .getComponentByType() is a function that finds any any of the components on an entity.
• ComponentType is a list of possible types you can be looking for. There are only 11 of them, and you can see the complete list of them here.
• VoxelObject is the specific component type that we are looking for here.

Whew! That is a lot of steps, but the good news is that we never have to write that again. From now on, we can just use the variable name, voxelObject when we want to change something about the voxel object in this entity (the green screen ). Well, inside this function, anyway.

Change the Voxel Object When the Player Enters the Trigger

Next, we’ll use a function called showVoxelFrameAtKey. The cool thing is that dot big bang has autocomplete, so if you start typing voxelObject.sh … you should see it suggest voxelObject.showVoxelFrameAtKey for you. Just press Tab and the program will do the rest. After that you will need ( ) to say that we are using a function, with the number 1 inside to say which frame we want it to show. In the end, your code should look like this:

Check if the Voxel Object Exists First

Right now the code won’t run, because not every entity has a voxel object as a component. It’s possible that it never had one, or that it got destroyed by some other code while your game was running. We will use an if statement to make sure that we don’t try to code with something that doesn’t exist.

1. Add a new line after your variable, and type if(voxelObject != null){
2. Type another } in a new line after the code you want to run.

Test Out the Trigger!

Walk up to your green screen (walk away from it first if you are already standing in it) and watch it change color!

Hint: You can press Shift + Up Arrow to show and hide your script editor and get it out of the way.

Change the Voxel Object Back When the Player Exits the Trigger

To change back to the green version of the voxel object, all we need to do is copy the exact same code into the onTriggerExit() function, but change the 1 to a 0. In programming in general, counting starts at 0, so that is the number of the first animation frame.

Test Out Walking Back Out of the Trigger

The green screen should now swap to blue when you get close to it, and then back to green when you walk away. Congratulations, you have used Triggers and Events to run code!