I have started a new thread for this question. I would like to get a better dragdrop experience. What should happen is that when the user clicks on the tower icon (bottom left),the user is then able to drop the the tower on the background. Once the user releases the tower it snaps to a location on the background. A good example of this is with Plants VS Zombies.
Here is my current project file
Develop games in your browser. Powerful, performant & highly capable.
Something like this? I used a boolean and mouse events instead of the drag & drop behaviour, but you could probably do it with the drag & drop as well. I just prefer doing it all manually when I'm doing custom dragging like snapping and such.
Thanks Nimtrix. I can see how this improves the performance. I will continue to work with this and see how it goes.
I got the Drag and drop to work properly but now I'm wondering how I could offset the X co-ord so that it lines up with my background grids but still retains the userbility when you hover over destination and doesn't jump ahead before cursor reaches next grid block?
Hey, if you want to make sure I get the message you could type Nimtrix, which will give me a notification. I saw it anyway though, so here you go:
First of all, I would stick to power-of-two values for your grid, since all resolutions on mobile or PC are either a power-of-two value or a combination of two power-of-two values added together. (google it if you don't know what that means)
Notice how all the object sizes in the .capx above are all either 16, 32, 64 etc.. You don't have to do this, but there are many good reasons for using power-of-two values for image sizes and such.
Also, using a big image as your background defeats the purpose of the TiledBackground object. Split your background into different objects to save space. (large images increase loading time and space requirements)
You can see how I made a similar background just by using one 64x64 sprite and one 32x32 sprite (could have been 1x1 for that matter). I would recommend you do this instead of making a 800x480 background that covers the whole layout.
To fix the offset you can see I subtracted the offset-values from the mouse position inside the floor() expression, then added them after the expression. I also added a clamp expression to keep the towers inside the grid area. Also note I moved the image point of all the towers, monsters etc.. to the top left corner.
Long post, but I think that's about it. Feel free to ask if I left anything out.
<font size="1">Edit: Noticed some silly typos, had to fix it.</font>
Thanks for the help. It took me a while to implement but I can see it working now. I understand what you mean be the "power of two values". I just normally like to work with round numbers as they are easy sets to identify. I will try optimize my game as I build it according to your feedback.