Microsoft MakeCode

Fireworks! (and pxt-color extension)

#1

48

I wrote up a little fireworks example with some custom particle effects! I tried to give a short description of what the main aspects of particles effects are / how they work in comments throughout the code, in case anyone is interested - I’ll expand on that part later later :slight_smile:.

There isn’t currently much interaction necessary from the player - if you press a button, it will fire off a firework (with a small timeout between fireworks), but if you don’t press anything it will still occasionally create fireworks for you.

This also uses a new extension I wrote up last weekend, called pxt-color. This extension allows you to change the palette the game uses at runtime, so that each color looks different. The main thing I’m doing in this case is fading between random palettes, so that each firework is a unique combination of ‘pastel-ish’ colors - this is done by creating a fade, which allows you to specify the beginning and end palettes and a duration, and then changes the color palette in the background between the two smoothly until it settles at the new end palette. In this case, though, as soon as the color fade is completed, it starts on the next random fade.

For an easy modification to this example, you can change the colors that are picked for the fireworks by changing the generatePastel function at the end of the game; for example, you can allow it to create darker colors by changing the possible values for the luminosity aspect of the generated color, which will result in a wider variety of colors in the fireworks:

function generatePastel() {
    // generate a random pastel-adjacent color:
    // pastels have 100% saturation and high luminosity ('brightness')
    return new color.HSL(
        Math.randomRange(0, 359),
        1,
        Math.randomRange(40, 60) / 100
    );
}

Resulting in something like this:

37

I’m still working on the color package, so the documentation is lacking and and there’s likely a number of small bugs I haven’t seen yet, but if you’re interested there are some more examples of things you can try in the test.ts file, and I’m always happy to answer questions if you have them! I’ll try to avoid breaking backwards compatibility as much as possible for this package from now on, though ~

7 Likes
#2

I love this, Joey! I totally want to steal it for a “You Win!” splash screen for a game sometime. :smiley: Great comments in the code, too, to explain your reasoning. Thanks, too, for the pxt-color extension! While the default palette works fine for many purposes, I feel like custom palettes are a much-needed extension. This will be put to good use by many, I’m sure. Excellent work!

2 Likes
#3

I see that you used VS Code to author the pxt-color extension. I’m going to start a separate thread to collect input, but I’d love to hear your thoughts, Joey.

2 Likes
#4

We actually just package in a few vs code files configuration files when creating things with the github extension authoring now, as it’s easier to add those in with the first initial commit than to try to fix it up if someone wants to use vs code later - almost all of the commits in pxt color were just done through the github authoring within makecode :slight_smile:

2 Likes
#5

I could have used this LOVE IT…this is what we ended up making for the holiday.

We added a video just to elevate it to the next level… :slight_smile:

3 Likes
#6

Awesome!