Hoping for some advice please guys! - Regarding 'Slay The Spire' style curved pointer path?

Japster

Member
Hi guys!

I am having a NIGHTMARE of an issue, trying to work out a dynamically- changing path (my chosen method for this solution, as the marker/path animates, but tbh, I no longer care about animating the damn thing!) - if anyone knows an easier method, I'm all ears!

I even seemed to finally get it working late last night, then it all went to crap again... :(


Okay, so I was hoping for a path from (in this case, a card), to an enemy (more specifically, to the mouse cursor)...

Like this:-



EDIT:-
This forum is crashing each time I attach the (small) png, so posting first, then adding code and image.... argh!!!

I've seen that paths scale from the centre, so I offset my path, and scaling *looked* like it was working fine, and from the right origin, but with 2 (major) issues....





1) The objects 'walking' the path go absolutely batsh*t crazy when I dynamically change the path scale, like they fall off, fly into space, just generally get confused (and don't come back)...

2)There is (strangely) a delay when changing the scale, in terms of reflecting that on-screen. (So ie. I increase scale 3 times, then try to decrease scale say 4 times, but instead it continues to increase say twice more, THEN decreases, and is constantly playing 'catch-up' after that, in terms of scaling vs. my keypresses or mouse movement?!). This happens even if I use the path_end() etc function, and restart them. They still go crazy, even if I destroy the objects, and re-create them along the newly-scaled path. Pulling my hair out!!!


It also seems that it dynamically scales whatever percentage of it's CURRENT scale, not original. I fixed this by re-copying it from the source one each time, but seems wasteful for CPU resources to do this potentially every frame!

So, I rescale the width - my calculation is showing fine - I it adjusts to a scale of 1 or less/more as expected.



EDIT:-

This forum is crashing each time I attach the (small) png, so posting first, then adding code and image.... argh!!!
 
Last edited:

NightFrost

Member
Ah, the StS pointer. If I were implementing something like that myself, I wouldn't be using paths. I would brush up on bezier curves and use that. I'm pretty sure I've even seen GML implementations out there.
 

Japster

Member
Ah, the StS pointer. If I were implementing something like that myself, I wouldn't be using paths. I would brush up on bezier curves and use that. I'm pretty sure I've even seen GML implementations out there.
Thanks so much for the amazingly fast response! :D

That's actually a great point, thanks! - I did consider them, but wrongly figured that paths would be a doddle (they actually worked REALLY well until I tried bloody scaling them!)...

Guess I'll have to bite the bullet.... The thing is, they allowed me to smoothly animate the arrows in the trail, and it looked super-cool..... :(
 
Last edited:

TailBit

Member
I did make a board game a long time ago, where I used paths to make the connections between them, then I had to:
- get the start and end point for both the path and the places you need to draw it between
- measure the length difference so you see how much you need to scale it .. length A / length B = scale
- get the angle difference them so you see how much it need to rotate .. angle_difference ..

I don't remember how I did it with the draw location .. if it always drew from the first point, or if I had to rotate it as well from 0,0
 

NightFrost

Member
The thing is, they allowed me to smoothly animate the arrows in the trail, and it looked super-cool
You can do animation along bezier curve once you get down how to calculate them. As any position along the curve is a function of value 0...1 indicating position between start and end, you do motion by slightly altering the positions each step. If you have to angle the images you set along the curve, you first calculate all the positions, then point_direction beween previous and next position to get the angle of their relation. (The direction the arrow at the very tip points at would be mouse position.)
 

Japster

Member
Thanks guys! - @NightFrost - I bit the bullet mate, and it's actually coming along nicely! - will post the code here, once done, so others can benefit, but Andy's Bezier function is awesome!!! THANK YOU so much for that advice and link mate!

Yep, I figured I'd have to pick 1 or 2 other points along the curve, thanks!

Awesome mate, so thankful! :D
 

Japster

Member
PS - Little teaser of the project I need it for.... :)

Static is meh... but it all moves and animates REALLY smoothly, weather fx, etc, even the card elements are animated.... ....which is why I want that smooth path too... :D

 

Japster

Member
Hey, I've written a sample project that might help you. It displays a quadratic bezier from a point on the screen to your mouse pointer.

https://drive.google.com/file/d/1dlTLzgTIvaLQkjSFNWdkLMKlIfpogXgL/view?usp=sharing
Oh man, that's so awesome! *thank you!* - I'll take a look, as it's almost certainly better logic than what I worked until 3am this morning on! - I should have just gone to sleep!

