Posts made by info-creaticode

@jeffreyrb03-gmail

Great question. The email we use is “user-606@creaticode.iam.gserviceaccount.com”

@011830-0a42ef84

That’s strange. Are you trying at school? It might be blocked. Can you share a screenshot?

@011830-0a42ef84

There are many ways to do this. For example, you can use a table or list to store all the speed and start time of all sprites.

This might be a good time to ask XO for specific coding suggestions.

@011830-0a42ef84

No, you can use

point towards (firstX) (firstY) in (0) seconds

@011830-0a42ef84

In that case, you will need to write some code to check which target sprite is currently the first. One way to do it is to look at how far it has traveled. Since every target starts at the same point, the one that has traveled the most should be the leading one, right?

And assuming each target has a constant speed, you just need to multiply its speed with how long it has been moving to get its total travel distance. The one target with the longest travel distance must be the leading one.

@011830-0a42ef84

Can you define what’s the “first” target? Do you want it to lock at the most front-running target? Or the one with the earliest born time?

In general, you should not use the “point towards [sprite]” block in this case. Instead, you can try to compare all the targets based on your rule, and find out which target is the one you want to point at, then you can save its x/y positions into 2 variables.

Then, in the gun sprite, use the point towards x y in N seconds block.

@s9205307-810c679a

For a game like Tetris, you don’t really need very complex physics, right? The key is collision detection, which can be done using the original “touching” blocks. So it might be overkill to use the physics engine for it.

@tyller_

Maybe we can give you a new block to create a new tab in a google sheet?

Or, can you create a new google sheet with 100 tabs manually, then recycle them when a new user comes? It depends on whether each user needs to keep the data permanently.

@tyller_

One way is to make sure each user writes to a unique column, so 2 users will never write into the same column, and each user can read the columns of other users to get their latest messages.

@jeffreyrb03-gmail

The database blocks have limits on the number of rows. For your use case, probably a better storage is Google Sheets. You can store much more data there.

@jeffreyrb03-gmail

Please wait a bit longer and test it after we release a new version of that block. If it still doesn’t work for your use case, we can discuss adding a different block.

@jeffreyrb03-gmail

We are still working on fixing the issue. It is more about fetching complete data, since many websites using JS to present dynamic content, so it is not as simple as retrieving a static HTML file.

@011830-0a42ef84

What’s the project URL?

@011830-0a42ef84

This is a fun game.

So let’s solve one problem at a time. To limit the rotation speed, you can try to use a loop to repeatedly rotate the sprite a little bit towards the target’s direction.

Here is a demo project:

play.creaticode.com/projects/67351d4fef35162a42f8bc50

As you can see, in a forever loop, we take 3 steps:

1. calculate angle difference between current direction and the desired direction
2. normalize that difference to within -180 and 180
3. rotate for up to the speed limit

This is what you will get as you move the mouse:

@011830-0a42ef84

Can you add some instructions in the project cover page to explain how to play the game? What are the keyboard or mouse controls?

@011830-0a42ef84

Thanks. So, which sprite and which code blocks for that sprite are you trying to improve?

@tyller_

Can you explain what’s the problem/issue you are trying to fix?

Currently, if you publish the project, then no one sees the actual link to the sheet.

@011830-0a42ef84

Can you share the project? Are you saying the target object is moving, and your sprite keeps rotating to face that target, but you don’t want your sprite to rotate too fast?

@tyller_

Maybe you can try to mute the CreatiCode tab when you listen to music?

@011830-0a42ef84

Can you explain a bit more what’s this new block would do? Is it a speed limit on how fast the object can rotate?

Do you think you can try to calculate how many degrees the object will rotate in total? If so, then you can calculate how long it should take based on the desired rotation speed, then you can use the following block to do the rotation:

@tyller_

Is it different from MIT Scratch? This should be inherited from MIT Scratch.

@jeffreyrb03-gmail

Thanks for the detailed suggestion.

We try not to change any feature that’s inherited from MIT Scratch, since we want to make the transition from MIT Scratch to creaticode very smooth. If, for example, a Scratch tutorial talks about a font, but the students see a different menu, then it might cause confusion.

On the other hand, we can definitely try to enhance the font list for widget styling. Your list looks great as a starting point, and we will research if we can add the original Scratch fonts into our list as well.

