Using Playground

In our Playground application you can play around with challenges and events and see them from your users perspective. It’s a good place to simulate if challenges and events are working as you intended before adding User Interface or code to your application.

In the Apps list of the Admin Panel you will see a Playground button next to your app. Click on the button to open the Playground application already configured for your game. If you open Playground application manually, you’ll need to Copy & Paste API key and App-Id manually from Admin Panel to the Playground applications App Settings.

Info

Per default the Playground creates a random user id, but in this guide we set our own User Id. Change it to 1234 and click on the Update button.

Challenges

Click on the Challenges tab in the Playground application. You’ll see the challenges you have created in Admin Panel. You should see a 5 Lines of same color entry there, and an unlock button.

Challenges in the Playground application

Challenges in the Playground application

  1. Click on the Unlock button - the challenge is now unlocked and will show an Activate button
  2. Click on the Activate button - the challenge is now active and listens for incoming events and shows the goal and the current counter.
  3. As a test, change the User Id to 12345 and click on Update. As you can see, the challenges are now reflecting that users state. As this user did not do anything yet, challenges are locked and need to be unlocked
  4. Change back the user id (should be 1234) and click on Update to bring back the active challenges for user 1234
  5. Now, reload your browser window. The Playground will end up in the same state. That is, because app info is persisted in your browsers localStorage and user data is persistent in the SCILL cloud.

Sending events

Ok, time for sending some events and checking out if our challenge works.

On the right side, you can see the Event editor. Here, you can define an event and send it to the SCILL backend. From the list, choose destroy-item event and set the item_type to sameColor. Set the session_id to 1234 also.

Tip

The session id is a way to group events. All events within the same session id will increment the counter of listening challenges (i.e. activated challenges that have set the same event name). Whenever a new session id comes in, the counter will start from scratch.

We want the “Complete 10 lines” challenge to start from 0 whenever a new game starts. Therefore, in Tetris, whenever a new game starts, we update the session id which will reset the challenge counter. If we want to have a persistent counter we can just set the session id to the same value as the user id - which will never change.

Sending a destroy-item event

Sending a destroy-item event

The counter should now show 1/5. You can also see the payload the realtime update system triggered within the Playground application. If the counter did not change, check out the challenge in Admin Panel and make sure it’s event name is set to destroy-enemy and that the challenge is still active (i.e. shows a progress bar).

If nothing works, please contact support.

After sending an event, the Playground application shows some more details about the event. First, it displays the JSON payload used to send an event. You can also see Code generated for you in various programming languages that you can just copy and paste into your code base to send that event.

Second, it shows the response from the server.

Code generated for you to send the event

Code generated for you to send the event

  1. Click a couple of times on the Send Event button until you have reached the challenges goal. Clicking 5 times should be enough - as our goal is set to 5.
  2. Once you have reached the goal, the challenges state will change and will show Claim Button
  3. Click on the Claim Button. Now, up to you, but often you now give the user some sort of an reward, being it an award or some experience points. Use the various fields provided in the challenge editor in Admin Panel to set a value that you can use in your application to distinguish rewards.
  4. Once a challenge is claimed, the Webhook is triggered and allows you to either activate the reward in the backend or send it to the client via Websockets to activate the reward in the client itself.
  5. As the challenge is repeatable it will come now back in Unlock state. If the challenge is not repeatable, it will now be gone (for this user id).

Congratulations: You have gone through a full SCILL challenges lifecyle! That was easy, right!

Battle Passes

Battle passes are built on top of the challenge system. If you have created a battle pass already, you can test your battle pass in the Playground application. Click on the Battle Passes tab in the Playground application. You’ll see the battle passes you have created in Admin Panel.

Battle Passes in the Playground application

Battle Passes in the Playground application

  1. Click on the Unlock button - the battle pass will be unlocked and will be available in the lower section “Unlocked” Battle Passes.
  2. Click on the battle pass that just appeared in the lower section and click on the Show button to display that Battle Pass.
  3. A new tab will be displayed and activated named “Battle Pass” with a nice representation of your battle pass.
  4. It displays the levels, challenges and rewards set and will update the state in real-time whenever something changes in the SCILL cloud.
Battle Pass in the playground application

Battle Pass in the playground application