This tutorial is how to create an Hearthstone like animated arrow for issuing commands in overhead games.
Here's an example image of what we are going to build.
Prerequisites:
Sprite Sheet Plugin
CAPX
DEMO
Click to drag the arrow around and release to initate the order
The CAPX provided, contains all of the pieces used in this example.
All of the objects are sprites with the exception of the red bar. Its a "Sprite Sheet" object. Its just like a tiled background, but you also gain the ability of being able to offset the image within the bounding box. Rotate the box, and change its origin point. To install the plugin, simply drag the downloaded .c2addon file onto your construct project window. It will show up in the objects window.
The first step is setting up the 3 layers you will be using in your project.
A "Mask" Layer on top, where you will place the 2 alpha gradient masks (the black to invisible gradient squares - more on that later)
A "Object Layer in the middle where you will place the red bar.
A "Background" Layer on the bottom where you will place the arrow and the ring objects.
Make sure to select the Object layer and in the properties menu select "Force own texture" is set to YES (this allows the blend modes with alpha masking work correctly later.
The rough outline of what we are going to do is this.
-The ring will follow wherever you are dragging your cursor at all times.
-The Arrow will also be following the ring, but will be angled to always look at where you first started dragging.
-The Red Bar is going to stretch between where you started dragging and where you are currently dragging. The offsetted texture of the bar object will continually cycle so that it adds some visual movement and make it look more like how they did it in hearthstone.
-The alpha masks will overlap the red bar at either end to create a fading out effect of the bar, as it starts/ends its translation.
Here's the event sheet to further explain with comments in the capx file.
On start of layout we move the 2 alpha masks down to the layer with the bars on it - This is very important for the alpha masking to work.
Next on line 2 we record the starting position of where the user clicks.
Then while dragging we move the red bar to where the player started dragging, set its angle to point to where the user is currently dragging, and set the "sub width" to match the distance between these 2 points. (this prevents the length of the bars changing size while you move further away from the starting location.
Next we make the bar visible to see them on the screen.
We set ring to follow the current touching location and make the ring visible as well.
Next we position the arrow at the touch location, and angle it to point back towards the starting location and make it visible as well.
We then set one of the "fade" alpha mask objects to be positioned at the back end of the arrow sprite. I simply added an image point to the back of the arrow. We set its angle to always point at the starting location as well. These alpha masks need to have their blend mode set to "Destination Out" for them to mask properly.
The other alpha mask is positioned at the beginning drag location and is angled towards where the player is currently dragging.
The last line of the "is in touch" section is used to stretch the width of the bounding box of the sprite sheet object to dynamically change size between the starting dragging location and the currently dragging location.
Line 3 has a 2nd condition that prevents any of the arrow from being created unless the user has dragged more than 60 units away from the starting location - this cleans up a bit of visually bugs that might occur if you start drawing everything right away.
Line 4 simply makes the ring constantly rotate for visual effect - this could easily have been added with the other "is in touch" actions if you wanted to.
Lastly, all of the graphics are hidden when the user releases the screen/click. This is where you would but your actions that would trigger what should happen in your game (eg: move unit to location
You can also use this all within a function that creates/destroys the whole thing each time its needed in your game so that you can reuse it easier.
You can adjust the speed of the translation of the bars on line 3 were it says " Set sub image offset to (Bars.offsetX-2,0) - Change 2 to a larger number to make them move faster - lower number = slower.