HI, since i can´t find a solution to the pixelated art when zooming or scaling, is there a way to make the image bigger? like zooming only some parts of the tiles or a certain scene, or a certain layer, etc…
My game have a menu and the game play, and with this I have tiles with 16 vs 16, if i dont use zoom the game looks to small, but if i use it looks like this: Solutions?
scene code:
var WorldScene = new Phaser.Class({
Extends : Phaser.Scene,
initialize :
function CenaMundo(){
Phaser.Scene.call(this, {key :'WorldScene'});
},
preload: function(){
//Vazio, pode -se dar preload, mas não é necessário colocar
},
create: function(){
this.trashNumber = 0;
//criar mundo do jogo
var mapa = this.make.tilemap({key: 'map'});
//obter o nome de um tileset chamado spritesheet dentro do json
var tiles = mapa.addTilesetImage('TiledMap', 'tiles', 16, 16);
//var obter a layer "Oceano" e adicionar ao mapa
var oceano = mapa.createLayer('Oceano', tiles, 0, 0);
//var obter a layer "Areia" e adicionar ao mapa
var areia = mapa.createLayer('Areia', tiles, 0, 0);
//var para criar a barreira com tiles invisiveis para filtrar a posição do lixo
// var barrier = mapa.createLayer('barrier', tiles, 0, 0);
//obter a layer dos obstaculos
var obstaculos = mapa.createLayer('Obstaculos', tiles, 0, 0);
//obstaculos estarão disponoveis para colisão
areia.setCollisionByExclusion( [ -1 ] );
obstaculos.setCollisionByExclusion( [ -1 ] );
//adicionar frames do player
this.player = this.physics.add.sprite(50, 100, 'player', 6);
//limitar movimento do player á area de jogo
this.physics.world.bounds.width = mapa.widthInPixels;
this.physics.world.bounds.height = mapa.heightInPixels;
this.player.setCollideWorldBounds(true);
// input do teclado
this.cursors = this.input.keyboard.createCursorKeys();
//camara a seguir o player
this.cameras.main.setBounds(0, 0, mapa.widthInPixels, mapa.heightInPixels);
this.cameras.main.startFollow(this.player);
this.player.body.setVelocity(0);
//Adicção da colision com uma layer
this.physics.add.collider(this.player, areia);
//Adicção da colision com uma layer
this.physics.add.collider(this.player, obstaculos);
//animação do player
//esquerda e direita
this.anims.create({
key: 'esquerdaDireita',
frames: this.anims.generateFrameNumbers('player',
{frames: [1, 7, 1, 13]}),
frameRate: 10,
repeat: -1,
});
//andar para cima
this.anims.create({
key: 'up',
frames: this.anims.generateFrameNumbers('player',
{frames: [2, 8, 2, 14]}),
frameRate: 10,
repeat: -1,
});
//andar para baixo
this.anims.create({
key: 'down',
frames: this.anims.generateFrameNumbers('player',
{frames: [0, 6, 0, 12]}),
frameRate: 10,
repeat: -1,
});
//criar 50 zonas de objetos
this.objects = this.physics.add.group({
classType: Phaser.GameObjects.Sprite
});
for(var i = 0; i<50; i++){
var x = Phaser.Math.RND.between(0, this.physics.world.bounds.width - 100);
var y = Phaser.Math.RND.between(0, this.physics.world.bounds.height - 100);
//if para evitar criar objetos na areia e nos obstaculos
if(!obstaculos.getTileAtWorldXY(x, y) && !areia.getTileAtWorldXY(x, y)){
this.objects.create(x, y, this.getObjectSprite());
}else{
console.log('nop-object', x, y);
i--;
}
}
this.physics.add.overlap(this.player, this.objects, this.colisionObjects, false, this);
//criar 10 zonas de lixo
this.trash = this.physics.add.group({
classType: Phaser.GameObjects.Sprite
});
for(var i = 0; i<10; i++){
var x = Phaser.Math.RND.between(100, this.physics.world.bounds.width - 100);
var y = Phaser.Math.RND.between(100, this.physics.world.bounds.height - 100);
//if para evitar criar objetos na areia e nos obstaculos
if(!obstaculos.getTileAtWorldXY(x, y) && !areia.getTileAtWorldXY(x, y)){
this.trash.create(x, y, this.getTrashSprite());
}else{
console.log('nop-trash', x, y);
i--;
}
}
this.physics.add.overlap(this.player, this.trash, this.colisionObjectTrash, false, this);
// var particles = this.add.particles('water1');
// var particles = this.add.particles('water2');
// var particles = this.add.particles('water3');
// var particles = this.add.particles('water4');
// var water1 = particles.createEmitter();
// water1.setPosition(200, 20);
// water1.setSpeed(200);
//Dados do jogador
this.add.rectangle(game.scale.width /2, 0, game.scale.width, 60, 0x000000 , 0.7).setScrollFactor(0);
this.add.rectangle(game.scale.width /2, game.scale.height, game.scale.width, 60, 0x000000 , 0.7).setScrollFactor(0);
this.trashText = this.add.text(game.scale.width /2 - 100, 10, "Trash Collected = " + this.trashNumber, {fill: '#ffffff' }).setScrollFactor(0);
},
getObjectSprite:function(){
var sprites = ['bag', 'battery', 'bigcan', 'bottle', 'can', 'cola', 'elttob', 'jar', 'large', 'milk', 'phone', 'spray', 'squezed'];
return sprites[Math.floor(Math.random() * sprites.length)];
},
getTrashSprite:function(){
var sprites = ['trash'];
return sprites;
},
colisionObjects: function(player, zona){
zona.y= Phaser.Math.RND.between(0, this.physics.world.bounds.width);
zona.y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);
this.cameras.main.shake(10);
this.cameras.main.flash(10);
this.trashNumber = this.trashNumber + 1;
},
colisionObjectTrash: function(player, zona){
zona.y= Phaser.Math.RND.between(0, this.physics.world.bounds.width);
zona.y = Phaser.Math.RND.between(0, this.physics.world.bounds.height);
this.cameras.main.shake(40);
this.cameras.main.flash(60);
this.trashNumber = this.trashNumber + 5;
},
update: function(){
this.trashText.setText("Trash Collected = " + this.trashNumber);
console.log(this.trashNumber);
this.player.body.setVelocity(0);
//movimento horizontal
if(this.cursors.left.isDown){
this.player.body.setVelocityX(-60);
}else if(this.cursors.right.isDown){
this.player.body.setVelocityX(60);
}
//movimento vertical
if(this.cursors.up.isDown){
this.player.body.setVelocityY(-60);
}else if(this.cursors.down.isDown){
this.player.body.setVelocityY(60);
}
//Animações
if(this.cursors.left.isDown){
this.player.anims.play('esquerdaDireita', true);
this.player.flipX = true;
}else if(this.cursors.right.isDown){
this.player.anims.play('esquerdaDireita', true);
this.player.flipX = false;
}else if(this.cursors.up.isDown){
this.player.anims.play('up', true);
}else if(this.cursors.down.isDown){
this.player.anims.play('down', true);
}else{
this.player.anims.stop();
}
},
});