Key Topics Covered

• Initializing 3D scenes
• Using spheres
• Updating textures
• Setting object speeds
• Highlighting objects

 
 

Introduction

In this tutorial, you will learn to create a spinning Earth:

 
 

Step 1 - Initialize An Empty Scene

First, create a new project, and load an empty scene using the “initialize 3D scene” block.

By default, it will create an empty scene with nothing but a blue background:

 
 

Step 2 - Set the Background Starfield

Next, use the “set sky” block to create a better-looking backdrop:

You should get a starfield with the Sun on the right.

 
 

Step 3 - Add a Big Sphere

Next, add a sphere with a large diameter of 10000 to the scene. Don’t worry about its color yet.

The sphere would look brighter on the side that faces the Sun.

 
 

Step 4 - Add Earth Texture

Now we need to update the sphere’s texture with the Earth. Add the “update texture” block, click the “Please select” input box, then search for “Earth” in the library window.

 
 

Step 5 - Flip the Earth Texture

You might have noticed an issue with the texture: the continents are upside-down. We need to flip the texture vertically to correct this issue. This can be done by changing the vertical repeat count from 1 to -1.

 
 

Step 6 - Make the Earth Spin

To make the Earth object spin, we can use the “set speed” block. Note that the Earth needs to be spinning from “left” to "right, so the “Z-rotation” speed needs to be negative.

Now your Earth object should be spinning slowly.

 
 

Step 7 - Highlight Around the Earth

Lastly, to make the Earth object glow in blue lights, we can create a new highlight layer, then add the sphere to that layer.

Now your Earth object should carry a blue light around it.

 

Next Steps

You can try to use a similar method to build other projects. Here are some example ideas:

• A Different Planet: You can change Earth to other planets like Mars;
• A Spinning Trophy: You can try to make a trophy object spin and shine.

@bruhisch-gmail said in What are reward points doing?:

And what can I do if I got rewarded?

We are still experimenting with a few options. Will announce more details in the future.

Introduction

A radio button is also called an option button. It is actually a group of buttons, and only one of the buttons in a group can be selected. If you select any button, then the previously selected button in this group will become unselected. Radio buttons are most useful when you need to give the user a few choices, but only want the user to pick one of them.

To add a group of radio buttons, use the following block:

 
Parameters:

• The 6 inputs allow us to specify up to 6 different choices. If you only want to offer 3 options, then fill in the first 3 input fields.
• The radio buttons can be arranged vertically or horizontaly.
• You can specify the position and size of the radio button group
• Lastly, you can give this group a name.

 
For example, the following program adds 2 groups of radio buttons. These 2 groups are independent of each other.

 

 
 

Set Value To a Radio Button Group

To make sure one of the radio buttons is selected by default, you can use the “set value to widget” block. You have to use one of the options as the new value:

  The above program will produce this:

 
 

Handle Value Changes

To make your program “reactive”, you can run some code whenever the value of the radio button group changes. To do that, you need to use the “when widget changes” block to handle the change event, and use the “value of” block to read the currently selected option of the group.

For example, the following program sets a different color effect based on the user’s selection:

 
Similarly, the following program changes the sprite’s direction based on the second radio button group:

Introduction

Checkboxes are very often used in apps to allow the user to quickly input their answers to “yes/no” type of questions or configure settings on certain options.

To add a checkbox, you can use the following block:

 
X and Y are the positions of the checkbox. The last input is the name of the checkbox, which can be used to refer to this checkbox later.

 
 

Checkbox + Label

To show the user the meaning of each checkbox, we can add a label next to the checkbox. For example, this program would add a checkbox for the user to specify whether something is visible or not:

 
 

Set the Value of a Checkbox

Usually, we may want to set a checkbox to be checked or unchecked by default. This can be done right after we add a checkbox. We can use the “set value to” block: a value of 0 will make the checkbox unchecked, and 1 will make it checked:

 
 

React to Value Changes

Whenever the user clicks the checkbox, we can handle that event using the “when widget changed” block, and read the updated value of the checkbox widget.

