Search the Community

Hello, So I actually have the following code that works: var player; var box_tnt; function create (){ this.physics.add.collider(player, box_tnt, hitTnt, null, this); } //the function hitTnt stop the game because the player died function hitTnt (player, boxes){ this.physics.pause(); player.setTint(0xff0000); player.anims.play('default'); gameOver = true; } and I want to do something like: var player; var box_tnt; function create (){ this.physics.add.collider(player, box_tnt, hitTnt, null, this); } //the function hitTnt stop the game because the player died function hitTnt (player, boxes){ gameOver(); //other stuff here } function gameOver (){ this.physics.pause(); console.log('Game Over!'); textGameOver.setText('GAME OVER'); player.setTint(0xff0000); player.anims.play('default'); gameOver = true; } but I have the following message: Do you have please any ideas how to do it properly?

I have this code: scene.physics.add.overlap(spears.children.entries[numberOfSpearThrowerMachines], platforms, stopSpear, null, this); function stopSpear(number) { spears.children.entries[number].setVelocityX(0); } I am trying to send a parameter to the function stopSpear when calling it. Like this: scene.physics.add.overlap(spears.children.entries[numberOfSpearThrowerMachines], platforms, stopSpear(numberOfSpearThrowerMachines), null, this); but this does not work obviously, so how do I do it instead?

Hey guys! I'm making a game based on states. This is my Game.js (1st stage) fil starts with this. var SpaceChicken = SpaceChicken || {}; The problem is, everything is working except 2 functions. I have a function where you can pickUp boxes but the game crashes whenever i pick it up telling me this error: "" The code i've used looks like this: i have tried putting player.addChild(this.game.make.sprite(25, -150, 'box')); but then it says same error, just with this.make is not defined Any solutions or ideas to prevent this? Thanks:)

I'm trying to create platforms for my player to jump onto and also make collectible stars. I can create these sprites using functions, but I don't know how to make physics work on them so that the character can jump on the platforms and overlap with the stars. The problem is that the physics portion doesn't work when I call it in the update function. I am also not using tilesprites, so it can't work that way. create: function() { addStar(star1); }, update: function() { removeStar(star1); } addStar(name) { name = game.add.sprite(1700, 550, 'star'); name.anchor.setTo(0.5, 0.5); this.game.physics.enable(name, Phaser.Physics.ARCADE); name.body.collideWorldBounds = false; name.enableBody = true; name.body.immovable = true; } removeStar(name) { if (game.physics.arcade.overlap(character, name) == true) { name.destroy(); updateScore(); } }

I am just starting with Phaser and figured I should learn 3 instead of an earlier version. I have created a game, called in a scene, but can't seem to call a simple function. I have made tons of games in Actionscript, so am hoping to make this transition to Phaser easily. I am probably missing something basic or have screwed up something since I am going from 4 different tutorials. lol Any help would be great! When I run this, it gets to line 28 and then says SyntaxError: bad method definition. Help! Oh,... and while I have your attention... Anyone have a particular package for Sublime that helps with Phaser or Javascript? class FactChoice extends Phaser.Scene { constructor() { super({key:"FactChoice"}); } preload() { this.load.image('0', 'assets/images/numbers/0.png'); this.load.image('1', 'assets/images/numbers/1.png'); this.load.image('2', 'assets/images/numbers/2.png'); this.load.image('3', 'assets/images/numbers/3.png'); this.load.image('4', 'assets/images/numbers/4.png'); this.load.image('5', 'assets/images/numbers/5.png'); this.load.image('6', 'assets/images/numbers/6.png'); this.load.image('7', 'assets/images/numbers/7.png'); this.load.image('8', 'assets/images/numbers/8.png'); this.load.image('9', 'assets/images/numbers/9.png'); this.load.image('next', 'assets/images/btnNextLevel.png'); this.load.image('BG', 'assets/images/sky.png'); } create() { console.log("time to make FactChoice"); arraysChosen(); } arraysChosen: function(){ console.log("hey"); } }

