Craftsman Play is a powerful tool that allows you to design not only simple and engaging ads with interactive elements but also full interactive games. In this tutorial, we will guide you step-by-step on how to design a complete interactive game called 'Whack-a-Mole' in Craftsman Play using Interactions, Animations, and the Timeline.
Before we start, you will need to download all the assets provided in this article and save them to your computer. For simplicity, we will use plain text for many actions, but feel free to create and use your own graphics to make the game more exciting.
Let's start by creating the four main scenes of the game: Start Scene, Game Scene, Win Scene, and Lose Scene. Create these four scenes, name them accordingly, and we will customize each one later.
In the Start Scene, add some text displaying the name of the game and a call to action (CTA) like "Tap Here to Play." Next, add the game background and board behind the CTA text. Set up a Hotspot over the button/board area to capture user interactions over a specified area, rather than adding them directly to specific layers. Configure the interaction to Start Next Scene when a Single Tap gesture is detected and direct it to the Game Scene.
In the Game Scene, add the background and then position one mole image over the top left hole in the background. We will add only one mole initially to apply all the required settings before duplicating the layer. This approach saves us from having to apply the required settings to each layer manually.
Add an On Enter Animation using the "Scale up" animation to make it look like the mole is coming out of the hole. Reduce the animation duration to only 0.25 seconds to make it happen quickly. Next, add an On Exit Animation using the "Scale down" animation so that it appears the mole is receding back into its hole. Again, reduce the animation duration to 0.25 seconds.
Now, add an Interaction where a Single Tap on the Mole triggers the Start Next Scene event, navigating to the Win Scene. Once done, duplicate and position the mole over each hole.
Open the Game Scene layer settings and set the Duration to 10 seconds. Since we have 9 moles, this duration works well for showing each mole once.
Open the Timeline and set the entry and exit points for each mole with precision. It's crucial not to give the user too much time to react! Randomly set each mole to appear and disappear in 0.6 seconds by dragging the layer's start and end indicators on the timeline.
With each mole's visibility configured, the game scene is set up! The only thing left is to ensure that if the player misses all the moles, the ad automatically navigates to the Lose Scene. Select the Game Scene, go into the Playback Properties section, and configure the "On Finish" property to Start Next Scene with the destination set to Lose Scene.
In the Win and Lose Scenes, add text specifying whether the user won or lost. This is also an opportunity to create relevant CTAs as needed. Remember, you could forgo these scenes altogether and simply direct the player to a landing page URL should they win or lose!
To test the game, click the Preview Icon in the top bar menu and try to win!
Congratulations! You have successfully created a full interactive game ad in Craftsman Play. By leveraging Interactions, Animations, and the Timeline, you can design engaging and interactive game ads that capture your audience's attention. Feel free to experiment and create your own unique games using the principles and techniques explained in this tutorial. Happy gaming!
Create, automate, innovate, and turn your creative needs into successful marketing with Craftsman Studio