@catty

Thank you for the feedback. We will look into it.

@jeffreyrb03-gmail

Let’s discuss how we can improve it. Have you tried to set the styling of the background and text?

@s9205307-810c679a

This is a great example of using the multiplayer blocks for chatting.

Not sure if you are aware of this, but all projects with chatting functions must implement content moderation. You can use the “get moderation result for [TEXT]” block in the AI category to check the message before sending it out. If the return value is “Fail”, then that message should be rejected.

Please unshare this project, make this change, then share it again. Thank you.

@011830-0a42ef84

Did you forget to share?

@jeffreyrb03-gmail

Thanks for the detailed feedback. We’ll wait for more discussions in this thread before implementing new notification systems. We want to hear from more users on exactly what type of notifications are most useful.

Introduction

Large language models like ChatGPT are generally “multi-modal,” which means they can not only chat with us in words but also understand images. This is very useful since, in many cases, it is much easier to describe what we need with a picture than words.

In this tutorial, you will build an AI assistant that can see and talk. To use it, the user just needs to take a picture using the camera and then ask the AI assistant any questions about that picture.

 
 

Step 1 - Create a new project

 

On CreatiCode.com, log in and create a new project. Remove the dog sprite, and rename the project to “AI Assistant”.

 
 

Step 2 - Search for or generate a backdrop

 

When the project starts, we will show a nice backdrop to the user to indicate this is an AI assistant.

Switch to the stage and try to add a new backdrop. For example, if you search “a helpful AI assistant”, you can find many interesting backdrops to choose from:

 
You can also generate a new backdrop based on your own idea. For example, suppose we want this assistant to be used as a tourguide, then we can generate the backdrop with a detailed description like this:

a robot tour guide facing the viewer with both arms open, standing in front of a historical site, cartoon style

We will get a new backdrop like this:

 
 

Step 3 - Show 2 buttons when the green flag is clicked

 

Now switch to the empty sprite and add code to show 2 buttons, which will allow the user to pick a camera. The front camera is usually available on touchpads or Chromebooks, while the back camera is usually available on iPads or smartphones.

 
You can use the following code:

 
 

Step 4 - Show camera preview

 

When either button is clicked, we need to show the view from the camera, so that the user can aim at the object or place. The only difference is whether to show the “front” or “back” camera. Since only one of those buttons will be clicked, we can call the camera widget as “camera1” in both cases.

 
 

Step 5 - Prepare to take picture

 

Besides showing the camera preview, we also need to do some other work to prepare to take a picture. Since the work is the same no matter which camera is used, we can define the common work in a new custom block “prepare to take picture”:

 
In that new block’s definition, we will add more blocks to delete the existing buttons (button1 and button2), and add a third button for taking the picture:

 
It will look like this (suppose we want to take a picture of a USB stick):

 
 

Step 6 - Take a picture and show it

 

When the user clicks the “Take a picture” button, we will save the current camera view as a costume image named “c” and show it to the user:

This way, the camera preview and button3 will both be removed, and we will simply show the newly captured costume image.

 
 

Step 7 - Prepare for the user question

 

Next, add a new more blocks below. They will add a new button, which would turn on speech recognition, so the user can ask a question. This is much more convenient than asking the user to type the question, especially on mobile devices. We will also add a textbox to show the question we recognized. The textbox has a transparency of 30% for its background, so that the user can still see the picture they have taken.

For example, it will look like this:

 
 

Step 8 - Recognize the user question

 

When the user clicks “Ask a question”, we will turn on speech recognition and allow the user to talk for up to 8 seconds. This should be long enough for most questions, but you can change the time length shorter or longer. We will then display the recognized text in the text box as a question:

 
You can also use “continuous speech recognition”, and stop recognition when the user has completed a full sentence. To keep it simple, we will just use the time-based cutoff time.

To test it, click the “Ask a question” button, and say your question, such as “what is this?”, and then it will be recognized and displayed in the textbox:

 
 

Step 9 - Ask ChatGPT a question about this image

 

Now we are finally ready to ask ChatGPT to answer the user question based on the image. It actually requires 2 blocks that work together:

