Touch doesn't work in Cocoonjs 2.0

[angelkom]

SceneMenu = game.Scene.extend({

    backgroundColor : 0xecf0f1,

 

    init: function(){

        var start = new game.Sprite('start.png');

        start.anchor.set(0.5, 0.5);

        start.position.set(game.system.width/2, game.system.height/4);

        this.stage.addChild(start);

        

        start.interactive = true;

        

        start.click = function() {

        

            game.system.setScene(SceneGame);

        }

});

 

This is my code when I test it in Cocoonjs 2.0 it doesn't work the touch doesn't respond how can I fix this?!

 

Thanks

[enpu]

click is mouse function, use tap function.

start.click = start.tap = function() {}

[angelkom]

You changed the touches, because as I knew the engine was automatically checking what device I was using and it was using the corresponding inputs, so if I putted mousedown on mobile it was using touchstart automatically, strange yesterday I tried this way and the touch was working on mobile, can you please explain why this way the touch works and the other doesn't ?!

 

var start = new game.Sprite('start.png', game.system.width/2, game.system.height/4, {

            interactive : true,

            mousedown: function() {

        

            game.system.setScene(SceneGame);

        }

        });

[enpu]

Ok, so if you define your mouse events in the sprite constructor, the engine will auto bind touch events, if user is using mobile device:

var sprite = new game.Sprite('sprite.png', 100, 100, {    mousedown: function() { // this will be auto bind to touchstart        console.log('mousedown');    }});

but if you define mouse event after the constructor, it will not be auto bind to touch event:

var sprite = new game.Sprite('sprite.png', 100, 100);sprite.mousedown = function() { // this will not work on touch device    console.log('mousedown');};

In that situation, you must also define touch events:

var sprite = new game.Sprite('sprite.png', 100, 100);sprite.mousedown = sprite.touchstart = function() { // this will work on touch device    console.log('mousedown');};

Also scene's mouse events will be auto bind to touch events:

SceneGame = game.Class.extend({    init: function() {    },    mousedown: function() {        // this will work on touch devices    }});

[angelkom]

ok but the click event isn't working on the scene

 

SceneGame = game.Class.extend({
init: function() {
},

click: function() {
}
});

[enpu]

You should extend game.Scene class not game.Class

[angelkom]

Sorry, the click event works fine when extending the scene, another question does the Pandajs has Multiplayer support, and if not what is the solution to implement multiplayer in pandajs that will work with cocoonjs

[enpu]

There is WebSocket plugin for Panda:

https://github.com/ekelokorpi/panda.js-plugins/tree/master/websocket

[angelkom]

Brilliant Enpu Great just great thanks

[angelkom]

Enpu one more thing how can I make the body of the sprite to be the size of the sprite so that when it collides with other objects to collide on the right spot

[enpu]

You mean shape, body does not have size.

 

Something like this?

var sprite = new game.Sprite('sprite.png');var body = new game.Body();var shape = new game.Rectangle(sprite.width, sprite.height);body.addShape(shape);

[angelkom]

Yes the shape but when I use it the shape to be by the width and height of the sprite it is bigger than the sprite it collides before it comes to the sprite

[enpu]

Show me your code please

[angelkom]

game.module(

    'game.game'

)

.require(

    'engine.core',

    'engine.audio',

    'engine.physics',

    'engine.particle',

    'engine.storage'

)

.body(function() {

 

game.System.orientation = game.System.PORTRAIT;

game.Storage.id = 'com.infinity.stickrun';

game.System.idtkScale = 'ScaleAspectFill';

 

game.addAsset('spritesheet.json');

game.addAsset('font.fnt');

game.addAudio('tap.ogg', 'tap');

game.addAudio('jump.ogg', 'jump');

game.addAudio('hit.ogg', 'hit');

game.addAudio('explosion.ogg', 'explosion');

    

    SceneGame = game.Scene.extend({

    backgroundColor : 0xFFFFFF,

    isJumping: 0,

    a: 1000,

    speed: -600,

    random: 0,

    score: 0,

    touch: false,

    over: false,

    cloudSpeedFactor: 1,

        

        init: function() {

            this.world = new game.World(0, 2000);

        var x = game.system.width/5;

        var y = 740;

            

            var cloud = new Cloud('cloud.png', 100, 100, {speed: -50});

                this.addObject(cloud);

                this.stage.addChild(cloud);

            

                cloud = new Cloud('cloud2.png', 300, 50, {speed: -30});

                this.addObject(cloud);

                this.stage.addChild(cloud);

            

                cloud = new Cloud('cloud3.png', 650, 100, {speed: -50});

                this.addObject(cloud);

                this.stage.addChild(cloud);

            

                cloud = new Cloud('cloud4.png', 700, 200, {speed: -40});

                this.addObject(cloud);

                this.stage.addChild(cloud);

            

            var mountain = new game.TilingSprite('mountain.png');

                mountain.position.y = 200;

                mountain.speed.x = 0;

                game.scene.stage.addChild(mountain);

                game.scene.addObject(mountain);

            

            var bushes3 = new game.TilingSprite('bushes3.png');

                bushes3.position.y = 350;

                bushes3.speed.x = 0;

                game.scene.stage.addChild(bushes3);

                game.scene.addObject(bushes3);

            

            var bushes2 = new game.TilingSprite('bushes2.png');

                bushes2.position.y = 400;

                bushes2.speed.x = 0;

                game.scene.stage.addChild(bushes2);

                game.scene.addObject(bushes2);

            

            var bushes = new game.TilingSprite('bushes.png');

                bushes.position.y = 500;

                bushes.speed.x = 0;

                game.scene.stage.addChild(bushes);

                game.scene.addObject(bushes);

            

            var ground = new game.TilingSprite('ground.png');

        ground.position.y = 800;

        ground.speed.x = 0;

            

        var groundShape = new game.Rectangle(game.system.width,100);

            

        var groundBody = new game.Body({

            position: {x: 0, y: 850},

            collisionGroup: 1,

            collideAgainst: 0

          });

            

        groundBody.addShape(groundShape);

            

        this.world.addBody(groundBody);

            

        game.scene.stage.addChild(ground);

        game.scene.addObject(ground);

            

        

            

        walk = [game.Texture.fromImage('player1.png')];

            

        player = new game.MovieClip(walk);

        player.animationSpeed = 0.1;

        player.play();

            

        player.anchor.set(0.5,0.5);

        player.position.set(x,y);

        

        var playerShape = new game.Rectangle(-40,player.height);

        

        playerBody = new game.Body({

            position: {x: x, y: y},

            velocityLimit: {x: 100, y: 1000},

            collisionGroup: 0,

            collideAgainst: 1

          });

            playerBody.addShape(playerShape);

          

          this.world.addBody(playerBody);

          this.stage.addChild(player);

          this.addObject(player);

            

            var go = new game.Sprite('go.png');

            go.position.set(game.system.width/2,game.system.height/2);

            go.anchor.set(0.5,0.5);

            go.interactive = true;

            go.tap = function() {

                game.scene.stage.removeChild(this);

                walk.splice(0,1,game.Texture.fromImage('player2.png'),game.Texture.fromImage('player3.png'));

                ground.speed.x = bushes.speed.x = game.scene.speed;

                bushes2.speed.x = bushes3.speed.x = -100;

                enemyBody.velocity.x = game.scene.speed;

                game.scene.touch = true;

                game.audio.playSound('tap');

                player.update = function() {

                

                    player.position.x = playerBody.position.x;

                    player.position.y = playerBody.position.y;

                    game.scene.score++

                    score.setText(game.scene.score.toString());

                }

                

        var score = new game.BitmapText('0', {font: '100 Pixel'});

 

        score.position.set((game.system.width)/2.4, 100);

 

                game.scene.stage.addChild(score);

            }

            this.stage.addChild(go);

            

            

        groundBody.collide = function() {

            game.scene.isJumping = 0;

            walk.splice(2,1);

            player.play();

        }  

            

            game.scene.random = Math.round(game.Math.random(1, 2));

            

            var move = [];

            

            if(game.scene.random == 1) {

                move.splice(0,0,game.Texture.fromImage('enemy1.png'));

                b = 750;

            }else if(game.scene.random == 2){

                move.splice(0,0,game.Texture.fromImage('enemy2.png'));

                b = 680;

                

            }else{

                move.splice(0,0,game.Texture.fromImage('enemy3.png'), game.Texture.fromImage('enemy4.png'));

                b = 780;

            }

        

            var enemy = new game.MovieClip(move);

            enemy.animationSpeed = 0.1;

            enemy.play();

            

            enemy.position.set(game.scene.a,;

            enemy.anchor.set(0.5,0.5);

            

            var enemyShape = new game.Rectangle(enemy.width,enemy.height-50);

        

        var enemyBody = new game.Body({

            position: {x: game.scene.a, y: b},

            velocity: {x: 0, y: 0},

            collisionGroup: 2,

            collideAgainst: 0

          });

        

         enemyBody.addShape(enemyShape);

          

          this.world.addBody(enemyBody);

            

            this.stage.addChild(enemy);

          this.addObject(enemy);

            

            enemy.update = function() {

                enemy.position.x = enemyBody.position.x;

                enemy.position.y = enemyBody.position.y;

                

                if(this.position.x < 0){

                     game.scene.random = Math.round(game.Math.random(1, 3));

            

                    if(game.scene.random == 1) {

                        move.splice(0,2,game.Texture.fromImage('enemy1.png'));

                        enemy.position.y = enemyBody.position.y = 750;

                    }else if(game.scene.random == 2){

                        move.splice(0,2,game.Texture.fromImage('enemy2.png'));

                        enemy.position.y = enemyBody.position.y = 680;

                    }else{

                        move.splice(0,2,game.Texture.fromImage('enemy3.png'),game.Texture.fromImage('enemy4.png'));

                        enemy.position.y = enemyBody.position.y = 780;

                    }

                    this.position.x = enemyBody.position.x = game.system.width + 100;

                    this.position.x = enemyBody.position.x;

                }

            }

            

            enemyBody.collide = function() {

                    game.scene.stage.removeChild(player);

                    game.scene.removeObject(player);

                    game.scene.world.removeBody(this);

                    ground.speed.x = bushes.speed.x = bushes2.speed.x = bushes3.speed.x = 0;

                    game.audio.playSound('hit');            

                    game.scene.addTimer(500, function(){game.audio.playSound('explosion')});

                 var emitter = new game.Emitter();

                    emitter.container = game.scene.stage;

                    emitter.textures.push('pice.png');

                    emitter.position.set(enemyBody.position.x, enemyBody.position.y);

                   emitter.speed = 400;

                    emitter.life = 3;

                    emitter.startScale = 0;

                    emitter.endScale = 2;

                    emitter.endAlpha = 1;

                     emitter.duration = 1;

                game.scene.addEmitter(emitter);

                game.scene.addTimer(1000, game.scene.gameover.bind(this));

            }

 

        },

        

        click: function() {

                    if(game.scene.isJumping <2 && this.touch && !this.over){

                            playerBody.mass = 1;

                            playerBody.velocity.y = -900;

                            game.scene.isJumping ++;

                            walk.push(game.Texture.fromImage('player4.png'));

                            player.gotoAndStop(2);

                            game.audio.playSound('jump');

                            }

                },

        

        gameover: function() {

                    game.storage.set('score', game.scene.score);

                    var table = new game.Sprite('table.png');

                table.position.set(game.system.width/2, game.system.height/4);

                table.anchor.set(0.5, 0.5);

            

                game.scene.stage.addChild(table);

 

                var score = new game.BitmapText(game.scene.score.toString(), {font: '100 Pixel'});

 

                score.position.set(game.system.width/2.4, game.system.height/4);

            

                game.scene.stage.addChild(score);

                

                var restart = new game.Sprite('restart.png');

                restart.position.set(game.system.width/2, game.system.height/1.9);

                restart.anchor.set(0.5, 0.5);

                restart.interactive = true;

                restart.tap = function() {

                    game.audio.playSound('tap');

                    game.system.setScene(SceneGame);

                }

                game.scene.stage.addChild(restart);

            

                var menu = new game.Sprite('menu.png');

                menu.position.set(game.system.width/2, game.system.height/1.5);

                menu.anchor.set(0.5, 0.5);

                menu.interactive = true;

                menu.tap = function() {

                    game.audio.playSound('tap');

                    game.system.setScene(SceneMenu);

                }

                game.scene.stage.addChild(menu);

                game.scene.over = true;

                game.scene.cloudSpeedFactor = 0.2;

        }

        

    });

    

SceneMenu = game.Scene.extend({

    backgroundColor : 0xffffff,

 

    init: function(){

        var logo = new game.Sprite('logo.png');

        logo.position.set(game.system.width/2, 0);

        logo.anchor.set(0.5, 0);

        this.stage.addChild(logo);

        

        var start = new game.Sprite('start.png');

        start.position.set(game.system.width/2, game.system.height/4);

        start.anchor.set(0.5, 0.5);

        start.interactive = true;

        start.tap = function() {

            game.audio.playSound('tap');

            game.system.setScene(SceneGame);

        }

        this.stage.addChild(start);

        

        var score = new game.Sprite('score.png');

        score.position.set(game.system.width/2, game.system.height/2);

        score.anchor.set(0.5, 0.5);

        score.interactive = true;

        score.tap = function() {

            game.audio.playSound('tap');

            game.system.setScene(SceneScore);

        }

        this.stage.addChild(score);

        

        var exit = new game.Sprite('exit.png');

        exit.position.set(game.system.width/2, game.system.height/1.35);

        exit.anchor.set(0.5, 0.5);

        exit.interactive = true;

        exit.tap = function() {

            game.audio.playSound('tap');

            CocoonJS.App.forceToFinish();

        }

        this.stage.addChild(exit);

    }

});

    

SceneScore = game.Scene.extend({

    backgroundColor : 0xecf0f1,

 

    init: function(){

        var reset = new game.Sprite('reset.png');

        reset.position.set(game.system.width/2, game.system.height/4);

        reset.anchor.set(0.5, 0.5);

        reset.interactive = true;

        reset.tap = function() {

            game.storage.set('score', 0);

            score.setText('Game has been Reseted');

            score.fontSize = '50';

            score.position.set(game.system.width/5, game.system.height/2);

            game.audio.playSound('tap');

        }

        this.stage.addChild(reset);

        

        var back = new game.Sprite('back.png');

        back.position.set(game.system.width/2, game.system.height/1.3);

        back.anchor.set(0.5, 0.5);

        back.interactive = true;

        back.tap = function() {

            game.audio.playSound('tap');

            game.system.setScene(SceneMenu);

        }

        this.stage.addChild(back);

        

        var highScore = game.storage.get('score');

        var score = new game.BitmapText(highScore, {font: '100 Pixel'});

 

                score.position.set(game.system.width/2.2, game.system.height/2.2);

            

                game.scene.stage.addChild(score);

    }

});

    

Cloud = game.Sprite.extend({

    update: function() {

        this.position.x += this.speed * game.scene.cloudSpeedFactor * game.system.delta;

        if(this.position.x + this.width < 0) this.position.x = game.system.width;

    }

});

 

game.start(SceneMenu, 768, 1024);

 

});

[angelkom]

I had to love the size of the shape on some sprites so they are collided right