Jump to content


  • Content Count

  • Joined

  • Last visited

Posts posted by Drewrg

  1. Hello everybody.
    I am trying to optimize my game, and would like to know, which of this two Phaser techniques would be  more optimal in term of resource usage.

    On one side I got SpriteSheet -  'atlasJSONHash'.

    // preload
    game.load.atlasJSONHash('image', 'assets/image.png');
    // create
    var foo = game.add.sprite(0, 0, 'image');
        foo.animation.play('main', 30, true);

    On other side I got just a sprite with a texture, and I'm changing  it's texture in the Phaser render function, with another preloaded texture.

    // preload
    var textureArray = [];
        textureArray.push(game.load.image('image0', 'assets/image0.png') );
        textureArray.push(game.load.image('image1', 'assets/image1.png') );
        textureArray.push(game.load.image('image2', 'assets/image2.png') );
        // and so on, 'in the game this is done by a loop'.
    // create
    var i = 0;
    var foo = game.add.sprite(0, 0, 'image0');
    // render
    foo.loadTexture('image' + i);

    In both cases there are same images [img0, img1, img2, ...], but in first example they are combined into a spritesheet, and in other they are separately loaded as a png images.


    I would like to know, which would you recommend, again in terms of resource consumption.

    Thank you in advance.

  2. 45 minutes ago, Fatalist said:

    The problem is fill(), which always draws with antialiasing.

      replace it with
      ctx.fillRect(0,0, canvas.width, canvas.height);

    It will only work in Chrome though, other browsers antialias the clip regions.



    Actually there will be drawImage() instead of fill(),
    but drawImage() got the same issue,
    Is there any idea, what can replace drawImage().

  3. The Example.

    Hello every body. I have a Canvas with red background. On it I have rows of boxes, which go exactly after each other. Each box begins exactly where previous box ends, and they all have same skew. So there should not be any gap between edges, but as you can see in the example there are gaps.

    Does anybody knows why is this happening, and how to get rid of it.


    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var world = {
      centerY: canvas.height / 2,
      centerX: canvas.width / 2
    var rowCount = 14;
    var box = {
      width: 20,
      height: 20,
      skew: 10
    function drawBox(x, y, id) {
      ctx.moveTo(x, y);
      ctx.lineTo(x + box.width, y);
      ctx.lineTo(x + box.width + box.skew, y - 20);
      ctx.lineTo(x + box.skew, y - box.height);
      ctx.lineTo(x, y);
      ctx.clearRect(0,0, canvas.width, canvas.height);
      ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray';
    for (var i = 0; i < 112; i++) {
      var k = Math.floor(i / rowCount) * rowCount;
      drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i)
    #canvas {
      background-color: red;
      width: 800px;
      height: 600px;
    <!DOCTYPE html>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <canvas id="canvas">
  4. Hi everybody, I got an issue with PhaserJS rope. I need to animate rope with spritesheet.

    The objective is to make curved / bent spritesheet animation.

    I tried almost everything but it won't render correctly.

    All I got is single frame being rendered, although I can see animation frames, and loop count in console log.
    I need to curve / bend sprite sheet animation,it is not necessarily need to be done by rope, any solution would be great.

    Will be grateful for any suggestion, thank you in advance.

  5. Thank you for reply, I've rotated the actual png image itself, and that solved the wrong direction of fire.

    But anyway I still can't adjust speed and anchor of particular bullets.

    As you can see in gif, the position of weapon is correct, but bullets anchor point is incorrect.


  6. Hello! I'm having a hell of a time trying figure out how to change Phaser Weapon plugins bullet speed after it's been shot.
    I also set "weapon.bulletSpeed" negative value, because by default it was going in opposite direction.

    I attached weapon to a spaceship sprite, but on "weapon.fire()" bullet goes backwards.

    Weapon definition.

    addWeapon: function(target) {
    		var weapon;
    		var weapon;
    		weapon = game.add.weapon(100, 'bullet');
    		weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
    		weapon.bulletAngleOffset = 90;
    		weapon.bulletSpeed = 5;
    		weapon.trackSprite(target, (this.ship.height), 0);
    		weapon.trackRotation = true;
    		weapon.fireRate = 200;
    		weapon.bulletRotateToVelocity = false;
    		weapon.onFire.add(function() {this.blastSound.play()},this);
    		return weapon;
    this.ship = this.add.sprite(this.world.centerX, this.world.centerY +300, 'ship');
    		this.ship.anchor.setTo(0.5, 0.5);
    		this.ship.angle = -90;
     		this.weapon = this.addWeapon(this.ship);

    I am trying to

    1. set the direction of the bullet to opposite, so I don't have to set bulletSpeed to negative value.
    2. change every bullets anchor.
    3. change the speed of particular bullet after it's been shot.

    It would be grate to hear any suggestion.

    Тhank you in advance.

  • Create New...