Sky Alpha

  • Content Count

  • Joined

  • Last visited

About Sky Alpha

  • Rank

Recent Profile Visitors

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

  1. I faced the Same issue creating an RTS Game. HealthBar - Graphics Line for every Unit representing the health. Selection Circle - Using Phaser Circle to show the selected Unit. I kept them Hidden while the unit where not selected. And when I Selected a couple units the game instantly Dropped 20FPS, just for having the Units selected. I ended up removing all those graphics and substituted them for Sprites. For my HeatlBar I used a White Blank Sprite with the Height of my health bar. then I would Tint it with the color of the current HP. And for the Selection Circle I used the same approach, a circle Sprite, scaled to my Unit size. I Instantly got back to 60FPs even with A lot of Selected Units. I learned on this thar I always have to use Sprites, when ever I can. They are much faster. I Hope this helps others. Cheers.
  2. 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
  3. I couldn't get it to run on my phone. OnePlus 5
  4. Those are very nice games!! Good Job!! 😄
  5. 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,
  6. It's a very nice game, I already can see millions of people playing it.
  7. 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.
  8. 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. = { //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) { mousePointer.worldX + this.scene.cameras.main.x, mousePointer.worldY + this.scene.cameras.main.y ); if ( { if ( < && < ) { //its to the right and above, ); } else if ( < && > ) { //its to the right and below,; } else if ( > && > ) { //its to the left and below, ); } else { //its to the left and above, ); } var width = ( = Math.abs( - )); var height = ( = Math.abs( - )); var rectangle =; rectangle.x =; rectangle.y =; rectangle.width = width; rectangle.height = height; this.scene.add.existing(rectangle); var graphics =; graphics.clear(); graphics.fillStyle(0xffffff, 0.4); graphics.fillRect(,, width, height ); this.scene.add.existing(graphics); } else { //capture the current coordinate and store as origin var rectangle =;,; rectangle.x =; rectangle.y =; rectangle.width =; rectangle.height =; this.scene.add.existing(rectangle); var graphics =; graphics.clear(); graphics.fillStyle(0xffffff, 0.4); graphics.fillRect(,,, ); this.scene.add.existing(graphics); = true; } } } And Finally, when the mouse is released I Select the Units and Reset my selection Object. /** Handles left button release. */ onLeftButtonUp() { this.updateSelectedGroup(); = false;, 0);, 0);, 0); //top left of selection rect = 0; //width of rect = 0; //height of rect = 0; = 0; = 0; = 0;; } Here is the Group Selection. /** Updates the group members selected property. */ updateSelectedGroup() { this.bodies = this.scene.physics.overlapRect(,,, ); selectedUnits = []; for (let i = 0; i < this.bodies.length; i++) { let unit = this.bodies[i].gameObject; if ( unit.type == "Sprite" && != 0 && == ) { 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, 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!
  9. 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 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; = 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,, ); } // Shoot the arrow to the Target. shoot() { let distance = Phaser.Math.Distance.Between( this.shooter.x, this.shooter.y,, ); this.scene.tweens.add({ targets: this, x: { value:, ease: this.shooter.y >= ? "Quadratic" : "Quad", }, y: { value:, ease: this.shooter.y < ? "Quadratic" : "Quad", }, duration: distance * 2, onComplete: () => {; this.destroy(); }, }); } }
  10. 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 twees and EasyStar for Path finding. From now on 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, I have permition to use them for prototype. Well, There is a lot more that I could tell you guys 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) UPDATE: - Added a new Fog of War for Explored and Unexplored Positions. - Added a MiniMap updated Dinamically. Thx!!
  11. How should I make a Selection box for a group of Sprites? Any help?
  12. 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.