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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.