About the adjustment of the game background, reading this article is enough

hi ！ Hello everyone , The ant is me . Welcome to my WeChat official account. 【 Little ants teach you to play games 】, Learn more original game development tutorials .

Recently, I have seen a lot of questions about the background map of the game , It's the choice To adapt to Or choose The tensile ？ Is that the Fit width still Adaptation height ？ Don't want the background image to automatically adapt , What to do if you want to customize ？ This article will share some things related to adjusting the game background .

Adapt or stretch

The picture is a scene in a small game making tool , When you set a picture for the background （ Here is a 1024x1024 The square picture of ）, stay Attribute area Properties related to the background will appear in , You can see that there are mainly tile , Adapt and stretch Three , Here we mainly talk about To adapt to and The tensile The difference between .

The tensile

So let's look at this first The tensile .

Select “ The tensile ”, Then preview the scene .

Look at the background image under the two different screen sizes above , The head of the little ant was elongated , Because the original background is a 1024x1024 The square picture of , But the final screen size is rectangular , So it will lengthen the background picture of the square , Let it fill the screen .

This is the background image The tensile 了 , No matter how big your background image is, the size of the original image is , It will always be adjusted according to the final displayed screen （ The small picture is enlarged , The big picture shrinks ）, Let it fill the whole screen .

The tensile The advantages of ： The background image will always fill the whole screen , There will be no black edge problem caused by insufficient background image filling .

The tensile The shortcomings of ： It is not necessarily an equal proportion of stretching , Non proportional stretching will cause the image in the background image to deform . As shown in the image above, the small ant , It is obviously stretched .

To adapt to

Then let's take a look at adaptation , There are two kinds of adaptation , adapter Width And fit Height .

Let's first look at the adaptive width , Preview the scene .

Pictured , Namely Fit width Display effect of , The principle is to enlarge or reduce the picture in equal proportion , Stop until the left and right sides of the picture fill the left and right sides of the screen . Suppose the green box in the figure represents the size of the original figure (1024x1024), The final adaptation effect is to transform the original image Proportional reduction , Until it fills both sides of the screen ( According to the current screen size , The width of the screen is 375).

If the size of the original background is smaller than the width of the screen , Suppose the background picture is 512 x 512, The size of the screen is 800x1600, At this time, the background image will be enlarged to an equal scale , Until the width of the screen , That is, the background image is made by 512 x 512, Zoom in to 800 x 800.

Let's take a look at the fitting height .

Preview the scene .

Pictured , It is the display effect of adaptive height , The principle is to enlarge or reduce the picture in equal proportion , Until the upper and lower sides of the picture fill the upper and lower sides of the screen . Suppose the green box in the figure represents the size of the original figure (256x256), The final adaptation effect is to transform the original image Equal magnification , Until it fills the upper and lower sides of the screen ( According to the current screen size , The height of the screen is 667).

If the picture size of the background is larger than the height of the screen , Suppose the background picture is 1024x1024, The size of the screen is 375 x 667, At this time, the background image will be reduced to an equal scale , Until the height of the screen , That is, the background image is made by 1024x1024, Shrink to 667x667.

Last , Fit width and height are check boxes , You can check , But the effect of checking at the same time is equivalent to the adaptation height .

Of course , You can also leave it unchecked , If it is not checked , The background image will be displayed in full size .

This is the background image To adapt to 了 , The background image will be displayed according to the size of the screen Scale equally , To fit the width or height of the screen .

Adaptive advantage ： The background image is scaled equally , There will be no deformation of the image .

Adaptive shortcoming ： It can only meet the adaptation of one direction , When adapting the width , Black edges may appear on and off the screen ( Areas not filled with background ), When fitting height , The contents on both sides of the background image cannot be displayed .

How to customize the background image

In the wechat game making tool , As long as you set a background picture , You must choose one of the three filling types .

however , Sometimes we don't want tools to deal with the adaptation of the background , We hope to be able to deal with the background by ourselves , So what do you do ？ It's simple , Just add a separate sprite layer , Then put the spirit layer on the background layer , Below all other elf layers , That's all right. .

such , You can ignore the background adaptation provided by the tool , Manually adjust the size of the wizard . Preview it , See the display effect under different screen sizes .

This custom way is to try to solve the display problem of different screen sizes with a large picture .

Self defined advantage ： There is no need to consider the adaptation of different screen sizes , It can be displayed normally on almost all sizes of screens .

Self defined shortcoming ： The background image should be large , And only a part of it can be displayed on the screen forever .

In real game projects , Stretch the background Basically, it won't be used , Because the screen size varies , Using stretching will definitely lead to the deformation of the image , This is unacceptable . The other three fit widths , The adaptation height and customization need to be selected according to the specific game , Each scheme has its advantages and disadvantages , No one is the best , You need to choose a suitable background adaptation scheme according to the specific game .

---

Welcome to my WeChat official account. 【 Little ants teach you to play games 】, Learn more original game development tutorials .