help for effect (spaceship that when destroyed creates pieces of itself that fly away).

0 favourites
  • 7 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • I can't find a solution for my project.

    I created a special effect for my game.

    It works like this: There are many different enemies (spaceship, UFO, asteroid, space monster etc...)

    every time one of these objects is destroyed, functions start.

    Download and try the file and you will understand what I want to achieve.

    The event creates clippings of the image (using and dynamically creating a drawing canvas object and a "mask" with the blend mode destination out) to make it appear as if the ship falls apart when destroyed and the pieces fly away.

    But I can't get them to rotate correctly.

    Could you give me an idea? Perhaps you know another way to accomplish this.

    https://drive.google.com/file/d/1kofEUV0WKOJGAd7bVgYUY2cZBBtMjOBA/view

  • The canvas is rotating around the top left corner. You can change that in the properties to be centered, but you’d also need to move it by half the width and height when positioning it.

  • The canvas is rotating around the top left corner. You can change that in the properties to be centered, but you’d also need to move it by half the width and height when positioning it.

    But I can't do it dynamically via event.

    I'm currently thinking that this isn't a possible solution...

    it's easier to create clippings of all the sprites and create a new "metal parts" sprite and create it every time a spaceship, ufo etc... is destroyed...

    and every time I insert a new type of space enemy into the game, I insert a new animation to the "metal parts" sprite with 3-4 frames.

    Or if you have an alternative idea, please tell me.

    How would you do this?

  • The simple solution for this is exactly what you described. Create a Sprite that contains all the individual broken-off parts you want. Then whenever a ship is destroyed you'd do something like this

    Make sure animation speed is set to 0 for the pieces. I also used a variable on the ships family since some ships might break into more or less parts.

  • You can rotate an object around any point with

    Rotate a degrees clockwise

    Set position to (x-cx)*cos(a)-(y-cy)*sin(a)+cx, (x-cx)*sin(a)+(y-cy)*cos(a)+cy

    Where x,y is the point, cx,cy is the center, and a is the degrees to rotate by.

    So one possible solution could be to keep track of an offset dx,dy from the object’s xy to rotate around. Initially you’d set that to wherever on the layout minus the sprites position. Then after that you’d update it with a helper function.

    Number rx=0
    Number ry=0
    
    Function vrotate(x,y,a)
    — set rx to x*cos(a)-y*sin(a)
    — set ry to x*sin(a)+y*cos(a)
    
    Function rotateSprite(u, a)
    Pick sprite by uid u
    — sprite: set position to self.x+self.dx, self.y+self.dy
    — sprite: rotate a degrees clockwise
    — call vrotate(sprite.dx, sprite.dy, a)
    — sprite: set dx to rx
    — sprite: set dy to ry
    — sprite: set position to self.x-self.dx, self.y-self.dy

    Alternatively a different approach could be to have dx,dy be values from 0-1 to specify a point within the objects quad. Then to use that as a center you’d set the angle between two set position actions. It basically undoes the offset, rotates, then moves by updated offset.

    Set position to Self.x-(Self.dx*self.width*cos(self.angle)-self.dy*self.height*sin(self.angle)), Self.y-(Self.dx*self.width*sin(self.angle)+self.dy*self.height*cos(self.angle))
    Set angle to anything
    Set position to Self.x+(Self.dx*self.width*cos(self.angle)-self.dy*self.height*sin(self.angle)), Self.y+(Self.dx*self.width*sin(self.angle)+self.dy*self.height*cos(self.angle))

    Either way you need to change angle via events. Can’t use with a behavior that changes the angle.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • So one possible solution could be to keep track of an offset dx,dy from the object’s xy to rotate around. Initially you’d set that to wherever on the layout minus the sprites position. Then after that you’d update it with a helper function.

    Number rx=0
    Number ry=0
    
    Function vrotate(x,y,a)
    — set rx to x*cos(a)-y*sin(a)
    — set ry to x*sin(a)+y*cos(a)
    
    Function rotateSprite(u, a)
    Pick sprite by uid u
    — sprite: set position to self.x+self.dx, self.y+self.dy
    — sprite: rotate a degrees clockwise
    — call vrotate(sprite.dx, sprite.dy, a)
    — sprite: set dx to rx
    — sprite: set dy to ry
    — sprite: set position to self.x-self.dx, self.y-self.dy

    Sorry R0J0hound, I did not understand, you're really smart. I haven't even fully understood what sine and cosine are yet. I tried the first method you described but failed.

    I fixed my game like WackyToaster and I said, but your method seems more ingenious and complex and intrigues me.

    I don't understand if you mean to use the DrawingCanvas object, which was my initial idea.

    I insert the link of my c3p file, can you download it and fix it so that it works? Or create another example project?

    I don't understand what dx and dy are (what the "d" stands for)

    If you have time, explain to me again. Thank you.

    https://drive.google.com/file/d/1V36YNEgNkuSidA7mkMcSAoG6usq265jU/view?usp=drive_link

  • I'm bad at fixing other people's projects.

    Here's the idea using that math to rotate a sprite around any point. Here I used ox,oy instead of dx,dy, but it doesn't matter. One stands for origin the other delta. Anyways think of it as just an image point you can change and rotate around. It's in the range of 0 to 1 but you can use a value like x/width to specify position just like in the image editor.

    dropbox.com/scl/fi/toop24j18hlfyc46isfyq/rotate_custom_center.capx

    Honestly you can avoid much of the math if you set the drawingCanvas's origin to be centered and center it over the piece you are creating.

    Wackytoaster's way is probably the easiest way to make an object that breaks apart. Take the image, make the pieces, assemble them to calculate the offsets, and when you create the pieces you use those offsets. You can shape the pieces any way you want. I guess using distort meshes or drawingCanvas to mask out the pieces would make it easier to work with multiple images. Also dynamic piece shape and size could be possible with some work.

    dropbox.com/scl/fi/e5ozclhdtvjm1at8mwxcx/explosion.capx

    Anyways just some ideas and experiments.

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