Dynamic Scaling Demo - Tutorial in the works!

UPDATED: 7/28/14

Now that I am for certain going to be doing a write up on the technical aspects, I've decided to update my progress in the OP.

I know that trying to target any specific resolution or aspect ratio can be infuriating, which is why I designed this object positioning/scaling technique in the first place. Now that I've had a few months to iron out problems, I want to get it in your hands so you can stop worrying about it too!

Here's a demo showing what the dynamic scaling technique does. You can test scaling by stretching the window to any width and height you want and the filler will spawn as necessary, both above/below and to the left/right depending on if the aspect ratio is taller than 3:2 or wider than 3:2.

In anticipation of the dynamic scaling technique write up, you can read some preliminary info about how images scale so that you'll have a better grasp as to what to expect using dynamic scaling.

This blog post was written as an intro to the dynamic scaling post and got out of hand, so it became its own post. If you want a relatively easy to digest run down on what happens when your images are scaled (dynamically or not) then start here!

The next post will describe the actual techniques used in the Dragonfly Zero scaling demo and how to replicate them. That should be ready here sooner rather than later, I hope to have it done within the next month. Sadly it keeps getting postponed due to development projects, school, and my internet being down for a good part of July.

However, the development project keeping me from writing up the dynamic scaling post is also heavily focused on the expansion of the dynamic scaling technique so that it will be able to rotate orientation and reposition objects on the fly. So while I hate to delay it further, by the time I get to the write-up, the technique will be well rounded.

Yes, I'm very interested in such tutorial.

Any graphics information will be welcome.

A0Nasser Alright, if I can help even one person, I will put in the time!

I don't have a time frame for it just yet, as I'm not too sure how involved I'll need to make it. Hopefully sometime within June as I have some catching up to do on code first!

Thank's for your time.

You know there is no much graphics tutorials in the forum, and i want to learn more about the depth background effects.

Maybe with 3D game software's it's easy to make such effects, but with C2 it's kind hard.

I would also appreciate it very much, I still struggle immensely with what sizes I need images/layouts especially when I'm trying to figure in iOS devices. I feel like the tutorials on that subject do not really give any kind of REAL example and just are too simple and not easily used on something a bit more complex.

Thanks for doing this, it sounds like it would help a lot of people.

A0Nasser Of course! And that is a good idea, I had not thought to do a post about the scrolling background technique, it is actual quite simple code and so I will do a blog post about it as well during June.

I am very interested in the graphic side of things and enjoy making special effects, so I will be sure to share what I can about my techniques with the forums to help those who do not understand.

I have always been very picky about graphic technologies in video games I have played, and it seems to be paying off now as I make my own!

— I know that many people struggle with aspect ratios and resolution problems, I decided to tackle the problem once and for all when I realized that games would display differently not only on different devices, but they will also display differently on the same device depending on if there is address bars, and other software bars.

I think the approach I have used is one of the most viable ways of handling this issue as once you implement the base code it is pretty straight forward to be able to place elements on the screen - you must do it by code however - I am not sure if that is how most people do it, but I rarely position objects using the layout editor. The only other limitation I can think of the system is that you cannot use "Is on Layout" behavior, because the layout is always on the left and does not change from it's initial pixel value.

Here is what I mean in case it isn't clear. The red outline represents where the actual layout is at a layout size of 320x480, and the window is stretched to something larger (I think 976x558 px). This is using scale outer for the project setting "Fullscreen in browser" for reference.

And in the meantime until I am able to write up the blog post on the technique, you can try ResUtil. I am not sure if it will help or not for your specific situation, but I built this utility earlier this month to help to visualize which aspect ratios and resolutions to target based on whatever device you load it on, and seeing how your game will scale. Just go to the URL on any device you want to test and it can show you some useful information.

You can test any size on PC by resizing your browser and setting custom sizes.

I hope you find it useful! I also hope that I am not annoying anyone by posting these links in many topics, I want to offer help where I can.

Sigmag Awesome info, thanks for that! It's funny you mention the ResUtil, I have had a tab open with that post for a couple weeks now but haven't gotten around to messing with it. I will definitely try it out this weekend.

Thanks again

