The "right" way of doing backgrounds in C2?

Discussion and feedback on Construct 2

Post » Sat May 11, 2013 10:20 am

Hello all,

I reached the point where I seriously need to start considering non-interactive backgrounds in my current project and I was wondering what would be the "right" way of doing nice looking multi-layered backgrounds in C2.

Now, I've read quite a good deal of posts in the forums and from that I take away the following points:
1) having huge images saved as backgrounds is not advisable, as this takes considerable computing resources (specially in mobile)...and it's really a brute-forcey way to go around.
2) Full tilemap implementation is not available (it is implemented through sprites in 3rd party plugins though). The official tiled background object in C2 just allows you to define 1 tile and repeat it according to the size of the object.
3) People usually point towards the way Rayman Origin builds its backgrounds. That is, repeating a lot of 'prop' sprites like trees and rocks and using size, color and other transformations to introduce variety

So 3 seems the best way to go. Is there anyone who successfully implemented this method? If so I would like to ask him the following questions:
a) Performance-wise, how heavy is it on PC and mobiles? Any disadvantage
b) What special advantages does this method have? For example, if they are all sprites, can you animate some of them for added impact?
c) Tips and Tricks for doing it right, limitations from C2, etc.

Also, if anyone can also post their own success stories with this or other background methods (for example 3rd party or dynamically generated maybe) it would be extra nice :)

Cheers and thanks in advance
B
19
S
4
G
4
Posts: 70
Reputation: 3,896

Post » Sat May 11, 2013 11:38 am

Hi Alcemon,

3 is the option to go with.

Check this blog from Tom, (Scirra Developer) Don't Waste Memory

It is good read and excellent information..
If it can be done, someone on the web will show you how to do it!

CDASI Games Mentality Break Splat-a-bug FlapFleet Challenge
B
28
S
9
G
5
Posts: 304
Reputation: 5,588

Post » Sat May 11, 2013 11:44 am

For Mortar Melon I learnt a few things along the way.

One of the biggest things I found is that when you employ depth of field, out-of-focus imagery can be upscaled at no real visible loss of quality. This can save a lot of video memory and improve performance, but it leaves you in a difficult position as to whether use tiled backgrounds or upscaled sprites (as tiled backgrounds can't be scaled).

I found that the more out of focus an image was, the more it made sense to not use a tiled background. However, when I got closer to the in-focus layers, then tiled backgrounds were more effective resource-wise.

Hopefully this breakdown should illustrate my point.

This is the complete layout for one of my desert levels:



Here is my foreground layer. Whilst these sprites are some of the biggest on the screen, they're also the most out of focus and hence upscaled from smaller sprites without much deterioration in quality. The trunks that frame the image are tiled backgrounds because they extend dynamically to fit either very long or tall levels.



This layer has one of the biggest sprites and because it's fully in-focus I couldn't scale up without a loss of quality, so it made sense to make it a tiled background. Normally I'd bake the pot into the tiled sprite but as it sometimes overlapped things awkwardly, I made it a separate sprite.



Whilst the playground layer is typically made up of individual sprites, I created a separate wood tiled background so that I wasn't using hundreds of individual sprites to construct complex scaffolding. After implementing this optimisation I was often able to half my onscreen sprite count. This only works with non-physics objects (you can see the physics wood has a red tint).



This layer uses a simple tiled background for the sand, and as the tree is out of focus it's scaled up.



This is quite a large tiled image, but a lot of it becomes exposed on taller levels so was necessary. This would probably be better off as an upscaled sprite in hind-sight.



As the parallax decreases over distance it made sense to upscale this as a sprite rather than use a tiled background. It's a seamless sprite so you can still paste it next to itself and it will tile for longer levels.



Normally you could get away with a single upscaled sprite for the background here, but as I'm using my own scaling solution, the area above could become visible on narrow resolutions. I solved the problem by fading the background sprite into a dynamically sized tiled background.



Final ingame shot:

Moderator
B
72
S
13
G
11
Posts: 900
Reputation: 11,783

Post » Sat May 11, 2013 12:36 pm

@thehen - wow, thanks for explaining your technique and showing those informative screenshots.
B
32
S
7
G
8
Posts: 312
Reputation: 8,467

Post » Sat May 11, 2013 12:54 pm

@thehen : very interesting, and nice to share.
I've done quite the same thing for my game, i would have just use 2 tiles sometimes instead of one, to have smaller ones, but it creates more objects, so i'm not sure what is better, i think it depends of the game or the device we target.
B
11
S
6
G
2
Posts: 105
Reputation: 3,910

Post » Sat May 11, 2013 1:17 pm

@thehen

It's probably worth copying and pasting everything you've just said and illustrated into a tutorial so it doesn't get lost, as that's some very clear and helpful advice.

B
12
S
3
G
1
Posts: 235
Reputation: 2,053

Post » Sat May 11, 2013 2:14 pm

more like a blog post "Making of The Mortar Melon"... nice post by the way.
ImageImageImageImage
B
140
S
58
G
36
Posts: 2,547
Reputation: 31,170

Post » Sat May 11, 2013 2:41 pm

I agree with Dave. A sticky would be nice for the great tips!
B
31
S
6
G
4
Posts: 160
Reputation: 5,998

Post » Sat May 11, 2013 5:27 pm

Thanks everyone for the responses, this indeed will become a great reference.

@thehen About performance, how slow/fast is this setup for PC (and mobile if you have also tried)? Finally, how big in diskspace did your background resources end up being?

Seems that this the way to go to achieve very polished medium to small levels. Maybe for larger levels (which is not my case for now) a tilemap based solution would be needed.

Thanks again for the replies
B
19
S
4
G
4
Posts: 70
Reputation: 3,896

Post » Sun May 12, 2013 4:16 pm

@Alcemon My whole game is 7mb, though I could probably get that down to 5mb if I fixed a few plugins so I could minify the script. Performance is great across the board - physics bottlenecks way before sprite count.

I'll write my post up as a tutorial next week :)
Moderator
B
72
S
13
G
11
Posts: 900
Reputation: 11,783

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 12 guests