Currently I have a group of sprites and I want to make them all fall at the same time. I am trying to accomplish this with the following functions, where the group (here: fallGroup) should fall when the down arrow key is pressed. (and yes, I have already initialized keys in the create() method) I have tried passing multiple versions of the function definition to callAll() (eg. "this.setVel", "game.setVel", ect.) as well as several different contexts instead of 'null' ("this", "that=this, then passing 'that' in", "game", "game.stage", ect.) but so far nothing happens. For some of the combos I get "TypeError: Cannot read property 'setVel' of undefined" others produce no error but also do not call my 'setVel' function. At this point I'm pretty lost as to what to do. Edit: appleYpos, groundYpos, appleTime; are all globally defined variables function setVel(sprite,vel) { sprite.body.velocity.y = vel; } function makeFall(group) { //calculate fall distance and then adjust velocity to meet time goal //note: velocity in physics.arcade is in pixels/sec let dist = appleYpos - groundYpos; let vel = dist/appleTime; group.callAll('setVel',null,vel); } function update() { if(keys.down.isDown) { makeFall(fallGroup); } }

Hello Experts I need your Best Guidline I need to know Is it possible to take 3d Model Canvas Screenshot ? And How Its Work can u show me demo ?

I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again? For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click* Any help would be appreciated! html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <style> html { background: black } canvas { margin: auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.crossOrigin = 'anonymous'; game.load.image('gateopen', 'fenceleft.png'); } var sprite function clickSprite() { console.log("clickSprite"); sprite.angle += 90; } function clickGame() { console.log("clickGame"); } function create() { sprite = game.add.sprite(100, 100, 'gateopen'); sprite.anchor = {x: 1, y: 1} game.inputEnabled = true; sprite.inputEnabled = true; sprite.events.onInputDown.add(clickSprite) game.input.onDown.add(clickGame); } function update() { } function render() { game.debug.bodyInfo(sprite, 32, 32); game.debug.body(sprite); }

Hello guys, exist some function for stopping time or best the game in action?

Hi friends. I want to activate a function when two objects overlap. For example when I overlap an object I want to change gravity of a specific area. I can do this with overlap but it does it for one time, after that everything is same again. For example in the game, I will overlap a potion and gravity between position x1 and x2 will be equal -50. But when I do this, I mean when I overlap the potion, it occurs for one second and after that the gravity -50 turns back its past value.

Hi, sorry for very noobish question I have my phaser game.js file which have reached more than 700 lines of code. I want to divide it into documents containing f.e. only create function, update, variables and other functions. I thought this will work: <div id="game"> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="create.js"></script> <script type="text/javascript" src="update.js"></script> <script type="text/javascript" src="functions.js"></script> </div> But error, create function not found. In game.js it look like this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { (...) } function create() { (...) } function update() { (...) } functions....

