onlycape

Hi @Pau, Now it works, but is very strange for me . I don't know why, but with your code, the params of "entra1" and "entra2" are in other order (the car is the second parameter, not the first, thats the reason of the errors).The "if" of entraArea2 is the location to execute the crossing action. Here the tested code in https://labs.phaser.io/edit.html?src=src\physics\arcade\overlap zone.js : var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true, gravity: { y: 200 } } }, scene: { preload: preload, create: create, update: update } }; var metaIn; var metaOut; var coches; new Phaser.Game(config); function preload () { this.load.image('space', 'assets/skies/space.jpg'); this.load.image('block', 'assets/sprites/bikkuriman.png'); } function create () { this.add.image(400, 300, 'space'); /* metaIn enable sprite to cross metaOut ("triggered" property is set to false)*/ metaIn = this.add.zone(300, 50).setSize(5, 500); metaOut = this.add.zone(370, 50).setSize(5, 500); this.physics.world.enable(metaIn); this.physics.world.enable(metaOut); metaIn.body.setAllowGravity(false); metaIn.body.moves = false; metaOut.body.setAllowGravity(false); metaOut.body.moves = false; /* GRUPO DE COCHES (2) */ var coches = this.physics.add.group(this); player1 = coches.create(50, 150,'block'); player2 = coches.create(50,300,'block'); Phaser.Actions.Call(coches.getChildren(), function(coche) { coche.body.setVelocity(100,0); coche.body.setAllowGravity(false); coche.parametros = {}; coche.love= 2; coche.entraEnArea1 = function (){ this.triggered=true; } coche.entraEnArea2 = function (){ if(this.triggered){ //// Aquí pones la acción que quieres ejecutar al cruzar la meta //// console.log('el coche con love '+ this.love + ' cruza por meta'); } this.triggered = false; } }); this.physics.add.overlap(coches, metaIn, entra1.bind(this)); this.physics.add.overlap(coches, metaOut, entra2.bind(this)); } function entra1(objectmetaIn,coche){ //console.log(objectmetaIn.love); coche.entraEnArea1(); } function entra2(objectmetaOut,coche){ //console.log(objectmetaOut); coche.entraEnArea2(); } function update () { metaIn.body.debugBodyColor = metaIn.body.touching.none ? 0x00ffff : 0xffff00; metaOut.body.debugBodyColor = metaOut.body.touching.none ? 0x00ffff : 0xffff00; } Good luck!!