Note:- Thanks so much also to @NightFrost - that pointer you gave me was golden mate! - got me on the right track!

Did I mention I love you all? πŸ˜πŸ˜„

 

Japster

Member
@dudaxan - This is great mate, far simpler a solution than mine! - You should pop it in the 'useful code' thread!!

Thanks again man, will modify it for 3/4 points, to get the above effect, but if anyone wants the code I've done for the above, I'll clean it up, make it always the same spacing (by increasing/reducing height based on width using Pythagoras' logic), and add it to the useful code thread too, in the interests of sharing - I also used your animation logic solution @NightFrost! = works a treat! - this is so smooooth in motion.... 😍

Thanks so much again, guys! 😁
 

Japster

Member
Post a video or gif then and stop teasing us with static images! πŸ˜„
Ha ha! - Fair point! - will do mate! Will record something tomorrow hopefully! :D

I've got a fantastic (in terms of functionality!) routine sorted now, for the cursor and trail - will show it in action in the video, and post the code / exported assets project in the useful code thread! (It's only fair - it was a joint effort, and I want others to benefit from it! - cheers guys!!!) 😍
 

devKathy

Member
Oh, nice, thanks! I would love that! The most I've ever done is 3 control points for some long forgotten demo. πŸ˜…

Will bookmark this!
 

dudaxan

Member
@dudaxan - This is great mate, far simpler a solution than mine! - You should pop it in the 'useful code' thread!!

Thanks again man, will modify it for 3/4 points, to get the above effect, but if anyone wants the code I've done for the above, I'll clean it up, make it always the same spacing (by increasing/reducing height based on width using Pythagoras' logic), and add it to the useful code thread too, in the interests of sharing - I also used your animation logic solution @NightFrost! = works a treat! - this is so smooooth in motion.... 😍

Thanks so much again, guys! 😁
I'm glad it helped you! 😁

I'll share the code on the thread, as you recommended!
 

Japster

Member
Oh, nice, thanks! I would love that! The most I've ever done is 3 control points for some long forgotten demo. πŸ˜…

Will bookmark this!
Will do! - Gotta sleep now - so tired! Zzzzzz.... , but sometime tomorrow, hopefully!

@rIKmAN - Here go go, this is it in action guys! - SILKY smooth in real life, but had to use frame dropping Nvidia card native capture (PS - MUCH better in full-screen!):-

 

NightFrost

Member
The results look nice, and I like how it S-curves when pointing towards top of screen. The animation might be a little too busy for my eyes, but I suppose this is still much a work in progress.

Out of curiosity, what are the art asset sizes like, like on the card bases? I assume there's some downscaling from originals going on to make it work on various screen resolutions.
 

Japster

Member
The results look nice, and I like how it S-curves when pointing towards top of screen. The animation might be a little too busy for my eyes, but I suppose this is still much a work in progress.

Out of curiosity, what are the art asset sizes like, like on the card bases? I assume there's some downscaling from originals going on to make it work on various screen resolutions.
Cheers! - Yeah, not so sure about it myself, but the choice of sprite makes a huge difference too, plus the spacings - I can make it slower, faster, tighter, looser, stationary, etc, for that very reason.... :D Just figured I'd highlight that it's animated... ;)

Art asset sizes are luckily low - they're recognisable, and readable, for lower res, as the info panel will highlight stats and effects etc - It's kind of why I added it, so I could go low-res (as their art style is dark, and their font is too thin, really :( )... :)

...TBh, I'm mulling over standard card backs, overlaid textual stats, and smaller profile images 'behind', to create less assets, if at the expense of drawing more to the screen - as I'm not expecting much in the way of performance issues for this type of game... :)

For certain none-game screens, the higher res assets can be used / pulled from disk, for super high-res preview and gloating purposes... :D

Will package the objects used into a separate project, so people can have a play / integrate it... :)

Code ain't pretty, probably not that optimised, but it's straightforward...


The CREATE event creates links and an arrowhead, based on chosen spacing etc, and step event dynamically shifts them all around, animating movement if set... :)

LINK segment objects are generally pretty dumb, being controlled solely by the 'targeting path' controller - with literally one variable set:- "Arrowhead" - I could have gone the parent->child route, but it seemed messy for what I needed.... Maybe I will still... ;)
 
Last edited:
Top