• Content Count

  • Joined

  • Last visited

About kristof

  • Rank

Recent Profile Visitors

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

  1. I switched to loading the images at once and modified the code a bit and now I do have the image and a button to take me back to the menu after the game is over, but I am more and more concerned about that stopping the ticker event of the app freezes the whole canvas. Is it true? When I don't stop the ticker event I can click on the button and it takes me back to the menu but the enemies keep spawning still, thus I'd need to stop the ticker but then if I do even tho the button appears when I click it it does not do anything. Here is the code: function addBackToMenuBtn(gameOverSign: Sprite){ let button = new Sprite(PIXI.loader.resources['button'].texture); button.anchor.set(0.5); button.scale.set(0.5); button.position.set(app.view.width /2 , app.view.height/2 + gameOverSign.height/2 + button.height); button.interactive = true; button.addListener('click', () =>{ console.log('clicked'); app.ticker.stop(); app.stage.destroy(); app.stage = new PIXI.Container(); initMenu(); }); app.stage.addChild(button); }
  2. Hy everyone, My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage. if (isCollision(player.getBounds(), enemy.getBounds())) { app.stage.removeChild(player); app.stage.removeChild(enemy); app.ticker.stop(); PIXI.loader.add('game-over','resources/images/game-over.png').load(ready); function ready(){ let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture); app.stage.addChild(gameOver); } } I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.
  3. Thank you for the answers, and the codepen link as well, the way I have solved the issue is that I was playing around with replacing my sprites with pure rectangles with the height and width of the player and the enemy sprites, and compared them to the actual sprites' appearance. I found out that the height of my player sprite is approximately twice as big as the player's sprite's height, so what I did was in the collision checking algorithm I divided height by 2 and I got an approximately perfect solution without the need of using hitArea
  4. My objects do not rotate, they only move on the x axis so I guess I do not have to worry about the 'Bound' class, or do I? What I intended to do is: if(doCollied(player.getBounds(), enemy.hitArea)){ //collision handling } Are you telling me that I cannot compare these 2 even though they both have their width, height, x, y properties? I have checked the toGlobal() method in the docs, do I just apply on enemy.hitArea or what did you mean by that?
  5. I used hitArea because coming from it's name I thought it would solve my issue. I have used the bounding box collision detection algorithm in my game, but when I tested it for some reason I had some gaps between my 2 objects when I already got the collision alert. For this reason I thought if I reduce the size of my target sprite (its hitArea) the algorithm would work fine. Am I approaching the problem in a bad way? Do you have any suggestions?
  6. So if I did not set anchor of the sprite I would always just use (0,0, widthValue, heightValue) and no need to ever update it? And when anchor is set to center of the sprite as 0.5 then it is (-widthValue/2, -heightValue/2, widthValue, heightValue)? Sorry for asking silly questions I just want to make sure that I understand it
  7. Hy everyone, My question is about the hitArea of a sprite. First of all I am not quite sure if I understood the definition correctly, so I would really appreciate a clear explanation about it. What I want to do is: I have sprites in my game and I would test collision between them, but the sprite's width and height is not perfectly accurate to its 'actual appearance' so I would reduce the hitArea to improve my collision detection algorithm (but sometimes setting the hitArea is making it worse than using just the regular .getBounds() function). This is how I did it for the first time but collision didn't occur. let player = new PIXI.Sprite(texture); player.position.set(75, app.stage.view.height / 2); player.anchor.set(0.5); player.hitArea = new PIXI.Rectangle(player.x, player.y, 60, 20); Later I found out that it is because the enemy that I am checking the collision against, is not being compared to my player object, but the initial coordinates of the PIXI.Rectangle that I use to modify hitArea with. I have found out that if I want to compare the player.hitArea of the current position of my player object to enemy.getBounds(), in my game loop I update the hitArea of player like: app.ticker.add( () =>{ player.x += player.velocityX; player.y += player.velocityY; player.hitArea = new PIXI.Rectangle(player.x, player.y, 75, 85); }; I feel like this is a poor solution that I have came up with. Is there a better way of always updating hitArea coordinates to the player object's current coordinates?