SpriteButton

behavior plugin at:

dropbox.com/s/x46uie9isi0cvn3/SpriteButton.c2addon

sample at:

dropbox.com/s/c8coqjrda2b784w/SpriteButtonTest.capx

Latest version: 1.3

To install, just drag the .c2addon into your construct2 window, then restart Construct2.

(I don't have the rep yet to post a direct link, sorry! Will fix when I am able.)

This is my attempt at a SpriteButton behavior plugin. Just add it to a Sprite and set up which animation frames you would like to use for its normal, hover and click images. Don't forget to set the animation speed to 0 or the animation will play when the layout is first loaded.

There is an OnClick event that is fired when the user releases a touch/mouse click on the button. There will eventually be more events added for when the mouse/touch first hits a button, when hovering, etc, but the event on touch/click release is the most important, so I did that one first.

There is also a "Status" expression that is used for debugging purposes. Don't rely on any information from this, as it will definitely change depending on my needs at the moment. :)

While I am a professional C#/C++ programmer, I'm relatively new to JavaScript and have only been using Construct2 for a little while, so I'm sure there are plenty of bugs and improvements to be made. A lot of the code was copied wholesale from the DragNDrop behavior, so there may be unintended side effects of that, though I think I have a reasonable grasp of what's going on. I welcome all feedback.

I've found a bug already. I'm not getting my inputUp events being triggered when on a touch display (it works fine with a mouse)

dropbox.com/s/c8coqjrda2b784w/SpriteButtonTest.capx

This is a simple project with a single sprite with my SpriteButton behavior attached (which you will need to get from the above link) -- it should change to the hover/click image as expected and play a sound when clicked. On a normal desktop browser, it works fine. On the iPad, it's like I get no event when a touch ends, as the button stays in whatever visual state it was before the touch ended, and the sound never plays.

Any clues would be appreciated. Note that this is a bug in the javascript for my behavior, not in the project itself. :)

and I've found the culprit code and am fixing the bug. New version incoming soon.

i have this error when i try your capx

<img src="http://puu.sh/4kPpp/4d487f3011.png" border="0" />

and

<img src="http://puu.sh/4kPqi/7f268a2962.png" border="0" />

Why ? :D

anata: did you install the .c2addon first? It also looks like you may have another addon conflicting with mine, which is just named "SpriteButton" -- I can certainly rename mine if that's the problem.

Also, I have updated both the .c2addon and the .capx example. I think I've squashed the bugs for now.

And I found another bug already, though it's just cosmetic. If you start a click on the button, then (while still holding down the button or touching the screen) drag off the button, then back onto the button, the last action doesn't put the button visually back in the "clicked" image. The OnClicked action fires correctly, it's just the image. WOrking on it now.

anata: I found your bug as well. Not sure why I'm not getting that error here when I load the plugin. Anyway it will be fixed soon.

Version 1.2 uploaded with working sample. Will change top message.

The most recent version does not exhibit intended behavior on IE10 (I don't think IE is doing anything wrong, it's just that I was assuming that a mouse move event would have correct data in the "info.which" field, which is not true, and IE behaves differently with what garbage data is in the field versus Chrome)

So, doing a partial rewrite now that I grok what's going on more.

coatesjetset very nice work, such kind of plugin will help a lots of people like me. Keep up the good work and make the plugin more nice and good. Thanks for the share. <img src="smileys/smiley17.gif" border="0" align="middle" />

One more thing , I am confused about how to install this. Can you please let me know through PM or just write a method in your first post.

Version 1.3 uploaded. Bugs fixed, so it works as I intended on both Chrome and IE, on touch and on mouse systems. Removed the OnHover event as it was not firing exactly as I wanted, will add it (and other events) back in later once my coworkers and I get a design spec finalized.

Added some installation instructions to top post.

Thank you for useful plugin, it will save a lot of development time, nice work! :)

Have you tested it on all platforms and browsers?

I did testing on Windows with Chrome and IE, and on iOS, Windows RT, and Android. I believe the current version works on all platforms. If you find any bugs, definitely let me know! While I'm not working on this plugin as my primary focus right now, I use it in the work I am doing, so I should be pretty quick to fix any bugs.

Nice work! coatesjetset, it works well, Thanks for sharing.

coatesjetset: Nice work dude.... saved hell lot of complications. Keep up the good work.. <img src="smileys/smiley41.gif" border="0" align="middle" />