Flame : Part 4: Adding Background to the game.

Why do we need background?

Background makes game more interactive, and it also provides nice looks to game, imagine you are playing a 2d carom game now what if there is no scoreboard showing in background on your screen? Or what if only striker will move on the screen and there won't be any board at background? I guess will be hard to understand game, that's why background is needed. However, we are going to add a background in this game for collision detection purpose for the platformers.

Steps

Add the background image to your assets folder

Add background image to your assets folder like added boy and girl pic and register to pubspec file. I am adding two image one is background and other is platform basically I want to make game in which there is background and game character can jump on the platform.

Setup Background

I am going to set up the background as a sprite for now, the double dot in the code below  is basically a cascade operator which just adds another property onto the instantiated class

here object so first thing we want is t0 sprite and name of the file(background.png) and then we set up the size which is within the base game class which contains size(it's the size of the main screen of the game). And then we will add the background. So we just set up the sprite component and added the background.

    SpriteComponent background = SpriteComponent()

      ..sprite = await loadSprite('background.png')

      ..size = size;

    add(background);

this piece of code will show the following output.

Adding platform

so, as per the plan of the app, the next step is to add a platform in the game. So we will make these sprite components, and then we will add collidable to them after that. So she could stop on this platform and then when she hits the boy, maybe then for the simplicity we will remove the sprites from the screen. You may consider hitting of boy to be out from game.

In the onload method, first load the image sprite and we will add some properties onto the image sprite with the cascade operator as used before. We are going to add the size of the platform sprite on which the girl will stand.

 platformSprite = await loadSprite('platform.png');

    SpriteComponent platform = SpriteComponent()

      ..sprite = platformSprite

      ..size = Vector2(170, 40)

      ..x = 0

      ..y = 200;

    add(platform);

as the sprites are in layers, we are also going to move the platform down below in the codebase below the background.

So the following video is the output of today's blog.

In the upcoming blog, we will implement collision.

Refer to the link below in case you get any doubt in code.

https://gitlab.com/mdnazisharman/addingbackground/-/tree/main