testpage
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | Next revision Both sides next revision | ||
|
testpage [2019/09/10 07:57] dgmschouten [Tutorial 3: Variable Editing] |
testpage [2019/09/10 07:59] dgmschouten |
||
|---|---|---|---|
| Line 15: | Line 15: | ||
| Launch StudyCrafter, if you haven't already. Once it finishes loading, you should see the main screen. If this is your first time using StudyCrafter, that screen will look like this: | Launch StudyCrafter, if you haven't already. Once it finishes loading, you should see the main screen. If this is your first time using StudyCrafter, that screen will look like this: | ||
| - | IMG: StudyCrafter Main Screen (Over the course of working with StudyCrafter, this screen will be filled up with all the projects you make.) | + | > IMG: StudyCrafter Main Screen (Over the course of working with StudyCrafter, this screen will be filled up with all the projects you make.) |
| Click the New Project button to create a new blank StudyCrafter project. Then, click anywhere on that project except the three buttons at the top to go into the Project Editor. | Click the New Project button to create a new blank StudyCrafter project. Then, click anywhere on that project except the three buttons at the top to go into the Project Editor. | ||
| - | IMG: Project Editor (A completely blank project, waiting to be made.) | + | > IMG: Project Editor (A completely blank project, waiting to be made.) |
| 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. | 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. | ||
| - | IMG: Name/description | + | > IMG: Name/description |
| ====Step 2: The Layout Editor==== | ====Step 2: The Layout Editor==== | ||
| Line 31: | Line 31: | ||
| Click on the New Scene button. StudyCrafter now automatically takes you into the Scene Editor. | 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.) | + | > IMG: Scene Editor (This is where you'll do most of the hard work making projects.) |
| 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. | 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. | ||
| Line 41: | Line 41: | ||
| Add <certain character> to the scene. | Add <certain character> to the scene. | ||
| - | IMG: Character to scene (Your screen should look like this.) | + | > IMG: Character to scene (Your screen should look like this.) |
| Even after placing, you can move the character around the screen by clicking in the center and dragging them around. | Even after placing, you can move the character around the screen by clicking in the center and dragging them around. | ||
| Line 47: | Line 47: | ||
| 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. | 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. | ||
| - | IMG: Character moved, resized, rotated (You have complete control over where your character goes.) | + | > IMG: Character moved, resized, rotated (You have complete control over where your character goes.) |
| 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. | 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. | ||
| Line 53: | Line 53: | ||
| 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. | 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. | ||
| - | IMG: Character off-screen (<character> will be visible, but <character> will not.) | + | > IMG: Character off-screen (<character> will be visible, but <character> will not.) |
| 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. | 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. | ||
| Line 59: | Line 59: | ||
| 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. | 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. | ||
| - | IMG: Object (If your scene has more characters at this point, that's not a problem.) | + | > IMG: Object (If your scene has more characters at this point, that's not a problem.) |
| 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. | 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. | ||
| Line 65: | Line 65: | ||
| 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. | 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. | ||
| - | IMG: New Background (Simple backgrounds are easy to work with. Complex backgrounds can help establish a scene. Always use the right background for your game.) | + | > IMG: New Background (Simple backgrounds are easy to work with. Complex backgrounds can help establish a scene. Always use the right background for your game.) |
| If you click on the Play button in the top, you can see what your current game screen looks like when it is actually played. Use this to make sure everything looks right! | If you click on the Play button in the top, you can see what your current game screen looks like when it is actually played. Use this to make sure everything looks right! | ||
| - | IMG: Play Screen 1 (Since the play screen is larger than the Layout Tab screen, try to make sure that all your characters and assets still look good.) | + | > IMG: Play Screen 1 (Since the play screen is larger than the Layout Tab screen, try to make sure that all your characters and assets still look good.) |
| ====Step 3: The Scriptor==== | ====Step 3: The Scriptor==== | ||
| Line 75: | Line 75: | ||
| Now that you know how to add characters, objects, and backgrounds to a scene, let's learn what we can do with them. Click on 'Scriptor' in the top of the screen, which will take you to the Scriptor tab. | Now that you know how to add characters, objects, and backgrounds to a scene, let's learn what we can do with them. Click on 'Scriptor' in the top of the screen, which will take you to the Scriptor tab. | ||
| - | IMG: Scriptor tab (This is what that will look like initially.) | + | > IMG: Scriptor 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. | 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. | ||
| Line 83: | Line 83: | ||
| Double-click anywhere on the main screen (the black grid) to show the Node Menu, which looks like this: | Double-click anywhere on the main screen (the black grid) to show the Node Menu, which looks like this: | ||
| - | IMG: Node Menu (Everything you can do to make StudyCrafter tick.) | + | > IMG: Node Menu (Everything you can do to make StudyCrafter tick.) |
| First, let's make some text appear. Create a Dialogue node: | First, let's make some text appear. Create a Dialogue node: | ||
| - | IMG: Empty Dialogue Node (All nodes are color-coded; dialogue nodes are always green.) | + | > IMG: Empty Dialogue Node (All nodes are color-coded; dialogue nodes are always green.) |
| Click the 'enter text' box and write a text of your choosing. | Click the 'enter text' box and write a text of your choosing. | ||
| - | IMG: Hello World box (Feel free to be more creative than this.) | + | > IMG: Hello World box (Feel free to be more creative than this.) |
| Click the Play button at the top again to be taken to your scene. You'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. | Click the Play button at the top again to be taken to your scene. You'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. | ||
| Line 99: | Line 99: | ||
| If you did this correctly, the two nodes are now connected, like this. | If you did this correctly, the two nodes are now connected, like this. | ||
| - | IMG: Two nodes connected (This is the basic unit of StudyCrafter logic.) | + | > IMG: Two nodes connected (This is the basic unit of StudyCrafter logic.) |
| 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. | 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. | ||
| - | IMG: Node Menu Redux (This can be quicker, but there's no right or wrong.) | + | > IMG: Node Menu Redux (This can be quicker, but there's no right or wrong.) |
| After connecting the Start node and Dialogue node, click the Play button again. Your text will now appear. | After connecting the Start node and Dialogue node, click the Play button again. Your text will now appear. | ||
| - | IMG: Text appears (Congratulations, you're officially a script-writer.) | + | > IMG: Text appears (Congratulations, you're officially a script-writer.) |
| 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. | 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. | ||
| Line 115: | Line 115: | ||
| Now click the Play tab again. | Now click the Play tab again. | ||
| - | IMG: Character speaks (This is how StudyCrafter assigns text to characters.) | + | > IMG: Character speaks (This is how StudyCrafter assigns text to characters.) |
| Now assign the dialogue to <object> instead (using <object_ID>) and click the Play tab again. | Now assign the dialogue to <object> instead (using <object_ID>) and click the Play tab again. | ||
| - | IMG: Object speaks (StudyCrafter makes no difference here. If you want your objects to 'speak', you can do that.) | + | > IMG: Object speaks (StudyCrafter makes no difference here. If you want your objects to 'speak', you can do that.) |
| 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. | 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. | ||
| Line 127: | Line 127: | ||
| Connect the right-output of the second Dialogue node to the left-input of the first Dialogue node. Give the second node text, then 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 first. In order to move from that Dialogue node to the next one, and see the second line of text, you'll have to click the left mouse button anywhere on the screen. | Connect the right-output of the second Dialogue node to the left-input of the first Dialogue node. Give the second node text, then 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 first. In order to move from that Dialogue node to the next one, and see the second line of text, you'll have to click the left mouse button anywhere on the screen. | ||
| - | IMG: Nodes (Any number of nodes can be connected this way.) | + | > IMG: Nodes (Any number of nodes can be connected this way.) |
| 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 menu. You can order your nodes however you want: The yellow arrow lines determine the logic of your scene. | 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 menu. You can order your nodes however you want: The yellow arrow lines determine the logic of your scene. | ||
| Line 133: | Line 133: | ||
| 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 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'. | ||
| - | 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.) | + | > 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.) |
| 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. | 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. | ||
| - | IMG: Player choice (This is one way that could look, though again, your nodes can be ordered any way.) | + | > IMG: Player choice (This is one way that could look, though again, your nodes can be ordered any way.) |
| 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. | 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. | ||
| Line 143: | Line 143: | ||
| 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. | 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. | ||
| - | IMG: Player Choice done (Follow this example or write your own text.) | + | > IMG: Player Choice done (Follow this example or write your own text.) |
| Now play your project again, and verify that both choices lead to the dialogue you wrote for them. | Now play your project again, and verify that both choices lead to the dialogue you wrote for them. | ||
| Line 153: | Line 153: | ||
| Click on the 'Back To Project' button in the top right. This takes you back to the Project Editor, which now contains your first scene. | Click on the 'Back To Project' button in the top right. This takes you back to the Project Editor, which now contains your first scene. | ||
| - | IMG: Project Editor redux (The image on the scene will match the assets and characters you chose.) | + | > IMG: Project Editor redux (The image on the scene will match the assets and characters you chose.) |
| Create a second scene by clicking the New Scene button. As before, this will create a scene consisting of only the standard background. | Create a second scene by clicking the New Scene button. As before, this will create a scene consisting of only the standard background. | ||
| Line 159: | Line 159: | ||
| 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. | 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. | ||
| - | IMG: Project Editor Expanded (If you did make any changes before going back, you'll see a snapshot of the new scene.) | + | > IMG: Project Editor Expanded (If you did make any changes before going back, you'll see a snapshot of the new scene.) |
| Click on the first scene and go into the Scriptor tab. Create a new 'End Scene' node and connect it to the open Dialogue node following Player Choice 1. | Click on the first scene and go into the Scriptor tab. Create a new 'End Scene' node and connect it to the open Dialogue node following Player Choice 1. | ||
| - | IMG: End Scene added (This is what that will look like.) | + | > IMG: End Scene added (This is what that will look like.) |
| 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. | 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.) | + | > IMG: End Game (If you don't add one of these, the game will just keep running statically.) |
| 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. | 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. | ||
| Line 387: | Line 387: | ||
| If you want more guidance, consider the following options: | If you want more guidance, consider the following options: | ||
| - | > 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. | + | * [[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. | |
| - | > 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. | |
| - | > The 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 explains everything. | + | |
testpage.txt · Last modified: 2019/09/10 08:48 by dgmschouten