Ianmh

Members
  • Content count

    7
  • Joined

  • Last visited

About Ianmh

  • Rank
    Newbie

Profile Information

  • Gender
    Male
  1. Ah, I did know about this, but I've read it's not a great option as it can lead to errors. Lots of info about it here. https://basarat.gitbooks.io/typescript/content/docs/tips/outFile.html
  2. Thanks for all the great info guys. @ivan.popelyshev when you say easier to manage with an IDE, does this mean it can bundle into a single file too? I use Visual Studio Code, but I've only ever seen it build mulitple files.
  3. I'm actually using Browserify. I've tried to wrap my head around webpack on web projects but have failed to so far so I won't be much help. I like Browserify a lot, but I'm still not sure how the module bundling works, although it's on my list of things to learn. Thanks for the suggestions though, I went for a custom method, here is my code. this.parent = event.currentTarget.parent; // Current container this.collection = this.parent.parent.children; // All containers this.parent.active = true; this.collection.find((container: any, index: number) => { if(container.active) { // Move the container to the front. this.collection.splice(this.collection.length - 1, 0, this.collection.splice(index, 1)[0]); this.parent.active = false; } }); This seems to be working well. I get the parent container because the actual click event is on a sprite converted from a polygon and it's a group of sprites from the polygon shapes. Edit: For some reason the code keeps losing it's formatting when I save.
  4. Probably a silly question, but how do you import pixi-display in TypeScript? I've fairly new to TypeScript, but this works for Pixi.js. import { Application, ApplicationOptions, Container, Graphics, Sprite } from "pixi.js"; But this does not for pixi-display. import { DisplayGroup } from "pixi-display"; Also is pixi-display the preferred way of sorting or is there another way I should be sorting containers? I basically want to be able to add multiple containers to the view and if you click on one behind another it will come to the front and stay there.
  5. I still couldn't get this to work the way I want. It would also be great if some of the examples could be in TypeScript. I think my issues might be around that and the 'this' context with callbacks.
  6. I'm trying to figure out how to drag something from the point at which it was clicked. Even in this demo you get a popping effect. http://pixijs.github.io/examples/#/demos/dragging.js If you click the bunnies ear and start to drag, the cursor pops to his belly. Is there a way to drag from the point that was clicked?
  7. Hi, I'm new to Pixi.js and the forums. I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon? So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. let polygons = new Polygons().getPolygons(); let container = new PIXI.Container(); polygons.forEach((data: any) => { var graphic = new PIXI.Graphics(); graphic.beginFill(0x00dd00, 1); graphic.drawPolygon(data.shape); graphic.endFill(); graphic.scale.x = scale; graphic.scale.y = scale; graphic.interactive = true; graphic.buttonMode = true; graphic.alpha = 0; container.addChild(graphic); graphic .on('pointerdown', this.onDragStart) .on('pointerup', this.onDragEnd) .on('pointerupoutside', this.onDragEnd) .on('pointermove', this.onDragMove); }); container.addChild(sprite); container.x = event.data.global.x - container.width / 2; container.y = event.data.global.y - container.height / 2; this.app.stage.addChild(container); } My mouse up creates the sprite by clicking on the screen. This is my Drag function. onDragMove = (event: any): void => { if (this.dragging) { console.log(event.currentTarget) event.currentTarget.parent.alpha = .5; let newPosition = event.data.global; let parent = event.currentTarget.parent; parent.x = newPosition.x - parent.width / 2; parent.y = newPosition.y - parent.height / 2; this.wasDragging = true; } } The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening. So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?