Problem with image scaling


Currently, I'm scaling a sprite on the x-axis differently than the y-axis. (Example: image_xscale = 3; image_yscale = 4;) It's distorting the image in ways I don't want.

How it looks:

How I want it to look (this image has the incorrect x-scale. I basically want this image but with a scalable x.):

I'm not sure how to fix this "squishing" issue. Any help is appreciated. Thanks!
You'll have to make a "3 slice" (like a "9 slice" but with only 3). This means cutting the image up into 3 parts, the left and right side bars are their own sprites and the "middle" top and bottom bars (with these being a single sprite). You scale the "middle" by however much you want for the x scaling and then draw the left and right side bars in the appropriate positions. If you wanted to scale in every direction, you would do the same thing, but with the "top" bar being cut into 3 (the top left corner, top center and top right corner), the same going for the "middle" section (middle left, middle center and middle right) and then the lower section (bottom left corner, bottom center and bottom right corner). This results in 9 graphics, and thus is usually called some variation of 9-slice.

One of the neater things about this is if your graphic is very uniform (like yours is), you can make the "middle" section literally a single pixel wide and then the x scaling literally becomes however many pixels wide you want it to be, rather than a scaling factor for an already existing width, if that makes sense. It also means less memory taken up by the sprite itself (though this is a pretty miniscule saving and isn't really worth worrying about in any other situation).

EDIT: Further reading: