Adding touch event on UI button

Hello, for the ui buttons i have this code

var pl = this.Player.script.player;
            this.invIcoPaper = Raphael(10,10, this.icoSheetWidth, this.icoSheetHeight);
            this.invIcoPaper.circle(30,30,this.icoSheetWidth/2).attr({
                fill: '#000',
                opacity: this.defaultOpacity,
                'stroke-width': 2,
                stroke: '#fff'
            });
            // Create a div centred inside the main canvas
            var r = this.invIcoPaper.image(this.icbag, 0,0,60,60).attr({
                opacity: 1
            });
            var self=this;
            r.hover(function () {
                self.Player.script.player.clickable = false;
            }, function() {
                self.Player.script.player.clickable = true;
            });
            r.click(function(e){
                if(pl.inventoryOpen){
                    self.NewInv.script.inventory.hideInventory();
                    pl.inventoryOpen = false;
                    if (pl.shopOpen===false) {
                        pl.resetCamera('XCamera');
                    }
                }
                else {
                    if(pl.characterOpen){
                        self.NewInv.script.charSheet.hideCharScreen();
                        pl.characterOpen = false;
                        if (pl.shopOpen===false) {
                            pl.resetCamera('XCamera');
                        }
                    }
                    if(pl.spellOpen){
                        self.NewInv.script.spells.hideSpellScreen();
                        pl.spellOpen = false;
                    }
                    if(pl.questOpen){
                        self.NewInv.script.charQuestSheet.hideQuestScreen();
                        pl.questOpen = false;
                    }
                    if(pl.abilityOpen){
                        self.NewInv.script.charAbilitySheet.hideAbilityScreen();
                        pl.abilityOpen = false;
                    }
                    self.NewInv.script.inventory.drawInventory();
                    pl.inventoryOpen = true;
                    if (pl.shopOpen===false) {
                        pl.setCamera('XCamera');
                    }
                }
                return;
            });

how do i add a touch screen event to make it work on tablets?

Is it an HTML DOM object or a PlayCanvas UI button?

Made using raphael.min.js

That’s probably a DOM object. Worth checking their documentation to see if there’s something specific for that library to enable touch events on their objects.

Yes seems i have found it, but i can’t check it since no touch screens to do so :smiley:

You can easily check touch events on both Chrome/Firefox using the browser dev tools.

  1. Open the dev tools
  2. Enable the device toolbar (Ctrl + Shift + M)
  3. You select a test device or go with a free responsive window
  4. Select the kind of input you want to emulate:

image

Tried it, i don’t have the desktop menu but it’s nice to know there is such option

1 Like