Subcategories

• Tutorials

  Step-by-step guide for building mini-projects

  68
  Topics
  78
  Posts

  

  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.

  rr.gif

   
   

  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:

  Role Assignment: We will make ChatGPT play the role of “game master”, which will help us run the game. 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. 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:

  c65b39b5-d1cb-44ca-b84d-e2995a78a07e-image.png

   
  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:

  f7b38de4-e892-467b-a33b-b599fe61bd88-image.png

   
  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):

  7861510b-c460-4742-afe4-abd99e04be90-image.png

   

  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:

  rr.gif

   
   

  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:

  rr.gif

   
   

  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.

  rr.gif

   
  This is what the console panel looks like afterward:

  2beafea9-397e-4f43-9de4-e84022123b56-image.png

   
  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:

  078aaad8-3000-41d0-9e0d-486efca5636b-image.png

   
  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.

  rr.gif

   
   

  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:

  d657f525-48fe-444a-85e6-8402d64ef7d8-image.png

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

  rr.gif

   
   

  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:

  c507bfdc-5f2a-4e8d-a922-75dd491b6016-image.png

   
  This is the result:

   
  rr.gif

   
   

  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.

  2b4755c4-6a43-4fba-b37e-a745445fdb04-image.png

   
  Here is the result:

  rr.gif

   
   

  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.
   

  rr.gif

   
  Now the dog sprite has both highlighting and question answering:

  rr.gif

   
   

  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.

  rr.gif

   
  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”.

  eb040f01-49e9-460a-bdb3-9c5bdef90b8b-image.png

   
  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:

  1634806b-7d2a-4f26-9ac6-8e724ed29e5d-image.png

   
  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:

  86ea1f63-77a0-40a1-8851-e3910453ce28-image.png

   
   

  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:

  bb7828b6-58e1-4856-8481-57725a98c645-image.png

   
  Here is the output:

  rr.gif

   
   

  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.

  9ef592c5-f586-4761-bc02-7a85002115d0-image.png

   

  rr.gif

   
   

  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.

  85b00bee-3da2-4567-b9c8-1b60c3536887-image.png

   
  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.

  c2362e6e-699a-4b6d-83ff-20505b087ab4-image.png

   
  Here is the final demo of the game:

  rr.gif

   
   

  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.
• 2D Blocks

  How to use each 2D block

  123
  Topics
  124
  Posts

  

  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:

  343093f7-ba1a-4421-8ab2-e46c9ce38091-image.png

   
  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.

  f37cea01-b7a2-40d6-81ac-858c9b6abc65-image.png

   

  rg.gif

   
   

  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:

  f2136a5f-1cf7-41f1-b499-46620805a3db-image.png

    The above program will produce this:

  a1e74875-90e7-4a88-87ea-fb84bc93a065-image.png

   
   

  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:

  rg2.gif

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

  rg3.gif

• 3D Blocks

  How to use each 3D block

  87
  Topics
  87
  Posts

  

  Introduction

  When there are many objects in a 3D scene, you can iterate through all of them using the following block:

  ace349ad-1982-4da7-b3cc-db38788da9f8-image.png

   
  This block will go through all 3D objects created in the current sprite one by one. The variable dropdown allows you to specify a variable, so that the name of each object is stored in this variable one by one.

  You can use this variable to select that object inside this loop, and then add other blocks to manipulate that object.

   
   

  Example Program

   
  This program will create 3 boxes and move them one by one repeatedly. Note that to move a box, we need to select it as the “sprite object” first, and the “object name” variable tells us the name of each box.

   

  53d80d5c-b1df-4e8c-b203-97b1acb1c949-image.png

   
  This is the result:

  obj.gif

   
  You can try the program here:

  https://play.creaticode.com/projects/3b5253351ee5292751648924
  
  

• Programming

  How to design and develop a solution program

  1
  Topics
  1
  Posts

  

   

  Prerequisite The For-Loop Block The Repeat Block The Repeat Until Block The Forever Block

   

  What are Loops?

  A “loop” is a block for playing other blocks repeatedly. Below are some loop blocks you can use on the CreatiCode playground;

  
   

  What are Nested Loops?

  When you put one loop inside another loop, it becomes a “nested loop”. You can even have a third loop inside the inner loop.

  
   

  How Nested Loops Work?

  When you run a program with a nested loop, the inner (child) loop will work like a normal loop. However, because of the outer (parent) loop, the inner loop itself will be repeated.

  Here is a step-by-step example:

  Step 1: The main loop is played.

  
   

  Step 2: The Nested loop is started.

  
   

  Step 3: The blocks inside the nested loop are played until the condition of the nested loop is completed.

  
   

  Step 4: The blocks after the nested loop are played (if there are any).

  
   

  Step 5: The main loop is restarted.

  Note: All of the above 5 steps keep repeating until the condition of the main loop is completed.

  For example, as shown below, “repeat until ” is the nested loop, which keeps the monkey moving until it touches the edge of the stage. And “repeat (5)” is the main loop which repeats the nested loop 5 times.

  
   

  Use of Nested Loops

  We use Nested loops when we want to repeat multiple blocks at the same time, until multiple conditions are completed.

  For example, as shown below, nested loops are used to make the monkey move and eat bananas at the same time.

  
   

• Tools

  Design tools, math tools, collaboration tools, programming tools

  18
  Topics
  18
  Posts

  

   

  Introduction

  In the CreatiCode playground, approved teacher users can view and manage student users, such as reviewing their projects directly.

   
   

  Teacher Account Setup Application

  To act as a teacher user to other users, the teacher account needs to be approved and configured. Please send an email titled “Teacher Account Setup” to info@mail.com, and provide the following information:

  Your Full Name School/Organization Name Your email: The email you will use to log in as the teacher user. Normally it should be an official email from your school or organization, such as “yourname@bestschool.org”, otherwise please explain why you can’t use an official email. Teacher Status Verification: this can be the link to a page on your school/organization’s official website that shows your name or email, or some other official document that verifies you are a teacher at the school Student List: the list of student emails that you wish to set as your student users, such as a CSV file or a google sprite sheet. These emails need to be the emails that these students use to log into the CreatiCode playground. You can also specify the class name for each student. Note that the student emails should also come from the same domain as your teacher email, such as “xxxx@bestschool.org”. This serves as an additional safeguard to protect student information.

  Once we have verified your teacher status, your account will be configured to be the teacher to these students

   
   

  Open the “My Students” Page

  As a teacher user, you can visit the “My Stuff” page, and select the “My Students” tab on the bottom left. All your students will be listed on this page:

   
   

  The “My Students” Table

  The table contains 5 columns:

  Number: a sequence number Username: the user name of each student Class: the class that student belongs to. You can use this field to organize students based on their classes. Email: the email for that student Premium: whether this student has premium privilege. if your teacher account is premium, then you can click on the “No” button to assign a premium seat to that student, or click on the “Yes” button to reclaim that seat from that student.

   
   

  Controls at the Top

  Above the student table, there are a few controls you can use:

  Search Box: You can use the student name or class name to filter the student table below.

  Sort By: You can sort the students from A to Z or from Z to A Premium Seat Count: You can check how many premium seats are available for you to assign to students, and also the total number of premium seats your account has.

   
   

  View One Student’s Projects

  You can click on the user name of any student in the table to open that student’s profile page, which includes a few project lists of that student. You can click “View All” to see all the projects on any of these lists.