Print out the target image above, hit preview in the top left of the screen and hold your phone over the target image to see how this experience is going to look.
Difficulty Level: Intermediate
Coding Knowledge Required: Beginner (at least some familiarity)
Time to Complete: 45 - 60 minutes
In this step-by-step tutorial, we will be creating a simple penalty shoot-out game. Using Bezier curves, 3D models, timelines, and scripting, this is the most advanced (and rewarding) tutorial that we have developed so far. We expect that users following along will have watched all the getting started videos and completed at least a few of the other step by step tutorials.
Working through this will introduce multiple functionalities of ZapWorks Studio, showing off the vast potential of the tool and giving you the confidence to start building out even more complex experiences of your own. Best of luck!
##Part 1: Setting up the scene
- Open up Studio and start a New Blank Project, giving it a name and hitting create.
Note: If you haven’t got Studio installed on this computer, you can download it here: my.zap.works/studio.
-
Download the following assets.
-
Import all assets from the ‘2D images’ and ‘3D models’ folders from the downloaded assets into the Studio Media Library. With the 3D models, you’ll have to import the POD files one by one and then drag in the associated textures when the import dialog asks for them.
Note: You do not need to do anything with the animations at this point.
-
Train the tracking image “target-image.jpg” by clicking the plus icon (+) at the top of the Media Library, selecting ‘Train Image File’ and then locating the tracking image within the downloaded assets folder. It should be located BezierFootballAssets > target-image.jpg. The file will now appear in your Media Library as “target-image.jpg.zpt”.
-
Drag the tracking image “target-image.jpg” onto the root node in the Hierarchy from the Media Library.
Note: It will be helpful to switch the view from Upright to Flat (in the top right of the 3D View). Setting this camera view mimics how you would rotate the real target flat on a table. Using the middle widget in the bottom right of the scene, rotate the scene towards you so that the pitch is once again in view.
- Drag the pitch image “pitch.png” as a child to the tracking image from the Media Library.
Note - The tracking image acts as a group.
-
You will now create a new group within the target to contain all the assets for the goal. Right click on the target node and select New > Group and call it “Goal”. Make sure this group is positioned below the pitch.
-
Drag the goalpost 3D model from the Symbol Definitions panel into the Goal group. Within the Properties Panel set the transforms of the goalpost to:
0.02 | -0.06 | 0.03
0.88 | 0.88 | 0.88
90 | 0 | 0
Note: Make sure that you are changing the transforms of the goalpost 3D model and not the Goal group.
-
Drag the “Goalkeeper” 3D model from the Symbol Definitions panel in to the “Goal” group, make sure that it is placed above the goalpost 3D model. Set the transforms to:
0 | 0.1 | 0
0.7| 0.7 | 0.7
90 | 0 | 0
##Part 2: Adding and animating the football
-
Create a new group “Football” within the target image node. Make sure it is placed above the “Goal” group in the Hierarchy.
-
Drag the football 3D model from the Symbol Definition panel into the Football group. Set the transforms of the football 3D model to:
0 | 0 | 0
0.08 | 0.08 | 0.08
0 | 0 | 0
Note: This is not the final position of the football.
-
Right click on the Football group. Select New > Transforms > Bezier. Name the Bezier “leftKickBezier”.
-
Select the leftKickBezier node in the Hierarchy and in the Properties Panel navigate to Bezier > Points and select “Add”. Fill in these point values below:
0 | -0.6 | 0.05
-0.31 | -0.5 | 0.07
-0.53 | -0.24| 0.14
-0.54 | 0.56 | 0.06
More information on Bezier Curves.
- Select the football 3D model in the Hierarchy. In the Properties Panel head to the Transforms section and set RelativeTo to “leftKickBezier”.
Note: The football should now be positioned on the penalty spot.
-
In the Controllers Panel in the bottom left add a new controller by clicking the plus button (+) and call it “penaltyKick”.
-
We are now going to start working with timelines. If you have not yet read the Timelines article, we recommend you do this now and come back to the tutorial. Right click on the new “penaltyKick” controller and create a new timeline called “leftKick”.
-
Select the “leftKick” timeline in the Controllers panel. Click on the leftKickBezier node in the Hierarchy. In the Properties > Distance add the distance value to the controller by clicking the plus button (+) next to it.
- In the Timeline panel, change the length of the “leftKick” timeline to 1500. Make sure to hit enter.
Note: It’s advisable to zoom out of the timeline using the zoom slider in the top right of the timeline view so you can see the entire timeline.
- Set the time to 1500. This will move the timeline handle. With the leftKickBezier node selected, set the distance value in the Properties panel to 1. This will create a transition block between 0-1.
- We are now going to link the two end keyframes. Click and drag to highlight the far end two keyframe diamonds (this should turn them both orange) then right click and select Make Link (L) > With left value.
Note: This will link the two end keyframes. Press play to test how it works.
- Right click on the transition block and select Interpolation > Decelerating.
Note: If you play again, you will see that the ball slows down as it heads towards the goal.
-
We are now going to repeat this process for the right kick. Select the base controller in the Controller panel. Right click on the “Football” group in the Hierarchy and select New > Transforms > Bezier. Name the Bezier “rightKickBezier”.
-
Select the rightKickBezier node and in the Properties panel select “Add” next to points, filling in the values below:
0 | -0.6 | 0.05
0.31 | -0.5 | 0.07
0.53 | -0.24| 0.14
0.54 | 0.56 | 0.06
-
In the Controllers panel, right click on the “penaltyKick” controller, create a new timeline called “rightKick”.
-
Select the “rightKick” controller in the Controllers panel. Now click on the “rightKickBezier” node in the Hierarchy, in the Properties panel add the distance value by clicking the plus icon (+) .
-
Change the length of the “rightKick” timeline to 1500.
-
In the Timeline panel, set the time to 1500. This will move the timeline handle. With the “rightKickBezier” node selected in the Hierarchy, set Properties > Distance to 1. This will create a transition block between 0-1.
- Click and drag to highlight the end two keyframes (this should turn them both orange) then right click and select Make Link (L) > With left value.
Note: This won’t play just yet, as we still need to set the relativeTo.
-
Right click on the transition block of the rightKickBezier distance property and select Interpolation > Decelerating.
-
Click into the base controller in the Controllers panel. Click on the “Football” 3D model node in the Hierarchy. Within the Properties panel navigate to Properties > Transform > relativeTo and set the second value to “rightKickBezier”. Then set relativeToProp value to [1,0].
-
Select the “rightKick” timeline in the Controllers panel and the “Football” 3D model node in the Hierarchy. Within the Properties panel, add the relativeToProp property to the timeline by clicking the (+) icon.
-
In the Timeline panel, set the time to -1. This will move the timeline handle. In the Properties panel, change the relativeToProp value to [0,1] and hit enter.
Note: This moves the football relative to the right bezier curve allowing it to move along the curve. We do not need to change anything in the “leftKick” timeline as this uses the default relativeToProp value.
Note: You can now play left kick and right kick animations by clicking into the different controllers and pressing play in the Timeline panel.
##Part 3: Adding animations to the goalkeeper
-
We are now going to animate the goalkeeper 3D model. Find and open the file “GK_animation.txt” in the asset folder that you downloaded earlier. It should be located BezierFootballAssets > 3D Models > Goalkeeper > GK_animation.txt. We are looking for the following animation frame references.
IDLE = 300-335
R/LOW = 1-60
L/LOW = 149-207
Note: Animation frame references define the different animations which have been baked into a 3D model.
- Right click on the “Goalkeeper” subsymbol in the Symbol Definitions panel. Do not enter the subsymbol. Select “Properties” and navigate to the Animation tab. Expand the dialogue box from the bottom corner so you can see the option (+) or (-) new animations.
Click (+) to create 3 new rows and add in the start and end frames for the IDLE, R/LOW and L/LOW animations and click finish.
- You can now test that the animations have been uploaded. Double click on the goalkeeper subsymbol to enter it. Go into the Controllers panel and your animations should appear. Press play on each individually to preview.
Note: To make sure these animations play at the correct speed in the parent symbol, we will use their length as it appears in the subsymbol. We will use 2500 for the left and right dive and 1500 for the idle.
- Return to the parent subsymbol by clicking the cog in the top left of the screen, above the Hierarchy. We are now going to add those goalkeeper animations to our existing timelines: leftKick and rightKick.
Note: We are going to make the goalkeeper dive the wrong way each time.
- Select the “leftKick” timeline in the Controllers panel. Set the time to -1 and change the length of the timeline to 2500. This will make it match the length of the goalkeeper dive animation.
With the “goalkeeper” node selected in the Hierarchy, in Properties > References > Animations panel add the animations property to the timeline by clicking the plus icon (+). In the animations dropdown select “R/LOW”. Next change the value to 0 and hit enter.
- In the Timeline panel set the time to 2500. In Properties > Animations set R/LOW to 2499 and hit enter. Back in the Timeline panel, click and drag over the final two diamonds. Right click and select Make Link (L) > with left value.
Note: Creating a link between the final 2 keyframes prevents the timeline jumping back to the default value at the end of the time period.
- Select the “rightKick” timeline in the Controllers panel. In the Timeline panel, set the time to -1. Change the length of the timeline to 2500.
With the goalkeeper node selected in the Hierarchy set the animations dropdown to L/LOW and change the value to 0.
- Set the time to 2500. In Properties > Animations set L/LOW to 2457 and hit enter. Click and drag over the final two diamonds. Right click and select Make Link (L) > with left value.
-
We will now add a new timeline for the goalkeeper being idle. In the Hierarchy, select the Goalkeeper node. In the Controllers panel right click on the Penalty Kick controller and add a new timeline called “idle”.
-
Set the length of the timeline to 1500. Set the time to -1. Select the idle animation from the dropdown in the Properties panel and set it to 0.
-
Set the time to 1500. Set idle animation to 1499. Highlight the two end keyframes, right click and select Make Left Link (L) > with left value.
-
Click the loop button (the one to the right of the length value) to ensure goalkeeper idle animation loops.
##Part 4: Creating buttons to play the experience
- We are now going to create buttons which will allow our player to trigger the animations. Add a new Group to the target image. Name it “Buttons”. Make sure the Buttons group is below the Goal group in the Hierarchy.
-
In the Controllers panel, make sure the base controller is selected. Drag the left-icon and right-icon buttons from the Media Library into the Buttons group.
-
Select the left button in the Hierarchy and set its transforms to:
position -0.3 | -0.85 | 0.15
scale 0.2 | 0.2 | 1
rotation 45 | 0 | 0 -
Select the right button in the Hierarchy and set its transforms to:
position 0.3 | -0.85 | 0.15
scale 0.2 | 0.2 | 1
rotation 45 | 0 | 0
- Select the “show” script in the Hierarchy. Click and drag the “idle” timeline from the Controllers panel into the show script. Make sure that you have placed the timeline within the parent show function. When letting go, select “play” from the dropdown menu.
Note: We do this so the idle animation plays from the animation.
-
Create pointerdown scripts on both the left icon and right icon by right clicking on the node and selecting New > Script > pointerdown.
-
With the left icon pointerdown script selected, drag the left kick timeline from the controllers panel and into the left icon pointerdown script inside the function and set it to play.
-
Drag the “leftkick” timeline into the left icon pointerdown script again but this time place it outside of the function and select add event handler > Complete.
-
Drag the “leftkick” timeline into the left icon pointerdown script for a 3rd time, this time within the complete function. Set it to reset.
-
Drag in the “idle” timeline within the complete function below the reset line and select “play”.
Note: This process plays the timeline when you click the button. Then it resets to start from the beginning, returning the model to the idle animation.
-
We are now going to repeat this process for the right button. With the right icon pointerdown script selected, drag the “rightKick” timeline from the Controllers panel and into the right icon pointerdown script. Place it inside the function and set it to play.
-
Drag the “rightKick” timeline into the right icon pointerdown script again but this time place it outside of the function and select add event handler > Complete.
-
Drag the “rightKick” timeline into the right icon pointerdown script for a 3rd time, this time within the complete function and set it to reset.
-
Drag in the “idle” timeline within the complete function below the reset line and select “play”.
- We are now going to hide the buttons when the game is being played.
Select the “leftKick” timeline in the Controller panel. Set the time handle to -1. Select the buttons group in the Hierarchy. In the Appearance and Behaviour sections of the property panel add Visible and Enabled using the plus icon (+) and then uncheck both tick boxes next to them.
Note: This means the user cannot see or interact with the buttons
- Do the same as the step before but this time for the “rightKick” timeline, setting the time handle to -1 and unchecking the visible and enabled checkboxes.
##Part 5: Preview and publish
- That’s it! Your experience should now be playable. Print out the target image below, hit preview in the top left of the screen and hold your phone over the target image to see how it looks.
Note: Remember you will need to change the zapcode on your target image. We have included the psd of the target image in the download folder here.
