What doesn't get saved & viewports

  • So, here's the issue. I have several elements on a layout. Whenever a layout loads or the browser gets resized, I run a function to position these elements based on the viewport variables.

    Aside from the fact that this gets damned confusing because depending on how you resize the browser the Viewport vars can actually go into the negatives, I'm having issues with different behaviors on different machines using the same save file.

    For example. On one machine, I can set the width of the element in the properties and it keeps that width regardless of the browser size. On the other machine, same save file mind you, when the browser width changes, the element's width changes.

    Same thing with position. I tell it to position an element based on another element's x position and width. On one machine, it's position stays where it should when I resize the browser. On another, it moves left and right depending on the browser size.

    Now I thought maybe this was because of resolution or some such. But I'm basing my location on fixed coordinates and not percentages.

    On one machine, this perfectly positions and scales the SkillsInfoBox based on the location of the SkillsBox and it perfectly resizes the SkillsInfoBox based on browser size.

    -> SkillsInfoBox: Set position to (SkillsBox.X+SkillsBox.Width , SkillsBox.Y)

    -> SkillsInfoBox: Set width to ViewportRight(0)-SkillsInfoBox.X-20

    On the other machine, in order to achieve the same effect, I have to do this:

    -> SkillsBox: Set width to SkillsBox.X+750

    -> SkillsInfoBox: Set position to (SkillsBox.X+980 , SkillsBox.Y)

    -> SkillsInfoBox: Set width to ViewportRight(0)+ViewportLeft(0)-SkillsInfoBox.X-20

    You'll note that these lines of code are quite different. On one, I can set positions and width based on the SkillsBox position and width and the Viewport vars. On the other, I have to manually set width's and I'm having to add in the ViewportLeft(0) in order to correctly calculate the element width.

    So I can only come up with 2 reasons why this would happen. Either the viewport calculations are vastly different on one machine than they are on the other (which doesn't explain why an element resizes on one machine and not the other) or some setting that I'm totally missing isn't getting saved in the save file.

    Here's a visual. The SkillsBox is on the left, the SkillsInfoBox is on the right with the red border (so I can see the x position and width better)

  • Ok, it's becoming apparent this is peculiar to the HTMLElement plugin but I can't understand why.

    Here's an image of both the SkillsBox and the SkillsInfo box selected in debug. The box sizes appear to be correct but apparently the contents are getting scaled down depending on the browser size.

    What I don't understand is why on one machine this scaling is taking place but not on another. Any ideas?

  • Still trying to figure this out. Here's some more details:

    Taking a look at the HTML in Chrome developer there is a 'div' for most every element. The div for the skillbox looks like this:

    <div sa-uid="53" id="" style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); font-weight: normal; font-style: normal; text-align: center; border-radius: 0px; padding: 0px; overflow: hidden scroll; transform-origin: left top; opacity: 1; position: absolute; left: 460px; top: 393px; width: 950px; height: 376px; transform: rotate(0deg);">
    

    Of note is the width: 950px. On one machine, with the same construct code mind you, that width stays at 950. On another machine, that width changes based on how wide the browser is.

    So my question now is, what sets the CSS properties for this 'div' and why is it changing on one computer and not the other? Does the plugin set these CSS styles or does Construct?

    I've also checked, both computers are using the latest version of Chrome.

    Chrome warning note to self when I check other machine: [C3 preview] Browser opened wrong size popup: wanted 1600 x 900, got 1584 x 821; resizing to compensate.

  • Fengist

    I know that when I use "Browser - On Resize" I have to add "Wait 0.2 Seconds" before I update all the elements on the screen, because it seems to take some time before the viewport settings finish getting the new screen values.

  • Really? Ok, I'm off to experiment because that kinda makes sense. The machine where it works perfect is an 8 core 4ghz with 32gb ram. The other machine is just an old dual core laptop with 4 gigs.

    I'll let you know the result.

  • Good guess but no difference. I even bumped it to a full second. The skillsbox according to the debug is staying at a 950px width. But, that CSS div that's getting inserted above it is changing based on the browser size. But only on the laptop. The desktop, the CSS stays at 950px.

    Damned befuddling.

  • Wow, but I see what you're saying.

    I have an on browser resize event that calls a function to handle the resizing. I also call that function on the start of any layout.

    I did some testing and put the ViewportLeft and ViewportWidth into a text box just before it called the function. Well into the function is where I resize one of the HTMLElements and I grabbed the ViewportLeft and Width again and put them in a different text box. If I slowly resized I was seeing maybe a 0.5 - 3px difference. But, if I did a quick drag and release resize, I was seeing 50-100px differences.

    If I clicked on the full-screen request button, the px differences were pretty huge, like 500px+

    Now, whether this is affecting that CSS div, I dunno.

  • More digging.

    It appears the plugin is changing that CSS. Here's the code it's using to determine the height and width for that CSS. Unfortunately, I don't know JS that well. If anyone could look over this and see if this somehow explains why the height and width on one computer is different from another.

     DrawSize()
     {
    
     if (!this.domStructure.useC3size) return;
    
     const exWidth = Dom.width(this.el);
     const exHeight = Dom.height(this.el);
    
     const wi = this._inst.GetWorldInfo();
     const layer = wi.GetLayer();
    
    
     const myinstance = this._inst.GetWorldInfo();
     const instWidth = myinstance.GetWidth();
     const instHeight = myinstance.GetHeight();
     const newWidth = Math.abs(layer.LayerToDrawSurface(instWidth, 0)[0]);
     const newHeight = Math.abs(layer.LayerToDrawSurface(0, instHeight)[1]);
    
     if (exWidth !== newWidth || exHeight !== newHeight || this.memory.resizeWindowForSize)
     {
     this.memory.resizeWindowForSize = false;
     this.SetStyle(
     {
     'width': newWidth + 'px',
     'height': newHeight + 'px'
     });
     }
     }

    In the constructor it's setting this.memory.resizeWindowForSize here

     this.memory = {
     // objectModel
     instVarNames: getArrayFromString(proprieta(contatore, "[]")),
     objectStore: getArrayFromString(proprieta(contatore + 1, "[]")),
     text: "", // per modificare il contenuto del dom solo quando il text cambia
     resizeWindowForSize: true,
     resizeWindowForPosition: true,
     resizeWindowForRotation: true,
     resizeWindowForFontSize: true,
     lastFileURL: "",
     lastBLOB: "",
     lastBase64: ""
     };

    and here

     window.onresize = () => {
     this.memory.resizeWindowForSize = true;
     this.memory.resizeWindowForPosition = true;
     this.memory.resizeWindowForRotation = true;
     this.memory.resizeWindowForFontSize = true;
     };
  • Ok, this nightmare has got me to seriously thinking about it. By tinkering with the code above I have it solved on the machine where it was giving issues. Later I'll be testing it on the other machine to see if it works.

    Here's the BIG question.

    When I install a plugin, does that plugin go to the cloud or does it stay on the specific machine.

    For example, I installed this 'fixed' plugin on my laptop. Later, when I go home and fire up C3 on the desktop does that 'fixed' plugin code magically appear on the home machine?

    If not, THAT may be the cause of all my problems as I've tinkered with this plugin code before and likely have 2 different installs. And if so, THAT... was unexpected.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Ok, that was it. About a month ago I did some 'tweaking' to the HTMLElement plugin to fix a similar problem to the one I've been describing. I did this 'tweaking' on the desktop.

    I blindly made the assumption that since I was using a cloud based app, that if I installed a plugin when I ran it on one machine that the same plugin would be on the other machine. As you can see, it's taken me two days of desk-facing to come to that conclusion.

    I looked at the changes to the plugin code I made on the desktop a month ago, it's the same changes I made today on the laptop to solve the above problem.

    At least now, I can get back to creating the game an not smacking my forehead.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)