Mouse click on cell phone

Saola Animate Support Questions
1

Hi,
What event type should I use to make buttons work on a cell phone?
Mouse Click does not seem to work.
Probably because my version of the Bird Game is not responsive?

Thanks!

2

Hi Pim,

Mouse Click event should work well on mobile devices such as cell phones or tablets.
The Bird Game demo on our website may require the viewer to click Play button twice on iOS (iPhone, iPad) to start playing. It’s due to an issue of iOS and the way we make the button hover effect.
We’ll update that demo to make it works well on iOS.

You can see this tutorial to create hover effects without the click-twice issue on iOS:


Regards

3

Hm, it does not work on my Android either. But your Bird Game does. I forgot all about the responsiveness in the first place. Could that be the problem. And can I change this afterwards?
Thanks:-)

4

It should not be related to responsiveness.
Please share your project package (File > Save As > Package) so that I can check.

Regards

5

Thank you:-)PUM_game.saolapack (2.2 MB)

1 Like
6

I removed the hover effect (after you mentioned it). Now the first and the second sreen buttons work. But I can not “smash” the “autoTunes” on my cell phone.

7

Hi Pim,

It’s due to the double-tap-zoom feature on mobile browsers that delays click events.
You can use one of the following methods to disable the double-tap-zom feature and resolve this issue:

  • Select AutoFit check box in Document pane of the main document. It’ll scale your document to fit the browser window and also disable the double-tap-zoom feature.
  • Or click Edit HTML in Document pane, find the line
    <div id="{$containerID}" style="position: relative; height: 100%;"></div>
    and add touch-action: manipulation; style to the container div:
    <div id="{$containerID}" style="position: relative; height: 100%;touch-action:manipulation;"></div>

Moreover, you use symbols for autoTunes so the performance may not be good as using multiple timelines as in our Bird Game.

Regards

8

Thanks a million, LoanLS.
It works now when I link directly to the HTML. The performance on my Cell Phone though is not as good as on my PC (as you mentioned). I did not quite understand the actual Bird shooting (and the birds falling down) part of your tutorial. So I obviously made mistakes here. But I guess I have to study this closely again (I´m an ABSOLUTE beginner!).
I tried to embed the game in an iFrame on the Wordpress website of my band. No problems on my PC, but this does not really work on my Cell Phone.
So it works here: http://singlepointfailure.dk/spf_game2/SPF_theGame.html (direct link)
But not here: http://singlepointfailure.dk/video-game/ (iFrame).

But no worries. I will start from the top and try again:-)
Thanks again!

9

Hi Pim,

I saw that on mobile, there is a sidebar element (the aside tag) covers the iframe. That’s why your click button isn’t working.

element_cover_iframe
element_cover_iframe1177Ă—750 162 KB

Regards

10

Thank you Datnq!
That was the problem; I removed the sidebar on that page and made the iFrame responsive. Now everything works on a cell phone too:-)
One very last question: Could you tell in a few words how you set up your bird-shoot/bird-fall? I don´t really understand the tutorial here.
(I hope, I don´t ask too much…)
Thanks a million for a great support:-)

11

Hi Pim,

I’ve checked it again and found that we have two versions of the catching birds game: one uses symbols and the other uses multiple timelines. Each version has its own pros and cons, but using symbols is more simple so we choose it for the tutorial at https://atomisystems.com/html5-animation/creating-a-mini-interactive-game-with-saola-animate-catching-birds/
I see that you did your game exactly as guided in the tutorial.
I’m sorry to make you confused.

Regards

12

Okay, then I DID understand it after all:-)
I leave it as it is: It works fine on my phone.
Thanks for all your help!