Blur Effects Demo - SNES - Bugs Fixed and Project Optimized

I made a blur effect in Newer Super Mario Bros. Arcade and I decided to make it as a standalone project! I also fixed many bugs (related to stretching on the side of the screen, then having the effect not stretch to the edges of the screen.) If I make Newer Super Mario Bros Arcade into a full game or make any other game using this effect, I will incorporate the bug fixes into that!

Also, it would be cool if this was an extension (although I don’t know how to do that).

IMPORTANT: If you use this in the code, be sure to credit me! I spent a while making and polishing this project! I like how it turned out and think it looks cool!

5 Likes

Hello hello! Sorry this took a little white, but here is a quick guide on turning your cool project into an extension:

1. Put your extension code into a function

It’s perfect that you have a demo project with just your blur effect! The next thing you want to do is put the “blur” part of the code into a function. This will probably involve a little refactoring.

The important thing here is every variable used inside the function must be declared in the function–there should be a “set” block at the top of the function for each variable used, OR the variable should be passed in as a function parameter.

Here’s a quick attempt I made with your code. You can see I changed num to blurAmount and passed it into the function, and added set blocks for numWidth, numHeight, x, and y to the top, but you can do it your own way as well!

2. Convert your project to JavaScript

First delete all code outside the function. Then click the toggle to convert it to JavaScript.

3. Clean up the function

You’ll see when you convert it, there will be some code outside the function. You need to delete this code. You might also need to add let in front of the variable declarations in your function:

(left: the code I deleted, right: the let variables I changed inside the function)

You might also want to copy the function to a new project since your current project has some extensions added to it, and you don’t need any of those extensions for this.

Here’s what the code looks like now:

4. Format the code to be an extension

Finally, there are couple small things you need to do to format the code to be an extension:

  1. Wrap everything in a namespace. You can think of this like the toolbox category your block will go in! You want your code to look like:
    namespace blur {
        // ... all your code goes here
    }
    
  2. Add export before your function name, so that it looks like: export function setBlur() {
  3. Add //% block to the top of your function. This tells MakeCode that this function should be converted to a block!
  4. You can also customize your block in other ways, by changing the text or colors, or adding default values. Check out the playground for different block settings! In your case, you probably also want this: //% blurImage.shadow=screen_image_picker, which tells MakeCode to use the grey image block inside your custom block.

Now your function should look something like this:

5. Push your project to Github

Click the Github button down by the project name! This will prompt you to sign in through Github and name the repository (give it a helpful extension name: arcade-blur-effect or blur-image or something like that!), but once you are done you will have an extension! You can send the URL of your Github repository to anyone and once they add it to their project, they will see your blocks. :slight_smile:

Whew ok, that was quite a lot so definitely let me know if you have any questions or if any of this doesn’t work for you! Any of us would be totally happy to help debug or answer any other questions. Hope this is useful!

3 Likes

Thanks, but I already took like a ton of hours to figure it out and figured it out!

1 Like

Oh haha, that’s awesome! I can’t wait to see the extension :smiley:

1 Like

It’s done and will be out shortly (probably on stream before the forum).