For example, this program will use the checkbox to control whether the sprite is shown or hidden:

Introduction

In some apps, the user needs to specify a date. For example, to make a reservation on a day, or add an event to a calendar on a day. You can use the date picker widget to allow the user to pick a date, instead of typing it.

 
 

Add a Date Picker

You can use the following block to add a date picker widget centered at the given x/y position:

 
It will start with a default value of today’s date, and you can pick any other date:

 
 

Handle Date Selection

When the user has chosen a new date, you can use the “when widget changes” hat-block to handle this event. The updated date value will be stored in the “value of widget” block. For example, we can make the sprite say the newly selected date using these 2 blocks:

 
 

Setting a Date Value

If you do not want the initial date to be today’s value, you can change it using the “set value to” block:

@bruhisch-gmail

That’s for rewarding another user. It’s a beta feature that we are still developing and testing.

@anton-5k8 Thanks for the heads up!

@anton-5k8 Thanks!

@anton-5k8

Thanks for bringing this to our attention. How did you do that?

Introduction

 
Traditionally, AI characters in games are fairly “boring”. They usually say the same sentences repeatedly, because they are driven by predefined “scripts” written by the game developers.

That problem can now be fixed using ChatGPT. ChatGPT can help our game characters to talk to users in natural languages, which will make the games much more interesting and unpredictable.

In this tutorial, we will build a simple game called “Who’s the Spy?”. The player will talk to a few AI characters to guess who is the spy, and we will use ChatGPT to generate answers for these characters.

 
 

Step 1 - Remix the Template Project

 
Please start by remixing the following project, which contains 4 sprites that we will use: a doctor and 3 animal agents (a dog, a reindeer and a monkey).

https://play.creaticode.com/projects/31abbb3f6b05f826173310d1

 
 

Step 2 - Prepare the Game Description for ChatGPT

 
When the player starts the game, we first need to explain the game to ChatGPT. The description should include a few parts:

1. Role Assignment: We will make ChatGPT play the role of “game master”, which will help us run the game.
2. Game Context: We will tell ChatGPT this is a guessing game, and what’s the back story. ChatGPT will then help us maintain this storyline throughout the game.
3. Game Rules: We will need to give ChatGPT some very detailed rules on what it should and should not do. Otherwise, the player could easily trick ChatGPT to reveal the answer.

 
Here is an example game description:

---

You are the “game master” running a game named “Who’s the Spy”.

Context:

There is a secret lab run by the “doctor”, and the doctor works with 3 smart assistants (dog, reindeer and monkey). Recently, the blueprint of a revolutionary, world-changing robot was stolen from the lab. Rumors suggest that one of the animal agents has gone rogue and is the spy who stole the design. The doctor has invited the player to help find out who’s the spy. Somehow the security cameras were not working, so we can not rely on that.

Instruction:

Randomly pick one of the three animal assistants as the spy. Only you and the spy know who is the spy. The player can ask the doctor or any assistant any question. You will come up with the answer on behalf of them. Note that the spy might lie. When you answer, always use this format:

dog: it is not me.

The game ends when the player makes a guess, and you will reveal who’s the spy after that.

---

 
Note that we are giving ChatGPT a specific format for answering our questions: “dog: it is not me.”. The reason is that ChatGPT may give us answers from any of the characters, so to make it easier to process its response, we need the response to be well-formatted.

 
 

Step 3 - Send Game Description to ChatGPT

 
Now let’s send the game description to ChatGPT. We can add the following code in the “Doctor” sprite:

 
We are using a “system” request, which carries a stronger weight than a normal request. We will store the response from ChatGPT in the “response” variable.

Now please copy the game description into the system request block. Recall that you can use a comment box to help if you would like to edit the description.

 
 

Step 4 - Print Out ChatGPT’s Response for Debugging

 
To review ChatGPT’s responses while developing the project, we can simply print the response in the console panel like this:

 
When you run the project, it will take a while, and you may see a response like this (try a few times if you don’t):

 

This is happening because ChatGPT is trying to give a very long response and reached the token limit. For example, it might be repeating the game description to show that it gets it, or it might even start to generate some example conversations between the player and the characters.

