citron2010's Forum Posts

  • Ah, it's just that the mesh edges aren't anti-aliased, but that doesn't seem like something we can control in construct. Guess you could paste to a canvas at double size and scale down to get some edge smoothing.

    Well, I got stuck trying to get touch scrolling working whilst touching the HTML buttons that I was using with CSS rounded corners so I've gone with your mesh solution (thanks again!). I'm targetting mobile, so the aliasing isn't so noticeable on smaller screens.

    (Next problem I had was detecting whether the mid-point of a sprite was overlapping another instance when dropped after dragging. I had to store the dropped sprite's X & Y, then pick all, discard the dropped one, then use the "overlapping at a point" condition to get the ID of the sprite I dropped the dragged one on top of. (Couldn't simply use "is overlapping" as it may have been overlapping more than one)).

    Another option could be to make an effect to do the corner rounding. That would allow you to have antialiasing but you'd also lose the collision benefits.

    So a shader? Time to learn skymen's CAW Shader? Why would that lose collisions? All I need to be able to do is detect when one's been dragged on top of another as described above.

  • I do something similar in Flippee Ball - if the ball hits an AI's flipper, I predict the ball's trajectory and if it's going CLOSE to the basket, I tweak the trajectory so that it goes INTO the basket. Neither the fact that this happens just AFTER the collision or the changed trajectory itself are noticable.

    What I don't understand about your case is what problem does it give you if there's a slight delay in reporting the collision?

  • An alternate to using css, blend modes, or the drawing canvas to do it would be to use a mesh distort.

    https://www.dropbox.com/scl/fi/tstr83o5l7mixoeayie2v/Rounded_sprite_mesh.c3p?rlkey=l8o4t6jyqtpx4yu67m7v86yt3&st=5ayndkm9

    You could use the approach to crop to any convex shape and even some concave ones, but not all.

    Oh this is very slick - thank you. At the moment, I'm too far down the route of using CSS - had some hurdles to get over as the images are coming from local storage - so will continue but if I get into more difficulties, I'll probably try this mesh solution.

    One small issue (and the maths is beyond me!) - there's noticable zig-zagging on the corners. I tried increasing res to 10 and that helped a bit, but increasing it beyong that didn't seem to make a difference.

  • Hi, there's also an option using an HTML element, where you can round the corners using CSS.

    But it offers fewer customization options than a sprite.

    Thank you! This is working pretty well with a few tweaks - I removed the shadow but couldn't understand why there was still some kind of border - looks like pixels from the opposite side of the image or something, so I forced a 0px border and that fixed it.

    Then added two invisible sprites to pin the buttons to so they can be dragged around. Then disabled mouse input on the buttons so that touch reaches the sprites.

    Then move the sprite/button pair to the top if dragged.

    The only small issue is that if you drag the second one over the first then click/touch somewhere where they both overlap, the second one drags (correct), but the first one is now brought to the top (IINCORRECT) - need to have a play to see how I can fix that.

    UPDATED VERSION: https://drive.google.com/file/d/1kzXGUD67byN33c5F6c8sazWi44PiBm6z/view?usp=sharing

    EDIT - now fixed by using "on DragDrop start" as the trigger to move the sprite/button pair to the top.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • I would use a drawing canvas. You can paste both the sprite and the 9patch on it, and then drag the canvas object. 

    > -> DrawingCanvas: Paste object Sprite with effects
-> DrawingCanvas: Paste object Mask with effects

    Or save the canvas image and then load it into another sprite. 

    > -> System: Wait 0.1 seconds (use time scale: True)
-> DrawingCanvas: Save image (PNG, quality 75, offset 0, 0 size 0 x 0)
-> System: Wait for previous actions to complete
-> AnotherSprite: Load image from DrawingCanvas.SavedImageURL

    That's exactly what I've done - but the problem is that the cropped corners are black not transparent.

  • Ultimately, I want a layer of thumbnail images that the user can drag around. Initially I cropped the corners of the thumbnails using a 9patch with its blend mode set to “destination atop” on a transparent layer with “force own texture” enabled.

    I then made the thumbnails draggable and set the 9patch to be a child, so it follows when the thumbnail is dragged.

    The problem with this is that when a thumbnail is dragged over another, their 9patches cut part of the other thumbnail out and it looks ugly.

    So, I figured the solution would be to crop the corners off BEFORE saving the thumbnails – but when I do that, the cropped corners are black not transparent.

    This sample project shows the issue. I have a sprite with its corners cropped by a 9patch, then paste the sprite into a drawing canvas, then paste the 9patch in, then copy the contents of the canvas to a second sprite and download it too.

    As you’ll notice, the corners are black. I set the background of the project to red to a) show the black corners more easily, and b) to try to see where the black is coming from.

    Any ideas?

    I have considered giving each thumbnail/9patch pair their own layer, but I could have up to 50 and felt this might cause performance issues as they’d all need to have “force own texture” enabled.

    https://drive.google.com/file/d/1JYEnTHC1_JdG9jiOjDpmFZc6gXGYMO_D/view?usp=sharing

  • I recently encountered this exact problem and agree it would be nice if 9-patches had animations/frames.

    I ended up swapping most of them out for either HTML buttons or text inputs where you have full control via CSS - might work for you too?

    EDIT - just realised that I also made some of my 9-patches plain white so you can easily set their colour.

  • It has a REST API so you can query that using Construct's AJAX plugin.

  • Not 100% sure, but don't think you can change this - it's what the OS decides, but you can confirm support by evaluating the "Desktop features supported" expression

  • I've been using ChatGPT for a while - not to try getting it to code for me but to teach me how to do something. Also been using Gemini more recently.

  • affectThisThing->whenThisHappens->byDoingThisThing. I don't really understand, but I think I do a little bit. Thank you.

    You just need to remember that, if an event has no conditions or triggers, it will run every tick - it's the "tick" that effectively triggers the event

  • "On any touch" only triggers when you start the touch

    Then Func_Squish is only called if Touch Is touching Fam_spr

    So the code in the function only runs once per touch

    "Every tick" does nothing - you can just delete it

    Your squishFactor will still be randomised every time the function is called

    Note that you NEVER actually need "Every tick"! If the trigger/condition column is empty, the actions will always run every tick.

    Events can either be "Conditions" which are checked every tick or "Triggers" which only fire when something happens.

    More details here:

    construct.net/en/make-games/manuals/construct-3/project-primitives/events/how-events-work

  • There's a few things:

    For some reason that I don't understand, "Touch - Is touching Fam_spr" picks all the spr's rather than just the one that being touched.

    To solve that, replace Fam_spr with spr

    But that still doesn't work because the function resets the picking list and will pick all spr's again. To solve that, edit the function and enable "copy picked" - this will copy the list of spr's picked in the event that calls the function and pass it to the function.

    Also, you don't need "Every tick" in that function.

  • I had a brief discussion with ChatGPT about this a while ago and came to the conclusion that it would be more effort to implement than I was willing to put it.

    It suggested three approaches:

    1. Perceptual hashing
    2. Convoluted neural network (Compute a single vector for each image using a small CNN/ViT, then compare with cosine similarity.)
    3. LPIPS (Learned Perceptual Image Patch Similarity)

    Make of that what you will!