1. Attach the costume image to the chat: this step will not send the image to ChatGPT yet. It only stores the image as part of the chat. You can attach more than one image to a chat session, but for this project we just need to attach one image.

2. Send a chat message to ChatGPT: this block will send out the prompt together with the image attached above. We will use a simple prompt: “Answer verbally in 50 words:\n”. The keyword “verbally” ensures ChatGPT’s answer is conversational and not too formal. We are also limiting it to within 50 words to avoid lengthy answers.

After these 2 blocks run, ChatGPT’s answer will be stored in the variable “result”.

 
 

Step 10 - Display and say the answer

 

We will not only show the answer in the textbox but also convert it to speech. This way, users can listen to the answer most of the time, and they only need to read the text if they miss some details.

 
The answer will look like this:

 
 

Extra Challenges

 

This project demonstrates how to combine many useful AI tools into one simple app, but it is kept simple intentionally. Here are some ideas you can explore to enhance this tool further:

• Handle follow-up questions: Allow the users to ask more questions. You need to make sure the costume image is not added again every time. Also, make sure ChatGPT is in “continue” mode, so it has the context of earlier questions.

• Avoid the fixed wait time: Instead of always waiting 8 seconds, you can automatically detect if the user has finished asking the question. Alternatively, you can also use 2 buttons: clicking one button to start speech recognition and clicking another button to stop it.

• Translate it to another language: You can change the tool to your native language if it is not English.

• Customize the prompt: The current prompt is very short and generic. Suppose you want to change this tool to a “homework helper”, then you may need to add more instructions in the prompt. For example, you may want to tell ChatGPT that it should only provide hints and never reveal answers directly.

@tyller_

This issue is fixed. Please reload the playground and try again.

@011830-0a42ef84

There is no premium limitation at the moment, so please ignore this message.

@011830-0a42ef84

Your project is loading fine now.

There is one issue that you need to fix. Since you are working with the 2D physice engine, you need to use blocks from the “2D physics” category. Currently it is using the “apply force” block for 3D physics. You can tell the color is different for 3D related blocks.

@tyller_

Thanks for reporting this. We will fix it.

@ljvb_4

Are you referring to this forum or the coding playground website?

@011830-0a42ef84

We will check why the project is not loading and fix it. Sorry about that.

@jeffreyrb03-gmail

That is intentional so that in full screen mode you can see more contents of the table. The table display is only meant for developing/debugging.

@011830-0a42ef84

Can you give us the link to that project? We will check which block is triggering that warning.

Introduction

 

In this tutorial, you will learn to use the 3D physics engine to control many water drops (spheres) for a fun animation. The 3D physics engine will manage the movement of 3D objects for us, which allows us to easily create complex 3D simulations with only a few blocks of code.

 
 

Step 1 - Initialize 3D Scene with Physics Engine

 

Please create a new project, remove the dog sprite, and add these blocks to initialize the 3D scene, 3D axis and the 3D physics engine.

 
Note that the gravity is set to -600, which makes objects move down (negative Z direction).

 
 

Step 2 - Add a static ground

 

We will start with a large, flat box to serve as the ground. To make sure it will not move or fall, we just need to set its mass to 0.

 
 

Step 3 - Add a bucket using as a rectangular cube

 

Next, let’s add a bucket to hold the balls. The “rectangular tube” shape is very convenient for this purpose. It is essentially a box, but you can change the cap type to “bottom”, so it is open on top.

 
Notes:

• We need to move it up by 200 to be above the ground.
• You can apply any texture to it.
• We set its mass to be a large number like 10000, so it won’t be affected by the balls falling into it.
• Its restitution is 100%, so the balls will rebound when they hit the bottom or sides of this bucket.

 
 

Step 4 - Make the bucket spin

 

Since the bucket is controlled by the 3D physics engine, we can’t spin it using the “set speed” block. Instead, we need to use a special block in the “3D Physics” category to set the rotation speed around the Z axis:

 
 

Step 5 - Add a new sphere when SPACE key is pressed

 

To make the animation look cool, we will give each sphere a random color, which means their color/saturation/brightness are all random numbers. To keep the colors bright, we will set the range for brightness between 50 and 100.

 
 

Step 6 - Move the sphere to a random position

 

Next, we will move the new sphere to a random position, which means its x/y/z positions are all random.

 
 