We should try to avoid it for 2 reasons:

• We don’t need ChatGPT to generate any responses yet since we won’t show it to the player;
• The longer the response, the longer we have to make the player wait.

 
To avoid this issue, the solution is very simple. We just need to modify our prompt to tell ChatGPT how to respond. For example, we can append this sentence at the end of the system request message:

---

Now you say the word “Ready” and wait for the player to ask a question.

---

 
This is a commonly used technique to make ChatGPT say as little as possible. If you run the project again, it should get the full response very quickly:

 
 

Step 5 - Greet the Player

 
Now that ChatGPT is ready, we also need to tell the player about the game. We can ask the “Doctor” to greet the player and explain how to play the game. For example, we can add a “say” block with the following words:

---

Thanks for coming, Detective! As we discussed on the phone, a blueprint of a highly secretive robot has been stolen, and I believe one of my three assistants is the spy who took it. You can click on any of us to ask a question.

---

This is what you would get:

 
 

Step 6 - Click the Doctor to Ask a Question

 
Now let’s allow the player to click on the Doctor to ask a question. Specifically, when the player clicks the Doctor sprite, it asks the player to input the question. We can use the “print to console” block again to review the answer. Note that it may be a bit confusing that the “answer” is the player’s input, not the answer from ChatGPT.

 
This is what the console panel looks like afterward:

 
As shown, if the user did not input anything, then the “answer” block will just be empty.

 
 

Step 7 - Get ChatGPT’s answer

 

Now let’s send the user input to ChatGPT, so it will generate an answer for the Doctor character. We should only do it if the user input is not empty:

 
Explanations:

• We are joining the words "Doctor, " with the user’s input, so ChatGPT knows we are talking to the Doctor.
• We are using the “waiting” mode, so we will not run the next block until we get the full response from ChatGPT stored in the “response” variable.
• The session type is “continue” since we want ChatGPT to remember the game description we gave it before.

 
Now our doctor is talking to us, and the conversation is completely natural and unscripted. In fact, as the game developer, we don’t even know the answer at this point, since we have asked ChatGPT to secretly pick an animal as the spy.

 
 

Step 8 - Clean Up ChatGPT’s Answer

 

Currently, ChatGPT’s answer starts with “Doctor:”. That’s good to know for us (the game developer), but we should not show that to the player. We can remove it this way: we split the response into 2 parts using the “:” as the separator, then we only show the second part to the player:

 
Now the doctor’s answer will not contain the “Doctor:” prefix:

 
 

Step 9 - Highlight the Doctor by Mouse

 

Since the game is played by clicking on the characters, it is common to highlight a character when the mouse pointer is over that character, so the player knows what is clickable. We can trigger this using the “when touching mouse pointer” block. To highlight a sprite, we just need to set its “brightness” to a positive number. We can also play a sound when the doctor is highlighted:

 
This is the result:

 

 
 

Step 10 - Remove the Highlight

 

When the mouse pointer is no longer touching the doctor, we should remove the highlight. We can use a “wait until” block that keeps on checking if the sprite is no longer touching the mouse pointer. After that, we reset the brightness to 0.

 
Here is the result:

 
 

Step 11 - Copy Code to the Dog

 

By this time, we are done with changing the Doctor. We can reuse a big chunk of the code in the other sprites by “copy” and “paste”. Let’s start with the dog first. The only thing we need to change is the name of the sprite when we send the question to ChatGPT. We also need to add the “Hit 5” sound to the dog sprite.
 

 
Now the dog sprite has both highlighting and question answering:

 
 

Step 12 - Copy Code to the Reindeer and Monkey

 

Now please make similar changes to the Reindeer and Monkey sprites. Don’t forget to change the character name when you send the request to ChatGPT.

 
 

Step 13 - Hide the Speech Bubble

 

