Best practice for scaling 9 patch objects - and scaling other objects above it

I have a two-part question here.

First, I've created a series of resizable buttons using 9 patch objects. It seemed to be the most efficient way to create the shapes using a single artwork file, and though I could create such a thing with CSS, the built-in Construct 3 CSS functions for buttons appear to be very limited.

That said, when a user's mouse rolled over these objects, I want them to scale up, but unlike sprites, 9 patch objects apparently don't have a scale function at all. I have tried setting both size and position by pixels, but this seems horribly inefficient.

That's question 1: Is there a better or more accepted way to accomplish this?

As for my second question - I also want to layer a sprite image over these 9-patch objects, and scale them at the same time. Far as I know, I can't group these objects either. I figured I'd throw this in, as this future addition could alter the outcome of my first question.

Following is a screenshot of the layout and respective event sheet:

Thank you!

-Kurt

I also had this issue with 9-patch the other day. The problem with scaling a 9-patch by changing the height and width is that the corners & edges will keep to the preset margin values. Instead I dealt with it this way:

1. Pin the image to the 9-patch

2. Set the image pin behaviour to include pin Z-elevation

3. Add the tween behaviour to the 9-patch

4. On touch/release tween the z-elevation value of the 9-patch

The additional benefit of using this method is that you can use the tween ease settings to easily create some nice scaling effects.

dop2000 - Setting the size of all the 9-patch objects this way did the trick. Not bad for efficiency's sake either.

It did take me me a second to realize I should run the pin on the start of the layout - I had it set on mouse click initially. The image was continually reducing on size on each hover.

That said, is there a way to scale text this way too? I realize pinning it as one would for a sprite only increases the size of the text box itself, not the text. I realize I can set the font size larger, but the position will drift on hover.

mekonbekon I haven't tried this method, but I will as I'm curious about adding the tween functionality. Will report back.

-Kurt

kncuser Try SpriteFont object, it can scale smoothly. But I'm guessing it won't scale with pin, you'll need to do it with events.. When your 9patch if resized, calculate the scale factor (original_size/new_size) and apply this scale to the SpriteFont.

Both spritefont and text objects scale fine using z-tweening:

dropbox.com/s/9lgyx16nidbuiwg/scalingWithZ.c3p

Both spritefont and text objects scale fine using z-tweening:

https://www.dropbox.com/s/9lgyx16nidbuiwg/scalingWithZ.c3p?dl=0

I tried it, but couldn't get past the issue that Z-tweening means every box will increase in size from the center of the layout, rather the center of the 9-patch.

I do like the fact that it allows for smooth tweening though.

I realize it may be the only way to overcome the text object scaling the way I want it, but I'm not sold on using this function (though I am for other elements of the game - I'm glad you brought it up)

-Kurt

kncuser

I literally ran into this issue myself just now - turns out I'd been doing all my z-tweening on objects at the centre of the screen, which works fine. I then tried it on an off-centre object and was stumped as to why it was tweening weird. I figured it out and came to post here, but you'd beaten me too it! :-)

I'm guessing you could simultaneously tween the x,y back to the initial position? I'll give it a go and report back.

kncuser

I literally ran into this issue myself just now - turns out I'd been doing all my z-tweening on objects at the centre of the screen, which works fine. I then tried it on an off-centre object and was stumped as to why it was tweening weird. I figured it out and came to post here, but you'd beaten me too it! :-)

I'm guessing you could simultaneously tween the x,y back to the initial position? I'll give it a go and report back.

If that works, do let me know (I could try it here, but not being too good at the tween function at present, I'd probably just screw up for the next two hours). Not having that much luck with the Sprite font scaling on pinned, and the antialiasing looks pretty terrible when scaled down to 50%. Don't know why - the Sprite font itself looks excellent.

-Kurt

kncuser

I think I have a fix, updated in the link above. In the demo, try shifting the 9-patch around and then run it - it should now always scale relative to the centre of the object rather than the centre of the viewport.

Here's how I approached it:

On start I save the 9-patch's coordinates to instance variables.

When the 9-patch is tweening I compensate for the x,y change by repositioning the 9-patch by the z-elevation percentage of the object's distance from the centre of the viewport:

+ 9patch: Is Tween "zUp" playing

-> 9patch: Set position to (Self.startX-(Self.startX-ViewportWidth(0)÷2)×(Self.ZElevation÷100), Self.startY-(Self.startY-ViewportHeight(0)÷2)×(Self.ZElevation÷100))

I'm not sure whether this will hold up if the layer is parallaxed or scaled, but should be fine with the default settings.