Step 7 - Add a physics body

 

Lastly, we will hand over control of the ball to the 3D physics engine by attaching a “sphere” shape body to it. We will give it a very small mass so it won’t affect the movement of the bucket. Also, we will set it to 100% restitution, so it will bounce against other balls and the bucket.

 
 

Challenges

 

This project is very basic. You can challenge yourself with some of the following tasks:

• Add objects of different shapes and sizes
• Create a more complex container other than the bucket. For example, you can try to create a compound shape that is made of many boxes.
• Change the container to platforms: you can use many boxes to serve as platforms that are placed from top to bottom, so the balls will bounce from one platform to another like marbles.

@jeffreyrb03-gmail

Great.

@jeffreyrb03-gmail

Yes, we are trying to optimize it.

@jeffreyrb03-gmail

What woud you like it to say instead in this situation?

@jeffreyrb03-gmail

The ChatGPT API you use is the same as the one running on https://chatgpt.com/, except there are additional moderations on its input and output.

You are dealing with a very complex task, so it will take some efforts to get the prompt right.

Here are some suggestions worth trying:

1. You have a few “train” blocks, which essentially just give ChatGPT some additional system prompts. It is strongly recommended that all of them be combined into one longer prompt instead of having a few pieces. The reason is that each time you send a system request, ChatGPT will generate a response, and you are ignoring those responses.

 
As explained in our tutorials, it is much better to use a text editor (like the comment box or just any text editor), write the entire prompt in there, and then copy it into the ChatGPT block.

2. You are trying to teach it to do quite a few things. Usually it is better to write the examples as dialogs:

user: …
you: …
user: …
you: …

This is much easier for ChatGPT to understand

3. Please make sure the prompts are self-explanatory. For example, this part is not very clear: “Now make sure to remember your variables”. Since these are special tools for callback, not really “variables”, right?

4. Since you are composing a super long prompt, it is better to have sections with headers, such as these:

<Overview>

<Tools you can callback>

<Current Task>

5. Start simple and try to add more. For example, make sure “CALC” is working fine, then add one more tool, then add another one. This will allow you to catch any issues early on. Currently, it doesn’t work for CALC yet:

@011830-0a42ef84

Now you should see one remix from us.

@011830-0a42ef84

It only shows a project if someone has remixed your project, and then shared their project.

What’s your project’s URL?

@jeffreyrb03-gmail

Yes, XO had an issue yesterday due to some language setting problem, but it is fixed now.

The crash should not be due to XO. Most likely it was because of some special characters in the blocks that could not be saved or loaded correctly.

I suggest you make frequent saves of your project as new copies at this point before we can reliably reproduce the issue. Sorry for the inconvenience.

Introduction

 

Large language models like ChatGPT learn all their knowledge from their training data, so they would not know about any new information after the cut-off date of the training data.

For example, if we ask ChatGPT this question: “Which team won the Copa America 2024?” it will not be able to answer since, at the time of writing, the cutoff date of ChatGPT is October 2023.

 
 

Enhancement to ChatGPT

 

To fix this issue, we can “teach” ChatGPT to ask for help. To illustrate the idea, we can think of ChatGPT, the user and our program as 3 characters, and their conversation may look like this:

• User to Program: Who won the Copa América 2024?
• Program to ChatGPT: Hey ChatGPT, can you try to answer this question: Who won the Copa América 2024? BTW, if you ever find you need to search the web to get some new information, I can help.
• ChatGPT to Program: That question is beyond my cutoff date. Please do a Google search on “Who won the Copa América 2024?”
• Program to ChatGPT: Sure. Let me Google it… OK, I got it, here is the research result: Argentina
• ChatGPT to Program: Thanks. Based on the search result, here is the answer for the user: Argentina
• Program to User: Argentina

 
Now, let’s build this workflow step by step.

 
 

Step 1 - Remix the Helpful Assistant Project

 

play.creaticode.com/projects/6531b7e60fdce080a4481c1d

 
 

Step 2 - Update the Initial Prompt

 

Since we will write a fairly long prompt, let’s still use the “comment” area to compose the prompt.

First, add the comment area by right-clicking the green flag block:

 
Next, copy the following prompt into the comment area:

