Jump to content
Banner by ~ Ice Princess Silky
  • entries
    21
  • comments
    131
  • views
    2,762

Rikifive

1,170 views

Today I've been wondering how could I draw something within a specified area like this:

bv9gNB7.png

That bubble is sneaky! :sunbutt: Be careful! :baconmane:

 

And of course, there seem to be multiple ways to achieve that, yet I've picked a pretty much basic one. My favorite!  :love: 

So besides obvious x and y position of the image bubble, I had these variables available:
- left offset (basically cutting the left part)
- top offset (same, but vertically - it cuts the top)
- width (the lower the value, the more cutoff from the right side the image bubble is)
- height (same, but vertically - it cuts the bottom)

 

After doing some visual representation, maths and silly mistakes, to help me imagine the situation better:
Dv0XeVc.png
I came up with this code:

///draw_self_rect(rect.x, rect.y, rect.w, rect.h, x, y)
//                   0       1       2       3    4  5

var spr_x = round(argument[4]);
var spr_y = round(argument[5]);

//---------------------------------------------
// Don't draw if the sprite is outside the rect
//---------------------------------------------
// left border // x < rect.x - spr.w
if (spr_x < argument[0] - sprite_width) { exit };

// right border // x > rect.x + rect.w
if (spr_x > argument[0] + argument[2]) { exit };

// top border // y < rect.y - spr.h
if (spr_y < argument[1] - sprite_height) { exit };

// bottom border // y > rect.y + rect.h
if (spr_y > argument[1] + argument[3]) { exit };


//---------------------------------------------
// Cut-off the sprite to fit it in the rect
//---------------------------------------------
// left = rect.x - x = horizontal-left cut (0 ~ spr.w)
var left = clamp(argument[0] - spr_x, 0, sprite_width);
// top = rect.y - y = vertical-top cut (0 - spr.h)
var top = clamp(argument[1] - spr_y, 0, sprite_height);
// width = rect.w + rect.x - x = horizontal-right cut (0 - spr.w)
var width = clamp(argument[2] + argument[0] - spr_x, 0, sprite_width);
// height = rect.h + rect.y - y = vertical-bottom cut (0 - spr.h)
var height = clamp(argument[3] + argument[1] - spr_y, 0, sprite_height);


//---------------------------------------------
// Draw!
//---------------------------------------------
draw_sprite_part(sprite_index, image_index, left, top, width, height, spr_x+left, spr_y+top);

Calling this script basically cuts the sprite if it goes beyond the specified borders, eventually doesn't draw at all if there's no point in making further calculations.

 

And voila! There are some bubbles within a specified area! :wub: 

pN5Pd4K.gif
You're trapped, ya silly bubbles! :love:

 

I'm pretty sure, that soon it will turn out, that there was a much better way and I was just unnecessarily over-complicating all of this, just like always. :D 

 

So YAY! Some progress is finally being made! :yay: 

Oh it all would be done ages ago if not the job. :dry: It goes sooooo slowly. :icwudt: 

  • Brohoof 4

7 Comments


Recommended Comments

I might not completely understand the math behind it all and I am definitely not a programmer, but man, I love seeing this game progress. Will definitely download it once its done.

Makes me want to start learning more advanced maths and some programming, honestly.

Also, I was just wondering, do you plan on releasing this to Windows only, or multi platform?

  • Brohoof 2
Link to comment

Ooh! Math that I don't understand one bit! :3 One thing I do know though, those bubbles came out really nice! Keep up the amazing work, as you already are doing! :D

  • Brohoof 2
Link to comment

Math kind of scares me so I'm just going to say that the animation is so sweet that I could keep staring at it for quite long low. :icwudt: Great work!

Link to comment

That’s neat. I don’t think I will ever be able to grasp what you did to make that. Perhaps a tutorial could be made? :rarity:

  • Brohoof 2
Link to comment
On 19.02.2018 at 6:19 AM, Nightfall Gloam said:

I might not completely understand the math behind it all and I am definitely not a programmer, but man, I love seeing this game progress. Will definitely download it once its done.

That's probably because I made it look confusing. :P Heh, I hope you'll have a chance to do so someday, thank you! :derp:

On 19.02.2018 at 6:19 AM, Nightfall Gloam said:

Makes me want to start learning more advanced maths and some programming, honestly.

I, myself, started all of this after being inspired by something, so .. I can imagine that! ;) --and actually I'm kinda happy to hear that! :P 

 

On 19.02.2018 at 6:19 AM, Nightfall Gloam said:

Also, I was just wondering, do you plan on releasing this to Windows only, or multi platform?

It really depends on compatibility, but if everything will work right, the game should run on Windows, Mac OS X and Ubuntu (Linux) - so I plan to at least give it a try to release it for these as well. Of course, Windows will be the most compatible platform, as I use Windows myself, so there I can see how things will work like. For the other platforms I may need Beta testers to cooperate with, but this will come in the right time.

 

@Wannabrony I'll try! Thank you! :wub: 

@BronyNumber42licious Yup and the one, that requires Magic Attribute to be raised to at least 75 points. :D 

@Jaspers Well good enough for me! :D Thank you! :) 

@Nye I think you would, but I made it look confusing. Basically there's more logic, than actually maths. What I did is to use some kind of reverse engineering to come up with simple maths, that would give me the numbers I'm looking for.

 

Not sure if that kind of explaining will make it any better, but for example let's take the height (bottom cut):
nCp8nxi.png

If the bubble would be at the bottom edge, we'd need to set the height to 0, so a simple calculation comes to mind:
[ rectangle's height ] - [ bubble's y position ]
If the bubble would be at the bottom of the rectangle, it simply would need to be placed at its height's position, so:
125 - 125 = 0

Reminder: Sprites are drawn from the upper-left corner, so the higher the [ y ] position, the lower the sprite will be placed.

Now the bubble's height (its visible pixels) should raise as it goes up right?
So if we move it 10 pixels up, we'll get:
125 - 115 = 10 ( visible pixels of the bubble )

and voila! It works.

Then, I've added rectangle's y position there in case, if the rectangle-area would be placed somewhere else, than the zero position.

For example, if the rectangle would start at y=100 and would have the height of 125px, the bubble would have to be at y=225 position to be out of view.
rect.h + rect.y - bubble.y
125 + 100 - 225 = 225 - 255 = 0 ( visible pixels of the bubble )

 

And that's how cutting the bottom works.
The rest of three sides follow similar logic. :P 

I've did some trial-and-error calculations for all of these and once I came up with correct formulas, I've merged them into one code.

 

Well, I think it still looks kinda confusing, doesn't it? :derp: At least I hope it made it slightly more clear! ^_^ 

Edited by Rikifive
  • Brohoof 1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Join the herd!

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...