SovietSenpai23

Members
  • Content Count

    6
  • Joined

  • Last visited

Everything posted by SovietSenpai23

  1. Here is the problem: https://giphy.com/gifs/X8bT5QMIHENZ2gtqwL When I jump the background tiles flash or blink. I can't figure out why. I've tried different tiles for background all seemed to do the same. Only jumping and falling makes this blinking, when go left or right its not happening. Is it a problem with my tiles? I'm using these tiles https://openpixelproject.itch.io/opp2017castle let game = new Phaser.Game({ type: Phaser.CANVAS, // adding layers this.map = this.make.tilemap({ key: 'map' }); var groundTiles = this.map.addTilesetImage('MapDetails','tiles'); this.groundLayer3 = this.map.createStaticLayer('Background', groundTiles,0,0); this.groundLayer = this.map.createStaticLayer('World', groundTiles,0,0); this.map.setCollisionByProperty({collides: true}); this.layer1 = this.map.createStaticLayer('Flooring', groundTiles,0,0); this.groundLayer2 = this.map.createStaticLayer('Lamps', groundTiles,0,0); this.groundLayer5 = this.map.createStaticLayer('Props', groundTiles,0,0); my tiled layers:
  2. I'm newbie too but maybe you should call this in the (main) create() function: this.scene.start('Scene1'); Also this video might help:
  3. THANKS! Its working now 😉! For the record I post the working code: // global variable var dragonAttack = false; function meetsDragon(player, dragon) { //... dragonAttack=true; } function update() { //... if (dragonAttack) { dragon.anims.play('dragon-attack', true); dragonAttack = false; } } function create() { //... dragon.anims.play('dragon-fly', true); // start animation when created dragon.on('animationcomplete', () => { // if an animation ends play the idle animation dragon.anims.play('dragon-fly'); }); }
  4. Thanks for your answer. Yes the dragon-fly is the idle state. How to do that looping u mentioned? I've tried putting it in the update() method but it didn't solve the problem. Can you show me please how to remove it? I've tried dragon.anims.remove(name) which didnt work out for me. here is my full code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>phaser</title> <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var platforms; var dragon; var cursors; var stars; var playerHealth = 100; var score = 0; var scoreText; var playerHealthText = 100; var game = new Phaser.Game(config); function preload() { this.load.image('sky', 'assets/sky.png'); this.load.image('ground', 'assets/platform.png'); this.load.image('star', 'assets/star.png'); this.load.image('bomb', 'assets/bomb.png'); this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 }); this.load.spritesheet('dragon', 'assets/demon-idle.png', { frameWidth: 160, frameHeight: 144 }); this.load.spritesheet('dragon-attack', 'assets/demon-attack.png', { frameWidth: 240, frameHeight: 192 }); } function create() { this.add.image(400, 300, 'sky'); platforms = this.physics.add.staticGroup(); platforms.create(400, 568, 'ground').setScale(2).refreshBody(); platforms.create(600, 400, 'ground'); platforms.create(50, 250, 'ground'); platforms.create(750, 220, 'ground'); player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); dragon = this.physics.add.sprite(400, 300, 'dragon'); dragon.setBounce(0.4); dragon.setCollideWorldBounds(true); dragon.setDisplaySize(100, 100); this.physics.add.collider(player, dragon, meetsDragon, null, this); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [{ key: 'dude', frame: 4 }], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'dragon-fly', frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'dragon-attack', frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }), frameRate: 10, repeat: -1 }); stars = this.physics.add.group({ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); bombs = this.physics.add.group(); this.physics.add.collider(bombs, platforms); this.physics.add.collider(player, bombs, hitBomb, null, this); this.physics.add.collider(stars, platforms); this.physics.add.collider(player, platforms); this.physics.add.collider(dragon, platforms); this.physics.add.overlap(player, stars, collectStar, null, this); this.physics.add.collider(player, dragon, meetsDragon, null, this); cursors = this.input.keyboard.createCursorKeys(); dragon.on("animationcomplete", () => { dragon.anims.play('dragon-fly'); }); } function meetsDragon(player, dragon) { dragon.anims.play('dragon-attack', true); } function update() { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true); } else { player.setVelocityX(0); player.anims.play('turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } dragon.anims.play('dragon-fly', true); } function collectStar(player, star) { } function hitBomb(player, bomb) { } </script> </body> </html>
  5. This is how far I got. I want the animation(dragon-attack) to complete when the player hits the dragon and then continue the 'dragon-fly' animation. What would be a solution? function preload() { this.load.spritesheet('dragon', 'assets/demon-idle.png', { frameWidth: 160, frameHeight: 144 }); this.load.spritesheet('dragon-attack', 'assets/demon-attack.png', { frameWidth: 240, frameHeight: 192 }); } function create() { dragon = this.physics.add.sprite(400, 300, 'dragon'); dragon.setBounce(0.4); dragon.setCollideWorldBounds(true); dragon.setDisplaySize(100, 100); this.anims.create({ key: 'dragon-attack', frames: this.anims.generateFrameNumbers('dragon-attack', { start: 0, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'dragon-fly', frames: this.anims.generateFrameNumbers('dragon', { start: 0, end: 5 }), frameRate: 10, repeat: -1 }); this.physics.add.collider(player, dragon, meetsDragon, null, this); } function meetsDragon(player, dragon) { playerHealth -= 10; dragon.anims.play('dragon-attack', true); } thanks for your help!