You are a friendly assistant, and I am an agent who can help you. Make sure your response is concise and simple to understand. Do not say anything inappropriate.

When you need a web search before answering a user question, instead of responding to the user, you should respond to me using a special tag "WEB:", followed by the query to search for. I will provide the answer to you, and then you can generate the response to the user.

Now say "hi"

 
This prompt contains 3 parts:

• It first introduces the context, where ChatGPT is playing the role of a friendly assistant, and we (our program) are an agent that’s helping it.
• Then, a special instruction is given to ChatGPT so that it asks us to do a web search when it needs to get some new information online. The special syntax it should use is is also specified, which is the “WEB:” tag.
• Lastly, we ask ChatGPT to say “hi” and wait for user input.

 
Next, you can copy this entire prompt from the comment area into the request block, then press Enter to confirm:

 

 
Now let’s test with the same question again, and we will get a “WEB:” response from ChatGPT:

 
This is a great improvement: ChatGPT has learned that it can use a web search tool to help it answer the question. Of course, we should not show this to the user since the final answer has not yet been given. Let’s change that below.

 
 

Step 5 - Enforce the Output Format

 

ChatGPT may not always use the same format every time. For example, it might respond like this:

 
The problem with this response is that our program will have a hard time extracting the exact query to be used for web search. To force ChatGPT to use the correct format, we can make 2 changes to our prompt:

• Add a note, which emphasizes the format we expect.
• Give an example, which demonstrates the right way to respond.

Here is the updated prompt:

You are a friendly assistant, and I am an agent who can help you. Make sure your response is concise and simple to understand. Do not say anything inappropriate.

When you need a web search before answering a user question, instead of responding to the user, you should respond to me using a special tag "WEB:", followed by the query to search for. I will provide the answer to you, and then you can generate the response to the user. Note that when you need a web search, you have to start with "WEB:", and say nothing else except for the query. Avoid asking user if you should do a web search since the user does not know about the web search tool.

For example:
user: Who won the 2024 Olympics 100m sprint for men?
you: WEB: winner of 2024 Olympics 100m sprint for men
system: At the 2024 Olympics in Paris, American sprinter Noah Lyles triumphed in the men’s 100m final
you: American sprinter Noah Lyles

Now say "hi"

Now please copy this new prompt to your comment area, then copy that into the system request block. This will help ensure ChatGPT sticks to the format we specify.

 
 

Step 6 - Check if the response starts with “WEB:”

 

Next, we will handle ChatGPT’s response differently depending on whether it starts with the special tag of “WEB:”. We will only add some additional steps when ChatGPT’s response starts with “WEB:”.

 
 

Step 7 - Run the web search

 

When we find ChatGPT is asking us to do a web search, we can extract the extract query sentence from ChatGPT’s response, then run a web search using that query sentence.

 
The logic is the following:

1. The response from ChatGPT starts with “WEB:”, and we only need the expression that comes after that. So, we can use the “substring” block to get the substring of the response starting from the 5th letter. For example, if the response variable is “WEB: winner of 2024 Olympics 100m sprint for men”, then the substring will be " winner of 2024 Olympics 100m sprint for men".
2. We can use the “web search” block from the AI category to search the web and store the top 3 results in the “result_table”.

 
Now, let’s try to get some search results by running the program again. To view the “result_table”, we have to remove the chat window from the stage. We can run the “remove all widgets” block by itself.

 
After that, show the “result_table” on the stage by checking its checkbox:

 

You will see the result_table contains 3 columns: title, link and snippet. The snippet is simply a short summary of that web page.

 
 

Step 8 - Aggregate the Search Result

 

To return the search result to ChatGPT, we first have to aggregate the content in the result_table into a single variable named “answer”. For example, we can compose the answer using a few join blocks like this to include the top search result:

 
Note that “\n” represents line return, which helps format the answer text better. As a result, the “answer” variable will become this:

 
We can use the same code to join the second and third search results. And at the end, we will tell ChatGPT to generate the response for the user:

 
 

Step 9 - Give ChatGPT the Search Result

 

Now we will pass the result result back to ChatGPT. Note that we should send the answer using the “system request” block, which makes it clear to ChatGPT that this answer is from the system, not the user. We will still ask ChatGPT to store the response in the “response” variable, which will overwrite the previous response.

 
After this step, the “response” variable contains the new response based on the web search result, and we can continue to append that to the chat history.

