如何在Javascript中缩放雪碧

我想缩放一个精灵，这是一个子弹在JavaScript中，但它不会改变，我把它放在错误的功能？它目前在创建函数中，子弹需要大约10x10px，但现在它非常庞大，占用大约一半的播放屏幕。如何在Javascript中缩放雪碧

我使用Phaser.io作为框架，并且我尝试了一些缩放方法，但它似乎不起作用。

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

 
function preload() { 
 

 
    game.load.image('bullet', 'Pokeball.png'); 
 
    game.load.image('ship', 'assets/sprites/shmup-ship.png'); 
 

 
} 
 

 
var sprite; 
 
var weapon; 
 
var cursors; 
 
var fireButton; 
 

 
function create() { 
 
    game.stage.backgroundColor = ('#424242'); 
 

 
    // Creates 1 single bullet, using the 'bullet' graphic 
 
    weapon = game.add.weapon(1, 'bullet'); 
 

 
    // The bullet will be automatically killed when it leaves the world bounds 
 
    weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; 
 

 
    // Because our bullet is drawn facing up, we need to offset its rotation: 
 
    weapon.bulletAngleOffset = 90; 
 

 
    // The speed at which the bullet is fired 
 
    weapon.bulletSpeed = 400; 
 

 
    sprite = this.add.sprite(320, 500, 'ship'); 
 

 
    game.physics.arcade.enable(sprite); 
 

 
    // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically 
 
    weapon.trackSprite(sprite, 14, 0); 
 

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

 
    fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); 
 

 

 
    weapon.scale.x = 10; 
 
    weapon.scale.y = 10; 
 

 
    // You can also scale sprites like this: 
 
    // sprite.scale.x = value; 
 
    // sprite.scale.y = value; 
 

 

 

 
} 
 

 
function update() { 
 

 
    sprite.body.velocity.x = 0; 
 

 
    if (cursors.left.isDown) 
 
    { 
 
     sprite.body.velocity.x = -200; 
 
    } 
 
    else if (cursors.right.isDown) 
 
    { 
 
     sprite.body.velocity.x = 200; 
 
    } 
 

 
    if (fireButton.isDown) 
 
    { 
 
     weapon.fire(); 
 
    } 
 

 
} 
 

 
function render() { 
 

 

 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Simple Canvas Game</title> 
 
    <style> 
 
     html { 
 
     background: black 
 
     } 
 
     canvas { 
 
     margin: auto; 
 
     } 
 
    </style> 
 
\t </head> 
 
\t <body> 
 
    <script src="phaser.js"></script> 
 
\t \t <script src="game.js"></script> 
 
\t </body> 
 
</html>

来源

2017-08-10 hannacreed

规模是一个百分比值，所以现在你10000％缩放百分比子弹。您可能要明确设置大小：

weapon.width = 10; weapon.height = 10;

来源

2017-08-10 16:30:38 plemarquand

这仍然没有工作：/ – hannacreed

如何在Javascript中缩放雪碧

回答

相关问题