• Content Count

  • Joined

  • Last visited

Everything posted by dinther

  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.
  16. Ok, my project is going to be on ships2career.com . Here is what I am doing: I use pixijs as an overlay on Google maps. I animate ships as pixi sprites on a transparent stage but I want it to look like the ships pass UNDER a bridge. Currently I use a bitmap editor and create separate images for each bridge and render then in the pixi stage (see pic). Very inefficient and maintenance prone (When google updates satellite imagery). I much rather specify a polygon outlining the bridge and somehow use a mask so the appropriate part of the pixi sprite ship is not rendered. I played with masks but what I really need is the inverse of a mask I suppose but I understand that isn't going to happen unless I am prepared to change my local code (Not that I quite know how). Is there anyway I can achieve what is shown in the picture using a masking technique without the need to resort to image overlays?
  17. I respect you guys for the impressive library you have written and I start from the position that it must be me doing something wrong so I am trying hard to understand your responses and check my premises. Yes, it appears the DOM behaviour is the same to my surprise. Here is a pure HTML example: http://planetinaction.com/pixi/multitouch4.htm (Use two fingers). Events with orange id's appear in the touchmove event handler of the green DOM object. I don't understand the logic behind this but yes it is the same. So, accepting this behaviour as a given, I have been digging deeper looking specifically at the touch identifiers which appear OK so I wrote a test where I store the touch identifier in touchstart and check this identifier in the touchmove http://planetinaction.com/pixi/multitouch6.htm This example actually behaves correctly. I can now suppress response with this check. var orangeID = -1;orange.on('touchstart', function(event){ orangeID = event.data.identifier; log('touchstart: orange ' + orangeID)});orange.on('touchmove', function(event){ if (event.data.identifier == orangeID && orangeID != -1){ log('touchmove: orange ' + event.data.identifier); }}); So, since I store and check the identifiers, I should be able to store and check the data objects themselves as your older examples demonstrate. However that doesn't work. http://planetinaction.com/pixi/multitouch5.htm var greenData = null;green.on('touchstart', function(event){ greenData = event.data; log('touchstart: green ' + greenData.identifier + ' ' + event.data.identifier)});green.on('touchmove', function(event){ if (event.data == greenData && greenData != null){ log('touchmove: green ' + greenData.identifier + ' ' + event.data.identifier); }});So, what this means is that I have found a way to make multi touch work for me but the fact that this last example doesn't work bothers me. Either I still lack some understanding or there is a weird kind of bug going on in the library. I wish one of your expert team would look into this and produce a working example for multi touch for pixi as I want to do this the right way.
  18. OK, here is a clean example showing the basic issue (only touch events are handled so you need a touch screen device) http://planetinaction.com/pixi/multitouch1.htm Touching the orange panel causes correct touchstart and touchend events to be fired for the orange panel. Same deal with the green panel. However, a touchmove event on the orange panel also results in a touch move event to be fired for the green panel. That is unexpected. So I decided to try to fix the problem with this demo http://planetinaction.com/pixi/multitouch2.htm Now a touchmove on the orange panel results only in touchmove events being handled for the orange panel. Kind of a hack really because if you now use a finger on each panel you still get a touchmove event on each panel regardless which finger moves (Pretty tricky to keep a finger still but you can see it) http://planetinaction.com/pixi/multitouch3.htm So finally I compare the event.data to the stored data object in the touchmove event handler but that makes no difference. To me it makes sense that example 1 should simply work as expected but I be happy with instructions in how to work around the issue properly.
  19. Thank you for your patience. I am committed to get to grips with Pixi.js , I will produce a clean example today. You could also help by making this multi touch example http://www.goodboydigital.com/pixijs/examples/8/ work with pixi 3.0.7 and add it to the V3 examples http://pixijs.github.io/examples/ I am developing a range of new touch screen UI controls based on pixi.js for a ship simulator. They work beautifully on all devices thanks to pixi.js but I am pretty keen to get multi touch to work too so that multiple controls can be manipulated at the same time.
  20. Bump. Anyone? I am tearing my hair out on this one and I can't get remote debugging in chrome to work to figure out the guts of the source. It appears that every element receives all the touches. When I write event.data.originalEvent.targetTouches.lengthNow I place two fingers each on a different pixijs element. Yet data.originalEvent.targetTouches.length = 2 in the touchstart or touchmove handler. Note that when I store the event.data object on touchstart and reference that results are the same.
  21. Looking at the example for multi touch here: http://www.goodboydigital.com/pixijs/examples/8/ I am using the Chrome mobile browser bunny.mousedown = bunny.touchstart = function(data){ data.originalEvent.preventDefault() // store a refference to the data // The reason for this is because of multitouch // we want to track the movement of this particular touch this.data = data; this.alpha = 0.9; this.dragging = true;};It appears based on pixi version v1.3.0 and multi touch works. However, when I try to use the current version of pixi 3.0.7 a few things changed: requestAniFrame() is now requestAnimationFrame()That is easy to change. Also the event object passed to the event handler has data as a property rather than having data passed directly. I fixed that by: bunny.mousedown = bunny.touchstart = function(data){ data.originalEvent.preventDefault() // store a refference to the data // The reason for this is because of multitouch // we want to track the movement of this particular touch this.data = data.data; this.alpha = 0.9; this.dragging = true;};Unfortunately multi touch doesn't work. Does anyone have a working example of multi touch working for pixi 3.0.7?
  22. Awesome. Thank you. At least I know I wasn't doing anything wrong. I make sure to search the bug database next time. The solutions offered on https://github.com/GoodBoyDigital/pixi.js/issues/1896 swapping global.x and global.y do work for me but that may not be the source of the problem.
  23. Please please please respond developers. I am stuck and I still think there is a bug when rotation is used in conjunction with getLocalPosition. (Pixi version 3.0.7) Checkout this fiddle: http://jsfiddle.net/sD8Tt/231/ The working example returns the correct coordinates for the graphics object when position is set and scale is set. However, when graphics is rotated the coordinates are wrong and make no sense to me in any context.
  24. I have a container that contains another pixi element. A graphics object in this example. As pixi is a scene graph I can rotate the container and the grapics object contained within is rotated too. Now I attach a mousemove event to the graphics object and I convert the event coordinate to the graphics object like var pos = event.data.getLocalPosition(graphics); However, it appears to be that the coordinate system scales and translates but does not rotate. See this fiddle to illustrate. When you move the cursor along the length of the rectangle I expect no change in y and only a change in x. http://jsfiddle.net/sD8Tt/204/ What I require is event coordinates that are aligned with the graphics object. How do I do this or what am I doing wrong?
  25. I want to make sure I get this control technically perfect before I translate the others. I would really appreciate a code review and feedback so I can get the rest right. Checkout the latest version of my dial knob. http://www.planetinaction.com/instrumentdemos/dialknob.htm The page shows two dial knobs. Each can be operated separately but they can not be operated simultaneously using multi-touch. I looked at the multi-touch example code and I believe I implemented it correctly but obviously it isn't working. Individual files: http://www.planetinaction.com/instrumentdemo