If you test with the same request again, ChatGPT will produce the correct answer!

 
 

Further Improvements

 

In this tutorial, you have learned how to enhance ChatGPT with a web search tool. What can you do to make it better? Here are some ideas worth trying:

• Improve the Prompt: If you test the program more, you may still find that sometimes it would fail to run the web search. It would help if you could add another example conversation to the prompt. You can also try to refine the instructions in the prompt to tell ChatGPT what the expected behavior is.

• Fetch the Page Content: The current program only feeds ChatGPT with the title and snippet of each web page in the search result. For more complex questions, this may not contain the information the user is asking for. A further enhancement is to give ChatGPT another tool: fetch web page. To do that, you need to modify the prompt with a few changes:

  • Give ChatGPT the link URL for each search result
  • Tell ChatGPT if it needs the full content of any page, it can issue another special command “FETCH: URL of the page”.
  • When we receive the FETCH request, fetch the content of that page using the “fetch web page as markdown” block from the Cloud extension, then send the content back to ChatGPT.

@011830-0a42ef84

We have added the list of remixes (that are shared by the author) in the project page. Please let us know your feedback.

@jeffreyrb03-gmail

Sorry about this issue. Just to confirm, the block that’s causing trouble is the “regex” block, right? Was it generated by XO? And what did you do to cause it to “break”?

Introduction

 

Although MIT Scratch is an extremely popular programming language for K-12 students, it has several accessibility issues that limit its usability for students with disabilities. For example, it relies heavily on the visual programming editor, which makes it difficult for those who use screen readers or have low vision to interact with the coding environment effectively.

On the CreatiCode platform, we have enhanced Scratch with many new features to enhance its accessiblity, and this article will give an overview.

 
 

Read Blocks Aloud

 

On top of the code editor, there is a speaker button. When it is clicked, an AI voice will talk through the program block by block in the language selected by the user. If the button is clicked again, the voice will stop.

 

 
This tool will benefit several groups of users, such as:

• Visually-impaired users
• Users with reading difficulties
• Neurodivergent learners
• Beginner users

 
 

Voice-Input for Blocks

 

You can also find a microphone button on top of the code editor. When you click on it, the Microphone of the device will be activated, and your speech will be recognized as text. You can use the language you selected in the playground when you speak. Everytime a complete sentence has been recognized, it will be processed by an AI agent, which will modify the blocks in the code editor accordingly. You can not only add new blocks, but also update or remove blocks. Here are some example commands you can try:

• move 30 steps: will add the ‘move (30) steps’ block
• actually, change it to 50 steps: will edit the block to change 30 to 50
• now, let’s turn left 45 degrees: will add a new ‘turn left’ block.
• start over: will remove all the blocks except for the green flag clicked block

 

Note that after you complete a sentence, the AI assistant will switch from ‘listening’ to ‘coding’, and after the program is updated, it will switch back to the ‘listening’ mode. You can only start a new command in the ‘listening’ mode.

 

 
This tool also has several benefits:

• Users no longer need to search for and drag blocks into the editor. This is especially useful for users with limited fine motor skills or mobility challenges
• Users on mobile devices or phones where the screen is small and it is hard to drag blocks
• Visually-impaired Users
• Neurodivergent learners
• Young users who struggle with reading or typing

 
 

Simplified Motion Blocks

 

In the motion category, a set of simple blocks are added that can make the sprite move or turn without. To use them, students do not need to know about coordinates, count of steps or degree of angles. This makes the platform more accessible to young learners or learners with difficulty in working with numbers.

The blocks are:

• Up/Down/Left/Right Arrows: these blocks will make the sprite glide 40 steps to the given direction with a short animation.
• Point Up/Down/Left/Right: these blocks will turn the sprite to the given direction with a short animation.
• go to center: this block makes the sprite move to the center of the stage instantly.
• forward/backward: these blocks make the sprite move along its current direction forward by 40 steps with a short animation.
• turn left/right arrows: these blocks make the sprite turn left or right 90 degrees, relative to its current direction, with a short animation.

 

 
 

Update Background Color

 

