mardi 21 mars 2017

Dynamic tile generating and rendering Phaser

I am working with Phaser.js. I am making a game. There is a player in game, when user moves the player to the right I want generate and show him random tile map, I want the same when the user goes left, up and down (but I think if I do it in one direction it won`t be hard to do that in another). Right now I am using arcade mode, but have no problems go to another one if it is needed to solve my issue. But that another mode should save the ability of the player to jump and go to the right and to the left.

I don`t think that it is very important but here is my code :

// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
var game = new Phaser.Game(1000, 500, Phaser.AUTO, 'phaser-example', {
        preload: preload,
        create: create,
        update: update
    });

var bmd;
var map;
var layer;
var marker;
var currentTile = 0;
var cursors;
var player;
var facing = 'left';
var jumpTimer = 0;
var jumpButtonSpacebar;
var sizeOfPlayer = 0.7;

function preload()
{
    game.load.atlasJSONHash('kisameSprite', 'assets/sprites/kisameSpriteSheet/kisameSpriteSheet.png', 'assets/sprites/kisameSpriteSheet/kisameSpriteSheet.json');
    game.load.image('back', 'assets/images/back.jpg');
}

function create()
{
    game.add.tileSprite(0, 0, 1000, 600, 'back');

    game.add.plugin(Phaser.Plugin.Tiled);


    //  Creates a blank tilemap
    map = game.add.tilemap();

    //  This is our tileset - it's just a BitmapData filled with a selection of randomly colored tiles
    //  but you could generate anything here
    bmd = game.make.bitmapData(32 * 25, 32 * 2);

    var colors = Phaser.Color.HSVColorWheel();

    var i = 0;

    for(var y = 0; y < 2; y++)
    {
        for(var x = 0; x < 25; x++)
        {
            bmd.rect(x * 32, y * 32, 32, 32, colors[i].rgba);
            i += 6;
        }
    }

    //  Add a Tileset image to the map
    map.addTilesetImage('tiles', bmd);

    //  Creates a new blank layer and sets the map dimensions.
    //  In this case the map is 40x30 tiles in size and the tiles are 32x32 pixels in size.
    layer = map.create('level1', 50, 50, 32, 32);

    //  Populate some tiles for our player to start on
    map.putTile(30, 2, 10, layer);
    map.putTile(30, 3, 10, layer);
    map.putTile(30, 4, 10, layer);

    map.setCollisionByExclusion([0]);

    //  Create our tile selector at the top of the screen
    createTileSelector();

    player = game.add.sprite(64, 100, 'kisameSprite', 'stance/0.png');
    player.scale.setTo(sizeOfPlayer);
    game.physics.arcade.enable(player);
    game.physics.arcade.gravity.y = 350;

    player.body.bounce.y = 0.1;
    player.body.collideWorldBounds = true;

    player.animations.add('attack', Phaser.Animation.generateFrameNames('attack/', 0, 5, '.png', 1), 10, false, true);
    player.animations.add('left', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true);
    player.animations.add('idle', Phaser.Animation.generateFrameNames('stance/', 0, 3, '.png', 1), 10, true, true);
    player.animations.add('right', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true);
    player.animations.add('jump', Phaser.Animation.generateFrameNames('jump/', 0, 3, '.png', 1), 10, false, true);

    cursors = game.input.keyboard.createCursorKeys();
    jumpButtonSpacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

    game.input.addMoveCallback(updateMarker, this);

}

function update()
{
    game.input.keyboard.onDownCallback = somethingWasPressed;

    game.physics.arcade.collide(player, layer);

    player.body.velocity.x = 0;

    if(cursors.left.isDown)
    {
        player.body.velocity.x = -150;

        if(facing != 'left')
        {
            player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);
            player.animations.play('left');
            facing = 'left';
        }
    }
    else if(cursors.right.isDown)
    {
        animateRunRight();
    }
    else
    {
        if(facing != 'idle')
        {
            player.animations.play('idle');

            if(facing == 'left')
            {
                player.frame = 5;
            }
            else
            {
                player.frame = 5;
            }

            facing = 'idle';
        }
    }

    if(jumpHasToOccur())
    {
        player.body.velocity.y = -250;

        player.animations.play('jump');

        game.time.events.add(Phaser.Timer.SECOND * 1.450, function(){player.animations.play('idle');}, this);

        jumpTimer = game.time.now + 750;
    }

}

function somethingWasPressed(keyCode)
{
    if(keyEqualTo(keyCode, "a"))
    {animateAttack();}
}

function keyEqualTo(keyCode, key)
{
    var equalKey = (keyCode.key == key);
    return equalKey;
}

function beIdle()
{
    player.animations.play('idle');

    if(facing == 'left')
    {
        player.frame = 5;
    }
    else
    {
        player.frame = 5;
    }

    facing = 'idle';
}

function animateAttack()
{
    player.animations.play('attack', 10, false, false);
    player.animations.currentAnim.onComplete.add(beIdle,this);
}

function animateJump()
{
    player.body.velocity.y = -250;

    player.animations.play('jump');

    game.time.events.add(Phaser.Timer.SECOND * 1.450, function(){player.animations.play('idle');}, this);

    jumpTimer = game.time.now + 750;
}

function animateRunRight()
{
    player.body.velocity.x = 150;

    if(facing != 'right')
    {
        player.scale.setTo(sizeOfPlayer, sizeOfPlayer);
        player.animations.play('right');
        facing = 'right';
    }
}

function animateRunLeft()
{
    player.body.velocity.x = -150;

    if(facing != 'left')
    {
        player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);
        player.animations.play('left');
        facing = 'left';
    }
}

function jumpHasToOccur()
{
    var jumButtonClicked = cursors.up.isDown || jumpButtonSpacebar.isDown;
    var alreadyOnFloor = player.body.onFloor() && game.time.now > jumpTimer;
    return jumButtonClicked && alreadyOnFloor;
}

function pickTile(sprite, pointer)
{

    var x = game.math.snapToFloor(pointer.x, 32, 0);
    var y = game.math.snapToFloor(pointer.y, 32, 0);

    currentTileMarker.x = x;
    currentTileMarker.y = y;

    x /= 32;
    y /= 32;

    currentTile = x + (y * 25);

}

function updateMarker()
{

    marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
    marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;

    if(game.input.mousePointer.isDown && marker.y > 32)
    {
        map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y), layer);
    }

}

function createTileSelector()
{

    //  Our tile selection window
    var tileSelector = game.add.group();

    var tileSelectorBackground = game.make.graphics();
    tileSelectorBackground.beginFill(0x000000, 0.8);
    tileSelectorBackground.drawRect(0, 0, 800, 66);
    tileSelectorBackground.endFill();

    tileSelector.add(tileSelectorBackground);

    var tileStrip = tileSelector.create(1, 1, bmd);
    tileStrip.inputEnabled = true;
    tileStrip.events.onInputDown.add(pickTile, this);

    //  Our painting marker
    marker = game.add.graphics();
    marker.lineStyle(2, 0x000000, 1);
    marker.drawRect(0, 0, 32, 32);

    //  Our current tile marker
    currentTileMarker = game.add.graphics();
    currentTileMarker.lineStyle(1, 0xffffff, 1);
    currentTileMarker.drawRect(0, 0, 32, 32);

    tileSelector.add(currentTileMarker);

}




Aucun commentaire:

Enregistrer un commentaire