|
|
 |
|
| 
mapzame (position-based-web)
Positionsbasiertes Web zur Entwicklung/Prototyping von einfachen Applikationen wie auch Games. | | | |
 ![Einen Kommentar (einer Stelle[markiert]) hinzufügen](imgs/iconaddobject.gif)
|
Einfache Implementation | | |
Idee | | | Positionsabhängige Webseiten
 | | | |
| Implementation
 | |  |
<html>
<body>
function onChangeLatLngAlt(lat,lng,alt)
{
}
</body>
</html> | | | |
|
| |
| Debugger (jeweils /project/debug/)
 | | | |
|
Safari Debugging aktivieren | | | |
|
| |
|
Implementationen | | | |
|
Beispiel: Application aus Webpages
Konzept: Jeder Ort, jede Aktion eine Webpage | | | |
|
Beispiel: Rendezvous (Gehe zu einem Ort)
Eventbasiert | | | View / Gui
 | | | |
| Model/Controll - nur Eventbasiert
 | | | |
|
| |
|
Beispiele: Kreis5
Gameloop & Events | | | Aufbau GUI (Visual Device) [View]
![Aufbau GUI (Visual Device) [View]](documents/document9254.png) | | | |
| Aufbau Model / Controller
 | | | |
|
| |
|
| |
|
Gründsätzliches zu gps-Games
Zwei Arten
- Positionbasiert und lokal verankert 
- Positionsbasiert aber Startpunkt irgendwo (irgenwo spielbar) | | Notizen
| | | |
|
Google-Map als Visualisierung der Map
Oft ist es nötig einen Überblick zu haben ein Mappe und zu sehen, wo man sich befindet bzw. wie der Status des Spiels ist (wo sich der Avatar auch befindet - gps ist nie 100%tig genau) | | |
Google bietet ein "einfaches" Interface zu ihrem Google Map. | | | |
|
Konkrete Möglichkeiten mit Maps | | |
map.setMapType()
map.setMapType(G_SATELLITE_MAP); | | | |
|
map (map2)
map.clearOverlays( )
map.addOverlay( obj );
map.removeOverlay( obj );
map.fromLatLngToDivPixel( latlng )
map.fromDivPixelToLatLng( latlng ); | | | |
|
GLatLng
ist unveränderbar!!! | | | |
|
GMaker (einen Marker setzen)
var objectPoint = new GLatLng(positionLat, positionLng);
avatarGObject=new GMarker(objectPoint);
map.addOverlay(avatarGObject);
| | | |
|
GGroundLayer (ein Bild auf den Boden malen)
var boundaries = new GLatLngBounds(new GLatLng(40.716216,-74.213393), new GLatLng(40.765641,-74.139235));
var newmap = new GGroundOverlay("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries);
map.addOverlay(newmap);
// Rechteck oder Polygon bestimmen
var bounds = new GLatLngBounds(new GLatLng(x1,y1), new GLatLng(x2,y2));
var groundOverlayObj = new GGroundOverlay(imageurl, bounds);
map.addOverlay(groundOverlayObj);
// -- add a ground overlag
function addGroundOverlay( imageurl, x1,y1, x2,y2)
{
var bounds = new GLatLngBounds(new GLatLng(x1,y1), new GLatLng(x2,y2));
var groundOverlayObj = new GGroundOverlay(imageurl, bounds);
map.addOverlay(groundOverlayObj);
return groundOverlayObj;
}
offset=0.001;
addGroundOverlay("http://map.game-design.ch/cloud/imgs/target.png",positionTargetLat-offset,positionTargetLng-offset,positionTargetLat+offset,positionTargetLng+offset);
| | |
GLatLngBounds.containsLatLng( latlng );
GLatLngBounds.contains( latlng );
| | | |
|
bounds=GPolygon.getBounds();
alert(bounds+"--");
bounds.contains(new GLatLng(47,8));
| | | |
|
| |
|
GPolygon / GPolyLine
var polygon = new GPolygon
(
[
new GLatLng(targetObj.getLat(), targetObj.getLng() - offset),
new GLatLng(targetObj.getLat() + 0.5*offset, targetObj.getLng() ),
new GLatLng(targetObj.getLat(), targetObj.getLng() + offset),
new GLatLng(targetObj.getLat() - offset, targetObj.getLng() ),
new GLatLng(targetObj.getLat(), targetObj.getLng() - offset)
]
,"#f33f00"
,5
,1
,"#ff0000"
,0.2
); | | | Polygon
 | | | |
|
GPolygon.getVertexCount()
GPolygon.getVertex(Index)
GPolygon.getArea()
| | | |
|
Viereckige Grenzen des Polygons
Polygon.getBounds() | | | |
|
| |
|
Clicks / Events
Auf die Map klicken etc | | |
"onClick" | | |
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
}); | | | |
|
| |
|
| |
|
Sprechblase / Dialog | | |  | | |
map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world")); | | | |
|
| |
|
| |
|
| |
|
| |
|
|
|
|
User: Anonymer Gast
|
|
|
