Drewrg

Members
  • Content Count

    10
  • Joined

  • Last visited

1 Follower

About Drewrg

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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.add('main'); 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); 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. Drewrg

    HTML5 Canvas Antialiasing

    I would like to, but createPattern will not work in my case, it has lack of properties. I can't position, or modify width and height of source image.
  3. Drewrg

    HTML5 Canvas Antialiasing

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

    HTML5 Canvas Antialiasing

    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. console.clear(); 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.save(); ctx.beginPath(); 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.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) } #canvas { background-color: red; width: 800px; height: 600px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html>
  5. Drewrg

    Phaser js distort sprit esheet

    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.
  6. Drewrg

    Phaser JS Weapon plugin

    Hello @LuizOtavio I used. this.weapon.bullets.setAll('anchor.y', 1); This is worked for me so far. For the bullet speed, I am using Phaser.Physics.arcade.overlap(bulletsGroup, target, function); which is returning the bullet that were collided.
  7. Drewrg

    Phaser JS Weapon plugin

    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.
  8. Drewrg

    Phaser JS Weapon plugin

    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.scale.setTo(0.22); this.ship.angle = -90; game.physics.arcade.enable(this.ship); this.ship.body.drag.set(70); this.ship.body.maxVelocity.set(220); this.weapon = this.addWeapon(this.ship); I am trying to set the direction of the bullet to opposite, so I don't have to set bulletSpeed to negative value. change every bullets anchor. change the speed of particular bullet after it's been shot. It would be grate to hear any suggestion. Š¢hank you in advance.