Jump to content

Javascript Procedural Generation


fiveworlds

Recommended Posts

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);
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.