scope2229

Members
  • Content Count

    20
  • Joined

  • Last visited

  1. scope2229

    Changing a group size or maxSize from registry.get()

    I found a very rudimentary way of achiving this if anyone knows of a better way be great to see but basically its like this. any more than 10 bullets is a waste of resources so ill keep maxSize at 10. then set an object equal to the groups active count. just just below the update for your cursors ask if active count is <= maxSize and then continue with your creation this.magBal = this.bullets.countActive(); if(this.fireButton.isDown && time > this.lastFired){ if(this.magBal < this.magSize){ console.log("fire button down"); let bullet = this.bullets.get(); if (bullet){ bullet.fireWeapon(this.x, this.y); this.lastFired = time + 100; } } } just as a tester rather than creating elements to collect as this is as easy as updating the registry data simply set a key to add 1 every time its pushed and you will see the bullet fire with the magSize. Later on something i can see that would be good is to change the fire rate and speed depending on the magSize or even add a reload function
  2. scope2229

    Changing a group size or maxSize from registry.get()

    Or could i get rid of the maxSize and use some thing like this.magSize = this.registry.get('magSize') this.magBal = this.bulletGroup.countAlive() if(!magBal == magSize){ if(check if fire button is pressed and time since last shot > intervalShot){ fire the bullet using the normal way maxSize will always be 10 as to many otherwise } }
  3. Hi i have a player prefab that imports a bullet prefab. inside my player prefab i call the bullet like so this.bullets = this.scene.add.group({ classType: Bullet, maxSize: 1, runChildUpdate: true }); now maxSize i want to change on the fly. Should i place the group inside update instead and then have this this.magSize = this.scene.registry.get('magSize'); this.bullets = this.scene.add.group({ classType: Bullet, maxSize: this.magSize, runChildUpdate: true }); or another way i can think of us using an update event from the registry itself something like this.registry.events.on('changedata', this.updateData, this); then create the group inside the updateData function ????
  4. scope2229

    failed to load image

    If your file structure is like this GameFolder { Assets { sky.png } Src { index.js } then your load should be this this.load.image('sky','assets/sky.png'); //if you have another folder layout its like so this.load.image('sky', 'assets/levels/lvl1/sky.png'); All your javascript should be inside src and all you audio video images etc inside assets
  5. scope2229

    individual animation within group on overlap

    Hi old_blueyes it looks like your using phaser 3 not phaser 2. Also place the overlap outside the group for each function. basically though for phaser 3 NOT 2 i do this create my group inside create function for the game im working on i have two enemies so far this.enemies = this.physics.add.group({ defaultKey: 'tai_fighter1' }) //TaiBomber this.taiBombers = this.physics.add.group({ defaultKey: 'taiBomber' }) then inside my update function (the main game loop) this.physics.add.collider(this.player, this.enemies, this.shipCollision, null, this) this.physics.add.collider(this.player, this.taiBomber, this.shipCollision, null, this) this.physics.add.collider(this.bullets, this.enemies, this.bulletKillsEnemy, null, this) this.physics.add.collider(this.bullets, this.taiBomber, this.bulletKillsEnemy, null, this) Finally i set my call back functions. shipCollision(player, enemy, taiBomber){ console.log("explode") let explosion = this.explosions.create(enemy.x, enemy.y, 'explosionTai') enemy.destroy() explosion.anims.play('explosionTai') explosion.on('animationcomplete', () => { explosion.destroy()}) this.playerHP -= 10; this.registry.set('playerHP', this.playerHP); } bulletKillsEnemy(bullet, enemy){ let explosion = this.explosions.create(enemy.x, enemy.y, 'explosionTai'); enemy.destroy(); bullet.destroy(); explosion.anims.play('explosionTai'); explosion.on('animationcomplete', () => { explosion.destroy()}); this.score += 10; console.log(this.score); this.registry.set('score', this.score); } For yourself i would think you are jumping then running again. it might be best to create the running and jumping all in one sprite then rather than call a new sprite like i do here you could just play the animation of that sprite. You could also then set the frames per second based on your horses speed so the animation is fast and slow. so i would have something like this. create(){ this.horseGroup = game.add.group({key: 'horsepng'}); let horseSpeed = 160; let horseJumpSpeed = horseSpeed / (a number that makes the fps reasonable) this.anims.create({ key: 'jumpHorseyJump', frames: this.anims.generateFrameNumbers('horsepng', { start: 0, end: 4 }), frameRate: horseJumpSpeed, repeat: -1 }) } update(){ this.physics.add.collider(this.horseGroup, this.jumpPoint, this.horseJumping,null, this) } horseJump(horseGroup, jumpPoint){ horseGroup.play('jumpHorseyJump') }
  6. I'll break it down for you on what you need to learn first before trying or at least have a good understanding. First you need HTML5. This will be a basic document that you can learn how to set up using w3schools tutorials. These normally work on any computer without any special server because your browser already has the ability to decipher local web pages like below. But for phaser you need a little more specialized hardware but very easy to set up. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="game"></div> <script src="phaser.js" charset="utf-8"></script> </body> </html> here you declare the type of document. https://www.w3schools.com/tags/tag_doctype.asp Next is the head this is all your meta data like SEO tags, default language, character set doesnt need to be set but i would always add it to save headaches. all your global content will go here import of phaser could also go here. Stylesheets etc. Body is the main content. while learning you will only ready have what i have above. Now you know the basics of a webpage you need to create a web server to handle all your requests unless you post like to sites like heroku etc. This will need LAMP WAMP npm node for myself i have a production server with LAMP configured for Ruby not php. on my development machine i just use npm for learning and if im developing for an actual website then im using Ruby on Rails. Next you need to learn Plain Javascript -- https://developer.mozilla.org/en-US/docs/Learn That is a great place to start. Also goto youtube, when i am coding i will have a selection of random javascript tutorials playing in the background. These often help with references. Now you should be able to create a basic and simple one file game. but thats no good. So now you need to learn to separate code into your scenes. for this try out cat small https://phaser.io/news/2018/04/coding-train-tutorial Once you've masrered this its time to learn ES6. This is still javascript but with a different syntax which you will need to learn how to translate this to browser friendly code but at this point you should already know about babel and webpack etc. After this you should have a good understanding and can move onto more advanced materials like assets from json files to speed up load times or adding cut scenes mid level etc. Ultimately there is no definitive answer for your question due to the several ways to set up a game depending on what your preferences are etc Hope this helps. Remember no matter how many times you get it wrong you only fail when you give up!!!
  7. scope2229

    Group set origin

    this.enemies = this.physics.add.group({ key: 'tai_fighter1', createMultiple: 5, enableBody: true, physicsBodyType: Phaser.Physics.ARCADE, frame: 4, angle: 180, checkWorldBounds: true, outOfBoundsKill: true }) Phaser.Actions.setOrigin(this.enemies.getChildren(), -0.7, -0.7) could you change the origin the same way i scale each child of a group ?????
  8. scope2229

    show hand cursor on mouse over

    for mine i had an image that was used for the background of my button so i used this let xWing = this.add.sprite(150, 150, 'xWing1').setInteractive({ cursor: 'pointer' }) you should be able to do the same with your button just not with a sprite.
  9. scope2229

    Phaser 3 Equvelant of phaser 2 code snippet

    the problem is From that tutorial i should have randomly spawning tai_fighters that have random movement on the x axis with random speed set. thing is i get one tai fighter sometimes. This is because sometimes the random number is outside the frame that i can fix later. If i continue to refresh the page eventually i do get a little tai fighter zoom across the screen hahah import phaser from 'phaser' export class Lvl_1 extends phaser.Scene{ constructor(){ super('lvl_1') } create(){ console.log('lvl_1') //set background this.starfield = this.add.tileSprite(400,300,800,4000, 'starfield') this.juststars = this.add.tileSprite(400,300,800,4000, 'juststars') this.nebula1 = this.add.tileSprite(400,300,800,4000, 'nebula1') this.stars2 = this.add.tileSprite(400,300,800,4000, 'juststars') this.nebula2 = this.add.tileSprite(400,300,2000,4000, 'nebula2') let magSize = 1 // Our bullet group this.bullets = this.physics.add.group({ Key: 'laser1', maxSize: magSize }) this.anims.create({ key: 'fire', frames: this.anims.generateFrameNumbers('laser1', { start: 0, end: 2 }), frameRate: 10, repeat: 0 }) this.anims.create({ key: 'fired', frames: this.anims.generateFrameNumbers('laser1', { start: 3, end: 4 }), frameRate: 25, repeat: -1 }) //create the first player this.player = this.physics.add.sprite(400, 500, 'ship') this.player.setCollideWorldBounds(true) this.player.setOrigin(0.5, 0.5) this.ACCELERATION = 600 let DRAG = 900 let MAXSPEED = 400 this.player.body.setMaxVelocity(MAXSPEED, MAXSPEED) this.player.body.setDrag(DRAG, DRAG) //Creating tai-fighter enemy let value = Phaser.Math.Between(300, 600) console.log(value); this.enemies = this.physics.add.group({ key: 'tai_fighter1', createMultiple: 5, enableBody: true, physicsBodyType: Phaser.Physics.ARCADE, frame: 4, angle: 180, checkWorldBounds: true, outOfBoundsKill: true }) // scale enemies Phaser.Actions.ScaleXY(this.enemies.getChildren(), -0.7, -0.7) // set speeds this.launchTaiFighter(this) //setup for controls keyboard mouse touchscreen this.cursors = this.input.keyboard.createCursorKeys() this.fireButton = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.CTRL) } update(){ this.starfield.tilePositionY -= 0.5 this.juststars.tilePositionY -= 0.2 this.nebula1.tilePositionY -= 0.8 this.stars2.tilePositionY -= 3.8 this.nebula2.tilePositionY -= 0.3 this.nebula2.tilePositionX -= 0.3 //Player1 movement this.player.body.setAccelerationX(0) if(this.cursors.left.isDown){ this.player.body.setAccelerationX(-this.ACCELERATION) }else if (this.cursors.right.isDown){ this.player.body.setAccelerationX(this.ACCELERATION) }else{ this.player.body.setAccelerationX(0) } if (this.cursors.up.isDown){ this.player.body.setAccelerationY(-this.ACCELERATION) }else if(this.cursors.down.isDown){ this.player.body.setAccelerationY(this.ACCELERATION) }else{ this.player.body.setAccelerationY(0) } //firing weapon // Fire bullet if(this.fireButton.isDown || this.input.activePointer.isDown){ console.log("space test") this.fireBullet() } this.bullets.children.each(function(b) { if (b.active) { if (b.y < 0) { b.setActive(false) } } }.bind(this)) //enemy updates let X = Phaser.Math.Between(0,800) // set speeds // Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) { // enemy.speed = Math.random() * 2 + 1 // }, this) // enemy movement // let enemies = this.enemies.getChildren(); // let numEnemies = enemies.length; // // for (let i = 0; i < numEnemies; i++) { // // move enemies // enemies[i].y += enemies[i].speed; // // // reverse movement if reached the edges // if (enemies[i].y >= this.enemyMaxY && enemies[i].speed > 0) { // enemies[i].speed *= -1; // } else if (enemies[i].y <= this.enemyMinY && enemies[i].speed < 0) { // enemies[i].speed *= -1; // } // } }//end of update render(){ } fireBullet(){ console.log("FIREBULLET") let laser1 = this.bullets.get(this.player.x, (this.player.y - 50)) if (laser1) { laser1.setActive(true); laser1.setVisible(true); laser1.anims.play('fire', true); laser1.body.velocity.y = -400; setTimeout(function(){ laser1.anims.play('fired', true); }, 100) } } launchTaiFighter() { let MIN_ENEMY_SPACING = 300 let MAX_ENEMY_SPACING = 3000 let ENEMY_SPEED = 300 let enemy = this.enemies.getFirstAlive(false) if (enemy){ enemy.setActive().body.reset(this.X, 10) enemy.body.velocity.x = Phaser.Math.Between(-300, 300) enemy.body.velocity.y = ENEMY_SPEED enemy.body.drag.x = 100 } //this.time.addEvent(Phaser.Math.Between(MIN_ENEMY_SPACING, MAX_ENEMY_SPACING), this.launchTaiFighter) let timedEvent = this.time.addEvent({ delay: 800, callback: this.launchTaiFighter, callbackScope: this, loop: true }) } } From what i can tell from the many variations ive tried the problem lies with launchtaifighter. the first thing i did was remove the error with the reset just to see if anything else broke. but i got no errors only with that. with your earlier fix i managed to get rid of the error display the taifighter even have it face the angle of movement but only the one haha just that one tiny fighter
  10. scope2229

    Phaser 3 Equvelant of phaser 2 code snippet

    I'm struggling to find exactly what it is reset actually could you explain it a little more as your example has just wiped what i thought it did. I assumed it first killed the child then created a new one or is it a javascript thing not a phaser thing ??
  11. i have this code var enemy = greenEnemies.getFirstExists(false); if (enemy) { enemy.reset(game.rnd.integerInRange(0, game.width), -20); enemy.body.velocity.x = game.rnd.integerInRange(-300, 300); enemy.body.velocity.y = ENEMY_SPEED; enemy.body.drag.x = 100; } im lost as to how to recreate the enemy.reset. I tried to detroy and then recreate but that gave a bunch of weird issues to with the child being removed
  12. scope2229

    Questions about Phaser 3?

    personally i went through the same thought about phaser3 but to be honest the community here is not so bad and if your good with javascript es6 coffee etc you should get on ok with whats in the docs now and what you need but if your looking for more stable documentation then go for phaser 2
  13. well im not sure how you could accomplish exactly what you would want. But ill have a go for you. First create a spritesheet in gimp 700x100 with each of the block you wish to use. now for really easy simple scrolling effect you can do this preload() { load your assets here with corresponding values. this.load.image('floor', 'assets/floor.png') create(){ //set background this.background1 = this.add.tileSprite(400,300,700,100, 'floor') } update(){ this.backgound1.tilePositionX -= 0.5 //change this to a value suited for your needs change - to + to change direction } this with scroll your image continuously from start to finish. with what you what it sounds like you want to have a set of frames and randomly iterate through the frames. http://labs.phaser.io/edit.html?src=src/game objects/group/sprite pool.js maybe modifying this examples could work. changing the random spawn location to a fixed location use a json assets config for the images look at how the random color is chosen i think there you would iterate through your assets sorry i cant be of more help
  14. scope2229

    Adding multiple groups

    I'm deffinately doing something wrong and not understanding the docs properly. I've used these as guides as well as a few others but i cant seem to get it to work so i thought id just copy the first group and see what happends but still nothing. i keep getting this.tai not defined but if this.bullets is why wouldnt this.tai http://labs.phaser.io/edit.html?src=src/game objects/group/sprite pool.js https://phaser.io/tutorials/making-your-first-phaser-3-game/part1 below is my code import phaser from 'phaser' export class Lvl_1 extends phaser.Scene{ constructor(){ super('lvl_1') } create(){ console.log('lvl_1') //set background this.starfield = this.add.tileSprite(400,300,800,4000, 'starfield') this.juststars = this.add.tileSprite(400,300,800,4000, 'juststars') this.nebula1 = this.add.tileSprite(400,300,800,4000, 'nebula1') this.stars2 = this.add.tileSprite(400,300,800,4000, 'juststars') this.nebula2 = this.add.tileSprite(400,300,2000,4000, 'nebula2') // Our bullet group let magSize = 1 this.bullets = this.physics.add.group({ defaultKey: 'laser1', maxSize: magSize }) this.anims.create({ key: 'fire', frames: this.anims.generateFrameNumbers('laser1', { start: 0, end: 2 }), frameRate: 10, repeat: 0 }) this.anims.create({ key: 'fired', frames: this.anims.generateFrameNumbers('laser1', { start: 3, end: 4 }), frameRate: 25, repeat: -1 }) //create the first player this.player = this.physics.add.sprite(400, 500, 'ship') this.player.setCollideWorldBounds(true) this.player.setOrigin(0.5, 0.5) this.ACCELERATION = 600 let DRAG = 900 let MAXSPEED = 400 this.player.body.setMaxVelocity(MAXSPEED, MAXSPEED) this.player.body.setDrag(DRAG, DRAG) //Creating tai-fighter enemy //set group and image key with extra details this.tai = this.physics.add.group({ defaultKey: 'tai_fighter1', maxSize: 10 }) //left this.anims.create({ key: 'taiLeft', frames: this.anims.generateFrameNumbers('tai_fighter1', { start: 3, end: 0 }), frameRate: 10, repeat: 0 }) //center this.anims.create({ key: 'taiCenter', frames: this.anims.generateFrameNumbers('tai_fighter1', { start: 0, end: 4 }), frameRate: 10, repeat: 1 }) //right this.anims.create({ key: 'taiRight', frames: this.anims.generateFrameNumbers('tai_fighter1', { start: 5, end: 8 }), frameRate: 10, repeat: 0 }) this.time.addEvent({ delay: 1000, loop: true, callback: this.launchTaiFighter }) //setup for controls keyboard mouse touchscreen this.cursors = this.input.keyboard.createCursorKeys() this.fireButton = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.CTRL) } update(){ this.starfield.tilePositionY -= 0.5 this.juststars.tilePositionY -= 0.2 this.nebula1.tilePositionY -= 0.8 this.stars2.tilePositionY -= 3.8 this.nebula2.tilePositionY -= 0.3 this.nebula2.tilePositionX -= 0.3 //Player1 movement this.player.body.setAccelerationX(0) if(this.cursors.left.isDown){ this.player.body.setAccelerationX(-this.ACCELERATION) }else if (this.cursors.right.isDown){ this.player.body.setAccelerationX(this.ACCELERATION) }else{ this.player.body.setAccelerationX(0) } if (this.cursors.up.isDown){ this.player.body.setAccelerationY(-this.ACCELERATION) }else if(this.cursors.down.isDown){ this.player.body.setAccelerationY(this.ACCELERATION) }else{ this.player.body.setAccelerationY(0) } //firing weapon // Fire bullet if(this.fireButton.isDown || this.input.activePointer.isDown){ console.log("space test") this.fireBullet() } this.bullets.children.each(function(b) { if (b.active) { if (b.y < 0) { b.setActive(false) } } }.bind(this)) //enemy updates this.tai.children.each(function(b) { if (b.active) { if (b.y < 0) { b.setActive(false) } } }.bind(this)) }//end of update render(){ } fireBullet(){ console.log("FIREBULLET") let laser1 = this.bullets.get(this.player.x, (this.player.y - 50)) if (laser1) { laser1.setActive(true); laser1.setVisible(true); laser1.anims.play('fire', true); laser1.body.velocity.y = -400; setTimeout(function(){ laser1.anims.play('fired', true); }, 100) } } launchTaiFighter(){ console.log("launchTaiFighter"); let lTF = this.tai.get(this.player.x, (this.player.y - 150)) if (lTF){ lTF.setActive(true) lTF.setActive(true) lTF.anims.play('taiCenter', true) lTF.body.velocity.y = -800 } } } I'm aware the animations arent right but its just to test for now, also as a test im trying to just have the tai fighter spawn from the ship then go to the top same as the bullet. once i learn how to create groups properly then i will work on the top down and AI left right with animations for those. but for now what im looking for from this example is the same behavour as the bullet but in its own group and independant. obviously if the enemy in real game play really need to do the same as the bullet id place it inside that group
  15. scope2229

    [solved]Direction or facing position settings of sprite

    thank you this worked perfectly.