https://youtu.be/FFPTF8tW92M?t=15
I'm attempting to code Spamton NEO's idle animation. I've got everything down except for his strings. All I know is that they extend quite far above the screen, range in width and brightness, and are always attached to his body from roughly around his torso.
What would be the most optimized method of imitating this effect? My main focus is creating the strings, having them vary in brightness and size, and being attached to his body properly.
From what I can see, there are 2 types of strings. About 6 thick, bright ones, and 10-15 or so thin, dark ones. When he flashes, some bright orangish lines also appear near the strings, but they are separate. The movement of the strings seems to be eased or curved, so that they effectively sway like pendulums, slowing as they near the extremity of their movement. This is how I would do it (MFA also attached):
The strings move a bit more briskly in the example than in your video, so you may want to tweak the rotateAmount & rotateSpeed values to tone them down a little.
EDIT: Make sure the cursor is near the centre of the screen when you run the example. I made the character follow the mouse cursor, and neglected to disable destroy object if too far from frame, so if you move the mouse too far, the strings and/or character will be destroyed.
Awesome! Thanks for the help, after some fine tuning I'd say it looks nearly spot on!
Screenshot 2023-03-30 134755.png
Originally Posted by Volnaiskra
From what I can see, there are 2 types of strings. About 6 thick, bright ones, and 10-15 or so thin, dark ones. When he flashes, some bright orangish lines also appear near the strings, but they are separate. The movement of the strings seems to be eased or curved, so that they effectively sway like pendulums, slowing as they near the extremity of their movement. This is how I would do it (MFA also attached):
The strings move a bit more briskly in the example than in your video, so you may want to tweak the rotateAmount & rotateSpeed values to tone them down a little.
EDIT: Make sure the cursor is near the centre of the screen when you run the example. I made the character follow the mouse cursor, and neglected to disable destroy object if too far from frame, so if you move the mouse too far, the strings and/or character will be destroyed.
Awesome Example.
Real quick, two more questions.
1. For the animation of the strings being snapped, it looks like it creates a clone for each string being snapped (1-3) that turns white, then yellow with some sort of "split in half" effect. Could this be achieved with a destroy effect?
2. I find recreating these sorts of things fun and stumbled upon this fan game design https://www.youtube.com/watch?v=VWi-jg651Sg , I could probably recreate everything here with what I've learned already but I'm a bit stumped on the wings. It looks like it's just editing the X scale with maybe some tweaking of the Y scale, but at the same time it feels like there may be a more complex effect? I'm not entirely sure.
It seems to create both yellow and white clones at the same time. It also moves them around quite sporadically. Below are 3 consecutive frames (FYI, after you pause a youtube video you can step through frames with the , & . keys). You can see that they seem to jump around on the X axis quite skittishly. Probably you can achieve this by adding an action to the new clones like always: set X position to X position + RRandom(-5,5).
I'm not totally sure about how the splitting works. I think that at the moment of splitting, it abruptly 'freezes' all of the new clones. It forces them all to orange, and gives them a new, more acute rotation (and stops further changes to their rotation). It seems to also dramatically shorten them, and assign some of them to fall downwards, and the others to float upwards. It makes them float/fall at slightly different speeds, and they seem to get thinner as they do so. I think the process would probably look something like this:
-set an altVal on all of the new clones called snapDirection to 1
-randomly pick about half of the clones and set snapDirection to -1. And also shift these ones upwards by RRandom(200,400) pixels or so
-set an altVal on all of them called snapSpeed to something like RRandom(1,3) (this will be used to make them move up/down at different speeds)
-set all of them to orange (either with a shader or by forcing a different animation)
-set all of their angles to something like angle * RRandom(1,5) to make them more skewed
-set all of their Y Scales to something like RRandom(2,8)*0.1 to shorten them
and then make them move up/down and slowly shrink with something like:
always:
-set Y position to Y position + snapDirection * snapSpeed
-set Y scale to Y scale * 0.95
-set X scale to X scale * 0.95
Then after a set period of time, when they've all but faded away, destroy them all
2. I find recreating these sorts of things fun and stumbled upon this fan game design https://www.youtube.com/watch?v=VWi-jg651Sg , I could probably recreate everything here with what I've learned already but I'm a bit stumped on the wings. It looks like it's just editing the X scale with maybe some tweaking of the Y scale, but at the same time it feels like there may be a more complex effect? I'm not entirely sure.
In my opinion, one of the most important things you can do in animation is to do several things at once. Even a few very simple movements can look very nice when all combined together. I think part of the reason for this is that simultaneous movement gives our brain a pleasingly stimulating puzzle as it works to recognise the simultaneous patterns, and another part is that almost all movement in nature is a complex combination of factors, so single isolated movements look unnatural.
I think there are three simultaneous movements in these wings (four, if you're correct about the Y scaling. I don't think there is any Y scaling, but that's not to say there shouldn't be - it may well look even nicer if you added a little!):
-They have a gradual (probably sin-based or similar) X scale movement.
-They are stuck to a rotating torso, which rotates to a different rhythm to the X scaling.
-They have their own extra little bit of rotation on top of the rotation that they inherit from the torso, at a similar or possibly identical rhythm to the torso rotation. This gives them a bit more complexity and makes them feel looser and not artificially 'cemented' onto the torso.
-......and of course, the animating wings are just a part of the story - there are various other elements (head, arms, legs, ropes, chains, etc.) all simultaneously animating according to their own parameters, which makes for a very vibrant whole.
Here's how I would do it. It's important to place the hotspots and action points appropriately. The torso will rotate on its hotspot (placed appropriately near the centre - not pictured), while the wing will be attached via its own hotspot to the torso's actionpoint. No MFA this time. I'll leave it up to you to build it. The code below does one wing (the front one). For the second wing, you would use very similar code. The timing and rotation would be identical, but you'd position them a bit differently and give the rear wing a more extreme X scaling (maybe from about 0.2 - 0.6 instead of 0.4 - 1.0)
I'll be sure to tackle that soon! First, I've run into an issue. I'm trying to get a looping background effect after following a tutorial, but for some reason it doesn't seem to work. I'm willing to bet I made a mistake with a value somewhere.
Width: 960
Virtual Width: 2000
Layers 1-4: The background objects, all layers have Wrap Horizontally checked
Layer 1 X Coeff: 0.5
Layer 2 X Coeff: 1
Layer 3 X Coeff: 2
Layer 4 X Coeff: 3
Always - [Layer Object]: Set X layer (value) to lyrGetLayerXPos("Layer Object", (value)) - 3
There are 4 matching events here for Layers 1-4, with their respective index replacing "value" in the code.
The result is the layers moving, but they do not wrap. The play area is static, so the player's movement does not affect scrolling (not that there's any scrolling anyway). Would an MFA be more helpful in troubleshooting this issue?
Very awesome, thanks!Screenshot 2023-04-04 144225.png
How do you get your image previews to be so large? Mine are always tiny until you click them
You're welcome.
I always upload images to Imgur, then paste the URL here and put [IMG] tags around it.
Not sure about the layers thing. An mfa might help.
Posting Permissions
Reply With Quote