Sigmag Double post, old post but I was just looking at an old example capx you posted that showed how the sizing works in your game but it only shows the landscape versions. Is there any way you have a Portrait version also? I'm trying to read through the code (the code is great and straight forward, it's the math and such) and I'm a bit lost. When you are setting the size of the HUDs and you do windowheight/scaleration*16/9 for width, would you just switch the values around for it to work with portrait views?

Thanks!

— Heeey, good timing - I'm actually working on this write up as we speak. I'm having trouble articulating it all, but it's coming along and will be posted later this week. The information I post will be the revised, reiterated, and expanded version of the logic you are implementing (I think you are using an old ResUtil .capx), so you'll want to check it out even with your current logic to see if there's any further functionality you'd want.

The ResUtil capx has some nifty math for the individual HUD objects, but the upcoming post will detail how to build a framework around those concepts in order to build your game within a scaling environment so that placing objects is streamlined (such as the Dragonfly Zero scaling demo above). That math should be pretty straight forward as well.

That said, to answer your question - pretty much. Here's landscape and portrait HUD sizing logic side by side for reference:

Double post, but just wanting to let you guys know I finished the first part of the dynamic scaling post, although it only covers image scaling concepts. My internet has been dead most the week so I haven't been able to write the actual post about the dynamic scaling technique yet - sorry for the delay

All the same, check out this post in the meantime.

This is very helpful. Thanks!

I do have a quick question about scaling down. I noticed that when I do, it's jagged (and this maybe due to the fact that I'm set to point sampling). But is there a easy way to scale in C2? I've been doing my scaling outside of C2 and re uploading each time which can be time consuming.

Weleavefossils Glad you enjoyed the post! As for scaling down, if your resized image is jagged the there's a good chance you are using point sampling. When you downscale with linear sampling, there typically isn't any noticeable difference from the original - it's just smaller. You can check which you are set to in the project properties, which you can get to by clicking your project name in the "Projects" box on the top right of the C2 screen. Once there you should see this box on the left side of the screen where you can set your sampling type:

If you reference the concepts from the blog post, then I talked about an "original, high resolution image" to start with. Depending on the resolution of your game, you'll want to load in that asset, or at least one that is larger than what you need so you can test what image size you will need.

From there, you can resize the image inside of construct, or you can scale it. The difference here can be thought of in terms of permanent, or temporary.

When you resize an image from 1500x1000 to 150x100, then that image is now 150x100 - if you resize OR scale it back up to 1500x1000 the image will look terrible. Here's a couple images showing how you resize an image in C2 after double clicking your sprite - this is the only method you can use to resize your image inside of C2, everything else is used to scale the image:

When you scale an image from 1500x1000, that that image can be scaled to any size, but its still keeping the color information from the 1500x1000 asset, even if you scale it to 150x100 in your game, you can scale it right back to 1500x1000 no problem. You can scale the image with lines in the code, setting the numbers manually in the object properties box (when you select your sprite), or by dragging the corners of the sprite.

So, RAM and performance issues aside - for best visual fidelity, you should resize your image to the size you think will be the largest you will show that image in the game, depending on how the image is scaled (larger than 100% or smaller than 100% original size).

example: If you have a 150x100 asset, and scale it to 300x200, it will be very blurry. But if you have a 300x200 asset and scale it to 150x100, it will look fine.

However, having larger images in your game will cause it to use more RAM and impact performance more heavily, so you should try to find a balance. I find that you can typically scale an image to 120% it's actual size without much noticeable difference (won't be too blurry).

Hope this answered your question!

Also, you shouldn't use an image anywhere near 1500x1000 in your actual game, you should try to stay 512x512 or lower for the most part! I was just using some random assets for an example

Sigmag thanks so much for all the details. I feel so OCD about resolution and image scaling.

Weleavefossils No problem! Feel free to ask other questions, I'll try to answer as best I can.

I've also updated the title and OP with newer information, and once I can knock out the dynamic scaling blog post, it'll be added to the OP as well.

Sorry again guys for all the delays on the write up, one of our publishers is demanding a really weird change to one of our games that is going to take a week or two to fix.

By the time I finish fixing that issue however, the dynamic scaling technique will have further expanded functionality.