Alright. I'll cut to the chase. I'm making a simple game about abducting people, and I want the victims to run from the player or "flying saucer". This is what I have setup in the update function (I'm pretty sure the rest is irrelevant, but tell me if you need more): this.win.angle = game.physics.arcade.angleToXY(this.win, -(this.player.x), -(this.player.y)); this.win.velocity = game.physics.arcade.velocityFromAngle(this.win.angle, 145, this.win.body.velocity); game.world.wrap(this.win, 0, false); Now here is the error after getting to the "play" state (Oh and by the way, the game is based off of the state tutorial for phaser, except with a lot of edits and a lose.js file.): Uncaught TypeError: d.setTo is not a function at c.Physics.Arcade.velocityFromAngle (phaser.min.js:23) at Object.update (play.js:94) at c.StateManager.update (phaser.min.js:10) at c.Game.updateLogic (phaser.min.js:12) at c.Game.update (phaser.min.js:12) at c.RequestAnimationFrame.updateRAF (phaser.min.js:18) at window.requestAnimationFrame.forceSetTimeOut._onLoop (phaser.min.js:18) Please help!

Hello, I'm creating, a player object with different states, e.g: onground, inair, etc I'm trying to assign a method to this.currentState. In the update loop, i'm calling this.currentState to run the assigned method (this.groundState), However, i'm receiving the following error 'this.currentState is not a function' SuperSmash.Player = function(game, x, y) { Phaser.Sprite.call(this, game, x, y, 'player'); this.game.physics.arcade.enable(this); this.speed = 500; this.airSpeed = 300; this.jumpPower = 400; this.inAir = true; this.hitGround = false; this.body.gravity.y = 1350; this.currentState = this.groundState; console.log(this.currentState); // undefined }; SuperSmash.Player.prototype = Object.create(Phaser.Sprite.prototype); SuperSmash.Player.prototype.constructor = SuperSmash.Player; SuperSmash.Player.prototype.update = function() { this.currentState(); }; SuperSmash.Player.prototype.groundState = function() { console.log('ground'); } };

I am having difficulty understanding this and scope in Javascript. I am attempting to create a dialogue box that pops up during various collisions, and perhaps part of the issue is I am not properly organizing my game. I can use this.showPopup("jump"); in the update function, but I cannot figure out how to call the showPopup function elsewhere, in getItem. I keep getting the error, "Uncaught TypeError: this.showPopup is not a function(…)" Any help is greatly appreciated. create: function() { ... popup = game.add.sprite(window.innerWidth/2, 200, 'box'); ... }, update:function (){ game.physics.arcade.overlap(player, cake, this.getItem); }, getItem:function(player,item) { console.log('got ' + item); item.kill(); this.showPopup("test"); }, showPopup: function(t){ popup_timer = game.time.create(false); popup_timer.add(1000, this.hidePopup, this); popup.text = t; tween = game.add.tween(popup.scale).to({x:1,y:1},500, Phaser.Easing.Elastic.Out, true); popup_timer.start(); }, hidePopup: function(){ tween = game.add.tween(popup.scale).to( { x: 0.0, y: 0.0 }, 500, Phaser.Easing.Elastic.In, true); }

How can i control the initilization of the game, i know that the first that phaser do is the preload function but i want to execute some Js code and till that part is finished start the game. Help please

hi, I would make a custom function to have tween more simple. I would have readable params in the function because i have a lot of value. i could do : function transition (obj,xbegin,ybegin,easing,delay,time....) //but it become difficult to read transition(player,100,100,Phaser.Easing.Linear.None,100,2000,...) but it become difficult to read. I put below a short example of what i would do : function transition(xbegin=x_begin) { console.log(x_begin) } transition(xbegin=100)//but that don't work because xbegin is undefined here the jsfiddle : https://jsfiddle.net/u2jac54g/ Thanks.

Hi, I'm new to phaser and so this might be a basic question. I did see: but that did not work for me. This code works: create: function() { image.events.onInputDown.addOnce(this.backToMenu, this); } backToMenu: function() { //do something } but create:function() { image.events.onInputDown.addOnce(this.backToMenu, {test: 0}); } backToMenu: function() { //do something with this.test } does not work at all. If you need more code, I will show you an example project. Thanks!

Hello ! I really want to read the source code of phaser, but I am not that professional. the namespace Phaser is declared inside a function, so I am wondering how we can access it outside it ? (function(){ var Phaser = Phaser || {}; }).call(this); Phaser.something = 5; //Reference error, Phaser is not declared what things I ca learn to read the source code perfectly and have this awesome experience ?

Hi all, I'm having trouble with a in-built method of phaser. I want to check whether the sprite named target has been struck by the bullet or not. For this, I used the containsPoint() method of Phaser.Rectangle. My code looks like this. Am I doing something wrong? or my whole logic is wrong? Thanks in advance

Hi, I'm new to pharser. I created several functions like move() in the Game.js TestGame.Game.prototype = { ... drawPath: function() { ... } Everything is working well. No I would like to access the drawPath function from outside oth the class, e.g. <button onlick="TestGame.Game.drawPath()"> but get "is not a function" Error.

Hey there, I'm new to javascript and I'm trying to figure out how to create a global singleton for generic functions. I can create global variables in the Boot state, but I'd like to create an object that holds global vars and functions. I'm instancing a custom GameManager script in the index.html file like so: //initialize framework var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game'); //create global object var gameManager = new GameManager(); My GameManager.js file looks like this: var GameManager = function GameManager() { console.log('game manager created'); this.myName = "adrian"; this.GetName = function() { console.log("my name is "+this.myName); } }; The problem is gameManager object is undefined elsewhere in game. Any suggestions? Thanks

Greetings people smarter than myself. This is my first phaser self-guided exercise. I'm also very new to object oriented programming - and that may be the issue at hand. I have a single gamestate, "playgame", which has a placeTiles() function that I don't want to execute until a user clicks a "Begin" button. However, my code is not working as intended because the placeTiles() function is executing immediately upon loading. I think there is a fundamental concept that I'm missing. As you can see, I'm using preload, create, then some of my own - placetiles, showtile. Is it SOP for all of the functions inside playGame.prototype to run on initialization? If I don't want something running at that time, how do I prevent it or where should I move that block of code? Wouldn't it need to go within playGame somewhere? playGame.prototype = { myMoney: null, theEmpire: [], preload: function(){ game.stage.setBackgroundColor(0xEBEBFF); game.load.spritesheet("gadgets", "gadgets.png", tileSize, tileSize); }, create: function(){ // I've removed some code here where I create my background and color scheme // Create the Begin Button which should place the other tiles. var beginButton = game.add.button( 20,50,"gadgets",this.placeTiles(),this); beginButton.frame = 10; // There's a bunch more code here I've removed for this forum post */ }, placeTiles: function(){ for(var i=0; i < numCols; i++){ var serialButton = game.add.button( 250 * (i+1) , game.height/5 + (i*tileSpacing) , "gadgets" , this.showTile , this); serialButton.frame = i+1; serialButton.value = this.theEmpire[i]; }//i++ }, showTile: function(target){ //More functions, etc... },}; game.state.add("PlayGame", playGame); game.state.start("PlayGame"); };Any explanation or guidance would be most appreciated. Thank you for your time!

So typically you have a function that switch to another state that call be call via a button or sprites this.btn_gameOver = this.game.add.button(this.game.width/2, 500, 'btn_play', this.start_gameOver, this);this.btn_gameOver.anchor.setTo(0.5,0.5);},start_gameOver: function(){ this.game.state.start('gameover', true, false, GameScore); } However when I use it within another function (updateTimer), once the countdown reached 0 and triggered, it return an error Uncaught TypeError: Cannot read property 'game' of undefined updateTimer: function(){ GameTimer--; txt_timer.text = GameTimer; if(GameTimer != 0){ console.log('it works!'); }else{ console.log('dingding'); //start_gameOver(); this.game.state.start('gameover', true, false, GameScore); } },What am I missing?

Hello everyone! apologize in advance for my poor English. The thing is I've been working on a mini game of roulette machines, I have divided my game with gameStates(boot, gameStates, load, stand, play, win and lose). so some mechanics is: to start the state of play should create an image preloaded on my state of load, this will be a zodiac sign, then press the space key image should be removed and display a sprite sheet which is appended an animation. Something like this: var winState = { create: function(){ //Este estado servira de test para presion/accion de boton... var sta1 = game.add.image(300, 150, 'geminis'); sta1.scale.setTo(0.2); game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)){ rotateAnim(); } }, rotateAnim: function(sta1){ sta1.destroy(); var sta2 = game.add.image(300, 150, 'signos'); sta2.animations.add('rotate'); sta2.animations.play('rotate', 1, true); }};BUT I didn't get the expected result. The only thing I desired result is obtained with the method onInputDown (Mouse): //In Create: Function();var sta1 = game.add.sprite(170, 360, 'leo');sta1.scale.setTo(0.17);sta1.anchor.set(0.5);sta1.inputEnabled = true;sta1.events.onInputDown.add(this.stopAnim, this);stopAnim: function(sta1){ //game.state.start('stand'); sta1.destroy(); var signos = game.add.sprite(170, 360, 'signos'); signos.scale.setTo(0.17); signos.anchor.set(0.5); signos.animations.add('change'); signos.animations.play('change', 5, true); }could someone tell me I'm doing wrong or that I needed to get the same result when you press a key. Thanks a lot for answers!

Here is my code var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'game_area', { preload: preload, create: create, update: update}); var scaleRatio = window.devicePixelRatio / 5; var player, enemy, floor; var music; var game_state; var gravity_strength; var net_force; var style; var text, text2, text3, text4; var title_played; var level_data; var ready_to_select; function preload() { game.load.image('player', 'SpaceShipLarge.png'); game.load.image("enemy", "red.png"); game.load.image("floor", "green.jpg"); game.load.audio("music", "firstbike.mp3"); } function create() { game.stage.backgroundColor = "#000000"; game.physics.startSystem(Phaser.Physics.ARCADE); style = { font: "65px Optima", fill: "white", align: "center"}; this.ROTATION_SPEED = 180; // degrees/second this.ACCELERATION = 200; // pixels/second/second this.MAX_SPEED = 250; // pixels/second this.DRAG = 25; // pixels/second this.GRAVITY = 90; // pixels/second/second player = game.add.sprite(game.width / 2, (game.height / 2) - 150, "player"); player.scale.setTo(scaleRatio, scaleRatio); player.anchor.setTo(0.5, 0.5); player.angle = -90; game.physics.arcade.enable(player); player.body.maxVelocity.setTo(this.MAX_SPEED, this.MAX_SPEED); player.body.drag.setTo(this.DRAG, this.DRAG); player.body.bounce.setTo(0.25, 0.25); player.body = null; player.visible = false; ready_to_select = false; floor = game.add.sprite(0, game.world.height - 100, "floor"); floor.scale.setTo(scaleRatio, scaleRatio); floor.width = game.world.width; floor.y = game.world.height + 500; game.physics.arcade.enable(floor); floor.body.immovable = true; floor.body.allowGravity = false; game.physics.arcade.gravity.y = this.GRAVITY; music = game.add.audio("music"); music.loop = true; //music.play(); title_played = false; level_data = 1; game_state = "title_screen"; ready_to_select = true; //game_state = "play_state"; } function handle_input() { if(game_state == "play_state") { if(game.input.activePointer.justPressed()) { net_force = net_force - 20; } } } function generate_enemy() { } function start() { } function leftInputIsActive() { var isActive = false; isActive |= (game.input.activePointer.isDown && game.input.activePointer.x < game.width/4); return isActive; } function rightInputIsActive() { var isActive = false; isActive |= (game.input.activePointer.isDown && game.input.activePointer.x > game.width/2 + game.width/4); return isActive; } function upInputIsActive() { var isActive = false; isActive |= (game.input.activePointer.isDown && game.input.activePointer.x > game.width/4 && game.input.activePointer.x < game.width/2 + game.width/4); return isActive; } function setup_title() { //console.log(game.input.activePointer.y); if(title_played == false) { text = game.add.text(game.world.centerX, 150, "Lift Off", style); text.anchor.set(0.5); if(level_data == 1) { text2 = game.add.text(game.world.centerX, 380, "Play Game", style); }else { text2 = game.add.text(game.world.centerX, 380, "Continue Game", style); } text2.anchor.set(0.5); text2.inputEnabled = true; text3 = game.add.text(game.world.centerX, 500, "Select Level", style); text3.anchor.set(0.5); title_played = true; } text2.events.onInputDown.add(down, this); } function down(item) { if(level_data == 1) { text.kill(); text = game.add.text(game.world.centerX, 150, "Level One", style); text.anchor.set(0.5); text2.kill(); text2 = game.add.text(game.world.centerX, 380, "Gravity: 10m/s", style); text2.anchor.set(0.5); text3.kill(); } setInterval(function(){ game_state = "play_state"; text.kill();text2.kill();text3.kill(); }, 1000); } function setup_game() { if(level_data == 1 && ready_to_select == true) { game.stage.backgroundColor = "#FFFFFF"; game.physics.arcade.enable(player); player.visible = true; floor.y = game.world.height - 100; enemy = game.add.sprite(game.width / 2, (game.height / 2), "player"); enemy.scale.setTo(scaleRatio, scaleRatio); enemy.anchor.setTo(0.5, 0.5); game.physics.arcade.enable(enemy); ready_to_select = false; } } function touched_floor() { player.y = 200; } function update() { game.physics.arcade.collide(player, floor); game.physics.arcade.collide(enemy, floor); game.physics.arcade.overlap(player, floor, touched_floor()); /* if (onTheGround) { if (Math.abs(player.body.velocity.y) > 20 || Math.abs(player.body.velocity.x) > 30) { // The ship hit the ground too hard. alert("gg m8"); // Blow it up and start the game over. //this.getExplosion(player.x, player.y); //this.resetShip(); } else { // We've landed! // Stop rotating and moving and aim the ship up. player.body.angularVelocity = 0; player.body.velocity.setTo(0, 0); player.angle = -90; } } */ handle_input(); if(game_state == "title_screen") { setup_title(); } if(game_state == "play_state") { setup_game(); if (player.x > game.width) player.x = 0; if (player.x < 0) player.x = game.width; if (leftInputIsActive()) { // If the LEFT key is down, rotate left player.body.angularVelocity = -this.ROTATION_SPEED; } else if (rightInputIsActive()) { // If the RIGHT key is down, rotate right player.body.angularVelocity = this.ROTATION_SPEED; } else { // Stop rotating player.body.angularVelocity = 0; } if (upInputIsActive()) { // If the UP key is down, thrust // Calculate acceleration vector based on this.angle and this.ACCELERATION player.body.acceleration.x = Math.cos(player.rotation) * this.ACCELERATION; player.body.acceleration.y = Math.sin(player.rotation) * this.ACCELERATION; // Show the frame from the spritesheet with the engine on player.frame = 1; } else { // Otherwise, stop thrusting player.body.acceleration.setTo(0, 0); // Show the frame from the spritesheet with the engine off player.frame = 0; } } } My Issue The overlap function should only be triggered when the player touches the floor. However, it is being called 60 times a second no matter where the player and the floor are in relation to each other.