You can change the background color of the code editor using the dropdown menu on top of the playground:

 

 

This feature will benefit any user that find the original white background too bright, or its contrast with blocks too low.

 
 

Update Custom Block’s Color

 

You can also change the color of the new custom blocks you define:

 

 

Again, this allows users to increase the contrast of block colors.

相关主题

• 为3D场景启用物理效果
• 为3D物体添加物理实体

 
 

引言

 
在本教程中，你将使用物理引擎制作一个有趣的篮球游戏：

游戏的想法是，篮球通过一根绳子连接到空中的一个挂钩上，就像蜘蛛侠一样向前摆动。玩家可以决定何时添加或移除这根绳子，让球落入篮筐。

 
 

第1步 - 创建带有物理效果的空场景

 
首先，请在CreatiCode游乐场上创建一个新项目，删除小狗的角色Sprite1，并将“Empty1”角色重命名为“Main”（主角色）。

在Main角色中，添加以下积木块。它们将创建一个带有蓝天的3D场景，显示3D坐标轴，并用-500的重力启用物理效果。

 
你应该会看到：

 
 

第2步 - 制作4个新积木

 
在这个游戏中，4个关键部件是篮筐、中间的挂钩、篮球和它的支架。让我们制作这4个新积木来组织我们的代码：

 
 

第3步 - 使用矩形管添加篮筐

 
为了盛装篮球，我们可以使用顶部开口的矩形管。以下3个积木将添加一个尺寸为150x150，深度为80的矩形管。我们使用“矩形管”形状为其添加物理实体，并将其质量设为0，让它悬浮在空中。把回弹设为0，这样球就不会弹出来，摩擦设为100%会减慢球的旋转速度。我们用白色线条在绿色网格上绘制。

 
你会得到这样的篮筐：
 

 
 

第4步 - 移动和旋转篮筐

 
接下来，我们沿Y轴向前移动篮筐，让球有足够的摆动空间。还要让篮筐绕X轴旋转45度，这样它的开口就会面向我们。

 
现在篮筐的位置是这样的：

 
 

第5步 - 添加挂钩

 
现在让我们添加挂钩。我们将用一个圆环来表示挂钩。由于没有“圆环”形状的物理实体，我们可以简单地使用“球体”或“盒子”形状。因为挂钩不会与其他物体碰撞，形状并不重要。把质量设为0，让它保持不动。回弹和摩擦的值也不重要。你可以为它添加任何颜色的网格材质。

 
它应该看起来像这样：

 
 

第6步 - 移动和旋转挂钩

 
挂钩需要被移动得更高，这样它可以帮助球摆动更长的距离。还要让它竖直站立。这两个积木可以做到：

 
现在挂钩看起来是这样的：

 
 

第7步 - 添加球的支架

 
球的支架是一个放在球下面的小平面。当游戏开始时，球会在支架上弹跳，直到用户将球连接到挂钩。

我们将支架放在Y位置为-500的地方，这样当连接到挂钩时，球会向前摆动。支架的回弹设为100%，以保持球反弹。

 
支架会看起来像这样：

 
 

第8步 - 添加篮球

 
最后一个部件是篮球。注意，它需要被命名，并且需要使用25的Z偏移量，这是它高度的一半。

它将被放在球的支架正上方。回弹设为100%，以保持它从支架上反弹。摩擦设为100%，这样当它落入篮筐时会迅速停止旋转。

 
现在运行程序，你应该看到一个弹跳的球：

 
 

第9步 - 添加跟随摄像机

 
因为球会向前摆动，我们需要添加一个跟随摄像机来跟随球。我们将让摄像机以水平角度45度观察球，这样更容易判断何时连接或断开球与挂钩。我们还将其设置为“自由”模式，这样玩家可以自由调整摄像机。

 
现在球会始终在我们的摄像机视图中心：

 
 

第10步 - 添加一个按钮控件

 
为了让玩家连接或断开球与挂钩，我们可以使用按键事件或按钮点击事件。在这种情况下，按钮更好，因为它可以让玩家在手机或iPad上玩，这些设备没有键盘。

以下积木将按钮放在舞台的右下角。因为玩家的第一个动作是连接球与挂钩，我们应该在按钮上显示“连接”。

 
按钮的默认样式如下：

 
 

