Dynamic Scaling Demo - Tutorial in the works!

Discussion and feedback on Construct 2

Post » Wed May 28, 2014 11:29 pm

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.

Image

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.

Image

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.
Last edited by Sigmag on Mon Jul 28, 2014 5:13 pm, edited 4 times in total.
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Wed May 28, 2014 11:54 pm

Yes, I'm very interested in such tutorial.
Any graphics information will be welcome.
B
60
S
10
G
10
Posts: 1,013
Reputation: 9,155

Post » Thu May 29, 2014 3:21 pm

@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! :)
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Thu May 29, 2014 3:48 pm

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.
B
60
S
10
G
10
Posts: 1,013
Reputation: 9,155

Post » Thu May 29, 2014 5:37 pm

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.
Twitter: https://twitter.com/pudgyplatypus

Learn to make a clicker game for cheap!
https://www.scirra.com/store/games-with ... e-game-666

Try out Pixel Golf on the Scirra Arcade!
https://www.scirra.com/arcade/sports-ga ... el-golf-67

Pudgy Platypus Games website!
www.pudgyplatypus.com
B
59
S
20
G
5
Posts: 212
Reputation: 7,390

Post » Thu May 29, 2014 8:23 pm

@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! :lol:

@Djfuzion 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.

Image

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.

Image

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. :)
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Fri May 30, 2014 5:29 pm

@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
Twitter: https://twitter.com/pudgyplatypus

Learn to make a clicker game for cheap!
https://www.scirra.com/store/games-with ... e-game-666

Try out Pixel Golf on the Scirra Arcade!
https://www.scirra.com/arcade/sports-ga ... el-golf-67

Pudgy Platypus Games website!
www.pudgyplatypus.com
B
59
S
20
G
5
Posts: 212
Reputation: 7,390

Post » Sun Jul 20, 2014 11:59 pm

@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!
Twitter: https://twitter.com/pudgyplatypus

Learn to make a clicker game for cheap!
https://www.scirra.com/store/games-with ... e-game-666

Try out Pixel Golf on the Scirra Arcade!
https://www.scirra.com/arcade/sports-ga ... el-golf-67

Pudgy Platypus Games website!
www.pudgyplatypus.com
B
59
S
20
G
5
Posts: 212
Reputation: 7,390

Post » Mon Jul 21, 2014 7:23 pm

@Djfuzion 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:

Image
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Post » Sat Jul 26, 2014 9:17 pm

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.

Image
ImageImageImage
B
16
S
3
Posts: 45
Reputation: 2,188

Next

Return to Construct 2 General

Who is online

Users browsing this forum: Yahoo [Bot] and 5 guests