Steph

Members
  • Content Count

    9
  • Joined

  • Last visited

About Steph

  • Rank
    Newbie

Recent Profile Visitors

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

  1. Steph

    How to reverse platform generation?

    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', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/dude.png' ); this.load.image( 'pixel', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/pixel_1.png' ); }, create: function() { // background color this.stage.backgroundColor = '#6bf'; // scaling this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.maxWidth = this.game.width; this.scale.maxHeight = this.game.height; 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 this.world.setBounds(-this.hero.xChange, 0, this.world.width + this.hero.xChange, this.game.height); // 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 - this.game.width + 130 ); this.camera.x = 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 < this.camera.x-70) { elem.kill(); this.platformsCreateOne(this.platformXMin + 70, this.world.height - 50, 50 ); console.log("element killed"); } }, this ); }, shutdown: function() { // reset everything, or the world will be messed up this.world.setBounds( 0, 0, this.game.width, this.game.height ); this.cursor = null; this.hero.destroy(); this.hero = null; this.platforms.destroy(); this.platforms = null; }, platformsCreate: function() { // platform basic setup this.platforms = this.add.group(); 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( this.world.width - 450 + 70 * i, this.world.height - 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( this.world.centerX, this.world.height - 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.world.wrap( 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' );
  2. 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: https://codepen.io/clownhead/pen/BqyqOm 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 this.world.setBounds(-this.player.xChange, 0, ...); so it becomes this.world.setBounds(this.player.xChange, 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 > this.camera.x + this.game.width ) { elem.kill(); this.platformsCreateOne( this.platformXMin - 70, this.world.height - 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!
  3. Thanks quiphop for your suggestions and explanation. I appreciate it very much!
  4. Thanks quiphop for your response. I am new to phaser (and still learning Javascript). What do you mean by extending the tileSprite please?
  5. 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 this.game.background.tilePosition.x -= 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 this.game.world.setBounds(0, 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) { Phaser.Sprite.call(this, game, x, y, 'player'); this.anchor.set(0.5, 0.5); this.game.physics.enable(this); 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 (this.animations.name !== animationName) { this.animations.play(animationName); } }; Hero.prototype.die = function () { this.alive = false; this.body.enable = false; this.animations.play('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 () { this.game.renderer.renderSession.roundPixels = true; this.keys = this.game.input.keyboard.addKeys({ left: Phaser.KeyCode.LEFT, right: Phaser.KeyCode.RIGHT, up: Phaser.KeyCode.UP }; PlayState.preload = function () { this.game.load.json('level:1', 'data/level01.json'); this.game.load.image('ground', 'images/ground.png'); // I need this to repeat infinitely this.game.load.image('background', 'images/background.png'); // I need this to repeat infinitely this.game.load.spritesheet('player', 'images/player.png', 64, 64); }; PlayState.create = function () { this.game.world.setBounds(0, 0, 1280, 800); this.game.background = this.game.add.tileSprite(0, 0, this.game.world.width, 800, 'background'); this.game.ground = this.game.add.tileSprite(0, 680, this.game.world.width, 166, 'ground'); this.game.physics.arcade.enable(this.game.ground); this.game.ground.body.immovable = true; this.game.ground.body.allowGravity = false; this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this._loadLevel(this.game.cache.getJSON('level:1')); }; PlayState.update = function () { this.physics.arcade.collide(this.player, this.game.ground); 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; this.game.physics.arcade.gravity.y = GRAVITY; }; PlayState._spawnPlayer = function (data) { this.player = new Hero(this.game, data.player.x, data.player.y); this.game.add.existing(this.player); this.game.camera.follow(this.player, 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'); };
  6. Steph

    How to add countdown timer to Phaser game

    @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 () { this.game.world.setBounds(0, 0, 2560, 800); background1 = this.game.add.sprite(0, 0, 'background'); background2 = this.game.add.sprite(1280, 0, 'background2'); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setMinMax(480,320,1280,800); this.game.scale.windowConstraints.bottom = 'visual'; this.game.add.image(0, 0, 'background'); this._loadLevel(this.game.cache.getJSON('level:1')); this._createHud(); //TIMER CODE SHOULD GO HERE AND NOT AT THE BEGINNING OF CREATE this.timeInSeconds = 120; this.timeText = this.game.add.text(220, 30, "0:00",{font: '30px Arial', fill: '#FFFFFF', align: 'center'}); this.timeText.anchor.set(0.5, 0.5); this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, this.updateTimer, this); };
  7. 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 = this.game.add.text(this.game.world.centerX, this.game.world.centerY, "0:00",{font: '15px Arial', fill: '#FFFFFF', align: 'center'}); this.timeText.anchor.set(0.5, 0.5); this.timer = this.game.time.events.loop(Phaser.Timer.SECOND, 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) { this.game.state.restart(); } }; //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'); };