Sky Alpha

Members
  • Content Count

    15
  • Joined

  • Last visited

About Sky Alpha

  • Rank
    Member

Recent Profile Visitors

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

  1. I Just implemented this Method to my game. It Really kills the Performance. But I will use it until I find another way to implement one with good performance. Thx for the Mask @feudalwars Fog Of War.mp4
  2. I couldn't get it to run on my phone. OnePlus 5
  3. Those are very nice games!! Good Job!! 😄
  4. Hey @Camaleonyco, I have implemented a lot of features and fix tons os bugs since I asked for help here. Right now I'm not thinking about a Game Engine anymore, but a Template. I would appreciate a little help to create Custom Sprites to make it available with the template, as I'm using the LWG Sprites I have pemission to Prototype, but not to publish them. best,
  5. It's a very nice game, I already can see millions of people playing it.
  6. Great job man! It's looking very nice. I am creating an RTS Template with Phase Great job man! It's looking very nice. I am creating an RTS Template with Phaser. I spent One Month trying to implement Steering Behaviors to My Units, but unfortunately, I was unable to implement it with the full functionality. I did implement the Flocking Behavior but it was So awkward that I stopped for a while. I have learned a lot in the process tho, I found lots of very useful articles that helped me in the process. One of the create articles that I read, lead me to a video from GDC Vault talking about the Starcraft 2 Group Movement, in that video, I heard for the first time about this "Efficient Triangulation-Based Pathfinding" that you talk about. It seems pretty cool. I'm really happy that I found this article, maybe now, with a little bit more experience than previously, and with the help of this JS implementation of the Triangle Path Finding, I will be able to finish the work I started. Maybe in a couple of weeks, I will post the Project here in the Forum. Thanks for your time to write it down.
  7. All Right, just in case somebody ends up here. And is Having the Same issue. I found an RTS Game made with Phaser 2.6.x that implemented something similar to what I Wanted to do. As I'm currently using Phaser 3.22.0 I had to make some changes in order to it to Work. Here goes the solution I ended up implementing. I Created an Object that had a Rectangle that would check for Overllap of objects later on. this.select = { //stores data about mouse events for the rectangle selection origin: new Phaser.Geom.Point(), //origin of mouse click current: new Phaser.Geom.Point(), //current mouse position topLeft: new Phaser.Geom.Point(), //top left mouse position width: 0, //rectangle width height: 0, //rectangle height isActive: false, //determines if a previous point was stored rect: new Phaser.Geom.Rectangle(this.scene, 0, 0, 0, 0, 0xffffff, 0.4), selectionSquare: new Phaser.GameObjects.Graphics(this.scene), }; I also had Listeners to Handle if the Pointer was moving and if it was the left button that was clicked. (Inside of the constructor of my class) this.scene.input.on("pointermove", (pointer) => { if (leftPointerDown) { this.isDraging = true; } else { this.isDraging = false; } }); this.scene.input.on("pointerup", (pointer) => { if (pointer.leftButtonReleased()) { leftPointerDown = false; this.onLeftButtonUp(); } }); After that I had to make the square selection change it's size when the user left clicked and moved the mouse. I put the method inside my update game loop, so It would detect any changes. You should notice that I pass in my pointer. update() { movementPattern.updateSelectionRect(pointer); } Back to my custom class, I implemented the selection handler. updateSelectionRect(pointer) { var mousePointer = pointer; if (leftPointerDown) { this.select.current.setTo( mousePointer.worldX + this.scene.cameras.main.x, mousePointer.worldY + this.scene.cameras.main.y ); if (this.select.isActive) { if ( this.select.origin.x < this.select.current.x && this.select.current.y < this.select.origin.y ) { //its to the right and above this.select.topLeft.setTo( this.select.origin.x, this.select.current.y ); } else if ( this.select.origin.x < this.select.current.x && this.select.current.y > this.select.origin.y ) { //its to the right and below this.select.topLeft.setTo(this.select.origin.x, this.select.origin.y); } else if ( this.select.origin.x > this.select.current.x && this.select.current.y > this.select.origin.y ) { //its to the left and below this.select.topLeft.setTo( this.select.current.x, this.select.origin.y ); } else { //its to the left and above this.select.topLeft.setTo( this.select.current.x, this.select.current.y ); } var width = (this.select.width = Math.abs( this.select.origin.x - this.select.current.x )); var height = (this.select.height = Math.abs( this.select.origin.y - this.select.current.y )); var rectangle = this.select.rect; rectangle.x = this.select.topLeft.x; rectangle.y = this.select.topLeft.y; rectangle.width = width; rectangle.height = height; this.scene.add.existing(rectangle); var graphics = this.select.selectionSquare; graphics.clear(); graphics.fillStyle(0xffffff, 0.4); graphics.fillRect( this.select.topLeft.x, this.select.topLeft.y, width, height ); this.scene.add.existing(graphics); } else { //capture the current coordinate and store as origin var rectangle = this.select.rect; this.select.origin.setTo(this.select.current.x, this.select.current.y); rectangle.x = this.select.topLeft.x; rectangle.y = this.select.topLeft.y; rectangle.width = this.select.width; rectangle.height = this.select.height; this.scene.add.existing(rectangle); var graphics = this.select.selectionSquare; graphics.clear(); graphics.fillStyle(0xffffff, 0.4); graphics.fillRect( this.select.topLeft.x, this.select.topLeft.y, this.select.width, this.select.height ); this.scene.add.existing(graphics); this.select.isActive = true; } } } And Finally, when the mouse is released I Select the Units and Reset my selection Object. /** Handles left button release. */ onLeftButtonUp() { this.updateSelectedGroup(); this.select.isActive = false; this.select.origin.setTo(0, 0); this.select.current.setTo(0, 0); this.select.topLeft.setTo(0, 0); //top left of selection rect this.select.width = 0; //width of rect this.select.height = 0; //height of rect this.select.rect.x = 0; this.select.rect.y = 0; this.select.rect.width = 0; this.select.rect.height = 0; this.select.selectionSquare.clear(); } Here is the Group Selection. /** Updates the group members selected property. */ updateSelectedGroup() { this.bodies = this.scene.physics.overlapRect( this.select.topLeft.x, this.select.topLeft.y, this.select.rect.width, this.select.rect.height ); selectedUnits = []; for (let i = 0; i < this.bodies.length; i++) { let unit = this.bodies[i].gameObject; if ( unit.type == "Sprite" && this.select.selectionSquare.width != 0 && unit.team == this.team ) { unit.setSelection(true); selectedUnits.push(unit); } } } I hope It helps somebody that Needs to make something like this. With little changes it should work in your game as well. Special Thanks to nhays89 that posted his code on GitHub as a, https://github.com/nhays89/BELPhaser I had a code pretty similar to his code, but couldn't manage the propper orientation selection as I described in the beggining of this topic. 70 to 80% of this code is his, thx man!
  8. Hey @callidus, You can use the Phaser included Mathematics to set an Angle between your target (Mouse Pointer) and your Cannon like this. // Sets the Rotation of a Sprite to a given angle. this.rotation = Phaser.Math.Angle.Between( this.shooter.x, this.shooter.y, this.target.container.x, this.target.container.y ); This is a Class called Arrow that I use to hit a given target. this.rotation is a Phaser Graphics Property. Here is the Full implementation export class Arrow extends Phaser.GameObjects.Graphics { constructor(scene, x, y, shooter, target, width = 7, height = 1) { super(scene, x, y, width, height); this.x = x; this.y = y; this.scene = scene; this.shooter = shooter; this.target = target; scene.add.existing(this); this.rotateToTarget(width, height); } // Rotates the arrow to the Target rotateToTarget(width, height) { this.clear(); this.lineStyle(1, 0x000000, 1); this.beginPath(); this.moveTo(0, 0); this.lineTo(width, height); // this.lineStyle(1, color, 1); // Debug line this.closePath(); this.strokePath(); // Rotates player to face towards reticle this.rotation = Phaser.Math.Angle.Between( this.shooter.x, this.shooter.y, this.target.container.x, this.target.container.y ); } // Shoot the arrow to the Target. shoot() { let distance = Phaser.Math.Distance.Between( this.shooter.x, this.shooter.y, this.target.container.x, this.target.container.y ); this.scene.tweens.add({ targets: this, x: { value: this.target.container.x, ease: this.shooter.y >= this.target.container.y ? "Quadratic" : "Quad", }, y: { value: this.target.container.y, ease: this.shooter.y < this.target.container.y ? "Quadratic" : "Quad", }, duration: distance * 2, onComplete: () => { this.target.takeDamage(this.shooter); this.destroy(); }, }); } }
  9. Hey there Guys! How is it going? I'm looking for partnership to develop a Open Source RTS Game Engine based on PhaserJS version 3. I have already created the Unit Class that allows me to create Ranged and Meele Units. I spent the last few weeks trying to implement the Flocking behavior to the Units But I was unable to achieve the bahavior I wanted, so I'm using tweening and EasyStar for Path finding. From now on now I'm going to implement the buildings creation. It would be nice to have some extra help from someone experienced with Phaser 3. For Sprites, I'm using the Little War Game Sprites I found on Reddit for Modding, as this project is not meant to be a Game It self, but a game engine, I hope there is no Issue using them for prototype. Well, There is a lot that I could tell you guys more about this project, but I will save it for anyone that really wants to help! Here is What I Have so far UPDATE: Post Processing with Fog of War and Particles. (For some Reason Everytime I get to Record my Screen The FPS Drops to 30, but it's 60FPS without recording) Thx!!
  10. How should I make a Selection box for a group of Sprites? Any help?
  11. Hey Kyran. I was creating an RPG a couple of months ago and I had the same question about hitboxes. What I did on my case, was to Create a container. Inside that container I would have 2 sprites, my player sprite, and my sword Sprite. The sword Sprite had no physical "body" until the atack was finished. And I had to be careful to call it one time per atack animation, that is a problem i had to deal with. I only implemented the atack to the right side, but you will get the Idea. function atack() { atackInterval = []; console.log(sprite.list[1].body); playAnimation('atk_right'); if (sprite.list[1].anims.currentAnim.key.includes('atk')) { atackInterval[0] = setInterval(() => { sprite.list[1].body.setSize(16, 16); sprite.list[1].body.setOffset(50, 24); setColliderStatus(true); }, 500); atackInterval[1] = setInterval(() => { setColliderStatus(false); resetBodySize() }, 1000); } } I had to detect only the sword Sprite collision with the enemies group. Take a closer look at the player.setColliderStatus(false) that prevents the hitbox to be called several times. // Adiciona um Listener de colisões entre a espada e o inimigo. this.physics.add.collider( player.getSprite().list[1], enemiesGroup, function(p, e) { console.log(e); // Muda o status de colisão para falso para colidir apenas 1 vez player.setColliderStatus(false); // Verifica se o HP do inimigo chegou a 0 if (e.enemy.getHp() - player.getStrength() > 0) { e.enemy.playAnimation("idle_down"); e.enemy.setHp(e.enemy.getHp() - player.getStrength()); } else { // Zera o HP. e.enemy.setHp(0); // Se o HP do Inimigo Zerar ele destroi o inimigo. e.destroy(); } }, function() { // Se retornar falso não realiza colisão, isso previne que a função acima seja chamada multiplas vezes seguidas. return player.getColliderStatus(); }, this ); I hope it helps you.
  12. Hello people! I am building an RTS game and I am using phaser 3.22.0. Right now I am implementing the square selection, or multiple sprites selection under a rectangular zone. I was trying to use the following example: http://labs.phaser.io/edit.html?src=src\physics\arcade\get bodies within rectangle.js But It never selected My Sprites, just my Map. I don't know Why. The second one I tryed was to create a rectangle, and watch for an overlap of the sprites and the rectangle. Turns out that it works only if the rectangle has a Positive width and Height. In other words, it Just works when I start my selection from TOP-LEFT to RIGHT-BOTTOM, any other orientation it doesn't work. squareSelection = this.add .rectangle(0, 0, 0, 0) .setStrokeStyle(1, 0xffffff) .setFillStyle(0xffffff, 0.3); this.physics.add.existing(squareSelection); squareSelection.body.setSize(0, 0); let squareX = 0; let squareY = 0; this.input.on("pointerup", (pointer) => { leftPointerDown = false; squareSelection.width = setTimeout((timeToSelect) => { squareSelection.setSize(0, 0); squareSelection.body.setSize(0, 0); }, 100); }); this.input.on("pointermove", (pointer) => { if (leftPointerDown) { squareSelection.setSize( pointer.worldX - squareX, pointer.worldY - squareY ); squareSelection.body.setSize( pointer.worldX - squareX, pointer.worldY - squareY ); } }); this.input.on( "pointerdown", function (pointer, object) { squareX = pointer.worldX; squareY = pointer.worldY; squareSelection.x = pointer.worldX; squareSelection.y = pointer.worldY; }, this ); this.physics.add.overlap(gameObjects, squareSelection, (go, square) => { if ( go.type == "Sprite" && !leftPointerDown && squareSelection.width != 0 ) { go.setSelection(true); this.selectUnitsFromZone(); } }); Is this a bug? Is there anyother solution to implement this feature in my game? My Sprites are all under the Arcade Physics and all of them have a body property. Thx in Advance