Acknowledged. This will be fixed soon. Thanks
Best posts made by info-creaticode
-
RE: Some avatars aren't shown to select until searched for
-
"Remote Edit" - 2 users working on the same project remotely
Introduction
When 2 users are using their own computers, they can collaborate on the same project remotely, using a new feature called “remote edit”. This is a fun experience that allows 2 people to write code together. When one person makes a change, such as adding a block or changing an input value, the other person sees the change right away. This is similar to how 2 people can edit the same Google Doc at the same time.
How to start a “remote edit” session
Here are the 4 steps for two users to start a remote edit session:
-
Owner User shares a new project. There are a few ways to share a project, such as sharing with everyone, sharing with friends only and sharing unlisted (no one can see it unless they have the project URL). The owner user then gives the project URL to the guest user, maybe through email or text message.
-
Guest User opens the project and clicks “Look inside” to open the project in the playground. The guest user selects the “Edit” menu on top, and then select “Request to edit”, then wait for the owner user to accept the request.
-
Owner User receives a request from the guest user, and clicks “Accept” button.
-
Guest User will receive the approval, and their project will automatically reload. This is to make sure the guest user starts with exactly the same project content as the owner user.
Here is a screen recording for what the 2 users would see on their computers (the left half is for the owner user and the right half is for the guest user):
After the 4 steps above, both users will be able to see and change the same project at the same time.
Making Changes
After the remote edit session has started, both users can make changes, such as adding/removing blocks, changing input values, etc. When one user is changing a block, that block will become greyed out on the other user’s screen, which indicates the remote user is making some changes. Users should try to avoid making changes to the same block at the same time, since the changes may conflict with each other, and only one change will be saved.
Limitations
There are some limits put in place to ensure the 2 users are always in sync:
-
No New Sprites: Currently, neither user can add new sprites once the session has started, and the “add sprite” button is hidden. Therefore, it is suggested that the owner user first creates all the sprites they need before starting the session.
-
Only Owner can save the project: Only the owner user can save the project, since that user still owns the project. The owner user should save the project whenever some important changes have been completed.
How to end a “remote edit” session
To end a “remote edit” session, either the owner or the guest user can click the red “End” button at the bottom.
Best Practices
Here are some suggestions on how to make use of this feature effectively:
-
Voice Communication: When the 2 users are not in the same room, it is better to have a voice communication channel, such as a zoom meeting or a phone call on the side. This can make it much easier for the 2 users to decide who will do what.
-
Division of Work: Although these 2 users can both make changes at the same time, they can not change exactly the same block at the same time. For example, if one user is updating the input parameters in a block, and the other user is deleting that block, then the result may be unexpected. It is recommended that the 2 users work on different blocks or stacks of blocks to avoid conflicts.
-
-
RE: What is this?
Please give it a try. I would love to hear your feedback. It is always a challenge to know when to give out the answer and when to hold it back, even for human teachers. Our current setting is to make the AI keep providing more hints when the user struggles. Hopefully, that will be good enough for most situations.
-
Wishlist for New Models
If you are looking for a particular 3D model that is not in our library, please reply to this topic. If you can include an example picture of it, it would be more clear what you are looking for. We will try to fulfill these requests as best as we can. Please make sure you do not submit duplicate requests by searching for it first.
Thanks
CreatiCode Support -
How to record and share screen recordings as gifs
Introduction
When you need to explain how a project should work, the best way is to make a screen recording of the stage. This short article will explain which tools you can use to record the screen, and also how to share the gif file to get a URL for it.
Screen Recording on Windows
If you are using a Windows computer, we recommend a free tool named “ScreenToGif”, which you can download here: https://www.screentogif.com/
Here is a short video explaining how to use it: https://www.yo utube.com/watch?v=ELfCBzN1Mtc
Screen Recording on Macbook
If you are using a Macbook, you can use a free tool called “Giphy Capture”: https://giphy.com/apps/giphycapture
Here is a short video showing how to use it: https://www.yo utube.com/watch?v=m-4cJMBGfS4
Share your gif file
Once your gif file is ready, you can share it this way:
-
Go to the “My Stuff” page at https://play.creaticode.com/mystuff, and make sure you are logged in.
-
Select “My Files” tab on the bottom left
-
Click the “+Share a New File” button on the top right
-
In the pop up window, click “Click to upload file”, and then select the gif file from your computer.
-
Click the green button that says “upload and share with the CC Attribution license” at the bottom.
After that, you will see the new file in the list of files, and then you can click “Copy file URL” button for that file, which will copy the URL to the clipboard, which would look like this: https://ccdncreaticodecom.b-cdn.net/user-files/BfemEPCxatY6MMAPs/castfireball.gif
-
-
RE: Current error with accessing the website
Hi all,
Sorry there was an outage on our platform earlier this morning. Sorry about the inconvenience. Now we are back online.
CreatiCode
-
Magic Wand Selector in the Costume Editor
Introduction
In the costumer editor, when the costume is in bitmap mode (as opposed to vector mode), you can use the magic wand tool to select an area with similar colors, then delete the designated area or fill it with a new color.
Making a Selection
To make a selection, you simply need to select the magic wand tool, then click on the area you would like to select. It can be of any shape, and may even contain holes in it:
Behind the scenes, it uses a “flood fill” algorithm to expand the selected area into neighboring points, so long as their colors are similar to the point you have clicked.Note that if your computer is slow or if the costume is big, then it will take longer for this tool to determine the selected area.
Changing the Tolerance Threshold
When the magic wand is selected, you can specify a tolerance threshold value. Its value is between 1 and 255, and by default, it is 5. This value represents how much difference in color it would tolerate when it tries to expand the selection area:
- When the value is low, it will make sure the selected area only contains points very similar to the point you have clicked;
- As the value increases, it will include more points even if they are more different from the starting point.
As shown, when you change this value, the selected area will be updated automatically:
Delete or Fill the Selected Area
After you have made the selection, there are 2 operations you can do with those points:
- You can click the “Delete” button or press the DELETE key to delete all of those points;
- You can also pick a color from the “Fill” dropdown, then click the “Fill” button to fill the selected area with that color.
-
RE: Code block presets?
You are right. We should allow users to submit new extensions.
However, the code snippet library should be more like backpack than extension, since it will allow users to modify the code blocks after a snippet is imported. If it is an extension, then users won’t see its implementation and also won’t be able to customize it.
-
RE: [Community Project] Let's Build a CreatiCode Project Packager!
There are already packagers like Turbowarp, which works well for generic Scratch projects. And since most of the new CreatiCode blocks don’t work offline, most likely this new packager won’t do much more compared to a Turbowarp packager, right?
So the question is whether it will be justified to dedicate manpower on this feature (as opposed to others) if it is not going to add much additional value.
-
RE: Need help and ideas
Maybe you can try these ideas?
- Click the trash bin again to make it stop yelling
- Make random garbage items fly out of the trash bin
- Drag and drop garbage items into the trash bin
- Make the trash bin move to random places on the stage
- Add multiple clones of the garbage bin of different looks.
Latest posts made by info-creaticode
-
Game AI for Flappy Bird (Difficulty: 2)
Introduction
Flappy Bird is a simple and fun game, where the player controls the bird to fly through a few obstacles to reach its nest. There is only one control: press the SPACE key to make the bird flap.
In this tutorial, you will learn to build a simple AI program to control the bird instead of manually.
Note that this AI will be based on programming logic, rather than large language models (LLMs). That is due to 3 reasons:
- LLMs are too slow for such tasks: it usually takes a few seconds for LLMs to respond to each request, but we need to make the bird react and flap with a precision of milliseconds.
- LLMs are too unpredictable: LLMs are inherently random, and it is often hard to control them to generate precisely the same output every single time. In contrast, programming logic is much more predictable and reliable.
- LLMs are too expensive: It takes a lot of computation, and hence energy, to generate even a very simple output. To avoid such waste, when we can use programming logic to make a decision, we should do so.
The same argument also applies in many other situations, and that’s why a significant portion of AI systems will continue to be implemented using programming logic.
Now let’s get started with this simple AI program.
Step 1 - Remix the Starter Project
Open this link and remix the project:
play.creaticode.com/projects/684dbd401c49cae4509533bd
Step 2 - Read the Existing Code for “AI”
In the “AI” sprite, there are 2 stacks of code.
First, when the green flag is clicked, 3 parameters are set:
- How many columns (green pipes) are placed before the nest.
- The gravity for the bird’s falling speed;
- How much the bird rises up on each flap.
Below that, when the “start” message is received, this AI program will simply send out the “flap” message every 0.3 seconds. Each “flap” message will make the bird flap once. This is the most basic AI program, which we will improve in the next few steps.
Step 3 - Adjust the Game Settings
When you click the green flag, you will find that the bird will fall to the ground. The falling speed will depend on your computer, but it will look similar to this:
This is because the “
gravity
” and “flap strength
” are not fine-tuned yet. As an exercise, please adjust these 2 values. In general, “gravity” should be a number between 0 and -2 (such as -0.5), and “flap strength” should be a number between 4 and 20. Your goal should be to make the bird fly horizontally with a nice waveform trail like this:
Step 4 - A Shorter Wait Interval
Currently, in the forever loop, we send out the “flap” message every 0.3 seconds, and the bird will stay at the same height. Suppose we want the bird to fly higher, then we need to use a shorter interval.
Instead of 0.3 seconds, let’s use an interval of 0.03 seconds. This may be necessary if the bird needs to rise up very quickly.
As a result, when you run again, the bird should reach the ceiling very quickly and stay there:
Step 5 - Skip some flaps
Obviously, the current AI always makes the bird fly too high. A simple solution is to skip some flaps, so the bird will do a free fall to reach nests that are below its level.
In general, to make smart decisions, an AI needs relevant sensing data. In this case, to determine whether the bird needs to fall a bit, we can compare these 2 variables:
- The bird’s Y position
- The Y position of the nest
Your AI can access these 2 values using these 2 reporter blocks:
Now, can you change the forever loop so that the bird would not flap if it is already above the nest?
Here is one way to do it: we put the broadcast block inside an “if-then” block, so only when the nest is above the bird would the bird make a flap:
Try to run the program a few times. The nest is placed at random heights, but the bird will almost always rise or fall to its level quickly:
Step 6 - Add a few columns
Now let’s move on to the next challenge: make the bird fly through the columns (pipes). Change the “columns” variable to 4, which will add 4 columns:
Obviously the bird will crash with the columns and fail. What can we do?
Step 7 - Fly through all columns
Similar to above, we need to provide data to the AI. Specifically, here are information about the columns:
- Each column has an opening at its center, and the Y positions of these openings are stored in the list named “columnYs”.
- The number of columns is given in the variable “columns”.
- The upcoming column has an index of “nextColumnIndex” in the list. For example, when the bird is facing the first column, nextColumnIndex is equal 1. After the bird flies through it, nextColumnIndex will automatically increase to 2.
With these information, can you try to make the bird fly through all the columns? Don’t worry about the nest for now.
In fact, all that we need to do is to replace “nestY” with the Y position of the upcoming column:
The bird should have no problem flying through all columns:
Step 8 - Fly to the nest after all the columns
For our last step, we need to combine our solution for columns and the nest. When the bird has passed the last column, the
nextColumnIndex
will be more than thecolumns
variable, and that’s when we should target the nest instead. Can you implement this change?
Here is an example solution:
Here is the final demo:
Extra Practices
To practice what you have learned, here is an additional challenge for you.
Currently, the bird would only start flapping if it is below the target height (of the nest or the center of the opening), so it might fall too much below the target. If the target is very low, then the bird might touch the ground before flying back up.
To ensure the bird is always safe, it should start to flap if it is too close to the ground (Y of -240).
-
RE: Scroll wheel should be use as zoom instead of scroll in Creaticode Create
Currently, the playground already supports both:
- Ctrl + Wheel: zoom in or out
- Shift + Wheel: scroll left or right
And these are the same for MIT Scratch.
-
Introducing the Newly Enhanced Cloud Variables
Hi all,
We have made some exciting new enhancements to cloud variables. The description is on this page: https://www.forum.creaticode.com/topic/1997/newly-enhanced-cloud-variables
We will post new tutorials on multiplayer games using this new feature as well. Please feel free to give us your feedback on this.
Thank you
CreatiCode -
RE: left click should be drag in sprite creating area
Got it. We’ll check why it happens on chromebooks.
-
Newly Enhanced Cloud Variables
Introduction
Cloud variables are a powerful tool in MIT Scratch for creating multiplayer programs. CreatiCode has enhanced them further, making them even more capable. In this tutorial, you’ll learn how cloud variables work in the CreatiCode playground.
Basics of Cloud Variables
When creating a new variable, you can check the “cloud variable” box:
If the project is shared and opened by other users, the value of that cloud variable will be synchronized across all their computers automatically.
For example, imagine 10 users are running the same project at the same time. If one user changes the value of a cloud variable, the other 9 users will instantly see the updated value.
Here’s what happens behind the scenes:
- User A changes a cloud variable using a “set variable to” or “change variable by” block.
- User A’s computer sends the new value to the CreatiCode server.
- The server broadcasts the update to the other 9 users running the same project.
- Each of those users receives the message and updates the cloud variable on their own computer.
A Simple Example
Here is an example project: play.creaticode.com/projects/68473cea3d952dd83a76d160
It has one dog sprite with this code:
When the program starts, the sprite keeps saying the value of the cloud variable “counter.”
Whenever any user clicks the sprite, the value of “counter” increases by 1— and all other users running the same program will instantly see the new value.
You can try this by opening the project in two browser windows (one normal and one incognito). Make sure you’re logged in, as cloud variables only work when you’re signed in. Of course, you can also try this with a friend on 2 computers.
Here’s what it looks like across two sessions:
The “When Variable Changes” Block
To make working with variables easier — especially cloud variables — CreatiCode has added a new event block:
This block runs whenever the selected variable changes (i.e., when its value becomes different). Note that if you set a variable to its current value, then this block won’t be triggered.
It works with both regular and cloud variables. This means you no longer need a forever loop to constantly check the variable — you can run code only when the value actually changes.
Here’s how we can rewrite the earlier example using this block:
- When the green flag is clicked, start a long wait so the program stays running. Cloud variable updates won’t work if the project isn’t running.
- When the sprite is clicked, increase the counter as before.
- When the counter changes, the sprite says the new value.
You can try it here: play.creaticode.com/projects/684747163d952dd83a76d79c
Number of Cloud Variables
MIT Scratch limits you to 10 cloud variables per project. In CreatiCode, you can use up to 100. This allows you to build much more advanced multiplayer projects.
Accepted Values and Update Frequency
In MIT Scratch, cloud variables:
- Can only store numbers
- Can only update at most 10 times per second
These limits were put in place to block users from building chat rooms, but they also make cloud variables harder to use.
In CreatiCode, cloud variables support any type of value, with some important rules:
-
If the value contains letters (a–z), it must pass a moderation check to filter inappropriate content. These values can only be updated once per second per user. That’s still fast enough for chat room projects.
-
If the value does not contain letters, like
120
or"1_23_44"
, it bypasses moderation and can be updated up to 20 times per second per user. This is useful when you want to send multiple numbers in a single update. For example, to send X = 50 and Y = 80, you can combine them into one value of"50_80"
.
Cloud Sessions
In MIT Scratch, everyone running the same shared project receives the same cloud variable updates. To isolate groups, you’d have to make separate copies of the project.
CreatiCode introduces cloud sessions, which limit cloud updates to just the users in the same session. If a user hasn’t joined a session, they’re placed in the default session.
To join a session, use this block from the “Variables” category:
This block takes about 1.5 seconds to run and should be used before updating any cloud variables.
The session name is just a string that users agree to use. Only users in the same session will receive each other’s cloud variable updates—even if they’re running the same project.
Here’s how to add the block to our earlier example:
Private Cloud Variables for Clones (Advanced)
In MIT Scratch, cloud variables are always global — shared across all sprites and clones. This creates problems when you’re working with clones.
For instance, suppose a car sprite creates 2 clones: Clone 1 and Clone 2. If you use a global cloud variable like “facing direction,” then changing it to 90 will affect both clones — even if you only meant to rotate one.
To fix this, CreatiCode lets you create private cloud variables for each sprite or clone:
Now, each clone will have its own cloud variable, separate from the others. For example, all users’ “Clone 1” will share one variable, and “Clone 2” will share another.
Example for Private Cloud Variables
Here is an example project: play.creaticode.com/projects/6847575f1c49cae45091d685
When the green flag is clicked, the original dog sprite hides and creates two clones, with IDs 1 and 2:
Each clone shows itself, says its clone ID, and moves to one side of the stage:
Now, when a clone is clicked, it increases its own private cloud variable called “direction” by 15. This triggers only that clone to rotate:
As a result, when any user clicks on a dog clone, that specific clone rotates on every computer — but the other clone is unaffected:
We hope you enjoy these new features, and we can’t wait to see the amazing multiplayer projects you’ll build with them!
-
RE: left click should be drag in sprite creating area
What device/browser are you using? Have you tried to restart the browser?
-
RE: Scroll wheel should be use as zoom instead of scroll in Creaticode Create
The scroll wheel is used for scrolling up and down to view the blocks, which is similar to the MIT Scratch interface. We strive to be consistent with MIT Scratch, unless there is a compelling reason to improve upon it.
-
RE: left click should be drag in sprite creating area
The left mouse button is indeed used for dragging the editor area. Are you seeing otherwise?