• Content Count

  • Joined

  • Last visited

About dinther

  • Rank
  • Birthday 08/06/1964

Contact Methods

  • Website URL

Profile Information

  • Gender
  • Location
    Auckland, New Zealand
  1. https:www.ships2career.com Thanks again man. Were in Beta now. Greedy as ever I am hoping to get you to pull one more miracle from your sleeve. The shadow polygons regenerated by your solution are useful in most cases but the edges are unnaturally sharp. Is there a way to blur or feather the edges?
  2. My ship simulator just went beta this week. It's not a twitch game but you may find it strangely addictive. Ships2career.com is a Top down view ship simulator that uses Google maps and Mapzen vector tiles for land/water data. On top I placed a pixijs canvas on which I render the ships, their wakes and the ship control panels. Initially I wrote the game using kineticjs but it was too slow and support stopped. Glad that happened because Pixijs is so much better and faster. http://www.ships2career.com More info on my facebook group: https://www.facebook.com/groups/604877766331938/
  3. Duh, that now seems painfully obvious. Sorry to waste your time. As it is always easy to complain, let me just say that working with Pixi has been an absolute blast! My ship simulator went Beta last night and soon I be confident enough to submit it to your gallery. I love the way the API is structured and it is very intuitive to use. I honestly don't think I could have pulled this off without Pixijs . A huge thank you for your patience and your help.
  4. Am I running out of coordinate resolution here? So far I have had no trouble using the Pixi coordinate system to span the planet in a Google Mercator projection where one pixi unit = 1 meter on the map (longitude wise) Sprites move fine, things scale fine and I can even draw polygons very accurately using coordinate values exceeding 70 million. However, I can not draw proper lines (yeah I know they are made of triangles) as shown in the attached picture. This appears to be due to the coordinates and scales I am using. Have a look at the fiddle: https://jsfiddle.net/g7tqghp5/8/ However, if I wrap the lines in a container then they render correctly: https://jsfiddle.net/2v0pyshk/ Any suggestions what I can do to get these lines rendered correctly without the use of containers? (Edit: All pixi versions show this behavior) var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true }); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var scale = 6.705827927172184; stage.scale.set(scale); var xPos = 67176678.12079786; var yPos = 110837733.5166879; stage.position.set(-xPos,-yPos); stage.interactive = true; var graphics = new PIXI.Graphics(); // set a fill and line style graphics.beginFill(0xFF3300); graphics.lineStyle(2, 0xffd900, 1); // draw a shape graphics.moveTo((xPos/scale)+10, (yPos/scale)+10); graphics.lineTo((xPos/scale)+50, (yPos/scale)+50); graphics.endFill(); stage.addChild(graphics); renderer.render(stage);
  5. It seems your minifyer is broken. Text size works with https://github.com/pixijs/pixi.js/releases/download/v4.0.0-rc4/pixi.js but won't work with https://github.com/pixijs/pixi.js/releases/download/v4.0.0-rc4/pixi.min.js
  6. Awesome, everything works now but a new bug cropped up with text size. See fiddle: https://jsfiddle.net/b8jxotcy/ Feel free to direct me to the correct location to file issues like this. I have no idea where that is.
  7. I am so sorry, I have trouble keeping track with versions and where to obtain them. There seem so many locations.
  8. It appears a basic bug sneaked into version 4 or maybe there is something I don't do right. Consider this fiddle: https://jsfiddle.net/g7tqghp5/2/ A basic case drawing a rectangle, clearing it and draw the rectangle again in a different color. It doesn't work in version 4 RC3 but it works in all older versions.
  9. This relates to a problem I am trying to solve in Google maps. Google Maps overlayView moves the div around in which the pixi canvas lives during pan and zoom actions. There is nothing I can do about that and it means that static placed elements such as UI moves and scales during pan and zoom actions on mobile devices. But I do like the fact that pixi graphics drawn relative to the map content pan and scale along. So to get the best of both worlds I was thinking to create two pixi renderers. One attached to a Google Maps overlayView and another just as a simple div overlay. One pixi canvas will overlay the other partially. Does such an approach have a negative impact on performance? This fiddle demonstrates what I am trying to do
  10. I ended up with a very different solution because I need both static and scaling content and this didn't work too well. Google Maps overlayView's scroll and scale when the map does. So especially on mobile devices I ended up with the entire UI that is supposed to be static, moving during a pan action on the map and only restore when the pan finishes. Not even close to good enough. In fact, worse then the solution I had before. But for anyone that just wants to use Pixi to paint on the map this is a good way to go. Thinking about it now I suppose I could have used two Pixi renderers. Once for the map and one for the UI and use the UI. Mmmm, food for thought.
  11. Not so much a question as sharing and hopefully receive critical feedback. I spend a few days revisiting on how best to implement Pixi inside Google maps. My starting point was the work from Pedro Sousa and examples from Google However, I didn't just want to show graphics in Google maps, I wanted to place them exactly where I want them world wide and at the correct size. That is a bit of a challenge since Google maps uses a Mercator projection and scale varies with latitude. On this page I am running a demo showing my pixioverlay class simplifying the use of pixi in google maps. The dome shows accurate polygon positioning at an exact size of 500 x 500 meters. It is also interactive. click/Tap the orange rectangle for it to start and stop spinning. function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 16, center: {lat: 51.906144, lng: 4.492393}, mapTypeId: google.maps.MapTypeId.SATELLITE }); // The custom PixiOverlay object contains the pixi world overlay = new PixiOverlay(map, initPixi, update); }; In the above example a new overlay is created. The overlay object creates it's own Pixi Renderer and world stage. An init handler and update handler is passed in as an option. function initPixi(){ poly = new PIXI.Graphics(); poly.beginFill(0xFF3300); poly.fillAlpha = 0.5; poly.moveTo(0,0); poly.lineTo(500, 0); poly.lineTo(500, 500); poly.lineTo(0, 500); poly.lineTo(0, 0); poly.endFill(); overlay.world.addChild(poly); overlay.setCoord(poly, 51.906144,4.492393); } In initPixi you can create your pixi objects. Note how I created a polygon measuring 500 units wide and high. The Polygon is then added to overlay.world (Stage). You can place your pixi object anywhere on the planet by using overlay.setCoord passing in the pixi object, latitude and longitude. The pixi object will also be scaled automatically so that one whole pixi unit is exactly one meter at any latitude. (This won't work for very large polygons as map scale varies over latitude) function update(deltaTime){ poly.rotation += 0.1 * deltaTime; } The update handler receives a deltaTime in seconds and this handler is used to drive all the pixi animations. The whole thing appears to run quite smooth both on mobile devices and desktop but I can't help but think that my code is still inefficient. In particular the repositioning of the div inside the overlayView seems counter productive but so far I have failed to get accurate positioning in any other way. Javascript units used in addition to pixi.js: pixioverlay.js animate.js geodesy.js I'd be grateful for any tips, links or feedback.
  12. Wow, I don't know what to say. I implemented your solutions and it all works nicely without any visible performance penalty. I don't know how to thank you but thanks anyway. Very happy
  13. Love to hear more about the solution that is not public yet. Ships 2 Career is fully reliant on pixijs and maybe good enough as another showcase for your library. More than happy to promote pixijs more prominent on the ship 2 career landing page. As for solutions proposed, I am sorry but I am going to need some hand-holding with code examples. Especially where it concerns masks and filters.
  14. You obviously are an advanced member. The above is way beyond me. I use libraries like Pixijs and managed to avoid having to get to grips with the lower level stuff. It means I am at the mercy of others but it allows me to shine elsewhere. Unfortunately the erase solution you proposed and as shown in http://ships2career.com/mask/mask.htm doesn't work properly when there are transparent sprites around. The wake animation of the ships make use of transparent sprites and these no longer render correctly when I put a GraphicsNoBlending object in a pixi group above all the rest. (The wake needs to vanish under the bridge as well of course)
  15. This sir, is exactly what I was hoping to achieve. Thank you so much! Your example is very clear. here is my little test: http://ships2career.com/mask/mask.htm I am a bit greedy here but, how would you suggest I simulate the bridge shadow on the ships deck only? Next job. Checkout Ivans suggestion. I will checkout the suggestion from Ivan as well of course.