Large layout issues

Hey all,

I have been making an RPG for a long time now and it's really going great. All my systems are in place and working fine (which took months!) and I have an amazing artist who has done heaps of characters and some layouts. Only problem is, we have just started drawing the art for the different layouts and quickly ran into trouble when it came to the main town (which is by far the biggest layout in the game).

The artist is making 1 main image for the background then placing other items like houses on top. This works fine for 1 screen images, but on big layouts there are a few problems (layout details: 10,000 x 8,000. Window size: 1360 x 1020). First off the max image size is 2,000 x 2,000, so we need to cut up the image into several pieces. But then, the loading times go way up and the music skips when entering a big layout, as well as the game freezing for a moment whenever a new piece comes on screen.

So I tried making them only appear when you get within a certain range which did help load times, but still caused the game to freeze a little when they appear.

I will soon try cutting it up into much smaller tiles and have them load/destroy depending on distance to the player, but I expect there to be some big slowdown issues having heaps of items on screen and constantly being created and destroyed.

Also I am aware of the tiled background object, but I really want to avoid that as I want to take full advantage of my artist who can create full layouts, completely customised and unique. Since the game is very small (for an RPG), custom drawing every layout is not hard both financially and time wise. So I would really like to take advantage of that.

So yeah, if you have any solutions or suggestions please let me know! I am very passionate about this project and I want to get it as smooth as possible.

You're talking about the performance when the game is on preview or on the internet?

I'm also interest in learn/know the solution too, because my next task is make a RPG game =\</p>

TELLES0808 - The problems occur in preview mode as well as the .exe (node webkit). It would be fantastic if I could use jpeg instead of pngs for the backgrounds, as they are 10x smaller and look exactly the same.

You can use jpg:

<img src="https://dl.dropbox.com/u/8367729/construct/pics/jpgExport.PNG" border="0" />

I think on the runtime, every image will be treated as a bitmap, independent of his file type, and will occupy the same memory size. But, for download, it could save a lot of download!

Did you tried use "Tiled" with its plugin?

ramones - from Performance tips:

ommon misconceptions ... Image formats (e.g. JPEG, PNG-8, PNG-32) affect the download size but have no effect on runtime performance (they are all decompressed to 32-bit bitmap on startup).

Setting an image format affects the transmission of the file over the network, but has no effect at all at runtime.

Tobye - From Best practices:

emory use ... Some designers are tempted to design entire levels as single large images, for example 10,000 x 10,000 pixels. This method should be avoided at all costs... (snip)

The section goes on, and you should read it all. In other words, as much as you might like to design your game by drawing the entire layout as a single image, you really shouldn't. From a memory use point of view, it's the worst way you can possibly design a game. If you cover your whole 10,000 x 8,000 layout with unique image content, it will use over 300mb of memory. This means you'll need a desktop with at least a 512 MB graphics card to even start the game up, which rules out a lot of common computers, and all mobile devices. And that's just the background before you've even started the rest of your objects and animations! You could end up with a game that won't run anywhere except the most powerful gaming systems.

For this reason, in practice nobody designs games like that. Use tiled backgrounds and creatively recycle a smaller set of images. Even pro commercial games use that approach!

I dunno, if you make the pieces you're creating and destroying small enough, like 256x256, make sure each piece is a entirely different object and not a different instance, and only create 1 each tick, I would think it should work fine, actually. That way it's basically 'streaming' textures to the graphics card and dumping them based on proximity, keeping memory usage down (as long as webgl is being used).

The trick is definitely to try to not send too much image data in a single tick. As I hear the bandwidth for doing that isn't very high on most systems, which is what causes the pause.

Arima - it's hard to avoid mid-game pauses from the textures being loaded and dumped on the fly with that method. Also C2's texture management isn't expecting you to do that, so it might keep textures in memory and still accumulate up to the full layout memory size.

Oh, so webgl mode doesn't always dump textures immediately? In one of my projects I had a large object that caused a pause every time it was created after all its instances had been destroyed, so I assumed it did. Does that have something to do with the instance pooling?

ramones - Oh I should have been more clear, I knew you could import them but also heard that they get converted on export so it had no real effect (as Ashley just confirmed)

TELLES0808 - no, I haven't heard of it. Do you have any link?

Arima - Yeah after trying it a few ways I still ran into the occasional pauses. It was slightly different on different computers though, on one you couldn't notice any pauses at all, but the others had different ranges of pausing.

Ashley - Okay, thanks for that. Would you have a recommendation as to how large is okay before you run into issues on the average computer? (as in memory usage, and also not concerned about mobile)

mapeditor.org

scirra.com/FORUM/plugin-tiled-sprite_topic53015.html

Thanks, I tried it out but it didn't help unfortunately. The memory usage was unchanged.

Hmm, I wonder if something like this could be implemented as a plug-in at some point. It seems like something people frequently want to do, and if a plug-in could stream in and discard segments of a texture dynamically based on distance, I think it would really help.

Arima - Do you think this would be a possibility at all? I wouldn't mind paying someone a little cash if you know someone who can do a good job of it.

When you're developping a game, you enter the world of tricks and faking.

It's just not a straightforward process.

The only time I worked on a game with full, non modular assets, was on a friends point&click game.

But we still used a trick: we made video sequences that looped and we layered a HUD on top. Changing a view was merely just reaching another point on the video and looping through a range (like from the 30th second to the 45th).

The year before I learnt the lesson. Another friend was making the same kind of point&click but with Sprite animations. The project (it was multimedia fusion 2 but it's not relevant here) went up to 1.5Go and took like 10 minutes to open.

And at least 1 minute or 2 to preview it. The Ram used, I think, went up to 800Mo.

All that because there were a lot of 1024x768 sprite animation.

If you're curious about the calculation it's rather simple. A pixel has 4 channels R,G,B,A and each Chanel takes 1byte (8bit, 256 levels).

So a 1024 x 768 image will take 1024*768*4 bytes which is exactly 3Mo.

This friend of mine had like 4 camera view with looping animation(to create some kind of mood...) and when I say animations, it was 3D animated render and composited on after effect. So making tonnes of frames was pretty cheap. And there were between 50 and 150 frames. On top of that, there were some state changes, which means, an entirely new animation loop each time.

So the project probably had up to 250/300 images.... Here are your 800Mo of Ram. (And of project size since, I think multimedia fusion 2 store images as raw bitmaps).

Now, for a better example that kind of speak for itself, you have Rayman Origins.

<img src="https://dl.dropboxusercontent.com/u/23551572/misc/rayman-repetition.jpg" border="0" />

And I'm probably missing tonnes of things.

I wouldn't be surprised if some part of the land in the background were used for the foreground (or the other way arround)

But anyway, you can see that this image is build by duplicating the same assets. They are resized/mirrored but also the hue,saturation and lightness are tweaked as well as some blurring effect to fake out of focus objects.

What I suspect as well, since it's made with the ubiart framework. is that the curly plants might be distorted sprites to create a bit more variety. And also, you can see those plant on other levels but with a more purple hue.

And that's only what I discovered. They are definitely more tricks that allowed them to lower the memory footprint and so increase the amount of graphics in the image.

A good 2D game artist has to think of modularity. It's not easy, it's even, often, painfull for the artist. But that's the price of real time rendering (: