Ianmh

Members
  • Content count

    15
  • Joined

  • Last visited

  • Days Won

    1

Ianmh last won the day on September 17

Ianmh had the most liked content!

About Ianmh

  • Rank
    Member

Profile Information

  • Gender
    Male
  1. Is it possible with or without pixi.js to calculate the number of transparent or solid pixels for a given x/y position? My use case is that I have random trees and I want to calculate the width of their trunk at the base of the tree.
  2. Iterate through loaded texture atlas

    Found them. PIXI.loader.resources.trees.data.frames
  3. I've loaded a large sprite sheet of trees and I want to iterate through them all so I can grab random trees. Up until now I've always just used them by name, so I'm not sure how to do this. loader.add('trees', 'trees.json') .on('progress', this.loadProgress) .load(this.done);
  4. Isometric grids

    You mean a texture atlas? I am using one.
  5. Isometric grids

    I have an isometric grid set up, but I'm not sure what size the tiles should be. In another question I asked about scaling and learned about mipmapping. How does this apply to isometric tiles? Should the width be 128 or the height? I don't think it's possible to make both a power of 2. Or does this even matter? Is the solution to package multiple texture sizes of each tile. Also once I get the size figured out how do I get ride of the grid lines from the aliased edges, do you overlap the tiles slightly?
  6. Anti-aliasing question

    Thanks for the info, really wish I had of asked sooner, graphics look so much better. How does this apply to texture packed images, I assume it would be the dimensions of each individual image and not the whole sheet?
  7. Anti-aliasing question

    I have been messing around trying to get Anti-aliasing working for a few days now. I was using a very large image, over 2000px wide and had scaled it to about 200px. It was constantly aliased no matter what I tried. By chance I changed the scale and brought it up to .5 and immediately things started looking better. Is this normal?
  8. Loaders

    So I spent a lot of time figuring out how to load a JSON file with polygon data. It's now working when using PIXI.loader. When I first searched how to load JSON with pixijs I got all kinds of conflicting results. Things like jsonLoader, and other loaders. Are these legacy implementations and is the current loader a more flexible model that can load anything?
  9. Pixi Display

    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
  10. Pixi Display

    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.
  11. Pixi Display

    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.
  12. Pixi Display

    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.
  13. Drag from point which was clicked

    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.
  14. 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?
  15. 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?