• Content Count

  • Joined

  • Last visited

About Steph

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi Roberto257, I am facing exactly the same issue. Did you ever find a solution?
  2. Hello everyone. I have built a game using Phaser. On game over, the players high score is recorded in a variable (this.inputScore). To submit their high score to the server, the player clicks a button that takes them to an Index.html page where there is a form they fill in. To avoid cheating, I want the high score variable to be passed from the game's JavaScript file (Game.js) to an input value on the form as a read only value. I have created a function (assignValue) inside the Game.js file to execute this task, but because of it's scope I cannot get the function to be read by the Index.html file. When I place the function at the top of the Game.js script (globally) the Index.html reads the function and executes it accordingly (but with a hard-coded value for testing purposes.) How can I get the Index.html file to read my assignValue() function and pass this.inputScore to the input value in Index.html? Any help would be greatly appreciated - still learning. Thanks. Game.js file: //INDEX.HTML READS THE assignValue function BELOW (WITH A HARD CODED VALUE FOR TESTING) AND //APPLIES IT BECAUSE IT IS IN GLOBAL SCOPE. BUT I NEED THE VALUE TO BE A VARIABLE TAKEN FROM THE //assignValue FUNCTION INSIDE THE GAME CODE. SEE GAME CODE BELOW: function assignValue() { document.getElementById("inputScore").value = 127; }; //GAME CODE var CrystalRunner = CrystalRunner || {}; CrystalRunner.GameState = { init: function() { //...code here }, create: function() { //...code here }, update: function() { //..code here //check if the player needs to die if( >= && this.counter === 0 || this.player.left <= 0 && this.counter === 0) { this.gameOver(); } }, gameOver: function(){; this.player.body.enable = false; //..code here this.updateHighscore(); //..code here }, updateHighscore: function(){ this.highScore = +localStorage.getItem('highScore'); if(this.highScore < this.myScore){ this.highScore = this.myScore; this.inputScore = this.highScore; this.congrats =,, 'congrats'); this.congrats.inputEnabled = true; this.congrats.fixedToCamera = true; this.submitScoreButton =,, 'submitScoreButton'); this.submitScoreButton.inputEnabled = true; this.submitScoreButton.fixedToCamera = true; { window.location.href = "index1.php"; }, this); } localStorage.setItem('highScore', this.highScore); }, //THE FUNCTION BELOW IS NOT BEING READ BECAUSE OF SCOPE. HOW TO I MAKE INDEX.HTML READ IT? assignValue: function() { document.getElementById("inputScore").value = this.inputScore; }, }; Index.html file: <?php require_once 'dbconnect.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <title>Crystal Candy Game Login</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link href="css/style.css" rel="stylesheet"> <script type='text/javascript' src='js/jquery-2.2.3.min.js'></script> <script> $(window).on('load', function() { $('#status').fadeOut(); $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({'overflow':'visible'}); }) </script> </head> <body onload="assignValue()" class="bg"> <div id="preloader"> <div id="status">&nbsp;</div> </div> <div class="wrapper"> <div class="texte"> <header> <h1>SUBMIT YOUR SCORE</h1> <img id="logo" src="assets/images/logo.png"> </header> <p>Submit your highscore and you could stand a chance to win a prize!</p> </div> <div id="main"> <form id="form-style" method="post" action="crystalhandle.php" autocomplete="off"> <div class="form-group"> <label class="header-text"><span>First Name</span></label> <input class="form-control" type="text" id="name" name="username" placeholder="Name" title="Please enter your Firstname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Surname</span></label> <input class="form-control" type="text" id="name" name="surname" placeholder="Surname" title="Please enter your Lastname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Email</span></label> <input class="form-control" type="email" id="email" name="email" placeholder="" title="Please enter a Valid Email Address" required=""> </div> <div class="form-group"> <label class="header-text"><span>Phone</span></label> <input class="form-control" type="tel" id="name" name="phone" placeholder="Phone" title="Please enter your Phone No" required=""> </div> <div class="form-group"> <label class="header-text"><span>Score</span></label> <input class="form-control" type="tel" id="inputScore" name="score" value="" readonly> </div> <!-- I need the above input value to have the variable from assignValue inserted into it--> <div class="w3ls-btn form-group"> <div class="wthreesubmitaits"> <input type="submit" name="signup" id="reg" class="button" id="next1" value="Send" style="font-family: sans-serif; font-size: 17px; font-weight: bold;" </div> </div> </form> </div> </div> <script type="text/javascript" src="js/phaser.min.js"></script> <!--the below js file is where assignValue() is defined:--> <script type="text/javascript" src="js/states/Game.js"/></script> </body> </html>
  3. I have actually just done a work around for this by simply adding a tween rather than using sprite frames to achieve the effect I was after. Code is below for those interested. However, if anyone has a solution to my original question it would be great to know. Thanks. killFlies: function(player, fly){ if (player.body.touching.down) { this.bounce();; this.deadFly = this.add.sprite(fly.x, fly.y, "deadFly"); this.deadFly.anchor.setTo(0.5,0.5); this.deadFlyTween ={x:+50, y: 550}, 800, Phaser.Easing.Linear.In, true); this.deadFlyTween.start(); var newScore = 1; this.createScoreAnimation(fly.x, fly.y, '+' +newScore, newScore); fly.kill(); } else { this.gameOver(); } fly.body.touching = fly.body.wasTouching; },
  4. I have an endless runner with flies that are enemies flying towards the player. The player jumps into the air and onto the top of the fly to kill it. I would like to enable gravity on the fly on overlap so that it falls to the ground when it dies. However, my problem is that when the fly falls sometimes it overlaps with the player sprite on decent causing the overlapCallback function (killFlies) to be called more than once. How can I have an enemy sprite like this die and adhere to gravity yet not have the overlapCallback function triggered again when it's falling? Any ideas? Is there any way to disable overlap once the overlap occurs? Setting fly.body.enable = false won't work as I then can't set velocity or gravity on the fly sprite when it dies. Please see my overlapCallback function below. Any suggestions would be much appreciated (am new to Phaser). killFlies: function(player, fly){ if (player.body.touching.down) { this.bounce(); //fly.body.enable = false; fly.body.allowGravity = true;;'die').onComplete.addOnce(function () { fly.kill(); }, this); }else { this.gameOver(); } fly.body.touching = fly.body.wasTouching; },
  5. Actually I have just solved this issue. The solution is to add the tween to the individual sprites and not the whole pool. Silly me.
  6. I have created an endless runner where the player is collecting sweets as he runs. The sweets are taken from a pool of sprites and they spawn randomly between a maximum and minimum distance above each platform. All is working fine. I would like to add a simple tween to the sweets so that they gently bob up and down instead of just being totally static. I have managed to produce this effect with the first line of code shown below. HOWEVER, as the game progresses and the sweets are recycled, the tween is making the sweets gradually spawn lower and lower on the screen which is not what I want. Please see my tween code below:{y: this.sweetPool.y + 6}, 800, Phaser.Easing.Sinusoidal.InOut).yoyo(true).loop().start(); I have tried adding this.sweetPool.y -= 6 (see below) to try and stop the sprites moving lower over time but now it just seems to make them spawn higher and higher over time. this.sweetPool.y -= 6;{y: this.sweetPool.y + 6}, 800, Phaser.Easing.Sinusoidal.InOut).yoyo(true).loop().start(); Can anyone suggest a simple way for me to achieve the affect I am after without it affecting the sprites position like this? Thanks in advance for any help.
  7. I have figured it out. For those interested here is the code: var Jumper = function() {}; Jumper.Play = function() {}; Jumper.Play.prototype = { preload: function() { this.load.image( 'hero', '' ); this.load.image( 'pixel', '' ); }, create: function() { // background color this.stage.backgroundColor = '#6bf'; // scaling this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.maxWidth =; this.scale.maxHeight =; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize( true ); // physics this.physics.startSystem( Phaser.Physics.ARCADE ); // camera and platform tracking vars this.cameraXMin = 0; this.platformXMin = 0; // create platforms this.platformsCreate(); // create hero this.heroCreate(); // cursor controls this.cursor = this.input.keyboard.createCursorKeys(); }, update: function() { // this is where the main magic happens // the x offset and the width of the world are adjusted // to match the furthest point the hero has reached, 0, + this.hero.xChange,; // the built in camera follow methods won't work for our needs, we create a custom one this.cameraXMin = Math.max( this.cameraXMin, this.hero.x - + 130 ); = this.cameraXMin; // hero collisions and movement this.physics.arcade.collide( this.hero, this.platforms ); this.heroMove(); // these are pooled so they are very performant this.platforms.forEachAlive( function( elem ) { this.platformXMin = Math.max(this.platformXMin, elem.x ); if( elem.x < { elem.kill(); this.platformsCreateOne(this.platformXMin + 70, - 50, 50 ); console.log("element killed"); } }, this ); }, shutdown: function() { // reset everything, or the world will be messed up 0, 0,, ); this.cursor = null; this.hero.destroy(); this.hero = null; this.platforms.destroy(); this.platforms = null; }, platformsCreate: function() { // platform basic setup this.platforms =; this.platforms.enableBody = true; this.platforms.createMultiple( 10, 'pixel' ); // create a batch of platforms that start to move across the level for( var i = 0; i < 9; i++ ) { this.platformsCreateOne( - 450 + 70 * i, - 50, 50); } }, platformsCreateOne: function( x, y, width ) { // this is a helper function since writing all of this out can get verbose elsewhere var platform = this.platforms.getFirstDead(); platform.reset( x, y ); platform.scale.x = width; platform.scale.y = 16; platform.body.immovable = true; return platform; }, heroCreate: function() { // basic hero setup this.hero = game.add.sprite(, - 69, 'hero' ); this.hero.anchor.set( 0.5 ); // track where the hero started and how much the distance has changed from that point this.hero.xOrig = this.hero.x; this.hero.xChange = 0; // hero collision setup // disable all collisions except for down this.physics.arcade.enable( this.hero ); this.hero.body.gravity.y = 500; this.hero.body.checkCollision.up = false; this.hero.body.checkCollision.left = false; this.hero.body.checkCollision.right = false; }, heroMove: function() { // handle the left and right movement of the hero if( this.cursor.left.isDown ) { this.hero.body.velocity.x = -400; } else if( this.cursor.right.isDown ) { this.hero.body.velocity.x = 400; } else { this.hero.body.velocity.x = 0; } // handle hero jumping if( this.cursor.up.isDown && this.hero.body.touching.down ) { this.hero.body.velocity.y = -350; } // wrap world coordinated so that you can warp from top to bottom // this.hero, this.hero.width / 2, false ); // track the maximum amount that the hero has travelled this.hero.xChange = Math.max( this.hero.xChange, Math.abs( this.hero.x - this.hero.xOrig ) ); } } var game = new Phaser.Game( 500, 300, Phaser.CANVAS, '' ); game.state.add( 'Play', Jumper.Play ); game.state.start( 'Play' );
  8. I am re-posting this question as I have managed to set up the code on Codepen with makes it easier for people to look at. I am creating an endless runner, please see my code here: At the moment when the left arrow key is pressed the player moves left, the camera follows him so he does not go off screen and the ground tiles below the player are destroyed as they move out of the world bounds on the right and are recreated just before they move into the world bounds on the left. This allows him to keep running forever without running out of ground and works perfectly, but with one problem: I want the player to be running to the right of the game, NOT to the left. Please note I do not need the player to be able to move both ways. I can make the camera follow the player to the right instead of the left by doing the following: I remove the negative from -this in, 0, ...); so it becomes, 0, ...); Now when the right arrow key is pressed the camera follows the player as he runs right so he does not go off screen, but the ground tiles do not regenerate and he runs out of ground. So basically I need to reverse the direction in which the ground is regenerating but I can't figure out how to do it. As everything is working to the left, I am sure it's a few simple settings, perhaps some negatives that need to be made positive? I have tried all that I can think of but I can't get it to work. I think the key to solving this might be in these lines: this.platforms.forEachAlive( function( elem ) { this.platformXMin = Math.min( this.platformXMin, elem.x ); if( elem.x > + ) { elem.kill(); this.platformsCreateOne( this.platformXMin - 70, - 50, 50 ); } }, this ); I have tried changing all sorts of settings there, but I can't seem to get it to work how I want it to. I am new to Phaser and still learning Javascript. Is anyone able to see an obvious solution? I'd be so grateful. Thanks in advance for any help!
  9. Thanks quiphop for your suggestions and explanation. I appreciate it very much!
  10. Thanks quiphop for your response. I am new to phaser (and still learning Javascript). What do you mean by extending the tileSprite please?
  11. I have a background image and a separate ground image that I want to loop as long as the character is moving forward. When the character stops, the background and ground should not be moving. So basically I am creating an endless runner. For similar games it is often suggested to add -= 1to the update function. This is not what I am looking for as it makes the background constantly move regardless of whether the character is moving. At the moment my background and ground images are repeating, but they are restricted to, 0, 1280, 800);. Any suggestions would be greatly appreciated as I have been at this for days, and I am sure there must be a simple solution. Please see my code below: function Hero(game, x, y) {, game, x, y, 'player'); this.anchor.set(0.5, 0.5);; this.body.collideWorldBounds = false; this.animations.add('stop', [0]); this.animations.add('run', [1, 2, 3, 4, 5], 14, true); // 14fps looped this.animations.add('jump', [6]); this.animations.add('fall', [7]); this.animations.add('die', [8, 9, 8, 9, 8, 9, 8, 9], 12); // 12fps no loop } Hero.prototype = Object.create(Phaser.Sprite.prototype); Hero.prototype.constructor = Hero; Hero.prototype.move = function (direction) { const SPEED = 200; this.body.velocity.x = direction * SPEED; // update image flipping & animations if (this.body.velocity.x < 0) { this.scale.x = -1; } else if (this.body.velocity.x > 0) { this.scale.x = 1; } }; Hero.prototype.jump = function () { const JUMP_SPEED = 600; let canJump = this.body.touching.down; if (canJump) { this.body.velocity.y = -JUMP_SPEED; } return canJump; }; Hero.prototype.bounce = function () { const BOUNCE_SPEED = 200; this.body.velocity.y = -BOUNCE_SPEED; }; Hero.prototype.update = function () { // update sprite animation, if it needs changing let animationName = this._getAnimationName(); if ( !== animationName) {; } }; Hero.prototype.die = function () { this.alive = false; this.body.enable = false;'die').onComplete.addOnce(function () { this.kill(); }, this); }; Hero.prototype._getAnimationName = function () { let name = 'stop'; // default animation if (!this.alive) { name = 'die'; } else if (this.body.velocity.y > 0 && !this.body.touching.down) { name = 'fall'; } else if (this.body.velocity.y < 0) { name = 'jump'; } else if (this.body.velocity.x !== 0 && this.body.touching.down ) { name = 'run'; } return name; PlayState = {}; PlayState.init = function () { = true; this.keys ={ left: Phaser.KeyCode.LEFT, right: Phaser.KeyCode.RIGHT, up: Phaser.KeyCode.UP }; PlayState.preload = function () {'level:1', 'data/level01.json');'ground', 'images/ground.png'); // I need this to repeat infinitely'background', 'images/background.png'); // I need this to repeat infinitely'player', 'images/player.png', 64, 64); }; PlayState.create = function () {, 0, 1280, 800); =, 0,, 800, 'background'); =, 680,, 166, 'ground');; = true; = false; = Phaser.ScaleManager.SHOW_ALL; this._loadLevel('level:1')); }; PlayState.update = function () { this.physics.arcade.collide(this.player,; this._handleInput(); }; PlayState._handleInput = function () { if (this.keys.up.isDown) { this.player.jump(); } else if (this.keys.right.isDown) { // move player right this.player.move(1); } else if (this.keys.left.isDown) { // move player left this.player.move(-1); } else { // stop this.player.move(0); } }; PlayState._loadLevel = function (data) { this._spawnPlayer({player: data.player}); const GRAVITY = 1200; = GRAVITY; }; PlayState._spawnPlayer = function (data) { this.player = new Hero(, data.player.x, data.player.y);;, Phaser.Camera.FOLLOW_PLATFORMER); }; window.onload = function () { let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game'); game.state.add('play', PlayState); game.state.start('play'); };
  12. @ThatGirlDee yes I did. The text was not showing because it was being rendered AFTER the game's background image in PlayState.create. So the timer was there, but it was being hidden by the background image. I simply moved the timer code to the end of PlayState.create and it is now showing. See below: PlayState.create = function () {, 0, 2560, 800); background1 =, 0, 'background'); background2 =, 0, 'background2'); = Phaser.ScaleManager.SHOW_ALL;,320,1280,800); = 'visual';, 0, 'background'); this._loadLevel('level:1')); this._createHud(); //TIMER CODE SHOULD GO HERE AND NOT AT THE BEGINNING OF CREATE this.timeInSeconds = 120; this.timeText =, 30, "0:00",{font: '30px Arial', fill: '#FFFFFF', align: 'center'}); this.timeText.anchor.set(0.5, 0.5); this.timer =, this.updateTimer, this); };
  13. I am trying to add a simple countdown timer to a Phaser game. When the timer ends I want the game to restart. After adding the timer code there are no errors in the console but I can't get the timer to appear on the screen. Where I am going wrong please? I am new to Phaser and am still learning Javascript - any help would be greatly appreciated! Please see my code below (for clarity, I have only pasted the relevant code, not the whole thing). Thanks for any help in advance. PlayState = {}; PlayState.init = function () { //.... }; PlayState.preload = function () { //.... }; PlayState.create = function () { //TIMER CODE: this.timeInSeconds = 120; this.timeText =,, "0:00",{font: '15px Arial', fill: '#FFFFFF', align: 'center'}); this.timeText.anchor.set(0.5, 0.5); this.timer =, this.updateTimer, this); }; PlayState.update = function () { //..... }; PlayState.updateTimer = function() { this.timeInSeconds--; var minutes = Math.floor(this.timeInSeconds / 60); var seconds = this.timeInSeconds - (minutes * 60); var timeString = this.addZeros(minutes) + ":" + this.addZeros(seconds); this.timeText.text = timeString; if (this.timeInSeconds == 0) {; } }; //add leading zeros to any number less than 10 //for example turn 1 to 01 PlayState.addZeros = function(num) { if (num < 10) { num = "0" + num; } return num; }; window.onload = function () { let game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game'); game.state.add('play', PlayState); game.state.start('play'); };