How do I make a dynamic lightsaber slash effect?

0 favourites
  • 6 posts
From the Asset Store
Create your quiz game! Create unlimited categories. Manage categories and questions
  • Right now, the player's arm is controlled by joystick, I want his sword to have a slash effect whenever it is moved (currently it's a bamboo shoot, but let's pretend), but not a pre-determined animated slash.

    (Clicn anywhere on the screen to drag his sword around, doesn't have to be on the character) ... index.html

  • Create a copy of the sword (trailsword) and give it the fade behavior and set it to like 0.1 seconds to fade out

    while dragging

    every 0.1 seconds -> create object trailswrod at sword.x sword.y

    set angle of trailsword to sword.angle

    now while you drag the sword around, it will create copies of the sword 0.1 seconds behind the position of it. resulting in a dynamic trail effect.

  • I tried that a few different ways, but I could never get it to look right. I'm stumped!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hey bscarl88,

    I have a thought on how you might be able to get this effect.

    It sounds like what you want is to have a solid shape trail behind the blade, kind of the way a silk flag would follow a flagpole, if you were to sweep the pole from side to side. Though, with one difference, the "flag" shape should only stretch from "where the blade is now" to "where the blade was last frame". Such that when the blade is not moving you won't see the flag shape.

    We will need the following objects:

    • An extra blade object, to keep track of "where the real blade was last frame". I'll call this extra blade the "lag blade". The lag blade is just a helper object and will be invisible during play. -
    • A sprite object that is just a 2x2 or 4x4 white square, with its hotspot on the center left edge. We can stretch this object horizontally to draw lines from point to point, which we'll need to do later. I'll call this stretchable line object a "Strip" object.

    Setting up the lag blade:

    Starting simple, we need to make the lag blade follow the movement of the real blade, but the lag blade has to lag one frame behind the real blade. So where ever you created the events that move the real blade, pick a spot right before those events, and add an event to set the lag blade to the real blades position and angle. This way the lag blade is positioned, and THEN the real blade is moved to its new location, at which point the lag blade is doing its job of being one frame behind the real blade.

    Drawing the "flag" shape - overview:

    Now that we have a real blade and a lag blade, we can stretch a "flag" between them. The flag will be made of several of our strip objects.

    Starting simple, lets imagine that we place one strip object at the tip of the real blade. Then we angle the strip object to look at the tip of the lag blade. Then we stretch the strip object out until it touches the tip of the lag blade. Now the strip has one end (the hotspot end) on the real blade's tip, and the other end on the lag blade's tip. This creates the top edge of the flag shape. (In practice, this positioning will be done through events, not by hand.)

    Now let's add in another strip object. This new strip will do exactly the same thing we just did, but instead of connecting the real tip to the lag tip, we connect the real hilt to the lag hilt. and that creates the bottom of the flag shape.

    We can add another strip and connect the middle of the real blade to the middle of the lag blade in the same way.

    Using this process we can create several more strips to "fill" in the rest of the flag.

    Drawing the "flag" shape - example:

    A practical way to set this up with events would be to, create 20 or 30 strips, and then use a loop to position them correctly. You'll want enough strips so that they overlap, and there are no gaps left between them, otherwise you'll get a Venetian blinds look. (Then again that could be kind of cool, but I'll assume we want a solid shape.)

    To position the strips you'll need the coordinates along a line from the tip to the hilt of the real blade, and you'll also need the coordinates along a line from the tip to the hilt of the lag blade.

    To simplify getting these coords, you can create an image point at the tip of the real blade, and an identical image point at the tip of the lag blade. Inside the loop that positions each strip, you can use the "lerp()" function to interpolate from the tip coord to the hilt coord of the real and lag blades respectively. That is, on the first loop step, you'll start at the tip of both blades. As you go through successive loop steps, you'll step from the tip towards the hilt on both blades. On the last loop step you'll reach the hilt coord on both blades.

    This will give you the flag shape, dynamically drawn every frame based on the movement of the blade. This essentially simulates the rotoscoping process that was actually done for the light saber trail effect in the Star Wars films.

    This brings up an interesting point though. A theatrically shot film is 24 frames per second, and you're game will likely run at 60 fps. So a single frame in Star Wars is 2.5 times longer than a single frame of your game. This in turn means that the 24-fps "flag" effect will be 2.5 times physically longer than a 60-fps "flag" effect for an object moving at the same speed. So to really get the light saber effect, you may need to make the flag longer than a single frame, and I'll explain how to do this later.

    Polishing the effect:

    So we have the flag effect, and it's the correct shape, but it's also solid white, which may not be what you're looking for. (Or maybe it is, but I'll assume it's not, just in case.)

    • Semi-transparency: It might be nice to make it semi-transparent, like 50% opacity or something. But we can't just set the strip objects to be transparent because they may overlap each other a little bit and so you could end up with a pinstripe look along the flag shape. What you can do instead is create a layer for the flag shape, place all the strip objects on that layer, and turn the layer's opacity down to 50%. -
    • Longer trail: Making the flag trail for more than a single frame can also be done. The simple, albeit un-optimized way, would be to *create* strips inside the loop, instead of just positioning existing strips. This means you can fade out and destroy strips at whatever speed you want. But the overhead of creating a bunch of objects every frame could get ugly on slower devices. A cleaner way to get longer trails would be to pick, in advance, the number of frames you want the trail to last, say 3, and then create 3 groups of strips, one for each frame. Give the strip object type an instance variable "frameGroup", and use it to give each group of strip objects a number, 0, 1, 2. Inside the loop that positions the strip objects, first pick only the strips that belong to group 0, then on the next frame pick only group 1, etc. When you get to the last group, you just wrap back to group 0. Each frame, only the most outdated strips will get updated.

    As a side note, Construct Classic provided a way to lattice deform sprites, which would solve your problem far more simply, but it is not a feature that has been added into C2 yet, at least not to my knowledge. In C2 it might be possible to simulate lattice deformation via shader effects, though getting the deformed result to line up with specific coords could be tricky.

    Sorry for rambling a bit.

    Hope that helps.

  • rambling a bit that is under statement

  • fisholith wow thanks for the in depth description! I'll have to read it a few times to understand, and not sure ill be able to pull it off, but very informative. This is meant for mobile, so I wonder if there will be a significant impact on performance.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)