There is a new issue: when the player switches to talk to a different sprite, the previous sprite may still be showing the speech bubble.

 
To fix this issue, we need to ask all sprites to hide their speech bubbles whenever any sprite is clicked. This can be done by broadcasting a message to all sprites when a sprite is clicked, and waiting for the message to be handled. When receiving this message, the sprite just needs to say “nothing” to hide the speech bubble. In case the sprite is asking for user input, we should also make it hide the question by “stop asking”.

 
Note that this change needs to be done to all 4 sprites.

 
 

Step 14 - A Button to Submit the Final Answer

 

At this point, the player can keep chatting with all the characters to investigate the case. We just need to provide a way for the player to submit the final answer.

First, let’s switch to the Stage, and add a new button when the project starts:

 
Don’t forget you can use the “Widget Position” tool to help you adjust the button position and size.

This is what the button looks like:

 
 

Step 15 - Show the Options

 

When the player clicks the “Answer” button, we need to show a few radio buttons for the player to select. Besides the 3 animals, we should give the user an option to take a step back and think about it more:

 
Here is the output:

 
 

Step 16 - Handle Player Selection

 

To handle the player’s selection, we can watch for the “click” event of the radio buttons. The player’s selection can be retrieved using the “value of widget” block. If the player has chosen to think about it more, we should simply remove the radio button group.

 

 
 

Step 17 - Submit Player Selection to ChatGPT

 

If the player has picked one of the three animals, then we will submit it as the answer to ChatGPT, and ask it to tell us whether that’s correct.

 
Note that we are addressing the “Game Master” since only it can make the final call on the game result.

 
 

Step 18 - Display the Final Result

 

Now for the last step, we will use a textbox to display the response from ChatGPT. We will make sure the textbox is big enough to show the entire response. We will also remove the other widgets so the player can not re-submit the answer.

 
Here is the final demo of the game:

 
 

Creative Ideas

 

Here are some ideas worth exploring based on the project:

• The doctor sometimes refers to himself as “Dcotor”, not “me”. Think about how to improve the prompt to avoid that.
• If the player asks a question to more than one character, such as “Everyone, where were you at that time?”, we need to show all the answers.
• You can use one of the text-to-speech blocks to make the characters speak to the player.
• You can change the characters and the background stories of the game, such as a stolen book from the library, or a gift box sent from a secret friend. You can even use historical figures to play the game.

Introduction

You have learned how to use ChatGPT to build smart chatbots. However, it can be used in many other types of projects, and the interface does not have to be a chat window.

In this tutorial, you will learn to build a smart “quiz writer”. The user can specify any topic, then the program will use ChatGPT to help generate a quiz question and also evaluate the user’s answer.

 
 

Step 1 - An Empty Project

Create a new project, and name it “ChatGPT- Quiz Writer”. Delete the sprite with the dog, and we will just use the “Empty1” sprite for coding.

 
 

Step 2 - The Topic Input

First, let’s add a label that says “Topic”, and an input textbox for the user to write the topic. We’ll name these 2 widgets “topiclabel” and “topicinput”.

 
They will look like this:
 

 
 

Step 3 - Move Widgets Using the “Widget Position” Tool

Now we need to move these 2 widgets to the top row of the stage window, so we can add other widgets below them. This can be easily done using the “Widget Position” tool like this:

 
You will find the X/Y/Width/Height values of the 2 blocks are automatically changed for us, so the next time you run the program, the widgets will directly appear in the new positions:

 
Of course, you can still change the position and size numbers manually at any time.

 
 

Step 4 - Add a “Go” Button

Next, we will add another button that says “Go”, which will tell ChatGPT to generate the quiz.

 
By default, the button will appear at the center. Please use the “Widget Position” tool to place it in the top right like this:

 

 
Your program should be similar to this afterward:

 
 

Step 5 - Add the Question Box

Now we need to add a big textbox to show the quiz generated by ChatGPT. It should allow multiple lines of text but does not allow any user input (“read-only”). Practice using the widget position tool to position this textbox.

 

 
 

Step 6 - 2 New Custom Blocks

Before we add more widgets, it looks like this stack of blocks may be getting too tall. Therefore, it is a good time to define 2 new custom blocks to help organize the program.

