Search the Community

I try to make location based game with phaser, but look like not easy to do it. <div id="map"></div> <div id=""game"></div> I just try to load Google maps and My Game together but cannot display as background of my game. Anyone can help or please suggest me?

Hello, dear Forum. Recently, I was toying with an idea for an intricate real time strategy game for use on maps provided Google Maps, particularly when utilising their road, building and traffic information: A police tactics simulator, much in the style of both the Police Quest and Emergency series, and further inspired by things like the Class 3 Outbreak Simulator, Prison Architect and Sim City. Much like in an Emergency game, you get to choose a building HQ on a designated coordinates of (preferably urban) terrain, from which you can patrol the streets on foot, car and air, respond to call-outs, execute warrants, organise raids and searches, handle hostage takings and public threats, surround buildings, cordon off areas, evacuate areas, participate in chases (both on roads and through pedestrian zones), set up road blocks, divert traffic, set up checkpoints, surveill and/or protect sensible locations, implement security zones, organise convoys and secure transports, police the traffic, police demonstrations, control large crowds, commence manhunts and rescue search operations, and even do some serious investigative detective work. All of it randomly spawned, all of it playable anywhere in the word on real life locations. The possibilities are - quite - endless in gameplay regards. The game would be designed to be either birds-eye view or (better yet) isometric; it would be 2- (or 2.5-) dimensional, with units, characters and effects consisting of 2d-sprites (themselves probably flash-based). There would be both a wide array of emergency units and civilian units randomly moving around the map on the roads and paths. Personally, I'd be really excited if such a complete game ever came out. There is one vital problem, however - I have little to no game development or coding experience. I don't know how to implement games like those on Google Maps (again, think of Class 3 Outbreak), nor do I know what game engines I could utilise to lay a basis for this kind of game. That's why I've decided to ask here: Can this sort of gaming concept popular? Could it take off? In how far would this be a sensible choice? And what engines or programmes can be used to make such a game a reality? How did other games implement Google Maps as a basis for their gameplay? Has this idea already crossed somebody's mind? Is anyone even remotely intrigued by this concept? Are there any games like this one out there already? Are there any in development? Thanks in advance for any tips, opinions and stimuli!

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

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.