User Tools

Site Tools



This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
testpage [2019/08/14 12:08]
ding.che [StudyCrafter Scriptor Screen]
testpage [2019/09/10 08:48] (current)
dgmschouten [Step 2. Variables in the Scriptor tab]
Line 1: Line 1:
-===== StudyCrafter Homepage ​=====+===== Tutorial Course 1: The Absolute Basics ​===== 
 +This tutorial course will teach you the basic steps needed to create your own StudyCrafter project. You don't need to know anything about StudyCrafter to take this course. After completing this tutorial, you will know:
-The StudyCrafter Homepage shows all projects that are contained in your version of StudyCrafter. The image below shows this page. Red numbers reference the explanations given below. +  * How to create a new Project and add new Scenes 
-{{:​studycrafter_homepage_noprojects.png?​1000|}}+  * How to add characters, objects, and backgrounds to your Scenes 
 +  * How to use StudyCrafter ​scripting language to make your game run 
 +  * How to tie multiple Scenes together into a coherent whole
-==== 1. Create A New Project ====+Prerequisites for taking this tutorial:
-By clicking ​the New Project button, you create a new, empty StudyCrafter ​project.+  * You installed ​the latest version of StudyCrafter ​(which can be found [[repository|here]]).
-==== 2. Name A New Project ​====+====Step 1: Learning the basic layout====
-You can name your project before ​you create ​it but entering ​the name in this box.+Launch StudyCrafter,​ if you haven'​t already. Once it finishes loading, you should see the main screenIf this is your first time using StudyCrafter,​ that screen will look like this:
-==== 3Report Bug ====+> IMG: StudyCrafter Main Screen (Over the course of working with StudyCrafter,​ this screen will be filled up with all the projects you make.)
-If you find anything wrong in StudyCrafter,​ click the Report Bug button to let us know. It will be very helpful if you report your problems to us. You can leave description of the problems here as what's shown in the image below.+Click the New Project ​button to create ​new blank StudyCrafter project. Then, click anywhere on that project except ​the three buttons at the top to go into the Project Editor.
-==== 4Version ====+> IMG: Project Editor (A completely blank project, waiting to be made.)
-This number shows your current StudyCrafter version.+First, let's name the project. Click on the white box currently labeled 'New Project 1', below '​Project Name:',​ and type in a name of your choosing. This is the name the project will have on the main screen! If you want, you can also write a short project description in the box below this one. This description can only be seen by people who enter the Project Editor: It can be helpful to remind yourself of what your project is about.
-==== 5. Exit Button ====+> IMG: Name/​description
-Clicking the yellow X button allows you to exit StudyCrafter.+====Step 2: The Layout Editor====
-**After you create your projects, the home page will turn to be like the image shows below.**+Nowlet's make the project'​s first Scene. Scenes are the heart of a StudyCrafter game. You can think of them like movie scenes: Each scene takes place in a location, each scene can have actors and props, and each scene follows a predetermined script. However, unlike movie scenes, you can change your StudyCrafter scenes at any time, however you want.
-{{:​studycrafter_homepage_projects.png?1000|}}+Click on the New Scene button. StudyCrafter now automatically takes you into the Scene Editor.
 +> IMG: Scene Editor (This is where you'll do most of the hard work making projects.)
-==== 1Create A New Project ====+When entering the Scene Editor, you start out on the Layout tab, as shown at the top of the screen. In this tab, you can decide what your scene looks like, and which '​characters'​ and '​assets'​ are in it. This is all done using the bar on the left side of the screen.
-By clicking the New Project button, you create ​new, empty StudyCrafter ​project.+Let's start by adding ​character. If StudyCrafter ​isn't currently showing the Character bar (see image above), click on the word '​Characters'​ in the top left corner.
-==== 2Name A New Project ====+You can add a character to the scene by clicking on it; StudyCrafter will put it in the center of the current scene. You can also click-and-drag the character onto the canvas, and place it wherever you want.
-You can name your project before you create it but entering ​the name in this box.+Add <certain character>​ to the scene.
-==== 3Play Project ====+> IMG: Character to scene (Your screen should look like this.)
-Clicking ​the Play button launches ​the selected project.+Even after placing, you can move the character around ​the screen by clicking in the center and dragging them around.
-==== 4Duplicate Project ====+The character will be surrounded by yellow lines and boxes. By clicking and dragging the boxes, you can resize the character in any dimension you want. You can rotate the character by clicking and dragging the yellow circle to the right of the character.
-Clicking the Duplicate button creates an exact duplicate of the selected project. If the project is called **NAME**, the copy is called **NAME copy 1**; if **NAME copy 1** already existsit will be called **NAME copy 2**and so on.+> IMG: Character movedresizedrotated (You have complete control over where your character goes.)
-{{:​project_copies.png?|}}+While there are only twelve characters in the bar, you can use the black-and-white numbers and arrows at the bottom to browse StudyCrafter'​s large library of characters. Feel free to add more characters to your scene.
-==== 5Delete Project ====+There is no limit to the amount of characters you can use. However, any character that is not placed on the scene background will not show up in-game.
-Clicking the Delete button allows you to delete the project. StudyCrafter ​will ask for confirmation before carrying out the deletion. Note that deletion **cannot** ​be undone: Once a project is deletedit is gone forever.+> IMG: Character off-screen (<​character> ​will be visiblebut <​character>​ will not.)
-{{:delete.png?200|}}+Next, let's add some objects. Click on Assets in the top left corner to swap to the Assets bar. Here you can add objects to the scene, exactly the same as how you added characters.
-==== 6New Project ====+Add <​object>​ to the scene. Remember: You can do this either by clicking on it in the bar (which will automatically place it in the center of the screen), or by clicking-and-dragging it from the bar to your scene.
-Each StudyCrafter project is represented by tileA newly created, the empty project looks like the tile in the image. Clicking anywhere in this tile except on the three buttons (3, 4, and 5 in the imagewill take you to the Project Page.+> IMG: Object (If your scene has more characters at this point, that's not problem.)
-==== 7Sort Your Projects ====+The Assets bar has a drop-down menu with three options: Objects, Background, and Interface (Advanced). Select Background from this menu. The bar now shows a number of scene backgrounds you can use. You can see that the top left option is the background your scene currently has
-If you have created many projects, you can sort them by either alphabet ​or by created dates.+You can select a new background ​by clicking on it. Unlike with characters and objects, backgrounds are not designed to be dragged ​or positioned. A new background you select immediately replaces the old one.
-{{:sort_projects.png?300|}}+> IMGNew Background (Simple backgrounds are easy to work withComplex backgrounds can help establish a scene. Always use the right background for your game.)
-==== 8Search Your Project ====+If you click on the Play button in the top, you can see what your current game screen looks like when it is actually playedUse this to make sure everything looks right!
-You can also find your projects by searching them by names. Entering ​the name in this boxthe project you search will be listed.+> IMG: Play Screen 1 (Since ​the play screen is larger than the Layout Tab screentry to make sure that all your characters and assets still look good.)
------------------------------------------------- +====Step 3: The Scriptor====
-===== StudyCrafter Project Screen =====+
-The Project Screen of StudyCrafter shows all scenes of your projectThe image below shows this page. Red numbers reference ​the explanations given below.+Now that you know how to add characters, objects, and backgrounds to a scene, let's learn what we can do with themClick on '​Scriptor'​ in the top of the screen, which will take you to the Scriptor tab.
-{{:project_screen.png?1000|}}+> IMGScriptor tab (This is what that will look like initially.)
 +In the Scriptor tab, you write the script for your game: You define all the text that is shown, all the animations that happen, and all the actions the player can take. You do this by creating nodes, and connecting these nodes.
-==== 1Project Name ====+The Start node always exists in every project. You'll have to add other nodes yourself.
-You can name your project by entering ​the name in this box.+Double-click anywhere on the main screen (the black grid) to show the Node Menu, which looks like this:
-==== 2Project Description ====+> IMG: Node Menu (Everything you can do to make StudyCrafter tick.)
-Click the blank area and enter the description of your project in this box.+First, let's make some text appearCreate a Dialogue node:
-==== 3Delete Project ====+> IMG: Empty Dialogue Node (All nodes are color-coded;​ dialogue nodes are always green.)
-Clicking ​the Delete button allows you to delete the project. StudyCrafter will ask for confirmation before carrying out the deletion. Note that deletion **cannot** be undone: Once project is deleted, it is gone forever.+Click the 'enter text' box and write text of your choosing
-{{:delete.png?200|}}+> IMGHello World box (Feel free to be more creative than this.)
-==== 4Enter the Scene ====+Click the Play button at the top again to be taken to your sceneYou'll notice that your dialogue does not actually appear. This is because all nodes in the script must be part of a graph, which connects them back to the Start node.
-By clicking this area except for the four buttons aboveyou can enter the [[testpage#​StudyCrafter Layout Tab|Layout Screen]] of the Scene you select.+Click on the Scriptor button to be taken back to the Scriptor tab. Heremouse over the rightmost grey ball in the Start node; you'll see it react when the mouse is over it. Click and hold the left mouse button, and drag away from the ball. You'll see a yellow line with arrows follow your mouse cursor. Drag this line anywhere over the Dialogue node, and release the mouse button.
-==== 5. Play the Scene ====+If you did this correctly, ​the two nodes are now connected, like this.
-Click this button to enter the play screen ​of the scene and have a preview of this scene.+> IMG: Two nodes connected (This is the basic unit of StudyCrafter logic.)
-==== 6Duplicate Scene ====+If you released the mouse button at the wrong time, you'll instead see the Node Menu again. This is a second way of creating new nodes. If you create a node this way, it will immediately be connected to the node you started from.
-Clicking the Duplicate button creates an exact duplicate of the selected scene.+> IMG: Node Menu Redux (This can be quicker, but there'​s no right or wrong.)
-==== 7Edit Script ====+After connecting the Start node and Dialogue node, click the Play button again. Your text will now appear.
-Click the edit button to enter the Scriptor Screen of this scene.+> IMG: Text appears (Congratulations,​ you're officially a script-writer.)
-==== 8Delete Scene ====+Let's make a small change. The Dialogue box has a drop-down menu called '​speaker'​. If you open this by clicking on it, you see a list of all characters and assets in the current scene. You can assign the dialogue to any of them, and StudyCrafter will make it look as though that character / object speaks your text.
-By clicking ​the Delete Button, you can delete ​the scene you select.+Assign ​the dialogue to <​character>​ by selecting <​character_ID>​ in the menu. If you are ever unsure which identifier belongs to which character or asset, you can go back to the Layout tab and look up their formal ID in the selection bar on the left.
-==== 9Rename Scene ====+Now click the Play tab again.
-Click the name of a scene in the Project Screen, the name of the scene will be editable, enter the name you want to rename the scene.+> IMG: Character speaks (This is how StudyCrafter assigns text to characters.)
-{{:​rename_scene.png?200|}}+Now assign the dialogue to <​object>​ instead (using <​object_ID>​) and click the Play tab again.
-==== 10Name A Scene ====+> IMG: Object speaks (StudyCrafter makes no difference hereIf you want your objects to '​speak',​ you can do that.)
-You can name your project before you create ​it but entering ​the name in this box.+Create a second Dialogue node and connect ​it to the Start node (using either method). You'll see that only one node can be connected to Start. To use multiple nodes, they must instead be connected to each other.
-==== 11New Scene ====+For each node, grey balls on the left mean '​input'​ and grey balls on the right mean '​output'​. StudyCrafter always starts at the Start node, and follows connections from input to output, essentially following the arrows from start to finish.
-Clicking ​the New Scene Button will create a new scene in this projectand you will enter this new scene directlyIf you go back to the Project Screenyou will see the new scene just created.+Connect ​the right-output of the second Dialogue node to the left-input of the first Dialogue node. Give the second node textthen click the Play button. You'll see that the text of the second Dialogue node appears first: Since you linked the Start node to this one, StudyCrafter reads it firstIn order to move from that Dialogue node to the next oneand see the second line of text, you'll have to click the left mouse button anywhere on the screen.
-==== 12Scearch Your Scenes ====+> IMG: Nodes (Any number of nodes can be connected this way.)
-You can also find your scenes ​by searching them by namesEntering the name in this box, the scene you search will be listed.+All nodes, including the starting node, can be moved around ​by clicking and dragging any part that isn't an output ball or a button/text box/​dropdown menuYou can order your nodes however you want: The yellow arrow lines determine ​the logic of your scene.
-==== 13Report Bug ====+If you want more space to place nodes, you can zoom out (and in) using your mouse wheel, or the + and - buttons in the bottom right. You can also move the screen around by clicking and dragging empty space. The third button in the lower right centers the screen on your project'​s Start node, allowing you to find it again if you get '​lost'​.
-If you find anything wrong in StudyCrafterclick the Report Bug button to let us know. It will be very helpful if you report your problems to us. You can leave a description of the problems here as what's shown in the image below.+> IMG: far zoom (Note that if you zoom out too far, the content of the nodes gets replaced with a simple descriptor. You'll have to zoom in again to be able to interact.)
-{{:​report_bug.png?400|}}+So far, all you've created is dialogue a player can click through. Now, let's give the player a choice option. Create an orange '​Player Choice'​ node connected to the second Dialogue node.
-====14Back to Project ====+> IMG: Player choice (This is one way that could look, though again, your nodes can be ordered any way.)
-Click this button to go back to the Homepage.+A simple choice gives the player two button ​options: 1 and 2. You'll see that the Player Choice node has two right-output balls, meaning it can link to two different nodes. If the player picks option 1, the game continues on the line from option 1, ignoring node 2. If the player picks option 2, node 1 is ignored instead.
-------------------------------------------------+Create two new Dialogue nodes, give them text, and connect one to option 1 and one to option 2. Also enter text in the two '​button text' boxes; this text will show up on the buttons.
-===== StudyCrafter Layout Tab =====+> IMG: Player Choice done (Follow this example or write your own text.)
-The Layout Tab is where you can edit your scene. You can put characters or assets in the scene, change their sizes or positions. Everything ​you change will be displayed in real-time.+Now play your project again, and verify that both choices lead to the dialogue ​you wrote for them.
-{{:​layout_tab.png?​1000|}} +====Step 4: Multiple scenes====
-==== 1. Scene Preview ​====+
-Here you can have a preview of the scene. ​Anything changed with the scene will be directly shown here.+Right now, your StudyCrafter project only has one scene. ​You can create and connect multiple scenes. Each scene has its own background, characters, assets, and script, and you can use the script to define when one scene should move into another.
-{{::​sticker_added.png?​400|}} +Click on the 'Back To Project'​ button in the top rightThis takes you back to the Project Editor, which now contains your first scene.
-==== 2Assets & Characters Button =====+
-Click these two buttons to switch between ​assets and characters.+> IMG: Project Editor redux (The image on the scene will match the assets and characters ​you chose.)
-==== 3Search Bar ====+Create a second scene by clicking the New Scene button. As before, this will create a scene consisting of only the standard background.
-You can search ​the assets or characters you want by putting ​the names here.+Now click the Back To Project button to go back to the Project Editor. Note that the new scene you made has a black background: Until you make your first change, StudyCrafter shows '​empty'​ scenes like this.
-==== 4Assets & Characters ====+> IMG: Project Editor Expanded (If you did make any changes before going back, you'll see a snapshot of the new scene.)
-In this area, StudyScrafter provides a few Assets ​and Characters, click the tiles you want to add it to the sceneYou can change the size and position of the stickers after you added it to the scene.+Click on the first scene and go into the Scriptor tabCreate a new 'End Scene' node and connect ​it to the open Dialogue node following Player Choice 1.
-==== 5Page Number ====+> IMG: End Scene added (This is what that will look like.)
-Click the number below to switch to other pages.+Click the Play button. You'll notice that if you select choice 1, the game ends after reaching this dialogue. An End Scene node that is not otherwise specified ends the game; this is the only way a game can end.
 +> IMG: End Game (If you don't add one of these, the game will just keep running statically.)
-==== 6Zoom in & Zoom out ====+Now go back into the Scriptor and select the drop-down menu on the End Scene node. This will allow you to transition from this scene to any other scene. Select Scene 2.
-Click the "​+"​ button to zoom in and the "​-"​ button to zoom out.+Now play the game again. After making choice 1, your game will transition into the second scene. After this transition, the game will use the logic in Scene 2's Scriptor, starting from that scene'​s Start node.
-==== 7. Layers ​====+====End==== 
 +Congratulations! You now know the basics of: Creating scenes, adding and modifying assets in a scene, creating scripts to animate the scene, and linking scenes into each other or ending the game. You now have enough of a basis in StudyCrafter to explore by yourself. Try adding different kinds of nodes, or playing with the options this tutorial didn't explicitly address!
-Click the Layer Button to show the layer functions tab. It should be looked like the image below.+__If you want more guidance, consider ​the following options:__
-{{::layer_tab.png?400|}}+[[tutorial2|Tutorial 2]] will show you how to design a scientific experiment in StudyCrafter,​ using a well-known scientific study as an exampleThe Decoy Effect.
-=== 1Flip Horizontal ===+[[tutorial3|Tutorial 3]] will teach you what variables are in the context of StudyCrafter,​ and how to use these variables to change your scenes, do calculations,​ and carry player choices from scene to scene.
-=== 2Flip Vertical ===+[[tutorial4|Tutorial 4]] will teach you the ins and outs of every StudyCrafter node.
-=== 3Rotate 90° ===+The [[user_guide|User Guide]] contains descriptive guides on every aspect of StudyCrafterIf you want to quickly look up the details or attributes of a specific thing, look here!
-=== 4Rotate 180° ===+Finally, if the terminology in this tutorial or anywhere else on the wiki is unclear, the [[glossary|Glossary]] explains everything.
-=== 5. Move Backward ​===+-------------------------------------------------- 
 +===== Tutorial 3: Variable Editing =====
-=== 6Move to Back ===+This tutorial course will teach you how variables work in StudyCrafterAfter completing this tutorial, you will know:
-=== 7. Move Forward ===+  * How to edit asset variables in the Layout tab 
 +  * How to edit asset variables in the Scriptor tab 
 +  * How to create and use your own global variables 
 +  * How to use variables to track player progress across scenes
-=== 8. Move to Front ===+Prerequisites:​
-=== 9Lock Button ===+  * You installed the latest version of StudyCrafter (which can be found [[repository|here]]). 
 +  * You have an understanding of the basics of StudyCrafter (from completing [[tutorial1|Tutorial 1]] or otherwise)
-=== 10Edit Assets ​Variables ===+==== Step 1. Variables ​in the Layout tab ====
-==== 8Report Bug ====+Launch StudyCrafter,​ if you haven'​t already. Create a new project, and create a new scene inside that project. Make sure you are looking at the Layout tab.
-If you find anything wrong in StudyCrafter,​ click the Report Bug button to let us know. It will be very helpful if you report your problems to us. You can leave a description of the problems here as what's shown in the image below.+> IMG: Basic Layout Tab
-==== 9Hide & Expand Button ====+Add a character asset to the scene.
-You can click this arrow button ​to hide the Assets & Character tabIf it is already hiddenclick this button again to expand it.+Now, click on the '​Layers' ​button ​in the top right cornerDoing so opens up the Layers bar on t he rightas seen below:
-==== 10. Research Button ====+> IMG: Layers Bar
-Click the Research Button ​to enter the [[testpage#​StudyCrafter Research Tab|Research Screen]].+The Layers bar contains a list of every character, object, and background asset in the scene. Note that the bar also has several buttons ​to manipulate (mirror/​flip/​reorder) assets. This tutorial does not address these buttons, but you can learn about them in the User Guide <​link>​.
-==== 11Scripter Button ====+Select your character on the main screen. Notice that when you do this, the character'​s name in the Layers bar lights up red
-Click the Scriptor Button to enter the [[testpage#​StudyCrafter Scriptor Tab|Scriptor Screen]].+> IMG: red name (The combination of 'red name' and '​yellow box around ​the asset' reliably show you which asset you have selected.)
-==== 12Play Button ====+Double-click the character'​s name in the list. You can now rename the asset.
-Click the Play Button to play from the scene you select.+> IMG: rename asset (You can give your assets identifiers that better fit the study you are designing.)
-==== 13. Back to Project ====+Click the Edit button next to the asset'​s name. This will open up a list of variables for the asset.
-Click this button to go back to [[testpage#​StudyCrafter Project Screen|Project Screen]].+> IMG: asset variables
------------------------------------------------- +Asset variables describe the asset'​s look and position on the screen. All of these variables can be edited by moving/​resizing the asset the way you're used to, but they can also be edited directly in this screen.
-===== StudyCrafter Scriptor Tab =====+
-The Scriptor Tab is where you can deal with the logic in each scene by creating nodesYou can set player choicesdialogues or anything you want in the Scriptor Tab but simply creating nodes and set relationships between them.+The variables POS.X and POS.Y determine ​the asset'​s horizontal and vertical position, relevant to the center of the screenSetting POS.X to 0 means the asset is in the horizontal center: Positive values move it to the rightnegative values move it to the left. Setting POS.Y to 0 means the asset is in the vertical center: Positive values move it up, negative values move it down.
-{{::​scriptor_screen.png?1000|}}+Try editing your asset'​s POS.X and POS.Y values directly, and see what this does to its location on-screen.
-==== 1Variables ====+> IMG: asset POS.X edited (Compared to the above screen, this asset has moved 100 pixels to the left.)
-{{::​variables_tab.png?400|}}+The variables WIDTH and HEIGHT determine the asset'​s width and height, in pixels. Changing these is identical to resizing the asset using the outline boxes.
-=== 1Set Values ===+Try editing your asset'​s WIDTH and HEIGHT directly. ​ Note that unlike using the corner boxes directly, editing WIDTH does not automatically change HEIGHT to match or vice versa. If you want to resize while maintaining aspect ratio, be careful.
-You can set values of each variable by simply double-clicking it, and put whatever you want in the value box.+> IMG: poorly stretched asset (And remember that StudyCrafter currently has no UNDO function.)
-=== 2Create New Variables ===+The variable ROTATION determines the asset'​s rotation, in degrees. The number is relative to the asset'​s '​normal'​ upright position: A rotation of 0 means the asset looks the way it looks in the asset bar.
-{{::​variable_create.png?400|}}+Try editing your asset'​s ROTATION directly. Note that since the rotation is measured in degrees, you can use 90, 180, and 270 to tilt or flip your asset easily.
-==Name== ​+> IMG: 360 rotation (A rotation of 360 will get you nothing, as expected.)
-The name of a variable ​should explain itself. Try to make an easy one which explains what it does.+The variable ​COLOR determines the 'color mask' that is put on your asset, given as a hexadecimal RGB value.
-==Type== ​+Think of this as a colored lens you see the asset through. Normally, this variable has value FFFFFF, which means '​white':​ The colors of your asset are shown through a white lens. If you change if to 00000, '​black',​ your asset will be drawn entirely in black. By changing the value to other numbers, you can give your asset a different color tint; examples include FF0000 ('​red'​),​ 00FF00 ('​green'​),​ and 0000FF ('​blue'​). you can 
-The type of a variable includes integer, float, string, boolean and none. It depends on what this variable means in this project.+Try recoloring your asset.
-==Initial Value== ​+> IMG: yellow (You can find hexadecimal color value charts online, or you can practice.)
-You can set an initial value of your variables here, it should fit the type of the variable.+The variable IMAGE determines which picture is loaded into your asset. This variable ​determines what your asset looks like.
-==Kind== ​+You can change this variable, but be careful: You have to change it to another image name that is loaded into StudyCrafter. If you give a non-existent or incorrect name, StudyCrafter will simply load a white square in the dimensions of your asset.
-The kind of variables includes independent variables, dependent variables, none variables or null variables. Independent variables and dependent variables are the most important ones to your project, they are related to each other and your results. Null variables are variables ​that are in your research but neither independent or dependent. Null variables are those you create in the project, which is not related to your research but infects your StudyCrafter project.+> IMG: incorrect load (This is what that looks like.)
-=== 3Hide & Expand Variables ===+> IMG: color load (Unless you gave the asset a color mask with COLOR, in which case StudyCrafter will still apply that mask to the white square.)
-Click this little triangle buttons, you can hide or expand global and object variable group. For the variables ​in these groups, ​you can also click those buttons to hide or expand ​the values of each variable.+Try changing ​the image loaded ​in your asset. If you have trouble finding the right file names, try adding another asset into your scene, then copying that asset'​s given name into the IMAGE variable.
-=== 4Hide & Expand Tab ===+> IMG: change 1 (Say we add this asset, and copy its name into the first asset'​s field, and then hit ENTER...)
-Click this arrow button to hide the variable tabWhen the tab is hiddenclick it again to expand it.+> IMG: change 2 (...and prestonow we have two identical assets.)
 +Finally, each asset has a hidden variable called VISIBLE, which determines whether or not the asset is shown on-screen. In the Layout tab, this is not part of the variable list, but is instead shown as the eye button left of the asset name.
-==== 2Nodes ====+If the eye button is black, VISIBLE is TRUE, and the asset is shown. If the eye button is white, VISIBLE is FALSE, and the asset is not shown.
-You can drag the dot on the node to create a new node as shown in the image below:+Try making your asset invisible and visible again.
-{{::nodes_new.png?400|}}+> IMGAsset visible (Now you see me.)
-=== 1Dialogue ===+> IMG: Asset invisible (Now you don't.)
-=== 2Action ===+This concludes all the variables you can edit in the Layout tab.
-=== 3Player Choice ​===+==== Step 2Variables in the Scriptor tab ====
-=== 4Branch ===+Move to the Scriptor tab.
-=== 5. Set Variable ​===+On the left side of the screen, you will see the Variable ​bar (if the bar is not visible yet, click the Variable button on the top left side). This bar tracks two kinds of variables. '​Object Variables'​ are the variables associated with all your assets (characters,​ objects, backgrounds). These are the same variables we treated in Step 1.
-=== 6Sound ===+Each asset is represented as a grey bar with the asset name. By clicking on that bar, you expand or retract the list of variables.
-=== 7. End Scene ===+> IMG: asset variables
-=== 8Event ===+There are two changes in this list compared to the Layout Tab list. First, the variable VISIBLE is explict here. Second, each asset has a variable called PARENT, which <does something???>​.
-=== 9Make Function ===+You cannot directly edit Object Variables in the Scriptor tab. If you want to do this, return to the Layout tab and edit the variables there.
-=== 10Call Function ===+The second type of variable '​Global Variables',​ is unique to the Scriptor tab. These variables are not associated with any assets. Your project does not have any at the start. If you want to use Global Variables, you'll have to make them.
-==== 3Center Button ====+Click the Create Variable button at the bottom left to create a Global Variable.
-Click this button to reset all the nodes to the center.+> IMG: global variable creation (You should see this screen.)
-==== 4Mini-Map (?) ====+Each variable has four attributes. First, the variable has a name: This is how you will refer to it in your study. Second, ​ the variable has a type, which determines what sort of information it can track. StudyCrafter has four types of variables: Float <​def>,​ Integer <​def>,​ String <​def>,​ and Boolean <def>.
-The Mini-Map shows the thumbnail of the scene. Move your mouse above it, it will show the coordinates you are pointing.+(If the type selection list has type '​Null'​please do not use it.)
-{{:mini_map.png?400|}}+Third, each variable has an initial valueThe value that the variable holds at the start of each game. If you do not enter anything here, the value will be 0 (for numerical variables), FALSE (for booleans), or the character "​0"​ (for strings).
-==== 5Report Bug ====+Fourth, each variable has a kind, which determines which role it plays in your research study. For more on this, see Tutorial 2 <​link>​.
-If you find anything wrong in StudyCrafter,​ click the Report Bug button ​to let us knowIt will be very helpful if you report your problems to us. You can leave description of the problems here as what's shown in the image below.+Let's create a simple variable ​to count somethingCreate ​new variable called COUNTER. Give it type '​integer',​ initial value 0, and kind 'none'.
-==== 6Research Button ====+> IMG: COUNTER (If you do this correctly, the variable should appear in the Global Variables list.)
-Click the Research Button ​to enter the [[testpage#​StudyCrafter Research Tab|Research Screen]].+Now, return ​to the Project Editor. Create a second scene, ​enter it, and go to the Scriptor tab. You will see that the Global Variable COUNTER exists in this scene as well. Global variables are scene-independent:​ Each global variable exists through your entire project.
-==== 7Layout Button ====+> IMG: scene 2 global (All the Object Variables related to objects in scene 1 are not visible here, since these are not relevant to scene 2.)
-Click the Layout Button to enter the [[testpage#​StudyCrafter Layout Tab|Layout Screen]].+Unlike Object Variables, Global Variables can be edited directly. Double-click anywhere on the row containing ​the COUNTER variable. Doing so will open the Create Variable screen again, for this variable.
-==== 8. Play the Scene ====+> IMG: Create Counter (You can see that the screen immediately fills out all details for the COUNTER variable.)
-Click this button to enter the play screen of the scene and have a preview of this scene.+Change the initial value of COUNTER to 3, and click the SET button. Be careful ​to not click the DELETE button: This will delete ​the variable instead.
-==== 9. Back to Project ​====+Return ​to the Project ​Editor, enter Scene 1, and select the Scriptor tab. The COUNTER variable now has a value of 3. Changes to global variables always carry over to any part of the project, regardless of where the variables was originally created.
-Click this button to go back to [[testpage#​StudyCrafter Project Screen|Project Screen]].+==== Step 3Changing variables with nodes ====
-==== 10. Zoom in & Zoom out ====+In order to change variables ​in-game (over time or as a reaction to player actions), you will need to use the Set Variable node. Create this node now, and connect it to the Start node.
-Click the "​+"​ button to zoom in and the "​-"​ button to zoom out.+> IMG: Set Variable node (This is where we should be right now.)
------------------------------------------------- +You enter two things into a Set Variable node. In the first text box, VARIABLE NAME, you enter the name of the variable you want to change. You can do this in two ways: You can type the variable name directly, or you can click-and-drag the variable name from the Variables bar into the text box.
-===== StudyCrafter Research Tab =====+
-[TODO]+> IMG: click variable
 +> IMG: drag variable
 +> IMG: drop variable
 +If you choose to type the variable name, remember two things. First, all variable names are inside curly brackets, {like this}. And second, there is a difference between Global and Object variables. ​ You reference Global variables by name directly: To use our COUNTER variable, type {COUNTER} in the box.
 +Object variables must be connected to their object; simply using {posx} would not be enough, as every single object has a '​posx'​ variable. You must add the asset name like follows: {assetname.posx} .
 +> IMG: assetname.visible (This holds for every variable. In general, you can reference everything using {assetname.variableyouwant}.)
 +In the second text box, NEW VALUE, you enter the value you want the variable to take. This value should be appropriate for your variable: You cannot enter a String or True/False value for an integer-type variable.
 +In the VARIABLE NAME box, type or drag the '​height'​ variable of your asset. In the NEW VALUE box, type 200. Then, run your game in the Play tab.
 +> IMG: tall asset (You'​ll notice the change happens immediately:​ SET VARIABLE boxes don't take any time to process.)
 +Go back to the Scriptor and check the variable values for your asset. You'll see that the asset'​s HEIGHT value is back to normal. Variable changes done by Set Variable nodes only ever stay valid in-game; when the game is ended, everything is set back to starting conditions.
 +This is true for both Object and Global variables. If you want to, try this out by changing the COUNTER variable with Set Variable and running the game.
 +==== Step 4. Advanced variable logic ====
 +All the above has taught you how to set variable values. We will now look at how to use variables.
 +Delete the Set Variable node. Connect a Dialogue to the Start node, and enter the following text: The value of COUNTER is: {COUNTER}. Now run the game.
 +> IMG: run the game  (How does it KNOW)
 +Whenever you use an established variable name within curly brackets, StudyCrafter will replace this with the value of that variable during run time. Again, this works for both Object and Global variables.
 +Change the Dialogue node so that your character asset is speaking, and change the text to: My height is: {assetname.height} pixels. Use your asset'​s actual name in place of '​assetname'​. Now run the game again.
 +> IMG: say height (And just like that, your character is telling you about their height.)
 +You can also use variables for math and decision making.
 +Create a Set Variable node. For VARIABLE NAME, enter {assetname.height}. For NEW VALUE, enter {assetname.height}*2. Connect this box to the Dialogue box, and run the game.
 +> IMG: large asset (A lot taller all of a sudden.)
 +Variable math and logic is also in certain advanced nodes, like the Branch node. To learn more about these nodes, and how to use variables to structure, track, and control your game, check out Tutorial 4: Different Nodes <​link>​.
 +==== End ====
 +Congratulations! You now know the basics of: Editing Object variables in the Layout tab, creating Global variables in the Scriptor tab, changing variables with the Set Variable node, and using variable values in other nodes.
 +Variables provide a wide range of options to make your game more complicated,​ exciting, interesting,​ and useful. Experiment to see what you can achieve with them!
 +__If you want more guidance, consider the following options:__
 +[[tutorial2|Tutorial 2]] will show you how to design a scientific experiment in StudyCrafter,​ using a well-known scientific study as an example: The Decoy Effect.
 +[[tutorial4|Tutorial 4]] will teach you the ins and outs of every StudyCrafter node.
 +The [[user_guide|User Guide]] contains descriptive guides on every aspect of StudyCrafter. If you want to quickly look up the details or attributes of a specific thing, look here!
 +Finally, if the terminology in this tutorial or anywhere else on the wiki is unclear, the [[glossary|Glossary]] explains everything.
testpage.1565809698.txt.gz · Last modified: 2019/08/14 12:08 by ding.che