Layout Progress Indicator

Get help using Construct 2

Post » Fri Jan 03, 2014 1:28 pm

Hi all, thanks for viewing.

I have looked at several topics regarding distance and such but could not find any solution for what I want to do.

I am working on a vertical scrolling shooter, and have been trying to make an indicator that shows how far along you are in the layout.


Here is what I thought might work:

I have a background bar, a progress bar, an arrow, and a scroller sprite (with scroll to behaviour).

I would like the arrow to always stay within the boundaries of background bar, starting at the very bottom and finishing at the top.

To achieve this I figured I could set the height of the progress bar relative to the scrollers position, the LayoutHeight, and the background bars height, and then set the arrow to the bottom of the progress bar.

Events:
|System Every tick|
barProgress - Set height to (Scroller.Y / LayoutHeight) * barBack.Height
arrow - Set Y to barProgress.Y + barProgess.Height

This is pretty close but never accurate and the results differ slightly depending on the layout height.


Here is a capx that demonstrates what I am trying to achieve. (Requires R155)

Thanks for any suggestions.
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
35
S
13
G
7
Posts: 363
Reputation: 7,283

Post » Fri Jan 03, 2014 2:24 pm

Something like this would probably work:

barprogress - set height : (layoutheight-scroller.y)*barback.height/layoutheight+barprogress.y
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Sat Jan 04, 2014 4:08 am

[QUOTE=LittleStain] Something like this would probably work:

barprogress - set height : (layoutheight-scroller.y)*barback.height/layoutheight+barprogress.y[/QUOTE]

@LittleStain, thanks for the suggestion, but does not work, the progress bar ends up being way below the ViewPort and the length increases instead of decreasing.

I tried a few variants of the equation but to no avail. Math is not one of my strong points....
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
35
S
13
G
7
Posts: 363
Reputation: 7,283

Post » Sat Jan 04, 2014 4:21 am

Just to clarify a little more on what I want to do.

The game I am working on has many levels with varying heights.

The background bar is like a gauge representing the length of the layout, but of course much shorter in height (say 256px) and is on a HUD layer (parallax 0,0).

Hope that clarifies things a bit from my first post.

Please note, I spent quite some time on the capx to explain what I want to do. so it would be much easier to understand if you can look at that.


Again thanks for any help\suggestions. :)
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
35
S
13
G
7
Posts: 363
Reputation: 7,283

Post » Sat Jan 04, 2014 10:57 am

First guess is that you need to allow for the 384 you are stopping the scroller at in your calculation of the arrow height ?

If you remove this stop when equal to or less than 384 and allow it to go to 0 then it works ?

So is the offset the arrow is stopping at related to the layout height/384 ?RamPackWobble2014-01-04 10:58:06
August 2015 - I misplaced a lot of links - I will try to find backups and repost. If You find a post that interests please reply to post with @rampackwobble and I will get a nudge!

If you find my posts useful please consider donating something to a local charity or to the http://www.mndassociation.org/
B
64
S
34
G
47
Posts: 1,194
Reputation: 30,882

Post » Sat Jan 04, 2014 12:51 pm

right I think I've got this...

The distance to are multiplying by the barBack.height should be

((LayoutHeight - 32)-scroller.y)) / LayoutHeight-384 )

so this is the start position (or LayoutHeight-32 : the 32 is because you are starting the scroller at half its height from the bottom of the layout). Take from this the scroller.y (so now we have the height above its starting point). Divide this height by the layoutHeight- 384 (which is the total distance the scroller will move)

This does not allow for the height of the arrow - so the arrows origin point will travel from the boxBack bottom to top.

I will go and have a coffee and then probably find this is all wrong ! :)
August 2015 - I misplaced a lot of links - I will try to find backups and repost. If You find a post that interests please reply to post with @rampackwobble and I will get a nudge!

If you find my posts useful please consider donating something to a local charity or to the http://www.mndassociation.org/
B
64
S
34
G
47
Posts: 1,194
Reputation: 30,882

Post » Sat Jan 04, 2014 1:04 pm

[QUOTE=RamPackWobble] First guess is that you need to allow for the 384 you are stopping the scroller at in your calculation of the arrow height ?

If you remove this stop when equal to or less than 384 and allow it to go to 0 then it works ?

So is the offset the arrow is stopping at related to the layout height/384 ?[/QUOTE]

@RamPackWobble, thank you for the help. Your tips sent me in the right direction. I don't know why, but I didn't even try that!

In the actual game I am working on I had the scroller starting and finishing in the centre of the viewport, but I can work around that.

The fix:
Starting scrollers Y coordinate at the bottom of the layout and stopping it at 0 the arrow now starts and stops in the same postion regardless of the LayoutHeight.

Changed: arrow - Set Y to (barProgress.Y + barProgress.Height) + Self.Height

This causes the arrow to always start and stop in the same position regardless of the layout height.

However when starting at the bottom the arrows top edge was below the barBack.

To get around that I placed barBack of screen, and added another bar (barBackHUD) for the visual gauge, and made it a bit longer (the height of the arrow).

Works a treat!

Edit: modified capx


So many thanks for your helpmichael2014-01-04 22:27:41
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
35
S
13
G
7
Posts: 363
Reputation: 7,283

Post » Sat Jan 04, 2014 1:07 pm

August 2015 - I misplaced a lot of links - I will try to find backups and repost. If You find a post that interests please reply to post with @rampackwobble and I will get a nudge!

If you find my posts useful please consider donating something to a local charity or to the http://www.mndassociation.org/
B
64
S
34
G
47
Posts: 1,194
Reputation: 30,882

Post » Sat Jan 04, 2014 1:17 pm

@michael,

This should help I hope. Rather than place the arrow to a position on the gauge in such a complicated way, try the following:

1. Put the arrow's origin to its center.
2. Modify the every tick function on line 2:
    arrow -> Set Y to barBack.Y + arrow.Height/2 + (barBack.Height - arrow.Height) * (Scroller.Y - 384) / (LayoutHeight - Scroller.Height/2 - 384)

This way you don't need to stretch a barProgress sprite (or even have one) and the above formula considers the playable height of the layout (-384 because your demo stopped with the Scroller in the middle of the screen: 768/2) and it also considers the height of the Scroller at start because its height slightly reduces the available playing area.

Edit: It took me so long to type this out I see another option has been posted. Food for thought anyway I hope - regards, Ed.Colludium2014-01-04 13:20:18
A big fan of JavaScript.
B
74
S
20
G
71
Posts: 2,230
Reputation: 44,892

Post » Sat Jan 04, 2014 1:48 pm

[QUOTE=RamPackWobble] One coffee later and a bit of a code tidy...

https://dl.dropboxusercontent.com/u/143636437/examples%20for%20web/scroller%20gauge.capx

[/QUOTE]

Awesome! You are legend! (coffee is amazing isn't it?)

Your solution is great, especially removing the need for the progress bar - less sprites is always good!

I make use of instance variables a lot in the game, but I would never come up with what you put together there.

I have made a note to add you to the credits when the game is completed.
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
35
S
13
G
7
Posts: 363
Reputation: 7,283

Next

Return to How do I....?

Who is online

Users browsing this forum: 25games, Artcadev, grodrigues and 20 guests