In R3-2018 I worked on Issue#138 which a functionality that allow players to drag and drop the avatar on the canvas. I started the issue by getting the position of the mouse each time it clicks on the avatar. I needed to check if the mouse clicked was on the avatar that the player is holding, if it is I console log out the position. Once I got the position of the mouse click and make sure that it is on the avatar not anywhere on the canvas, I created another image that would follow the mouse when the player still have the mouse clicked (mousedown function). Each time the player moves the mouse I would draw the image to make sure that it follows the mouse.

After making sure that the image draws each time the mouse moves, I need to get rid of all the duplicate drawing and only show one image where the mouse it. I wasn’t sure how I was meant to clear the previous drawing. I did some research and found out that it would be much easier to just clear the whole canvas and redraw everything on the canvas again, so I added that in the code.

Final step is to make a shadow on the image when the player is dragging the avatar. I know that it needs to have a opacity of some value but wasn’t sure how to implement, once again did some research and found out I could change the Alpha value of the image. When I added the alpha value in the image it change all the other image to the same opacity so after the mouse image is drawn I changed the alpha value of the image back to 1 from 0.4 and the opacity of the image would only be applicable for the image that the player is dragging.

Throughout this release I didn’t run into much other problems that halt my progress.