Jelly.
To achieve a jelly effect for use in a game, we can utilize a step-based effect that is open-ended (meaning the duration of the effect depends on the environment and has no set time limit).
Jelly and most liquids exhibit the property of being incompressible, meaning their volume does not change regardless of the applied force. In a 2D game, this implies that the area of jelly remains constant even when squashed vertically, allowing us to calculate the width based on the known area.
When an object falls and hits the ground, we can apply a squashing force vertically to simulate a damped spring effect, resulting in a very realistic jelly-like behavior.
Defining the jelly
In a playful manner fitting the season, I've defined two variables - 'wobbla' and 'bouncy', representing the stiffness and damping of the spring respectively. 'Wobbla' ranges from 0 to 1, with 0.1 being very soft and 1 being rigid, while 'Bouncy' ranges from 0 (full damping) to 1 (no damping). Additionally, there's a 'react' multiplier to amplify the spring force for exaggerated effects in the game.
'hr' and 'hd' (misleading names indeed!) denote the displayed height and the per-frame change in height, controlling the spring effect.
Moreover, flags indicate whether the jelly is on the ground and if it should stick to it ('sticky' flag) or bounce off it.
Three functions are available to manipulate the jelly:
function createJellyBox(image,x, y, wobbla, bouncy, react){
return {
img:image,
// other properties...
}
}
The functions
Three functions - reset, update, and draw - govern the jelly's behavior, but they surpass the character limit. You can find these functions in the demo below.
Draw
This function visually represents the jelly by adjusting its height and calculating the corresponding width before drawing the image at the center position for simplicity.
Reset
A straightforward function that resets the jelly's position at specified coordinates, eliminating any wobbles by setting 'jelly.hr = jelly.h' and 'jelly.hd = 0'.
Update
This function handles the core mechanics of the jelly, incorporating gravity, impact detection, force application, and ensuring the jelly doesn't intersect the ground. It also enhances the smoothness of the wobbly effect over time.
Understanding these details might require some effort, so feel free to ask questions for clarification.
DEMO
No comprehensive answer is complete without a demo! The jelly simulation supports interactive control using sliders and options like sticky mode. Experiment with the settings and observe how they influence the jelly effect. Responsive design ensures functionality across various screen sizes, providing an engaging user experience.
Note: The demo includes UI elements and additional code for user interaction, clearly distinguishing the answer code within the main loop section. If encountering any issues, especially on FireFox, do let me know for possible refinements.