Creating an efficient background scene

Get help using Construct 2

Post » Sat Dec 22, 2012 3:10 pm

Hi,

I've been pondering what would be most efficient way to create (more or less) random background for a space setting? The size should fill full-screen 1920x1080. I also plan to have some small parallax scrolling/scaling on some layers to give some sense of depth but otherwise these would be static.

Here are few options I've been thinking:

a) Single sprite, that includes the whole background. Not really randomized though.

b) Few objects (star shapes, nebula's and whatever)that are around 256x256 in size. These textures are spawned on different layers / random locations and rotated/scaled randomly. Amount of objects rises a lot, but textures are smaller and some are reused. For randomizing nebula's I'd use a single sprite with few different animation frames that have different images in them. The frames would be randomly picked.

c) The canvas plugin. It could be used to generate some gradients and whatever to liven up the scene, but I'd imagine using sprites is more efficient in static backgrounds anyway?

d) Some combination of above. Single gradient/foggy overlay to give space some 'texture' rather than just being a black space (see
this for what I mean) randomly generated nebula's and star shapes on top of it to give the randomness.

Few questions: Is using canvas plugin more efficient in someway? I'd like to have a single gradient shape over the whole layout on some occasions, does it matter if I have a single image, big image partitioned as multiple sprites or if I am using the canvas plugin?

If anyone knows or has decent guesses to these questions I'd appreciate a lot! :)vee412012-12-22 15:10:59
B
24
S
8
G
7
Posts: 756
Reputation: 7,202

Post » Sat Dec 22, 2012 3:49 pm

I'd avoid a single sprite (especially in 1920) it would take a lot of memory and a long time to download, and I guess you wouldn't have only one of those.

Smaller sprites you can "bank" in a single animation and display only a single frame out would be a good solution.
You could also add a "pattern" in a TiledBackground. (That's part of the solution I used in this shoot-'em-up tutorial)

I hope this helps.
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 7,000
Reputation: 57,795

Post » Sat Dec 22, 2012 9:25 pm

Thanks, that is really useful technique I will integrate into my project, makes this a whole lot easier! :)
B
24
S
8
G
7
Posts: 756
Reputation: 7,202

Post » Sat Dec 22, 2012 9:43 pm

If you want a gradient, you can make a tiny image then stretch it as far as you want - it will still look smooth.
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Sat Jun 22, 2013 7:44 pm

bump for thanks @sqiddster
B
18
S
5
G
4
Posts: 568
Reputation: 5,079

Post » Sat Jun 22, 2013 8:34 pm

@California heh, no worries, glad I could help ;)
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400


Return to How do I....?

Who is online

Users browsing this forum: Kagubro and 20 guests