Jump to content
  • Advertisement

Steffi

Member
  • Content Count

    11
  • Joined

  • Last visited

Community Reputation

2 Neutral

About Steffi

  • Rank
    Member

Personal Information

  • Interests
    Programming

Recent Profile Visitors

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

  1. Hello Zakwayda, I remember you have helped me before. You are right, I needed to add the score as an argument. Thanks very much! ☺️
  2. Hello everyone, in the game code below (written using the Phaser framework) I am trying to pass the variable this.inputScore to the global function assignValue. How can I do this? The assignValue function is being read by an external Index.html file on game over and I need this.inputScore to be passed to the Index.html file. I would greatly appreciate any help - new to programming. Thank you. //GLOBAL FUNCTION function assignValue() { document.getElementById("inputScore").value = this.inputScore; //how can I get this.inputScore from the game code below? }; //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.player.top >= this.game.world.height) { this.gameOver(); } }, gameOver: function(){ //..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; //I need this.inputScore to be passed into the assignValue function this.submitScoreButton = this.game.add.sprite(this.game.world.centerX-135, this.game.world.centerY+100, 'submitScoreButton'); this.submitScoreButton.events.onInputUp.add(function() { window.location.href = "index1.php"; //Index1.php will have a form input value into which this.inputScore will be passed }, this); } localStorage.setItem('highScore', this.highScore); }, };
  3. Thanks for sharing this really useful info Shaarigan, it's always great to be encouraged and to hear ideas from other developers! 😊
  4. Thank you so much Shaarigan for your input. In addition to what you have explained I am actually fast realising that trying to move the player through an infinite world is too problematic when it comes to adding additional sprites and assets. Despite all the hours I have put into trying to solve this, having him stationary and moving the world around him is really the only answer. All part of the learning curve I guess!
  5. Thank you Endurion for your response. I have managed to figure it out. Indeed it was partly the camera settings that needed changing. I have only been learning programming for a few months so I am sure the solution is obvious to most but I will post the code here in case it helps someone trying to create something similar: 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' );
  6. 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. 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!
  7. Thanks for all your suggestions Zakwayda. So appreciated. I am close to a solution, basically I am moving the player to the right, the camera follows him and the ground tiles are destroyed when they move out of the world bounds and regenerate in front of the player. I managed to convert the TypeScript tutorial into Javascript and implement that solution, it worked, but created problems with additional assets when I added them. It seems that creating endless runners in Phaser is something that is not as easy as one would think it would be. Endless runners are quite common games and I wish Phaser had an easier solution to this!
  8. Hi Zakwayda, yes the basics are all working. The character starts off stationary. When the right arrow key is pressed he moves forwards and a few seconds later the camera follows him and at the same time the background starts moving to the left as expected. However, when the character reaches the world bounds the background stops moving and he goes off-screen. There is a TypeScript Tutorial (see link below) on youtube that does exactly what I am wanting to achieve (at 2 mins 35 seconds you will see the character start moving and once he is in the middle of the world the camera fixes on him and the background simply loops endlessly as long as he keeps moving forward). Unfortunately I am not familiar with Typescript. I have tried to adapt the typescript code from the tutorial into Javascript but I cant get it to work.
  9. I have a background image and a separate ground image that I want to repeat as long as the character is moving forward. When the character stops, the background and ground should not be moving. 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; 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'); };
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!