How do I curve sprite with Mesh?

Not favoritedFavorited Favorited 0 favourites
  • 5 posts
From the Asset Store
Cute cartoon girl character with Walk, Jump, and Idle animations for 2D games.
  • I have a sprite "dash" 100x15 I want to curve/bend it. I have created several dash around a radius and set its angle, now I want to bend/curve it to make it look like dashed outline of circle. output from my code does it with one minor issue which I didn't find any solution. they are slightly tiled upward.

    does anyone know solution

  • The polygon object supports shapes with dashed borders.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Maybe these examples would be helpful:

    howtoconstructdemos.com/circular-progress-bar

    howtoconstructdemos.com/bend-a-sprite

    And yes, you can draw a dashed circle on a drawing canvas.

  • It’s always hard to debug formulas so I make them incrementally. One thing that throws setting mesh points off is if the object has an angle since points are relative to the object’s orientation. What happens if you disable the action to set the angle?

    You could simplify things by just creating the dashes at the center and just setting the points to be in a circle without setting the angle. Unless you wanted the center of the dashes to be their actual centers, then that’s fine creating them in a circle.

    Generally to set mesh points to be a location on the layout you’d subtract the object’s position from the location and divide by the object’s size to get it in mesh coordinates. If the object has an angle you’d need to rotate the point by -self.angle, so I tend to avoid that if I don’t need it.

    Var cx=320
    Var cy=240
    Var r0=200
    Var r1=215
    Var cnt=10
    Var a0=0
    Var a1=0
    
    Start of layout
    — dash: destroy
    — repeat cnt times
    — — set a0 to 360/cnt*loopindex
    — — create dash at (cx, cy)
    — — dash: set mesh size (10,2)
    — — repeat 10 times
    — — — Set a1 to a0+360/cnt*loopindex/10
    Dash: set mesh at (loopindex,0) to (cx+r0*cos(a1)-self.x)/self.width, (cy+r0*sin(a1)-self.y)/self.height
    — — — Dash: set mesh at (loopindex,1) to (cx+r1*cos(a1)-self.x)/self.width, (cy+r1*sin(a1)-self.y)/self.height

    Interestingly the gap between the dashes ends up being 360/cnt/10 or 3.6 degrees in the above example. You probably want a way to control that. If you changed the expression used to change a1 to:

    Set a1 to a0+360/cnt*loopindex/9*percent

    Then you can control the gap spacing based on the percent value.

    0.9 would be what it was before

    1 would be no gap

    0.5 would make the gap width match the dash width.

  • Thanks all for the help.

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