• Content Count

  • Joined

  • Last visited

  1. Hi, what's the purpose of the divide by seven when re-positioning the game world?
  2. Hi @digibo, The problem comes that this is only good when scale is (1=1). As soon as you scale up, the x/y co-ords no longer correspond to the same places.
  3. When I test my hitAreas(s) I simply draw a graphics primitive in place. Seems to work okay for my purposes.
  4. Hi Guys, An update as to where I am so far. I currently have the following code: Using jquery-mousewheel plugin: masterContainer is declared before this script and is the displayObjectContainer containing the game world. I'm using .toFixed() to reduce floating-point number inconsistencies. <script> // Set initial mouse position var mousePos = {x:0, y:0}; // Document ready block $( document ).ready(function() { // Set update of mouse co-ords and panning on mouse move $(document).mousemove(function(event) { mousePos.x = event.pageX; mousePos.y = event.pageY; }); //Set zooming capability on scroll wheel use $(document).mousewheel(function(event) { switch(event.deltaY) { case 1 || 2 || 3 || 4 || 5: // Get the current mouse x and mouse y // We need to zoom in, and then move the world so that we are focusing on the same tile console.log("Zoomed In"); masterContainer.pivot.x = mousePos.x; masterContainer.pivot.y = mousePos.y; masterContainer.x = mousePos.x; masterContainer.y = mousePos.y; masterContainer.scale.x = (masterContainer.scale.x * 1.25).toFixed(1); masterContainer.scale.y = (masterContainer.scale.y * 1.25).toFixed(1); break; case -1: console.log("Zoomed Out"); masterContainer.scale.x = (masterContainer.scale.x / 1.25).toFixed(1); masterContainer.scale.y = (masterContainer.scale.y / 1.25).toFixed(1); break; } }); }); </script>This code doesn't account for zoom acceleration (number of scroll wheel 'clicks') but, on the surface of things, performs well. However, a problem occurs when the scale > 1x as the x/y co-ords then correspond to different points than when the object container was sitting at 1x zoom. e.g. Zooming in to a point on-screen, and then moving the mouse to zoom over another part of the screen (and zooming) - (whilst still zoomed in) causes unexpected behaviour due to the change in x.y co-ords. So; i'm currently looking into how I can work out "where stuff is" when the zoom (or scale) is greater than 1. Turns out that this isn't such a trivial task!
  5. Great, this is really useful. Thanks. Although I have to say - pivot is an awful name for that property. I'll keep you all updated.
  6. That's okay. I'll have a play. Will my hit areas be maintained (as long as they are within the objectContainer) or will they also move?
  7. Hello, I understand that we can "zoom" into a displayObjectContainer using the 'scale' property. I currently have one large such container which contains all of my graphics. However, on increasing the scale point, the screen zooms into the top left corner of the screen (presumably some kind of anchor point?). Is there any way to have the screen scale towards a specific point or anchor? i.e Zooming into the cursor position for example. At the moment, the displayObjectContainer seems to have no anchor property. ie. (Can we achieve a 'zoom' into a specific x/y point?) or even just a decimal anchor point of some sort? Much appreciated, Jordan
  8. Amazing work. This rendering engine is simply fantastic. Lightening fast performance, constant improvements being made and excellent functionality. The only criticism I would have is that the documentation is a bit sparse in terms of clarity and examples. That said; when you are busy developing such a great product; who can blame you!?
  9. Hi, I'm posting this on the Phaser forums as I'm not getting much of a response on the Pixi forums. Also, I think the answer could be useful for users of Phaser (as Phaser uses the same convention as far as I know). I am having difficulty defining a polygon hitArea for a sprite and I'm really not sure what I'm doing wrong. For test purposes; I have done the following: Drawn a graphic to the screenCreated a spriteGiven the sprite a hit area with the same co-ords as the graphic I have drawn (but relative instead of absolute co-ords)Added a click handler to the sprite so that I can raise an alert() when I click inside the shape It is almost detecting all clicks over the shape but not everywhere. Especially around the inside edges of the shape, the click event is not firing. My code is as follows: function drawTest() { // I defined the polygon which will be drawn to screen as a shape var funnyShape = new PIXI.Polygon([ new PIXI.Point(100,100), new PIXI.Point(200, 300), new PIXI.Point(315, 210), new PIXI.Point(40, 120), ]); // I create an instance of the graphics object var theShape = new PIXI.Graphics(); // I draw the shape to the polygon area indicated theShape.beginFill(0xE3BE10); theShape.drawShape(funnyShape); theShape.endFill(); // I add the shape to the screen stage.addChild(theShape); // create sprite // I create my sprite var mrSprite = new PIXI.Sprite(); // I position and anchor my sprite mrSprite.position.x = 100; mrSprite.position.y = 100; mrSprite.anchor.x = 100; mrSprite.anchor.y = 100; // I make sure the sprite is interactive (clickable) mrSprite.interactive = true; // The hit area is relative co-ords, so I set the hit area (should be the same as the drawn polygon) mrSprite.hitArea = new PIXI.Polygon([ new PIXI.Point(0,0), new PIXI.Point(100, 200), new PIXI.Point(215, 110), new PIXI.Point(-60, 20) ]); // I add the click event handler mrSprite.click = function(mousedata) { alert("Clicked"); }; // I add the sprite to the screen stage.addChild(mrSprite); }Any help or guidance you could give would be great as this problem has been driving me up the wall for a week! Thanks! (Apologies for posting in the Phaser forums). Hopefully it is relevant as Phaser uses Pixi. Jordan
  10. I have just had a thought. Are the hit area co-ords relative to the sprite anchor point?
  11. Hi All, Apologies for the frequent posts - I'm finding my way with the Pixi API's. I've run into a strange issue whereby I cannot set an accurate polygon hit area for a sprite. My understanding is this: By default, all sprites will have a bounding rectangle as a hit areaFor more complicated sprites, you can override this hit area using a new PIXI.Polygon (using Pixi.Points) to draw the relevant hit area polygon.If I want to visualise this hit area, I can create a new graphics object and use lineTo / moveTo with the same x/y co-ords as my polygon hit area.However, when feeding my coords to the graphics object, the graphics object fills perfectly over the sprite. However, when I set these same points (x,y) coords as the coords for my sprite polygon hit area - the hit test is all over the place. (I would expect the graphics object to accurately reflect the hit area as they share the same x/y points!) Do I have a misunderstanding somewhere?
  12. Really useful guys, thank-you.
  13. Interesting, thanks for this. Out of interest - do you know why this is? Are sprites drawn in a different way to graphics objects? (Probably more of a webGL issue possibly?)
  14. Hi Guys, I'm drawing an isometric grid with mouse-over hit area detection over each tile. It works but the frame rates are awful. Any idea what is bringing the frame-rates down so much? Surely, webGL is capable of attaining better FPS than this? What am I doing that is particularly taxing for the browser? There are no moving sprites (only diamond-shapes PIXI.Graphics) drawn to the screen. ps. I can get about 45,000 moving sprites on bunnymark at 30fps. Cheers, Jordan
  15. Really useful response - thank you. I'm in the process of building a simple isometric game engine. I'll let you know of my progress!