bounding box not updating when window is resized.

Not favoritedFavorited Favorited 0 favourites
From the Asset Store
Step into the legendary boxing ring in Boxing Legends! Master your reflexes, aim for the highest score.
  • How do i get the bounding box of my object to update when the window is resized?

    Construct 3 updates this.x and this.y when the layout resizes but getBoundingQuad doesnt appear to be automatically called. I'm using layer.layerToCssPx.

    It updates when i use SetPosition.

    Don't now if any of this is correct as i'm new to this.

    Thanks.

  • You shouldn’t need to be working with CssPx at all. The bounding box/quad is already in layout coordinates and the renderer takes layout coordinates as parameters. Also layout coordinates don’t change when the widow/scroll or the layout size changes.

    So for example in the draw() function of your plugin you could do something like this to draw a triangle centered on the object.

    const x=inst.x, y=inst.y;

    Renderer.convexPoly([x,y-50, x+50,y+50, x-50,y+50]);

    The bounding box would be based on the objects size and center so ideally you’d change the object size so that the bounding box would be tight fitting around the points of the polygon.

  • Thanks.

    If i use my method i can get the object to render but the bounding box doesn't update.

    If i use your method, the bounding box works but the i cant get the object to render at runtime.

  • Is there a simple graphical example i can study some where?

    The SDK is very confusing. A lot of it says SDK V1 only, you click a link to SDK 2 and it sends you back to the same SDK pages with warnings at the top.

  • Have you tried looking on discord? There were more active addon devs on there. There probably isn’t a simple graphical example, but you may be able to get some ideas by looking at existing plugins.

    I’ve looked into making a plugin a few times but decided the process isn’t something I wish to work through.

  • I finally fought through the build process to make a plugin. It's based on the drawing plugin template but a bit more complete so maybe it may be useful to you.

    dropbox.com/scl/fi/c8nu95x3r8mdjw15z7dcw/convexPolygon.c3addon

    It renders convex polygons, and lets you change the array json of the points at edittime and runtime. Also when it does it changes the size and origin so that the bounding box/quad is as small as possible around the points.

    I'm not encountering the bounding box issue you had.

    When you add it initially it's white so you'll want to change the color right after to add it. I wanted to set the color with code, like the spritefont plugin does, but that doesn't seem to be an option somehow. Also it looks like you have to manually add ACES to set the blend mode with events.

    I almost got used to modifying multiple files to add something. There really is a lot of tedium that you have to wade through to even get to the point of doing something interesting. The loop of modifying files, packaging them into a c3addon, loading it into c3 and restarting c3 to test it really takes a toll. Getting past the vague errors to even get the plugin to install was the biggest breakthrough I'd say.

    I found the SDK manual helpful in parts but overall hard to navigate, but that was mainly due to the sheer amount of different classes. When I got the the runtime portion the SDK docs stopped being helpful and had to resort to browsing code in the debug console. Turns out at runtime the renderer function names start with lowercase letters while edittime starts with Uppercase. Also it found it odd that the draw function had to be done differently at runtime than edittime.

  • That very much for your help.

    My experience mirrors your own. I made a polygon plugin which uses ear clipping and can render concave shapes, it all works fine in the editor, but trying to get it to work at runtime since it uses different methods is annoying.

    The SDK is unhelpful. There are hardly any example files. We don't have access to built in plugins to study them. I tried looking at some 3rd party ones in the repository, but there aren't any graphical ones and most are V1.

    I will take a look at your example and figure out what i'm doing wrong.

    Thanks again.

  • Hi.

    You seem to be using _draw for rendering which is SDK v1 i think?

    Half my problem is trying to get Draw() SDK v2 to work.

    I'll keep looking.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • It’s just built on top of the sdk template which specifies version 2 in the c3 addon.json. I’d assume the rest of the template is v2 compliant, but it’s not reasonable for us to find and update parts of the template that may use v1 stuff. Beyond that my goal is just to get it working.

    You can look at the runtime portions of official plugins in the browser console but the edit time portions are minified.

  • I see.

    Ashley

    Can you shed some light on things?

    is _draw V2 or V1?

    Thanks.

  • Construct 3 updates this.x and this.y when the layout resizes

    Construct doesn't update object positions when the layout or viewport size is changed, so I think you must have gotten confused about something else.

    is _draw V2 or V1?

    It's SDK v2. The SDK v2 reference is here. The older SDK v1 reference is in the Addon SDK manual and every page has a note at the top about the SDK v1 retirement. Generally all SDK v2 methods use camel case (e.g. myMethod()) and all SDK v1 methods use pascal case (e.g. MyMethod()).

  • Then why does the official sdk V2 drawing example runtime instance.js use _draw?

    const C3 = globalThis.C3;

    const tempQuad = new C3.Quad();

    C3.Plugins.MyCompany_DrawingPlugin.Instance = class DrawingInstance extends globalThis.ISDKWorldInstanceBase

    {

    constructor()

    {

    super();

    this._testProperty = 0;

    const properties = this._getInitProperties();

    if (properties)

    {

    this._testProperty = properties[0];

    }

    }

    _release()

    {

    super._release();

    }

    _draw(renderer)

    {

    const imageInfo = this.objectType.getImageInfo();

    const texture = imageInfo.getTexture(renderer);

    if (!texture)

    return; // dynamic texture load which hasn't completed yet; can't draw anything

    let quad = this.getBoundingQuad();

    const rcTex = imageInfo.getTexRect();

    renderer.setTexture(texture);

    if (this.runtime.isPixelRoundingEnabled)

    {

    const ox = Math.round(this.x) - this.x;

    const oy = Math.round(this.y) - this.y;

    if (ox !== 0 && oy !== 0)

    {

    quad = new DOMQuad(new DOMPoint(quad.p1.x + ox, quad.p1.y + oy),

    new DOMPoint(quad.p2.x + ox, quad.p2.y + oy),

    new DOMPoint(quad.p3.x + ox, quad.p3.y + oy),

    new DOMPoint(quad.p4.x + ox, quad.p4.y + oy));

    }

    }

    renderer.quad3(quad, rcTex);

    }

    _saveToJson()

    {

    return {

    // data to be saved for savegames

    };

    }

    _loadFromJson(o)

    {

    // load state for savegames

    }

    _setTestProperty(n)

    {

    this._testProperty = n;

    }

    _getTestProperty()

    {

    return this._testProperty;

    }

    };

  • I cant get Draw() to work no matter what i do.

    I modified the example and only _draw will call, even though my files are set up and configured for SDK V2.

    const C3 = globalThis.C3;

    C3.Plugins.MyCompany_PolygonRenderer.Instance = class PolygonRendererInstance extends globalThis.ISDKWorldInstanceBase {

    constructor() {

    super();

    console.log("[PolygonRenderer] Constructor executed for instance");

    }

    OnAddedToLayout() {

    console.log("[PolygonRenderer] OnAddedToLayout executed for instance");

    const worldInfo = this._inst.GetWorldInfo();

    console.log(`[PolygonRenderer] Position after OnAddedToLayout: x=${worldInfo.GetX()}, y=${worldInfo.GetY()}`);

    }

    OnCreated() {

    console.log("[PolygonRenderer] OnCreated executed for instance");

    this._InitializeInstance();

    }

    OnCreate() {

    console.log("[PolygonRenderer] OnCreate executed for instance (testing SDK v1 compatibility)");

    this._InitializeInstance();

    }

    _InitializeInstance() {

    const worldInfo = this._inst.GetWorldInfo();

    // Force position to a visible area for debugging

    worldInfo.SetX(100);

    worldInfo.SetY(100);

    worldInfo.SetWidth(50);

    worldInfo.SetHeight(50);

    worldInfo.SetBboxChanged();

    console.log(`[PolygonRenderer] Instance position after initialization: x=${worldInfo.GetX()}, y=${worldInfo.GetY()}, width:${worldInfo.GetWidth()}, height:${worldInfo.GetHeight()}`);

    const layer = this.layer;

    if (layer) {

    console.log(`[PolygonRenderer] Layer properties: visible=${layer.isVisible}, opacity=${layer.opacity}, scale=${layer.scale}, parallaxX=${layer.parallaxX}, parallaxY=${layer.parallaxY}`);

    // Force layer visibility for debugging

    layer.isVisible = true;

    layer.opacity = 1;

    } else {

    console.warn("[PolygonRenderer] No layer information available for this instance");

    }

    // Force instance visibility

    this._inst.SetVisible(true);

    console.log(`[PolygonRenderer] Instance visibility forced: visible=${this._inst.isVisible}`);

    // Log runtime and layout information

    const runtime = this._runtime;

    if (runtime) {

    console.log(`[PolygonRenderer] Runtime layout: width=${runtime.GetMainRunningLayout().GetWidth()}, height:${runtime.GetMainRunningLayout().GetHeight()}`);

    const allInstances = runtime.GetMainRunningLayout().GetAllInstances();

    console.log(`[PolygonRenderer] Total instances in layout: ${allInstances.length}`);

    let found = false;

    for (const inst of allInstances) {

    if (inst === this._inst) {

    found = true;

    console.log(`[PolygonRenderer] This instance found in layout: UID=${inst.GetUID()}`);

    }

    }

    if (!found) {

    console.warn("[PolygonRenderer] This instance NOT found in layout instances!");

    }

    }

    }

    OnLayoutStart() {

    console.log("[PolygonRenderer] OnLayoutStart executed for instance");

    }

    OnLayoutEnd() {

    console.log("[PolygonRenderer] OnLayoutEnd executed for instance");

    }

    Tick() {

    console.log("[PolygonRenderer] Tick executed for instance");

    const worldInfo = this._inst.GetWorldInfo();

    console.log(`[PolygonRenderer] Position in Tick: x=${worldInfo.GetX()}, y=${worldInfo.GetY()}`);

    // Force position each frame to ensure it stays at x=100, y=100

    if (worldInfo.GetX() !== 100 || worldInfo.GetY() !== 100) {

    console.warn("[PolygonRenderer] Position was overridden, forcing back to x=100, y=100");

    worldInfo.SetX(100);

    worldInfo.SetY(100);

    worldInfo.SetBboxChanged();

    }

    }

    getBoundingQuad() {

    if (!this._inst) {

    console.warn("[PolygonRenderer] getBoundingQuad called before instance is fully initialized");

    return new C3.Quad();

    }

    const worldInfo = this._inst.GetWorldInfo();

    console.log(`[PolygonRenderer] Getting bounding quad for instance at (${worldInfo.GetX()}, ${worldInfo.GetY()}) with width: ${worldInfo.GetWidth()}, height:${worldInfo.GetHeight()}`);

    const quad = super.getBoundingQuad();

    console.log(`[PolygonRenderer] Default bounding quad: minX=${worldInfo.GetX()}, minY=${worldInfo.GetY()}, width=${worldInfo.GetWidth()}, height=${worldInfo.GetHeight()}`);

    return quad;

    }

    Draw(renderer) {

    if (!this._inst) {

    console.warn("[PolygonRenderer] Draw called before instance is fully initialized");

    return;

    }

    console.log("[PolygonRenderer] *** DRAW METHOD EXECUTED ***");

    const worldInfo = this._inst.GetWorldInfo();

    console.log(`[PolygonRenderer] Drawing instance at (${worldInfo.GetX()}, ${worldInfo.GetY()}) with width: ${worldInfo.GetWidth()}, height: ${worldInfo.GetHeight()}`);

    // Set up renderer state

    renderer.setBlendMode("normal"); // Set normal alpha blending

    renderer.setColorFillMode(); // Set fill mode to color fill

    renderer.setColorRgba(1, 0, 0, 1); // Red, fully opaque

    // Draw a simple 50x50 red square at the instance's position

    renderer.rect(worldInfo.GetX(), worldInfo.GetY(), worldInfo.GetX() + 50, worldInfo.GetY() + 50);

    }

    _draw(renderer) {

    // Test if runtime expects SDK v1 method name

    if (!this._inst) {

    console.warn("[PolygonRenderer] _draw called before instance is fully initialized");

    return;

    }

    console.log("[PolygonRenderer] *** _draw METHOD EXECUTED ***");

    const worldInfo = this._inst.GetWorldInfo();

    console.log(`[PolygonRenderer] _draw instance at (${worldInfo.GetX()}, ${worldInfo.GetY()}) with width: ${worldInfo.GetWidth()}, height: ${worldInfo.GetHeight()}`);

    // Set up renderer state

    renderer.setBlendMode("normal"); // Set normal alpha blending

    renderer.setColorFillMode(); // Set fill mode to color fill

    renderer.setColorRgba(1, 0, 0, 1); // Red, fully opaque

    // Draw a simple 50x50 red square at the instance's position

    renderer.rect(worldInfo.GetX(), worldInfo.GetY(), worldInfo.GetX() + 50, worldInfo.GetY() + 50);

    }

    };

  • Then why does the official sdk V2 drawing example runtime instance.js use _draw?

    I'm not sure what you mean. I said that the _draw() method is SDK v2, and then you asked me why the official SDK v2 drawing example uses _draw(). It's because it's the correct method to use.

  • I'm sorry. I misread your reply.

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