(Solved)How to get clickable item using phaser-scrollable?

#1

Hi, I’m using phaser-scrollable from https://github.com/trueicecold/phaser-scrollable.

I have successfully created scroll able items using it. But I want to get the item which user clicked.

How to get which item is clicked ?

Please help me I’m new in phaser.

Thanks.

#2

Hello @Nilesh_Shripal,
i believe you could do something like this;

this.scroller = game.add.existing(new ScrollableArea(x, y, w, h, params));
var textStyle = {font:"30px Arial", fill:"#ffff00"};
for (var i=0;i<10;i++) {
	for (var j=0;j<80;j++) {
		var text = game.make.text(i*330, j*30, "Yes, everything scrolls", textStyle);
		text.name = 'text-'+i+'_'+'j';
        text.inputEnabled = true;
        text.input.useHandCursor = true;
        text.events.onInputDown.add(sayName, this);
		scroller.addChild(text);
	}
}
scroller.start();

function sayName(e) {
	console.log(e.name);
}

I hope this would work for you :slight_smile:

#3

hello Patron, thanks for your replay.
I tried your solution but when I click on any item 'sayName(e) function is not getting call.

Please help me solving this issue.

Thanks for response.

#4

Hey again @Nilesh_Shripal,

Can you please show me how did you add this code :slight_smile:

#5

I added following code in create function

 var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height, verticalScroll));
 	 var textStyle = { font: "30px Arial", fill: "#ffff00" };
 	 for (var i = 0; i < 10; i++) {
 	     for (var j = 0; j < 80; j++) {
 	         var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
 	         text.name = 'text-' + i + '_' + 'j';
 	         text.inputEnabled = true;
 	         text.input.useHandCursor = true;
 	         text.events.onInputDown.add(sayName, this);
 	         scroller.addChild(text);
 	     }
 	 }
 	 scroller.start();

After that I added the following function

function sayName(e) {
console.log("in sayName " + e.name);
}

#6

I see but where is the scroller is containing.

If it’s not private can you share all ?? :smile:

#8

This is my Logo class

var LoadCnt = 0;
var Game = {};
var maxX = 480;
var maxY = 800;
var scaleRatioX = 1, scaleRatioY = 1;
var gameRatio = window.innerWidth / window.innerHeight;
var firstRunLandscape;

var mTex_SoundOnBut;

var Snd_Theme, snd_GameOver, snd_levelComplete;

Game.Logo = function (game) {

};
Game.Logo.prototype = {

init: function () {
   

},
preload: function () {
    // firstRunLandscape   = this.game.scale.isGameLandscape;
  
},
create: function () {

    var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
    var textStyle = { font: "30px Arial", fill: "#ffff00" };
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 80; j++) {
            var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
            text.name = 'text-' + i + '_' + 'j';
            text.inputEnabled = true;
            text.input.useHandCursor = true;
            text.events.onInputDown.add(sayName, this);
            scroller.addChild(text);
        }
    }
    scroller.start();
   // setEggs(-0.75, 0.52);
},

update: function () {
  
},

}
function sayName(e) {
console.log("in sayName " + e.name);
}

And following is my index.html file

Bunny Egg Fun
    <script src="js/phaser-scrollable.min.js"></script> 
      <script src="js/Logo.js"></script>  
   
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #turn {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: white;
            background-image: url('assets/portrait.png');
            background-repeat: no-repeat;
            background-position: center center;
            display: none;
            z-index: 2;
        }
    </style>
   </head>


<body>
	<div id = "turn"></div>
    <script type="text/javascript">
    	window.onload = function()
    	{
          		// var gameRatio = window.innerWidth/window.innerHeight;
  	//	window.scrollTo(0,1);
        game = new Phaser.Game(480,800,Phaser.CANVAS,'GameCanvas');
        game.state.add('Logo', Game.Logo);
      
        game.state.start('Logo');	    
    };
    </script>
