citron2010's Forum Posts

  • It does work? "Force own texture" should be OFF

    Ah! Sorry - thanks!

  • I have this problem too. The solution for me was to untick HTML Layer. It wasn't needed in my case.

    But if HTML Layer is needed Construct team need to do something to fix the problem.

    Please make a bug report on the github link in the post above.

    Ashley needs to fix this

    Be good if you could add specifics or your issue here:

    github.com/Scirra/Construct-bugs/issues/9106

  • Wait.., you can do this easily by using a pre-made rounded corner mask. You only need a single mask object, along with the sprites that you want to have its corner rounded.

    Steps:

    1) After creating each sprite, spawn the mask below it (1 z-index below it)

    2) Pin the mask to the sprite

    3) Set the mask's blend mode to "Destination Out"

    3) Set the sprite's blend mode to "Destination Over"

    Also, keep in mind that enabling "Force own texture" can slightly reduce performance on mid-range devices but this method does NOT require it.

    That doesn't work for me:

    drive.google.com/file/d/1CJvE69pYrf-GC-zBMWRw5gV2rrSBey_p/view

    The first two pics have normal blend mode below a mask with "Destination Atop" - that works fine except when they overlap - notice the second's top-left corner cropping the first picture.

    The third uses your method - but that doesn't crop at all - unless I've done something wrong (pic is on z=5 with Destination Over, and mask is z=4 with Destination Out).

  • Made no difference. I've worked around it but if I get a chance I'll try troubleshooting further and log a bug.

  • You are doing something wrong.

    https://www.dropbox.com/scl/fi/v3u7hjcc50k3k3dge7bmh/CanvasPastingWithBlendModes.c3p?rlkey=3s20z2qgw2l5sq8uw2ue8e6gy&st=ejh2dmkv&dl=0

    Figured out what I was doing wrong - I saved the image as JPG which doesn't support transparency!

    Just in case anyone stumbles across this thread and wants to crop the corners off an image, this is a summary of the methods I tried (read the whole thread for details):

    1. Used a 9Patch with blend mode = destination atop on a layer with "force own texture" - worked great until one image is dragged over another
    2. As above, but take a canvas snapshot and save the image with its corners cropped - make sure to save your drawing canvas as a PNG
    3. CSS / HTML button - worked great but I couldn't detect touch dragging if over the button
    4. Mesh - too much aliasing
    5. Shader - this is what I ended up using

  • Small update:

    Also updated my iPad to 26.5 and that's now showing the issue too.

    I don't think it's specifically caused by the rotate behaviour - it seems like having anything doing something on a layer above screws things up.

    I did see this error in Xcode's console when running on my iPad (transitioning to a layout that has an HTML layer):

    WebContent[1365] 0x10e058100 - [sessionID=1] WebProcess::markAllLayersVolatile: Failed to mark layers as volatile for webPageID=19

    Fortunately, I don't think I actually need HTML layers in this project any more (as I've reduced the number of HTML elements I'm using). I've reverted them to normal layers and the graphical glitches are gone - just double checking everthing else looks fine with the HTML layers.

  • I noticed a project I’m working on exhibited blocky/flashing distortion when exported to iOS 26.4.2. I checked and noticed it also happened in Safari on the same device – an iPhone SE 2nd Gen. I have another SE running 26.2.1 and the issue didn’t happen. I updated both to 26.5 and it’s now reproduced on both devices, so I’m guessing maybe some kind of webkit regression since 26.2.1?

    When I stripped the project down, I narrowed the cause to having an invisible sprite with rotation enabled on a normal layer above an HTML layer!

    This project shows the issue. It should just show three “PLAY” buttons at the bottom of the screen, but since 26.2.1, they glitch out/flash.

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

    It’s such a specific set of circumstances that caused the issue in my case (and something I’ve easily worked around) that I thought I’d post here first in case anyone’s had similar issues that might help narrow down the root cause.

  • I asked Gemini if it could create a shader for me - every attempt failed, so after about 10 iterations, I handed the project over to ChatGPT and it fixed it in 3 attempts.

    If anyone's interest, it's here:

    drive.google.com/file/d/1zE1s13RzZPtttzZrjiOLmEyAa1NL8Av_/view

    Three parameters - radius, width and height (you need to set the latter two to the size of the sprite).

    Thanks for everyone's help.

  • 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.