Help with 'Bound to viewport'

Post reply
1 favourites
From the Asset Store
Help Santa Claus - HTML5/Mobile
$15 USD
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
R Games's avatar
R Games

  • Hello,

    I'm trying to replicate a 'Bound to viewport' behavior. Shame C2 doesn't have it by the way.

    So I've got this code:

    But the only thing that is happening is that the Clock and TimeText are created at the LastTouch coordinates. The rest is completely ignored! Weird things happen as well, like the angle of motion being ignored.

    Does anyone know what I am doing wrong here and how I can fix it?

    Thanks!

  • I'm guessing your variables LastTouchX and LastTouchY are inside of the viewport, that's why "SetTimeText" function is never called.

    You can add debug output to event 157 - Browser Log ViewportBottom/Top/Left/Right and LastTouchX/LastTouchY. Run the project, open console and check the values.

  • Thanks for your reply.

    I put the function Call "SetTimeText" below the four viewport conditions so it wil run regardless, but it's still ignored. I want to try your debug suggestion but I don't understand what you mean by all that.

    How do I do that debug output to an event?

  • Add Browser object to the project. Add this event:

    Browser Log "Left " & ViewportLeft("HUD") & " Right " & ViewportRight("HUD") & ... and so on, as many values and variables as you need.

    Run the game, press F12, open Console tab and check the output.

    You might also want to run your project in Debug Mode, so you could pause at any time, check variables, objects etc.

    Browser-Log and Debug Mode are two main troubleshooting methods.

  • Hiya,

    Thank you for the explanation.

    How do I watch functions though to see if they are called? I see the Function object in the left list in Debug mode but no functions themselves.

    OK, so is this correct nesting of the "SetTimeText" function to run regardless?

    As for the log, this is what is displayed for the ViewPorts: Left -798.8417618271 Right 1338.8417618271 Bottom 960 Top 0

    Funny thing is the Top and Bottom viewport are 960 and 0. While the Left and Right differ, when I resize the browser window for example.

    Thanks.

  • Yes, now "SetTimeText" should be called regardless of TimeText position.

    You can put lots of Browser-Log actions in different places of your code, to see which functions are called, in what order, how variables are changing with different events etc.

  • OK thanks. I did mean that I don't know how to log a function.

    If I write:

    & SetTimeText

    C2 will tell me that it's not an expression.

  • If you want to know if the function is called or not, put Browser-Log "Function is called" action inside the function.

  • —

    the problem is that you create the clock and timetext in the first function, and then call a second function. C2 has not finished creating the objects, so you can't access them in the second function unless you pick them by their UID, or wait until they have been fully created.

    they are fully created after the next top level event from where they were created. calling a second function is just extending the original event, but breaks all the picking.

    to make your code work, add a "Wait 0 seconds" action before you call SetTimeText. That tells C2 to not execute actions after the wait until the end of the current tick. By then the objects will be created and your SetTimeText function will work the way you expect.

    You can avoid all the viewport trouble by just saving the touch coordinates from the HUD layer instead of the layout coordinates (which is what happens if you don't specify a layer - as in your code):

    LastTouchX = Touch.X("HUD")

    LastTouchY = Touch.Y("HUD")

    then when you create the objects on the HUD layer they will be at the touch point (and on screen) every time.

  • Hi AllanR, thanks for your elaborate response! Did you mean as such:

    Unfortunately, the TimeText and Clock are still displayed outside the screen, or half outside, depending on where the touch ends. I'm basically trying to achieve a 'Bound to viewport' behavior.

    So, it will always display the Clock and TimeText inside the viewport.

    I added the 'Wait 0 seconds' action just before "SetTimeText" function call.

    By using the latter action do you mean I can 'take along' the pickeing to any new function?

    I still don't understand why it didn't work at first, I mean, I thought C2 runs the entire event sheet top down every tick(?), and that the function "TimeScore" first does the 'top' actions, and then moves on to the 'sub' events, also from top down, then when the whole function event 'TimeScore' is finished it will move on to the next 'top' event line.

    Thanks again, you're of great help.

  • —

    the "Wait 0 seconds" does not take the picking with it. Functions always reset all picking, and functions are considered part of the event that calls them - whether they are below or above. The eventsheet is executed top to bottom, but functions do not count - their code essentially gets inserted where it is called from.

    so, when you call a function, you can pass in the UIDs of objects to manually pick as a parameter, otherwise whatever the function does will apply to all instances. Do you only have one instance of the clock and timetext?

    For keeping the timetext fully on screen, you will need to know the total width and height required and then adjust the touch coordinates as necessary...

  • Hi,

    Yes I have only once instance of TimeText and Clock.

    The width/height of TimeText is 122,41 and of Clock 35,35.

    This is what I have now:

    I thought I was already adjusting the coordinates of TimeText and Clock with the Viewport actions.

    Or is there a better way to do this.

    Thanks.

    P.S. How can I pick the object created in the called function? If I want to make any changes to that object? I did some searching but found the examples too difficult to understand. The manual, as most of the time, is not very helpful.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • —

    to pick the object in the second function you would have to pass the UIDs of the TimeText and Clock as parameters: 

    function1
	create TimeText
	create Clock
	call function2 TimeText.UID, Clock.UID


function2
	Pick TimeText by UID - function.parameter(0)
		Pick Clock by UID - function.parameter(1) - then do what you need to do...

    as for adjusting the timetext x and y coordinates, you are only looking at the x value for TimeText - which is where it starts. You need to factor in how wide it is to make it fit on the screen...

    I made a sample to show you how I would do it. I did it all in one function because I didn't see any reason to do it in two... but I added a call to a second function just to show how to pass the UIDs.

    https://www.rieperts.com/games/forum/timetext.capx

  • Hi,

    Thanks so much for your help!

    I'm close to getting it to work in my project.

    The only time it doesn't work, is when the end swipe is outside the left or outside the right of the screen.

    The top and bottom seem to work fine.

    Any ideas?

    Thanks.

    P.S.

    I tried the picking with the function, but it doesn't even display the Compliment image:

    ::Edit:: The TimeText/Clock display seems to work fine on mobile. Probably because you can't drag outside the screen.

  • —

    you can only pass the UID, and pick with it after you create the object.

    When you call the compliment function, you pass in a compliment UID, but then in the function you create a new instance. That instance wont be picked after the function so setting the animation frame wont work.

    what you should do is pass the animation frame you want into the function and set it when you create the object: 

    condition1 - call "Compliment" (choose(6,7,8))

condition2 - call "Compliment" (choose(9,10))

Function Compliment
	System - Create object Compliment on layer "HUD" at (270,0)
	Compliment - Set animation frame to Function.Parameter(0)
	Compliment - Stop animation
	Compliment - Set Y to ViewportBottom("HUD")-60

    check the sample I made the other day - I can drag way out side the viewport and the clock and timetext stay on screen. So you probably have an issue with your greater than and less than signs, or you are adding when you should be subtracting...

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)