espace

How to scale only a tile in a tilemap

Recommended Posts

hi,

after get the examples from :

https://phaser.io/examples/v2/tilemaps/tile-properties

i'm searching to modify the object of the tiles, but i can't modify the alpha and the scale (=> see //HERE THE PROBLEM). how do you do to reach that ?

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render});

function preload() {

    //  tiles are 16x16 each
    game.load.image('tiles', 'tiles.png');

}

var cursors;
var currentDataString;
function create() {

    //  Create some map data dynamically
    //  Map size is 128x128 tiles
    var data = '';

    for (var y = 0; y < 128; y++)
    {
        for (var x = 0; x < 128; x++)
        {
            data += game.rnd.between(0, 20).toString();

            if (x < 127)
            {
                data += ',';
            }
        }

        if (y < 127)
        {
            data += "\n";
        }
    }

    // console.log(data);

    //  Add data to the cache
    game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV);

    //  Create our map (the 16x16 is the tile size)
    map = game.add.tilemap('dynamicMap', 16, 16);

    //  'tiles' = cache image key, 16x16 = tile size
    map.addTilesetImage('tiles', 'tiles', 16, 16);

    //  0 is important
    layer = map.createLayer(0);

    //  Scroll it
    layer.resizeWorld();

    game.physics.startSystem(Phaser.Physics.ARCADE);

    cursors = game.input.keyboard.createCursorKeys();
   //  Our painting marker
    marker = game.add.graphics();
    marker.lineStyle(2, 0xffffff, 1);
    marker.drawRect(0, 0, 32, 32);

    game.input.addMoveCallback(updateMarker, this);

    game.input.onDown.add(getTileProperties, this);

    cursors = game.input.keyboard.createCursorKeys();
}

function getTileProperties() {

    var x = layer.getTileX(game.input.activePointer.worldX);
    var y = layer.getTileY(game.input.activePointer.worldY);

    var tile = map.getTile(x, y, layer);
	console.log(tile) 

////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
	//HERE THE PROBLEM
	tile.scale.x=.1    
	tile.alpha=.1    



	// Note: JSON.stringify will convert the object tile properties to a string
    currentDataString = JSON.stringify( tile.properties );

    tile.properties.wibble = true;

}

function updateMarker() {

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

}
function update() {

    if (cursors.left.isDown)
    {
        game.camera.x--;
    }
    else if (cursors.right.isDown)
    {
        game.camera.x++;
    }

    if (cursors.up.isDown)
    {
        game.camera.y--;
    }
    else if (cursors.down.isDown)
    {
        game.camera.y++;
    }

}
function render() {

    if(currentDataString){
        game.debug.text('Tile properties: ' + currentDataString, 16, 550);
    } else {
        game.debug.text("Click on a tile to reveal the properties of the tile", 16, 550);
    }
}

 

Share this post


Link to post
Share on other sites

i find that is possible with createFromObjects but i can't use this feature to reproduce a map. I specify the namegroup, the gid and the image key but the error is invalid namegroup ..

 

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

function preload() {
	game.load.image('tiles', 'tiles.png');
}

var cursors;

function create() {

	//  Create some map data dynamically
	//  Map size is 128x128 tiles
	var data = '';

	for (var y = 0; y < 128; y++)
	{
		for (var x = 0; x < 128; x++)
		{
			data += game.rnd.between(0, 20).toString();

			if (x < 127)
			{
				data += ',';
			}
		}

		if (y < 127)
		{
			data += "\n";
		}
	}

	// console.log(data);

	//  Add data to the cache
	game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV);

	//  Create our map (the 16x16 is the tile size)
	map = game.add.tilemap('dynamicMap', 16, 16);

	//  'tiles' = cache image key, 16x16 = tile size
	//map.addTilesetImage('tiles', 'tiles', 16, 16);


	//  0 is important
	layer = map.createLayer(0);

	//createfromobject(name,gid,key,frame,exists,autocull,group,customclass,adjusty)
	var mygroup=game.add.group();
	map.createFromObjects(mygroup,0,'tiles')

	//  Scroll it
	layer.resizeWorld();

	game.physics.startSystem(Phaser.Physics.ARCADE);

	cursors = game.input.keyboard.createCursorKeys();

}

function update() {

	if (cursors.left.isDown)
	{
		game.camera.x--;
	}
	else if (cursors.right.isDown)
	{
		game.camera.x++;
	}

	if (cursors.up.isDown)
	{
		game.camera.y--;
	}
	else if (cursors.down.isDown)
	{
		game.camera.y++;
	}

}

 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.