fiveworlds Posted June 1, 2016 Posted June 1, 2016 I am currently trying to learn the Phaser framework and am having trouble with the procedural generation of platforms. It just isn't as smooth as I would like it to be. The source code is available here https://github.com/davidmather/Phaser var accelerationY; window.ondevicemotion = function(event) { accelerationY = event.accelerationIncludingGravity.y; } var jump; window.onclick = function(event) { jump = true; } var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'game'); var PhaserGame = function () { this.player = null; this.platforms = null; this.sky = null; this.scoreText = null; this.facing = 'left'; this.edgeTimer = 0; this.jumpTimer = 0; this.time=null; this.wasStanding = false; this.cursors = null; this.score=0; }; PhaserGame.prototype = { init: function () { this.game.renderer.renderSession.roundPixels = true; this.world.resize(window.innerWidth, window.innerHeight*3); this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.arcade.gravity.y = 0; this.physics.arcade.skipQuadTree = false; }, preload: function () { this.load.image('trees', 'images/phaserexamples/trees.png'); this.load.image('clouds', 'images/phaserexamples/clouds.png'); this.load.image('platform', 'images/phaserexamples/platform (2).png'); this.load.image('ice-platform', 'images/phaserexamples/ice-platform.png'); //this.load.spritesheet('dude', 'images/phaserexamples/dude.png', 32, 48); this.load.atlasJSONHash('dude', 'images/ninjagirl/ninjagirl.png', 'images/ninjagirl/ninjagirl.json'); }, create: function () { game.inputenabled=true; game.input.addPointer(); this.stage.backgroundColor = '#2f9acc'; this.sky = this.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'clouds'); this.sky.fixedToCamera = true; this.trees = this.add.sprite(0, (window.innerHeight*3)-(game.cache.getImage('trees').height),'trees'); this.trees.width = window.innerWidth; this.platforms = this.add.physicsGroup(); this.addPlatforms(this); this.timer = game.time.events.loop(19000, this.addPlatforms, this); this.platforms.setAll('body.allowGravity', false); this.platforms.setAll('body.immovable', true); this.platforms.setAll.checkWorldBounds = true; this.platforms.setAll.outOfBoundsKill = true; this.player = this.add.sprite(100, (window.innerHeight*2), 'dude'); this.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.body.setSize(20, 32, 5, 16); this.player.body.gravity.y =750; this.player.animations.add('left', [81, 82, 83, 84, 85, 86, 87, 88, 89, 90], 10, true); //this.player.animations.add('left', [0, 1, 2, 3], 10, true); //this.player.animations.add('turn', [4], 20, true); //this.player.animations.add('right', [5, 6, 7, 8], 10, true); this.player.animations.add('right', [81, 82, 83, 84, 85, 86, 87, 88, 89, 90], 10, true); this.player.animations.add('jump', [70, 71, 72, 73, 74, 75, 76, 77, 78, 79], 5, true); this.camera.follow(this.player); this.cursors = this.input.keyboard.createCursorKeys(); this.score=0; this.scoreText = this.add.text(16, game.world.height-49, 'score:' +this.score, { fontSize: '32px', fill: '#000' }); this.scoretimer = game.time.events.loop(10, this.Score, this); }, wrapPlatform: function (platform) { if (platform.body.velocity.x < 0 && platform.x <= -160) { platform.x = 640; } else if (platform.body.velocity.x > 0 && platform.x >= 640) { platform.x = -160; } else if (platform.y<0){ } }, Score: function(score,scoreText){ this.score += 10; this.scoreText.text = 'Score: ' + this.score; }, setFriction: function (player, platform) { if (platform.key === 'ice-platform') { player.body.x -= platform.body.x - platform.body.prev.x; } }, addPlatforms: function(x, y) { var x = 50; var y = 0; for (var i = 0; i < 20; i++) { // Inverse it? if (Math.random() > 0.5){var type='platform';}else{type='ice-platform';} var platform = this.platforms.create(x, y, type); platform.body.velocity.x = 0; platform.body.velocity.y = 100; platform.body.immovable=true; platform.width = window.innerWidth/3-100; // Inverse it? if (Math.random() > 0.5) { platform.body.velocity.x *= -1; } x += window.innerWidth/3; if (x >= window.innerWidth) { x = 50; } y+= 104; } }, update: function () { if (this.player.y > game.world.height-49) game.state.start('Game'); this.sky.tilePosition.y = -(this.camera.y * 0.7); this.platforms.forEach(this.wrapPlatform, this); if (this.player.body.velocity.x < 0 && this.player.x <= 10) { this.player.x = window.innerWidth; } else if (this.player.body.velocity.x > 0 && this.player.x >= window.innerWidth-40) { this.player.x = -130; } this.physics.arcade.collide(this.player, this.platforms, this.setFriction, null, this); // Do this AFTER the collide check, or we won't have blocked/touching set var standing = this.player.body.blocked.down || this.player.body.touching.down; this.player.body.velocity.x = 0; if(accelerationY>0){ this.player.body.velocity.x = 200; if (this.facing !== 'right') { this.player.play('right'); this.player.scale.x = 1; this.facing = 'right'; } } else if(accelerationY<0){ this.player.body.velocity.x = -200; if (this.facing !== 'left') { this.player.play('left'); this.player.scale.x = -1; this.facing = 'left'; } } else if (this.cursors.left.isDown) { this.player.body.velocity.x = -200; if (this.facing !== 'left') { this.player.play('left'); this.player.scale.x = -1; this.facing = 'left'; } } else if (this.cursors.right.isDown) { this.player.body.velocity.x = 200; if (this.facing !== 'right') { this.player.play('right'); this.player.scale.x = 1; this.facing = 'right'; } } else { if (this.facing !== 'idle') { this.player.animations.stop(); if (this.facing === 'left') { this.player.frame = 0; } else { this.player.frame = 85; } this.facing = 'idle'; } } // No longer standing on the edge, but were // Give them a 250ms grace period to jump after falling if (!standing && this.wasStanding) { this.edgeTimer = this.time.time + 250; } // Allowed to jump? if ((standing || this.time.time <= this.edgeTimer) && (this.cursors.up.isDown || jump) && this.time.time > this.jumpTimer) { this.player.body.velocity.y = -500; this.player.play('jump'); this.jumpTimer = this.time.time + 750; jump = null; } else{jump = null;} this.wasStanding = standing; } }; game.state.add('Game', PhaserGame, true);
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now