Project description: The 4th of July is almost upon us and let’s celebrate it in code as we do it in reality, by bursting crackling fireworks!

Recommended ages: 5-9 years | Experience level: Beginner | Platform: Hatch Kids | We will use: Block-based coding | Time required: 20-30 minutes

What will we learn?

How to create a fireworks illusion
What is a Particle System and how to add it

What will we create?

We will create a fireworks scene and display a text message to the player.

Steps:

1. Open Hatch Kids platform
2. Design your game
3. Let’s code!
4. Save your work
5. Share your project with friends and family!

Step 1:  Let’s open Hatch Kids here:

Click Here to go to Hatch Kids

Select “Code with Blocks” as shown in the screenshot.

You are now ready to begin creating your project!

Step 2: Design your game!

1. Choose a template and get started.

• You can choose any template from the various templates shown above to create your own project!
• This template is for the overall look of your scene. There are many different environments to choose from, like Ocean or Space.
• For this project, we have picked the ‘Village’ template.

Step 3: Go to the Design section and click on the ‘+’ button to add 3D models and in that, go to the Environment section and choose a particle system. Let’s dd a couple of particle systems.

Particle systems are collections of small images that when viewed together form a more complex “fuzzy” object, such as fire, smoke, weather, or fireworks. These complex effects are controlled by specifying the behavior of individual particles using properties such as initial position, velocity, and lifespan. We can customize our 4th of July fireworks by setting the behavior of these particles!

Choose Fireworks as the template for the particle system from the properties section and the settings as shown in the image below.

Please note that it is essential to switch on the Autoplay option in the properties for this particular template.

Repeat the same for the other particle system. Refer to the settings below for the 2nd particle system (only the colour changes, feel free to use any colors!).

After setting the properties of the particle systems, position the particle system in front of the camera using the translate button. Drag it along the x, y, and z axes to set it the way you want, and go to the Play section to view how it looks.

Since the particle system is horizontal while adding, we will choose the rotation and rotate it along the Z-axis to make it vertical.

Step 4: Add a 3D text and position it in front of the camera. Keep the value of the text as anything you need it to read from the properties section. In the project, we kept the text value as shown in the image.

As shown in the above image, one can change the font, font size, and thickness all in one place!

Step 5: In the coding section, go to Events and get the “When scene loads” block and attach a block called “Set the 3D text visible to True”. This block can be found in the 3D text section on the left panel of the Code screen.

And there you have it! Your own Fireworks project to celebrate the American Independence Day this 4th of July!