Hi again @Pau, I think you can use something like this (I'm sure you can improve this code ? , I usually use Phaser CE) : var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true, gravity: { y: 200 } } }, scene: { preload: preload, create: create, update: update } }; var zone1; var zone2; var group; new Phaser.Game(config); function preload () { this.load.image('space', 'assets/skies/space.jpg'); this.load.image('block', 'assets/sprites/bikkuriman.png'); } function create () { this.add.image(400, 300, 'space'); /* Creating group with 2 elements */ var group = this.add.group(this); /******************** Adding two cars to the group*/ /**************************** CAR1 */ var car = group.create(50,150,'block'); this.physics.world.enable(car); car.body.setVelocity(50,0); car.body.setAllowGravity(false); /* Custom properties for CAR1 */ car.name = 'car1'; car.triggered = false; car.overlapIn = function (){ this.triggered=true; } car.overlapOut = function (){ if(this.triggered){ console.log(this.name +' crossing goal'); } this.triggered=false; } /******************* CAR2 */ car = group.create(50,300,'block'); this.physics.world.enable(car); car.body.setVelocity(100,0); car.body.setAllowGravity(false); /* Custom properties for CAR2 */ car.name = 'car2'; car.triggered = false; car.overlapIn = function (){ this.triggered=true; } car.overlapOut = function (){ if(this.triggered){ console.log(this.name +' crossing goal'); } this.triggered=false; } /* zone1 enable sprite to cross zone2 ("triggered" property is set to false)*/ zone1 = this.add.zone(300, 50).setSize(5, 500); zone2 = this.add.zone(370, 50).setSize(5, 500); this.physics.world.enable(zone1); this.physics.world.enable(zone2); zone1.body.setAllowGravity(false); zone1.body.moves = false; zone2.body.setAllowGravity(false); zone2.body.moves = false; this.physics.add.overlap(group, zone1, overlapAction1.bind(this)); this.physics.add.overlap(group, zone2, overlapAction2.bind(this)); } function overlapAction1(objectCar,objectZone1){ objectCar.overlapIn(); } function overlapAction2(objectCar,objectZone2){ objectCar.overlapOut(); } function update () { zone1.body.debugBodyColor = zone1.body.touching.none ? 0x00ffff : 0xffff00; zone2.body.debugBodyColor = zone2.body.touching.none ? 0x00ffff : 0xffff00; } The two cars in the group have 2 custom properties ("name" and "triggered") and two custom methods ("overlapIn" and "overlapOut"). The goal line have 2 zones: When car overlaps zone1 "triggered is set to true (this enable the zone2 where is executed the goal action), and when car overlaps zone2 "triggered" is set to false after execute an action, in this case print in console the car name and "crossing goal". The code can be tested editing the code in this example: https://labs.phaser.io/edit.html?src=src\physics\arcade\overlap zone.js . If you want to avoid cheats then you need place some check points in the track. Regards.

Hi Pau, This is a way to do that (tested on phaser 3 sandbox): var overlapCollider; var overlapTriggered = false; /* ...... */ function create(){ /* ..... */ overlapCollider = this.physics.add.overlap(players, overlappingArea, goal.bind(this)); }; function goal(){ if(overlapTriggered){ this.physics.world.removeCollider(overlapCollider); return; }; console.log('overlap'); overlapTriggered=true; }; Without using the variable overlapTriggered, goal() would be executed 2 times. Regards.

Hi @espace, I think that directly is not possible. But you can make your own wrapper function for "game.add.tween". Here a simple wrapper ( http://phaser.io/sandbox/BFoPWrWT ) : // Function to wrap game.add.tween function tweenWrapper(obj){ game.add.tween(obj.target).to(obj.properties,obj.duration,obj.ease,obj.autoStart,obj.delay,obj.repeat,obj.yoyo); } function create() { var sprite = game.add.sprite(0, 0, 'phaser'); var config={ target: sprite, properties : { y:150, x:100, }, duration : 1000, ease : Phaser.Linear, autoStart : true, delay:10, repeat : 0, yoyo:false }; tweenWrapper(config); } Regards.

Hi @espace, When the object collide "in the air" : var timeStamp1 = performance.now() When the object collides with ground : var timeStamp2 = performance.now() The time the object take to fall to the ground in miliseconds is ----> parseInt ( timeStamp2 - timeStamp1 ) Regards.

@BdR , No. If you load sound assets in a state with the option "autodecode" (example: this.game.load.audio('blaster', 'audio/SoundEffects/blaster.mp3', true)), then the decoded sounds will be stored in cache and available for other states. You can use a state to load the common assets only one time (like in the typical loading screen with progress bar). Regards.

Hi @BdR, That DOMException is resolved with this (mygame.MyGameState was undefined): mygame.MyGameState = function(game){}; mygame.MyGameState.prototype = { preload: function() { ............... more code ............... Phase Sandbox can use the StateManager. Here a simple example: http://phaser.io/sandbox/UUWjHaIA Each state must contain at least a one of the required functions: preload, create, update or render (check your "mygame.MyState ") To change the game size use the size selector in the "Play" tab. Declaring a new Phaser.game adds other canvas, and seems game.destroy() can't be used. Regards.

Hi @Phaser911, Instead of using 2 sprites for the background, you could use a single tilesprite and its autoscroll method ( https://photonstorm.github.io/phaser-ce/Phaser.TileSprite.html#autoScroll ). // in create function bgSpeed = 6; background = game.add.tileSprite(0,0,screenWidth,screenHeight,'imageKey'); background.autoScroll(bgSpeed,0); // bgSpeed in pixels per second // in buttonClick() function buttonClick() { bgSpeed = 9; background.autoScroll(bgSpeed,0); } Regards.

Hi again @espace, The onComplete property of the Tween class is an object of the Signal class, which in this case calls its add method. This is the documentation of "Signal.add" method: https://photonstorm.github.io/phaser-ce/Phaser.Signal.html#add I am using Phaser CE, but in this case it does not change with respect to your version. Yes, is an optional argument. This code still works changing "this" with "null". Regards.

Hi @espace, I think you probably have not passed the argument to the callback. Look at this code made in Phaser Sandbox (try the code here: http://phaser.io/sandbox/obVXEuZb/play ) : function create() { var sprite = game.add.sprite(0, 0, 'phaser'); var appears = function (obj,callback){ var tw = game.add.tween(obj).to( { x: 100 }, 2000, "Linear", true); // Here is the trick: add(callback, context, priority, args) tw.onComplete.add(callback,this,null,obj); }; var anim_obj = function(obj){ game.add.tween(obj).to( { y: 100 }, 2000, "Linear", true); }; appears(sprite,anim_obj); } Regards.

Hi @johann_dev, In first place, If you are using the renderer Phaser.WEBGL or AUTO then try changing it to Phaser.CANVAS. Some browsers have support for webgl but with very poor performance (especially on mobile). If you are using multiple text objects with webgl. Instead of system fonts it's much better for performance to use bitmap fonts (bitmapText object). Regards.

Hi @zelcard, Nice game. I liked the game mechanics and the excellent visual effects. There are 3 points that I think could improve the game: Because the time of the game is limited, replay value is low. Some type of endless mode could improve this aspect. Some type of help / tutorial to know what to do at least in the first game. The music of the game could be coordinated with the different states of the game (for example, lower the volume at the beginning of the game, change to another music, ...). Here my best result ? : Regards.

Hi @MackeyK24 , The latest Chrome update causes this problem. Now you need the first sound to be caused by the user (click, touch ...), only then you can play sounds without user intervention. In my case, I added a sound (with 0 volume) on the play button. And here other solution: http://www.html5gamedevs.com/topic/37384-no-sound-or-music-on-chrome-desktop-windows-10/ Regards.

Hi @espace, There is a scope problem. You don't need to put the argument inside an anonymous function. The argument is already a function. This code works: var wait = function(callback,duration){ setTimeout(callback, duration); }; var f = function(){ console.log('executed'); }; wait(f,500); Regards.

In this link they explain in detail the use of the "this" keyword in javascript: https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85 In my humble opinion (I'm a newbie in javascript and Phaser), your question is more related to javascript than to Phaser framework. Using more time in javascript learning at the end will save you a lot of time when developing in Phaser, and will provide you with other resources that in some cases the framework will not be able to offer. Regards.

Phaser CE has already solved that problem in version 2.10.5. For other frameworks I dont know.

Hi @EpicKingdom_ I had a similar problem with the mobile devices and the problem was the configuration of my viewport metatag.

Hi @Dzambor, The problem is that the callbacks did not send the game parameter to the nextWord (game) and nextLine(game) functions, and therefore could not create the time events since game was undefined. To fix it, I changed the callbacks of the time events. This is the code: var Game={}; Game.Intro = function(game) {}; var content = [ "The sky above the port was the color of television, tuned to a dead channel.", "From Neuromancer by William Gibson" ]; var line = []; var wordIndex = 0; var lineIndex = 0; var wordDelay = 120; var lineDelay = 400; Game.Intro.prototype = { create: function(game) { var t=this; console.log(game); text = game.add.text(32, 32, '', { font: "15px Arial", fill: "#19de65" }); nextLine(game); } } function nextLine(game) { if (lineIndex === content.length) { /* // We're finished this.state.start('MainMenu');*/ console.log('Code for new state disabled'); } // Split the current line on spaces, so one word per array element line = content[lineIndex].split(' '); var g=game; // Reset the word index to zero (the first word in the line) wordIndex = 0; // Call the 'nextWord' function once for each word in the line (line.length) game.time.events.repeat(120, line.length, function(){nextWord(game);}, this); // Advance to the next line lineIndex++; } function nextWord(game) { // Add the next word onto the text string, followed by a space text.text = text.text.concat(line[wordIndex] + " "); // Advance the word index to the next word in the line wordIndex++; // Last word? if (wordIndex === line.length) { // Add a carriage return text.text = text.text.concat("\n"); // Get the next line after the lineDelay amount of ms has elapsed game.time.events.add(400, function(){nextLine(game);}, this); } } Regards.

Hi @zidein, For this case maybe Phaser 3 adapts better to what you want, since it is designed to run several states at same time if necessary. https://labs.phaser.io/view.html?src=src\scenes\multiple scenes from classes.js Regards.

@laduree77 Don't worry , the problem remains the same. Knowing the upper left corner (-100 , 0) and the lower right corner (1700 , 310) of the rectangle of the world bounds and the width and height of the obstacles (70x70), the possible coordinates of these will be: -100 < obstacle.x < 1630 0 < obstacle.y < 240 In the code some obstacles are generated outside these limits.

Hi @TheScruffyGuy, It seems a problem with the browser cache. Have you refreshed the browser after save the new code ?. Greetings.

@laduree77 Upsss, I think it's my fault . The problem is that the initial "Y" coordinate of some obstacles is outside the world bounds and I imagine that it can produce that behavior. In this expression: ((Math.random() * 250) - 20) change "-20" with any positive value. Tell me if that solves the problem. PS: You should post a new thread for a new problem, because that way you'll find help more easily and help other people with the same problem.

@laduree77 In your jump condition you have to change: this.player.body.touching.down with this.player.body.onFloor()

Hi @laduree77, I have tested the code I showed you before and it works for me (Phaser 2.10.1). Here is the problem in your new code: this.world.bounds.height = this.height - 50; "this.height" is undefined. You have to use "this.game.height" or "game.height". After that, you don't need apply physics to the ground. Right now, the call to makeObstacles in the update method isn't doing anything because it needs a parameter (number of obstacles to generate). But if you generate obstacles in the update () (it is executed 30/60 times per second), you must implement a method to destroy the obstacles that you don't need or in a few seconds you will have thousands, with which you will have performance problems and the game will be unplayable. The main idea of the code that I showed you is the reuse of the obstacles (I created 4, but obviously you can put the ones you want) to avoid to collapse the resources and the creation of new objects (slower than reusing existing ones). Greetings.

Hi @laduree77 , Some points that I think can help you to optimize your code: 1) In your current code you are continuously creating elements of the "obstacle" group, which causes a significant drop in the fps. The best option in your case is to recycle the obstacles when they leave the screen. 2) For collisions with the ground you can redefine the world bounds and use bottom bound as a floor. 3) When you load an asset of the game, it does not disappear when changing to another state. Here you only need the first preload(). 4) The creation of objects or variables that are not going to change is better done in the create () method, since it only runs one time. This is the case of "cursors". Here a possible solution to your problem of collisions with the ground and the fall of the fps: var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets this.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.background = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.background.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny0000'); this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true); this.player.animations.play('run', 10, true); // logo this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, 'sprites', 'logo'); this.splash.anchor.setTo(0.5); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('gamePlay'); } } }; var obstacle; var gamePlay = function(game) {}; gamePlay.prototype = { create: function () { //world bounds rectangle ******************************************************** game.world.bounds.x = -100; game.world.bounds.width = game.width + 100 + (1700-820); game.world.bounds.height = game.height-50; // physics engine game.physics.startSystem(Phaser.Physics.ARCADE); // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.ground = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.ground.autoScroll(-300, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny0000'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true); this.player.animations.play('right', 10, true); // physics on sprites game.physics.arcade.enable([this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; //give player slight bounce this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 1000; this.player.body.collideWorldBounds = true; //create group for obstacles obstacle = this.add.group(); obstacle.enableBody = true; obstacle.physicsBodyType=Phaser.Physics.ARCADE; //spawn obstacles this.makeObstacles(4); }, makeObstacles: function (numberOfHills) { for (var i = 0; i < numberOfHills; i++) { var hill = obstacle.create(((Math.random() * 900) + 800), ((Math.random() * 250) -20), 'sprites', 'obstacle'); //hill.body.immovable = true; //hill.scale.x *= -1; hill.body.gravity.y = 200; hill.body.velocity.x = ((Math.random() * -200) - 100); hill.body.collideWorldBounds = true; } }, update: function () { //look for hills out of screen to recycle obstacle.forEach(function(item){ if(item.x < -60){ item.reset(((Math.random() * 900) + 750), ((Math.random() * 250) - 20)); item.body.gravity.y = 200; item.body.velocity.x = ((Math.random() * -200) - 100); item.body.collideWorldBounds = true; } }) //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving player if (cursors.up.isDown && this.player.body.onFloor()) { this.player.body.velocity.y = -850; } else if (cursors.right.isDown) { this.player.body.velocity.x = 60; this.player.animations.play('right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90; this.player.animations.play('right'); } } }; var gameOver = function(game) {}; gameOver.prototype = { create: function () { console.log('create'); game.stage.backgroundColor = '#4488AA'; //click to start text this.game.add.text(this.game.world.centerX - 100, this.game.world.centerY + 80, 'Click to return to main menu', { font: "30px Raleway"} ); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('mainMenu'); } } } game.state.add('mainMenu', mainMenu); game.state.add('gamePlay', gamePlay); game.state.add('gameOver', gameOver); game.state.start('mainMenu'); Greetings and good luck!!