How do I resize by cropping/expanding during play?

Post reply
0 favourites
From the Asset Store
Resize and Rotate a sprite
$5 USD
Simple resize and rotate events for any sprite, quick and easy event sheet that you can use for your own projects.
xanderwood's avatar
xanderwood

  • Hey all, I have spent my time during lockdown to make an online-multiplayer card game - incredibly difficult work, but functionally it works now and can play full games!. Now that it's playable, the next step is getting it to look pretty, which bring me to my question: how can I resize or reshape an image to fit within a card border, but without stretching it?

    I'll use Runeterra as an example:

    As you can see, in the first image is a close up of the character, but when you play the card onto the field, the images expands with the border.

    I know there's a lot of work-arounds I could use (such as putting card images on a layer beneath, then the card border images uses blends etc.) but they all get pretty convoluted. Is there a simple way to handle this in C3 that anyone knows of?

  • Hello,

    Do you mean an effect like this:

    dropbox.com/s/1503gc7bpdx3tom/ExpandingImageTrick.c3p

  • Yes, exactly like that! That method is slightly more workable than what I was doing, but it's still a bit clunky to make work well with many cards moving around and changing sizes next to each other. But I'll try it out a bit and see if I can get it going smoothly :)

  • Hi,

    I have actually been working with this problem and have come up with quite a simple solution to do it with very little code this far. I'm still adding some features though. I will post the capx when it's done...

  • Ok, this is my more advanced version. You can create multiple cards and have them resize their visible area, overall size and change their position. However, if there are multiple cards stacking then the "hide" object will makes all objects behind it transparent. The only solution I can think of is having multiple layers for all the cards you know will overlap, which might be ok if you don't have that many cards overlapping.

    Maybe someone else can come up with a more elegant solution.

    dropbox.com/s/764sk88qcyrpesj/ExpandingImageTrick.c3p

  • Here's my swing at it! The image has two frames, a cropped and full sized, other than that just these events shown. You could easily make sure when cards are dropped they're separated enough so they don't overlap when grown full-sized. Also when they're in your "hand", they wouldn't grow and stay on frame 0 which you can do the opposite when they're in play - staying on frame 1.

    ps. be sure to set the block to destroy at the end of the tween!

    example-expandingimage.netlify.app

  • I think a good way to do it is to do it like ChrisFrom but by moving all the objects being cropped to their own layer above their usual layer to a layer dedicated to cropping and then when the cropping is finished move them back to their usual layer. The hiding objects must be made invisible when they are not being used.

    The downside is of course you need an animation frame for all the different crop sizes you want to use and you lose flexibility with how you can set any range of different vertical and horizontal crops like in my project.

    Another option is just to have as many layers as there will be overlapping cards and move each of them to their own layer based on their z-order when they are going to overlap. That is probably least restricting option if there's not going to be a crazy number of cards overlapping.

  • I have a different idea: Tiled Backgrounds. It will take some tinkering with Image offsets and Image scales.

    drive.google.com/file/d/1rHEBKR8JWH4pwXJ_wzra-c4v1KlURtbJ/view

    If you do it this way I would recommend you entirely work out how this will animate at first with all the scalings and offsets. Once all the animations are down, you know exactly how big the final image needs to be and where the character has to be positioned on it. All further images have to conform to this guide, or you´ll end up having to do individual animations for each card, but I think that is a reasonable restriction to work with.

  • I've actually attempted to do something like this in the past but I kept hitting a wall. WackyToaster, you have a very interesting solution, but it seems pretty work intensive if you have a lot of sprites that need different texture offsets or animations. I believe the best solution is to create an effect plugin where you provide a "mask" texture and it shows/hides the pixels of the base image based on the color of the mask texture. This is a very common feature in a lot of image editing software, but sadly I'm not sure it's possible in C3 because effect plugins cannot use an image as a parameter, which I think is a massive constraint.

    So either C3 needs a built in "mask" property for all objects that can have an image, where the "mask" would be a separate image that defines which pixels are shown/not shown in the main image. Or effect plugins need to be able to take a image as a property.

  • Yeah the moment you require different texture offsets and scalings it just turns into a mountain of work and number tweaking.

    Masking without the whole blend mode shenanigans would be very cool, but I would even be fine if sprites just had a crop top/bottom/left/right property. That would entirely solve the issue here. Maybe it isn´t even that hard to implement, but that one would be up for Ashley to decide.

    I´ve also checked out some video from Runeterra to see how they did it and they absolutely use two different images. It´s very quick and easy to miss. So as far as I can tell, they actually do not expand the image in the container.

    EDIT: Image...

  • This is my latest version. It can do the whole cropping thing by moving the currently cropped object to a cropping layer and after the cropping is done the object will be moved back to the original layer.

    You can also change the absolute size of the cropped image and test image movement. I also added tiled background object that can be used to "frame" the cropped image, which can be used to create a nicer graphical effect.

    The only limitation that seems to exist is that you should not simultaneously crop overlapping images, but it's ok for the images to overlap otherwise if only one of them is being cropped at a time. Even that could be solved by adding extra cropping layers and always only having one image being cropped in one cropping layer, and even that is only needed if those images are overlapping while both are being cropped.

    There seems to be a weird z-order bug when the image is being moved back to the original layer. That could be solved by more complex Z-order sorting or maybe someone can find what is causing the issue, which would be nice. But the core mechanics seem to work as intended, which is most important.

    File:

    dropbox.com/s/ckdcogwitbcbvjt/ExpandingImageTrick2.c3p

  • WackyToaster - Ah good eyes! I didn't notice how they did it.

    von Perkele - That's amazing! It works just like I wanted! It'll take me some time to configure it into my game but really thanks a lot :) I'll be sure to update you when things have progressed a little more (I just started online playtesting with my old IRL card gaming friends this week which is very exciting!)

  • TobyeRyan, it would be nice if you tell me how you fix that z-order bug thing, it is really annoying me.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Sorry mate, I hadn't actually fixed the bug yet when I replied, I'm a bit all over the place. But I did find you were looking in the wrong spot:

    The problem was actually that several of the card bases were switching back and forth between the layers at the part in the image (event 17). So I added a "isSelected" variable when clicked to indicate they are the only one to switch layers and it fixed the issue. Very crude fix as it still gets some glitchy overlap when you spam select cards overlapping each other, but that can easily be overcome.

    Here's the version with the variable added

  • Hi,

    Yeah that does fix the issue. I just don't understand what is causing the issue in the first place, and that's what is really annoying me. It just should work without any new conditions as it is...

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