TufanMeric

Members
  • Content Count

    15
  • Joined

  • Last visited

About TufanMeric

  • Rank
    Member

Recent Profile Visitors

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

  1. For me, even 2 + 2 is hard ¯\_(ツ)_/¯ Here's a playground demo: https://www.pixiplayground.com/#/edit/AF06lEACh_Mw3xqXmNRtp
  2. I've spent the last hour trying to use toLocal to make a minimap for my game but I probably misunderstood how it works, I've tried (almost) every combination possible, none of them worked. (Yes, I often try things randomly when they don't work) Here's how it looks class Minimap { constructor(game) { this.game = game; } init() { this.container = new PIXI.Container(); this.background = new PIXI.Graphics(); this.background.lineStyle(2, 0x000, 1); this.background.beginFill(0x650a5a, 0.25); this.background.drawRect(0, 0, 200, 200); this.background.endFill(); this.container.addChild(this.background); this.container.x = window.app.screen.width / 2; this.container.y = window.app.screen.height / 2; this.container.pivot.x = this.container.width / 2; this.container.pivot.y = this.container.height / 2; window.app.stage.addChild(this.container); } update() { for (let i = 0; i < this.game.entities.length; i += 1) { const p = this.container.toLocal( this.game.camera, this.game.entities[i].container ); const entity = new PIXI.Graphics(); entity.lineStyle(2, 0x000, 1); entity.beginFill(0xffff00, 0.25); entity.drawRect(0, 0, 10, 10); entity.endFill(); entity.x = p.x; entity.y = p.y; this.container.addChild(entity); } } }
  3. Oh, right, i completely missed that one. 😳 I got it to work doing this: this.body = new PIXI.Graphics(); this.body.lineStyle(4, 0x000000, 1); this.body.beginFill(0xffff00); this.body.drawCircle(0, 0, 36); this.body.endFill(); this.body.x = this.body.width / 2; this.body.y = this.body.height / 2; this.body.pivot.x = this.body.width / 2; this.body.pivot.y = this.body.height / 2; Turret: this.turret = new PIXI.Graphics(); this.turret.lineStyle(4, 0x000000, 1); this.turret.beginFill(0x9b9b9b); this.turret.drawRect(x, y, 18, 40); // turret offset, sent by server this.turret.endFill(); this.turret.x = (this.turret.width - 4) / 8; // I have no idea why i need to divide it by 8 but it works: bullet comes out of the exact center of it, -4 is the stroke size. this.turret.pivot.x = this.turret.width / 2; this.turret.pivot.y = this.turret.height / 2;
  4. I have a container that holds the body and turrets, tried body.addChild but the result was the same.
  5. I'm trying to use PIXI.Graphics instead of images for my sprites but i couldn't center the circle (or the rectangles). this.body = new PIXI.Graphics(); this.body.lineStyle(4, 0x000000, 1); this.body.beginFill(0xffff00); this.body.drawCircle(this.body.width / 2, this.body.height / 2, 36); this.body.endFill(); I'm using the code below to draw the rectangle this.turret = new PIXI.Graphics(); this.turret.lineStyle(4, 0x000000, 1); this.turret.beginFill(0x9b9b9b); this.turret.drawRect(0, 40, 18, 32); this.turret.endFill(); this.turret.pivot.x = this.turret.width / 2; this.turret.pivot.y = this.turret.height / 2; As you can see in the image above, rectangle is not in the center of the circle. How can I fix that?
  6. I can place objects perfectly to the grid now var x = this.data.global.x + game.camera.pivot.x - game.app.screen.width / 2; var y = this.data.global.y + game.camera.pivot.y - game.app.screen.height / 2; game.socketManager.sendPlace( game.entityTypes.MINER, x - (x % 48), y - (y % 48) ); but i still have the problem 1, i couldn't make dragging look the same as how it looks when i place it. Will upload a gif. Edit: Here's the gif
  7. This is the best i could do, which didn't solve the problem. this.minerContainer.on('pointermove', function() { if (this.dragging) { var newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x - (newPosition.x % 48); this.y = newPosition.y - (newPosition.y % 48); } }); I think it may have something to do with how i place the background, I have no idea if it's the correct way of doing it or not. this.camera = new PIXI.Container(); this.camera.position.set( this.app.screen.width / 2, this.app.screen.height / 2 ); this.imageSprite = new PIXI.TilingSprite( PIXI.Loader.shared.resources['assets/grass.png'].texture, 38400, 38400 ); this.camera.addChild(this.imageSprite); I don't have any transforms on css and i don't scale anything.
  8. It's not if you look at both the objects at the end of the gif, second one is on a bit higher y than the first one
  9. I don't know if it fits this forum but i'm gonna ask it anyway, feel free to remove if it doesn't belong here. I'm making a tower defense-like game and i want players to be able to place objects anywhere they want in a grid full of 48 pixel blocks. There are 2 problems: Problem 1 - Mouse position I was following the drag&drop tutorial, it worked before i destroyed the math behind it. As you can see in this gif, object is not in the center of the mouse, which is very annoying. Problem 2 - Object position You might've noticed that the object doesn't exactly fit in the grid, this only happens when the screen height is not divisible by 48. Drag & Drop code this.BuildingList = new PIXI.Container(); this.minerContainer = new PIXI.Container(); this.BuildingList.x = Math.floor(this.game.app.screen.width / 2 / 48) * 48; this.BuildingList.y = Math.floor((this.game.app.screen.height / 48) * 48) - 48; this.minerContainer.on('pointerdown', function(event) { this.data = event.data; this.alpha = 0.5; this.dragging = true; }); this.minerContainer.on('pointerup', function() { this.alpha = 1; this.dragging = false; this.data = null; }); this.minerContainer.on('pointermove', function() { if (this.dragging) { var newPosition = this.data.getLocalPosition(this.parent); newPosition.x = Math.floor(newPosition.x / 48); newPosition.y = Math.floor(newPosition.y / 48); this.x = newPosition.x * 48; this.y = newPosition.y * 48; } }); minerContainer is a child in BuildingList, which is a children of stage, how can I fix the problems above?
  10. Thanks again, guess I'm bad at maths.
  11. Yes, you're right, adding anchors to body/hands fixed it but now i can't rotate it properly. Red box is where my mouse is. Ticker: function rotateToPoint(mx, my, px, py) { var dist_Y = my - py; var dist_X = mx - px; var angle = Math.atan2(dist_Y, dist_X); //var degrees = angle * 180/ Math.PI; return angle; } const rot = rotateToPoint( this.app.renderer.plugins.interaction.mouse.global.x, this.app.renderer.plugins.interaction.mouse.global.y, this.camera.position.x, this.camera.position.y ); entity.container.rotation = rot; Edit: here's a gif
  12. Now the container rotates around a circle instead of the center of the body
  13. I want to rotate player's both body and hands simultaneously but i couldn't figure out how to do it. My player looks like this and I want to be able to rotate it like this The body and hands are different sprites in a container, everything gets weird when I try to rotate (or move) the container. Player.js class Player { constructor(game, id, x, y) { this._game = game; this.container = new PIXI.Container(); this.body = new PIXI.Sprite( PIXI.Loader.shared.resources['assets/player-1.png'].texture ); this.body.x = x; this.body.y = y; this.body.anchor.x = 0.5; this.body.anchor.y = 0.5; this.hands = new PIXI.Sprite( PIXI.Loader.shared.resources['assets/player-1-hands.png'].texture ); this.hands.x = x; this.hands.y = y - 40; this.hands.anchor.x = 0.5; this.hands.anchor.y = 0.5; this.id = id; this.container.addChild(this.hands); this.container.addChild(this.body); this._game.camera.addChild(this.container); } updatePosition(x, y) { this.body.x = x; this.body.y = y; this.hands.x = x; this.hands.y = y - 40; } }