Jump to content

Detect input on graphics rectangle using sprite


BdR
 Share

Recommended Posts

I'm trying to create a pause screen where players can tap the top half to continue and the bottom half to quit (for easier input on small mobile screens). For the pause screen I've created a semi-transparant black rectangle which I overlay on my game.
 
Now the pixi graphics doesn't have input handlers and I understand that I need to add a sprite (see this topic) but the sprite size is set default to 32x32. This means the input touch/mousclick only detected in the top hand corner.
 
So my question is, how do I set the size of the dummy sprite manually so it covers the entire rectangle or the entire screen or whatever size is needed? I've tried setting sprite.width manually but that only stretches the box, which makes it impossible to tap on the lower part of it.
 
See my example test code below.
var GAME_WIDTH = 800;var GAME_HEIGHT = 600;var boxgreen;var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, 'phaser-example', { create: create });function create() {        // pause screen        var grph = this.game.add.graphics(0, 0);        grph.beginFill(0x00FF80, 0.75); // alpha=0.75 is semi-transparant        grph.drawRect(0, 0, GAME_WIDTH/2, GAME_HEIGHT/2);        // graphics do not have input handlers, create a dummy sprite and attach graphics        boxgreen = game.add.sprite(GAME_WIDTH/4, GAME_HEIGHT/4);        boxgreen.addChild(grph);        // next lines don't work, it stretches the green box to outside of game screen        //boxgreen.width = GAME_WIDTH/2;        //boxgreen.height = GAME_WIDTH/2;            // detect touches on sprite        boxgreen.inputEnabled = true;        boxgreen.events.onInputDown.add(boxgreenTouch, this);}function boxgreenTouch(sprite, pointer) {    console.log('boxgreenTouch --> pointer=('+pointer.x+ ','+pointer.y+') sprite.height='+sprite.height);    if (pointer.y > sprite.heigh/2) {        console.log('boxgreenTouch --> player tapped on BOTTOM part of green box');    } else {        console.log('boxgreenTouch --> player tapped on TOP part of green box');    };}

w8s00k.png

Link to comment
Share on other sites

Oops, I think that typo happened when I pasted my code and edited my post. Btw it should also take the sprite.y offset into account, so it actually should have been something like this:
if (pointer.y-sprite.y > sprite.height/2) {

But anyway, then it still only detects a click in the top 32x32 area of the green rectangle. So instead I just added an input.onDown to the entire game and then in the listner function I check for certain rectangles, as suggested in this thread. This is my test code which works now.

var GAME_WIDTH = 800;var GAME_HEIGHT = 600;var boxgreen;var boxtop;var boxbottom;var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, 'phaser-example', { create: create });function create() {    // transparant pause screen    var grph = this.game.add.graphics();    grph.beginFill(0x00FF80, 0.75); // alpha=0.75 is semi-transparant    grph.drawRect(GAME_WIDTH/4, GAME_HEIGHT/4, GAME_WIDTH/2, GAME_HEIGHT/2);    // define input areas    boxtop    = new Phaser.Rectangle(GAME_WIDTH/4, GAME_HEIGHT/4, GAME_WIDTH/2, GAME_HEIGHT/4);    boxbottom = new Phaser.Rectangle(GAME_WIDTH/4, GAME_HEIGHT/2, GAME_WIDTH/2, GAME_HEIGHT/4);    // input handler    game.input.onDown.add(boxgreenTouch, this);}function boxgreenTouch(pointer) {    //console.log('boxgreenTouch --> pointer=('+pointer.x+ ','+pointer.y+') ');    if (boxtop.contains(pointer.x, pointer.y) )    {console.log('boxgreenTouch2--> player tapped on TOP part of green box')};    if (boxbottom.contains(pointer.x, pointer.y) ) {console.log('boxgreenTouch2--> player tapped on BOTTOM part of green box')};}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...