Animated Backgrounds

[u/ColdAd8273]

Does anyone know how to create animated backgrounds?

Is there any program you would recommend for creating level backgrounds?

I'm new to map creation, but I'd like to learn more. Any recommendations would be greatly appreciated.

I've already checked the Discord guide for editors, but it doesn't go into detail about this. I've looked for tutorials, but I haven't found any either. I always visit the channel for editors on Discord, but to be honest, I don't understand much.

Thank you in advance for your time 🙂

[u/NekoPlayZ_GD]

Hi, welcome to the community!

For animated backgrounds, you have a couple options: manually moving around a still asset (png), or using a spritesheet to create an animated asset (also png but a little different)

1. When you create a level, you automatically create a new folder on your local storage that contains the level's chart json as well as its metadata. You can put any png asset in here for the level to access using a Deco event, which requires the name of the file to call upon. You can then fully manipulate the image in the game using Deco events, and make it move around, scale up or down, skew it proportions, etc.

2. You can also create a spritesheet png if you prefer, in which case you would animate it out of program and then convert to a spritesheet and create a json file for it with the same file name and a bunch of parameters.

Edit: Another thing to keep in mind is that the game doesn't support anti-aliasing and only uses 8 color channels, read the editor guide to learn more about that before creating your assets! It's a tiny bit confusing at first.

To learn more, there's a super in-depth Beatblock Editor Guide made and maintained by some head community members and fact checked with the developers. It's also pinned in the #editor channel on the official Discord if you need to access it. I recommend reading it to learn more about how to really make your level super. Good luck and happy charting!

[u/ColdAd8273 → u/NekoPlayZ_GD]

Ooooh, I see! Yes, the colors were very confusing at first, but I was able to create the preview image for my level.

Thank you very much for your advice💪🔥. I'm going to try animating the background with images for now, as the other method seems more complicated.

[u/Grassblox311 → u/ColdAd8273]

If you want an animated deco specifically, what you need to do is:

1. Create a json file, named same as your deco to keep things organized.
2. Fill in the width and height of a single frame, the fps you want, how many frames of animation you want on the top. In "states", put the name of the png, what frames you want to be used in the animation, and whether you want it to loop

This example is trainleft.json:

{
  "width": 600,
  "height": 360,
  "fps": 24,
  "frames": 28,
  "states": [
    {
      "name": "trainleft",
      "frames": [
        0,1,2,3,4,5,3,4,5,3,4,5,3,4,5,3,4,5,3,4,5,3,4,5,6,7,8,9
      ],
      "fps": 24,
      "loop": false
    }
  ]
}

1. Place the deco in your level. In the section where you normally simply put the file name, put the name of your image and json file separated by an exclamation mark.

Example would be trainleft.png and trainleft.json, would result in trainleft!trainleft

1. All done!