How do I use something like this to zoom in/zoom out?

Get help using Construct 2

Post » Tue Nov 18, 2014 2:29 pm

Could I use a script or something else to zoom in/zoom out the entire screen gradually? Thanks.

Code: Select all
<div class="toolbar" style="display: block; width: 940px; height: 50px;">
<img id="zoomin" alt="zoomin" src="./media/toolbar_zoomin.svg" style="width: 30px; bottom: 0px; left: 0px; padding-top: 10px;">
<img id="zoomout" alt="zoomout" src="./media/toolbar_zoomout.svg" style="width: 30px; bottom: 0px; left: 0px; padding-top: 10px;">
</div>
Last edited by RBuster on Wed Nov 19, 2014 10:33 am, edited 2 times in total.
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

Post » Tue Nov 18, 2014 3:15 pm

You could create zoom in/out effect by repositioning and resizing objects in relation to how close they are to the centre of the screen. You could also use families to create 3d zoom parallax effects.
Image
B
9
S
3
G
1
Posts: 346
Reputation: 1,560

Post » Tue Nov 18, 2014 4:23 pm

Hi @hundredfold

I just want to zoom (in/out) the entire screen without change the game assets. Something like browser>request fullscreen, but zooming gradually.

And about the script? I cannot apply it or something like it on the page for this purpose?
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

Post » Tue Nov 18, 2014 4:33 pm

Hi RenatoB

kmsravindra just posted a thread about a brainstorming product he's developed with Construct 2.
viewtopic.php?f=148&t=119400

I just watched the YouTube video demo (it's only a couple of minutes long) and he's using a zoom in/out feature in there. If it's anything like what you're trying to achieve he may be able to help.
Image
B
9
S
3
G
1
Posts: 346
Reputation: 1,560

Post » Tue Nov 18, 2014 4:42 pm

RenatoB wrote:Could I use this script or something else to zoom in/zoom out the entire screen gradually? Thanks.

Code: Select all
<div class="toolbar" style="display: block; width: 940px; height: 50px;">
<img id="zoomin" alt="zoomin" src="./media/toolbar_zoomin.svg" style="width: 30px; bottom: 0px; left: 0px; padding-top: 10px;">
<img id="zoomout" alt="zoomout" src="./media/toolbar_zoomout.svg" style="width: 30px; bottom: 0px; left: 0px; padding-top: 10px;">
</div>


In C2,

System>set canvas size
or system>set layout scale would let you zoom the game (or change the window size, which effectively can be use to resize the game when fullscreen is set to off andzoom in some fullscreen modes).
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Post » Tue Nov 18, 2014 5:50 pm

@hundredfold: Thanks for the link. I'll check it.

@Aphrodite: Thank you. I'm already trying something with the "canvas size". Thanks for the suggestion about "scale layout" too. A question: Could I use percentage with "canvas size"?
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

Post » Wed Nov 19, 2014 10:37 am

Anyone knows how to use percentage? I would like to increment/decrement values using percentage to zoom in/out the screen.
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

Post » Wed Nov 19, 2014 2:16 pm

I tried:

Code: Select all
set canvas size to canvasW = canvasW*1.10 / canvasY = canvasY*1.10


But not worked like I need. The screen moves to the left when reduced.
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193

Post » Wed Nov 19, 2014 3:36 pm

You would have to store the value of the width and height corresponding to 100%

Then you just set the width to the reference width * the percentage.
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Post » Wed Nov 19, 2014 6:13 pm

@Aphrodite

I did it, but only worked after I change the "Fullscreen in browser" option to "Off". Thanks anyway.
B
74
S
14
G
4
Posts: 1,045
Reputation: 8,193


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 14 guests