Jump to content

[solved] Can't get any browser input on mobile device


Recommended Posts

So I am new to use Phaser to develop for mobile browser game. I have created the game in a workable state on PC and it does everything I want. It is basically a match3 game where everytime you tap/click on something you interact with the item. But for some reason I can't get any input to work on mobile. I have an iPhone6 and use safari, I have setup Firebug so that I can see the logs, but even if I add a simple "game.input.onDown.add(test, this); with a simple function to display a console message. It never gets fired in the mobile browser. How would I go about making this work? (It does however work on Android, tested it on Chrome, so that puzzles me even more).

For each item that is clickable I have:

function Gem(x, y, gemType){
	this.gemType = gemType;
	this.spriteName = gemType.spritename;
	this.x = x;
	this.y = y;
	this.gemPhysics = GameManager.getGrid().addToGrid(this);
	this.gemPhysics.inputEnabled = true;
	this.gemPhysics.input.enabled = true;
	this.gemPhysics.events.onInputDown.add(listener, this);

function listener(){

    And the game setup looks as follows:

var gameWidth = 800;
var gameHeight = 480;

var game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update });

//var gems;

function preload() {
	game.load.image('sky', 'assets/sky.png');

    game.load.image('star', 'assets/star.png');
    game.load.image('star_blue', 'assets/star_blue.png');
    game.load.image('star_green', 'assets/star_green.png');
    game.load.image('star_red', 'assets/star_red.png');
    game.load.image('star_purple', 'assets/star_purple.png');
    game.load.image('star_lightblue', 'assets/star_lightblue.png');
    game.load.image('star_black', 'assets/star_black.png');
    game.load.image('star_boost', 'assets/star_boost.png');

    game.load.image('reset_button', 'assets/resetbutton.png');

    game.load.image('tile', 'assets/gridtile.png');

    game.load.spritesheet('explosion', 'assets/explosion.png', 118.2, 118);

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;

var gameMngr;
var scoreText;

var isFullScreen = false;

function create() {
    game.input.enabled = true;
    game.inputEnabled = true;
        if (!game.device.desktop){      
        game.input.onDown.add(gofull, this); 
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            
    this.scale.minWidth = gameWidth/2;            
    this.scale.minHeight = gameHeight/2;            
    this.scale.maxWidth = gameWidth;            
    this.scale.maxHeight = gameHeight;            
    this.scale.pageAlignHorizontally = true;            
    this.scale.pageAlignVertically = true;            

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');


    // Grid
    var grid = new Grid(14, 10, 175, 100, 30, 'tile');
    this.gameMngr = new GameManager();

    // Start Game

    scoreText = game.add.text(300, 0, "Score", {
        font: "40px Ariel",
        fill: "#ffffff",
        align: "center"

function update() {
    //console.log(game.device.desktop + ", " + game.device.iPhone);
    scoreText.setText("Score : " + GameManager.getScore());    
    if (!game.device.desktop && !isFullScreen){ 

function gofull() { 
    console.log("Go Full!!");
    isFullScreen = true;

In there I also attempted to try and force the mobile version to go full screen, but for some reason that also doesn't seem to work properly. All in all, I can't seem to trigger any touch/input events in a mobile browser.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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