第11步 - 更新按钮样式

 
为了让按钮看起来更好，我们可以用这两个积木改变背景和文字样式：

 
按钮现在看起来是这样的：

 
 

第12步 - 将球连接到挂钩

 
现在我们准备好这个项目中最重要的一步了。为了让它看起来像球用一根绳子连接到挂钩，我们需要做两件事。

• 首先，我们需要添加一个距离约束，它会让球与挂钩保持相同的距离。有了这个约束，球不会掉下来，而是在挂钩下方来回摆动。
• 其次，我们需要在球和挂钩之间添加一条线来表示“绳子”。注意我们需要使用移动的线，它会随着球移动。

注意，当我们添加距离约束时，我们需要使用“挂钩”作为第一个输入，因为挂钩是静止的，而球会摆动。“移动的线”会随着球移动，我们可以用“地毯”纹理来更新线条，使其看起来像绳子。

 
现在如果我们点击“连接”，绳子会出现，看起来球在摆动。

 
 

第13步 - 移除球的支架

 
当球在挂钩下摆动时，有时它可能会碰到球的支架：

 
为了避免这个问题，我们应该在连接球与挂钩时移除球的支架：

 
 

第14步 - 游戏阶段

 
当球连接到挂钩后，玩家的下一个动作是断开连接，这会把球投向篮筐。为了让界面简单，我们可以重复使用同一个按钮来执行这个动作。

因为我们使用同一个按钮来执行不同的操作，我们需要一种方法来跟踪当前的“游戏阶段”。在这个游戏中，有3个阶段：

• 阶段1：从游戏开始到玩家将球连接到挂钩的那一刻；
• 阶段2：从玩家将球连接到挂钩的那一刻到玩家断开连接的那一刻；
• 阶段3：球从挂钩上断开后。

我们可以使用一个名为“phase”（阶段）的变量来表示当前的阶段。请创建这个新变量，并在游戏开始时将其设为1：

 
 

第15步 - 在阶段1处理按钮点击

 
现在我们可以在按钮被点击时运行不同的代码块。我们已有的代码块应该只在“phase”变量为1时运行：

 
 

第16步 - 准备进入阶段2

 
完成阶段1后，我们应该将“phase”变量设为2，因为我们进入了阶段2。还要把按钮改为显示“断开”，因为玩家需要在阶段2断开绳子：

 
现在，当我们点击它时，按钮会改变文字：

 
 

第17步 - 在阶段2处理按钮点击

 
在阶段2，当用户点击按钮时，我们应该移除距离约束和绳子，让球自由飞行。还要移除按钮，因为玩家没有更多的操作。我们也应该将“phase”设为3。

 
现在游戏可以玩了！点击“连接”添加绳子，然后点击“断开”投篮：

 
 

第18步 - 检查是否成功

 
在阶段3，我们需要检查球是否落入篮筐。我们可以用一个“永久重复”循环每秒检查一次：

 
 

第19步 - 检查球的位置和速度

 
如果球落入篮筐，它应该停止移动，Z轴的位置应该相对稳定。我们可以直接使用“获取”积木来检查这两个值：

 
Z轴速度应该接近0，Z轴位置应该大约是-131.8。我们可以用这两个条件来检查是否成功，如果成功就显示一个标签。

 
现在我们会得到这样的成功消息：

 
 

第20步 - 更新标签样式

 
为了让标签看起来更好，我们可以更新它的背景和文字样式：

 
现在成功消息看起来是这样的：

 
 

第21步 - 清理工作

 
最后，为了清理一下，我们应该隐藏3D坐标轴：

 
这是游戏的最终演示：

 
 

创意想法

 
你可以用很多方法来扩展这个项目。以下是一些示例想法：

• 改变参数：你可以将球、挂钩和篮筐移动到不同的位置。你可以改变球或篮筐的大小，或者改变场景的重力。

• 两个挂钩：在从第一个挂钩断开后，你可以允许玩家在阶段3连接到另一个挂钩，然后在阶段4从它断开。第二个挂钩也可以在不同的方向上。这会让游戏更加有挑战性。下面是一个示例：

 

• 障碍物：为了让游戏更加有趣，你可以添加一些静态物体作为障碍物，让玩家必须避开它们。