Please define 2 new blocks “add question widgets” and “add answer widgets”, and run them in the main stack. We will also move all the existing blocks into the definition of “add question widgets”.

 
 

Step 7 - 4 Answer Buttons

Now we will add blocks to add 4 buttons in the definition of “add answer widgets”. Their names are simply A/B/C/D.

 

 
They look like this:

 
 

Step 8 - The Feedback Box

When we click one of the 4 buttons, we will ask ChatGPT to tell us if we got it correctly. So we need to add another textbox at the bottom to show ChatGPT’s feedback. Please add it as multi-line and read-only.

 
Now the interface is ready:

 
 

Step 9 - Compose Request to ChatGPT

Suppose the user inputs a topic at the top, then clicks the “Go” button. At this point, we need to compose a request and send it to ChatGPT. The request should include what the user wrote as well. We can write our request first, then join it with the user’s input.

To store our request, we can define a variable “request”, and set its value when the “Go” button is clicked:

 
 

Step 10 - Send Request to ChatGPT in Streaming Mode

Now we are ready to let ChatGPT do the magic and give us a random question. To show the question as soon as possible, we will use the “streaming” mode. To allow a fairly complex question, we can set the max length to 400.

Also, this should be a new chat, since each time we click “Go”, we do not need ChatGPT to remember the previous questions. If we use the continue mode, then after a few questions, we will reach the token limit of ChatGPT, and have to restart.

We will need to make another new variable “question” to hold the question generated by ChatGPT.

 

 
 

Step 11 - Show the Question

Now we need to show the question as ChatGPT generates it. We will use a “repeat until” loop to keep updating the question box with the value of the “question” variable. You can copy the emoji for the checkmark here (may look different on different browsers):

 
Now we can test if ChatGPT will generate the question properly:

 
 

Step 12 - Handle User Answer

When the user clicks on one of the 4 answer buttons, we need to ask ChatGPT about it. To do that, define a new block named “check answer”, which takes the “answer” as input:

 

 
Now we can run this new block when the user clicks the 4 buttons:

 
 

Step 13 - Compose the Feedback Request

In the “check answer” block’s definition, we need to compose a new request to ChatGPT: we will tell ChatGPT what’s the question since we are not asking ChatGPT to remember it. We also need to tell it the user’s answer, then ask ChatGPT whether it is correct.

We can compose a 4-part request using the “join” block like this:

 
 

Step 14 - Display the Feedback from ChatGPT

The remaining work is very similar to how we get the question from ChatGPT. We send the request, then display the result in the “feedback” textbox. You can duplicate the previous blocks and make some changes to them:

 

 

Now we have a working version of the quiz writer!

 
 

Step 15 - Highlight the User’s Answer

To make our quiz writer easy to use, we need to improve the user interface a bit. The most important change is to highlight the answer selected by the user.

We can change that button’s background color when it is clicked like this:

 
 

Step 16 - Reset Button Colors

When the user generates a new quiz question, we need to reset the color of all the answer buttons back to unselected. We can do it when the “Go” button is clicked:

 
 

Step 17 - Testing

Finally, you need to do some more testing to make sure the user experience is smooth. Here is a final demo:

 
 

Step 18 - Further Improvements

This quiz writer is a very basic version. There are many areas where you can improve it. Here are some ideas for you to try:

• Improve the Prompt: The current request we send to ChatGPT is very simple, so sometimes we may get strange answers from ChatGPT. For example, in this feedback, the answer is wrong, but ChatGPt still says “Great job!” because it is a “great question”. Try to improve the request to avoid such issues.

• Better Colors: You can change the text style/color and background color of all the widgets to make the interface look better.
• Keeping Track of Scores: You can help the user keep track of how many questions were asked, and how many were answered correctly.
• Pre-generated Questions: Sometimes you may not want to generate the questions on the fly, since you have no control over what ChatGPT may ask. If you have a fixed topic, then you can ask ChatGPT to generate 20 questions for you, and store these questions and their answers in a list or table. Then when the user runs the program, you can randomly select the question from your pool of questions.