javascript - 如何在 Javascript 中缩放 Sprite

标签 javascript sprite game-physics sprite-sheet

我正在尝试缩放一个 sprite,它是 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>

最佳答案

Weapon 是一个相位器插件,可帮助您创建子弹。您可以通过这种方式缩放项目符号:

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/

关于javascript - 如何在 Javascript 中缩放 Sprite ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45618942/

相关文章:

javascript - 下拉选择器

ruby-on-rails - Spriting with Compass - 图标的大小应该一样吗?

c# - 适用于 WP7 的 XNA 高速平滑动画

unity-game-engine - unity3d : A ring hanging from a horizontal pipe

java - Pacman java 运动问题

Java 2D 游戏编程 : Missile shooting is too fast?

javascript - Django - 复制管理 list_display

javascript - 新手需要一些帮助

javascript - 以变​​量内容为键向现有对象添加新值?

CSS3 动画不适用于任何浏览器