如何在Javascript中缩放精灵

时间:2017-08-10 16:24:50

标签: javascript sprite game-physics sprite-sheet

我正在尝试扩展javascript中的子弹精灵,但它不会改变,我将它放在错误的函数中吗?它目前在创建功能中,子弹需要大约10x10像素,但现在它很大,占据了大约一半的播放屏幕。

我使用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">
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
    <style>
      html {
        background: black
      }
      canvas {
        margin: auto;
      }
    </style>
	</head>
	<body>
    <script src="phaser.js"></script>
		<script src="game.js"></script>
	</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

比例是一个百分比值,所以现在你将子弹比例提高10,000%。您可能希望明确设置大小:

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

答案 1 :(得分:0)

武器是一个移植器插件,可以帮助您制作子弹。您可以通过以下方式缩放项目符号:

weapon.bullets.setAll('scale.x', 0.5);
weapon.bullets.setAll('scale.y', 0.5);

Phaser论坛上发布了类似的问题: http://www.html5gamedevs.com/topic/30010-euhm-scaling-a-weaponbullets/