Search code examples
javascriptspritegame-physicssprite-sheet

How to Scale a Sprite in Javascript


I am trying to scale a sprite that is a bullet in javascript, but it will not change, am I placing it in the wrong function? it is currently within the create function, the bullet needs to be about 10x10 px but right now it is huge, take up about half of the play screen.

I am using Phaser.io as the framework, and I have tried some of their scaling methods, but it does not seem to work.

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>


Solution

  • Weapon is a phaser plugin that helps you create bullets. You can scale the bullets in this way:

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

    There was a similar issue posted in the Phaser forum: http://www.html5gamedevs.com/topic/30010-euhm-scaling-a-weaponbullets/