</body>
#9

Thanks for sharing with me :slight_smile:

now i can say that you need to put the sayName function inside your prototype like this i think:

sayName: function(e) {
  console.log(e.name);
}

If this won’t work, i believe scrollArea is covering the clicking part’s.

#10

When I added it I’m getting the following error

Uncaught ReferenceError: sayName is not defined

at the following line

text.events.onInputDown.add(this.sayName, this);

My code is as follows

Game.Logo = function (game) {

};
Game.Logo.prototype = {

init: function () {
   

},
preload: function () {
    // firstRunLandscape   = this.game.scale.isGameLandscape;
  
},
create: function () {

    var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
    var textStyle = { font: "30px Arial", fill: "#ffff00" };
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 80; j++) {
            var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
            text.name = 'text-' + i + '_' + 'j';
            text.inputEnabled = true;
            text.input.useHandCursor = true;
            text.events.onInputDown.add(sayName, this);
            scroller.addChild(text);
        }
    }
    scroller.start();
   // setEggs(-0.75, 0.52);
},

update: function () {
  
},
sayName: function (e) {
    console.log("in sayName " + e.name);
}

}

#11

Did you also add the function inside your prototype ? :blush:

#12

yes this is my code

Game.Logo = function (game) {

};
Game.Logo.prototype = {

init: function () {
   

},
preload: function () {
    // firstRunLandscape   = this.game.scale.isGameLandscape;
  
},
create: function () {

    var scroller = game.add.existing(new ScrollableArea(10, 10, game.width, game.height));
    var textStyle = { font: "30px Arial", fill: "#ffff00" };
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 80; j++) {
            var text = game.make.text(i * 330, j * 30, "Yes, everything scrolls", textStyle);
            text.name = 'text-' + i + '_' + 'j';
            text.inputEnabled = true;
            text.input.useHandCursor = true;
            text.events.onInputDown.add(sayName, this);
            scroller.addChild(text);
        }
    }
    scroller.start();
   // setEggs(-0.75, 0.52);
},

update: function () {
  
},
sayName: function (e) {
    console.log("in sayName " + e.name);
}

}

#13

just saw this should be;

text.events.onInputDown.add(this.sayName, this);

#14

Yes you are write. Now error gone.

But when I click on any text item sayName is not getting called.

Please help me.

#15

Then it’s because ScrollableArea is handling it’s own click and drag event’s and it’s not calling for Text’s… Let me check what we can do about this.

#16

Ok. Thanks for your help.

I’m waiting for your reply.

Thanks.

#17

Okey, so can you please try this:

Comment the code where you start the scroller and give it a try for only if sayName function is working or not ?

#18

Hi, I tried it. sayName function is not working.

#19

I’m looking for phaser-scrollable.js from github.

And there this code:

/**
* Start the Plugin.
*
* @method ScrollableArea#start
*/
ScrollableArea.prototype.start = function () {
	this.game.input.onDown.add(this.beginMove, this);
	this.callbackID = this.game.input.addMoveCallback(this.moveCanvas, this);
	this.game.input.onUp.add(this.endMove, this);
	this.game.input.mouse.mouseWheelCallback = this.mouseWheel.bind(this);
};

It’s adding a onDown event when you start scrollable. Other then that it’s not catching any down event or smt. Maybe the mask is preventing the input’s. hmm…

Yea i just saw that it’s adding a mask which is a graphics object from phaser to the scene which cover’s the all scene…

Can you try to also something like this:

scroller.mask.inputEnabled = false;

and after this try for click event sayName function please ? :slight_smile:

#20

Hi, you are write. Now sayName funciton is getting called.
But when I click on any text line it is showing same console log for each row
console output is as follows for clicking any row item:-
in sayName text-0_j

Problem solved thank you very much.:smiley:

#21

Yea i just saw that it was my mistake.

text.name = 'text-'+i+'_'+j; would just fix your naming problem :slight_smile: