LBS Quickstart: the AR Shooter

What should you have done by now?

Shooter
  1. You should have followed the "Hello World" - Tutorial
  2. You should have followed the "Location-Based 3D Objects" - Tutorial or "Animate your T-Rex" - Tutorial
  3. You should have followed the "Stick it on the screen" - Tutorial
  4. You should have followed the "Server Events in junaio" - Tutorial

What will you learn?

Scan the QR Code on the right with junaio to see what you are getting.

  • Using the hit functionality in junaio

Download

Get started

  1. When you search the web for AR, you will find quite a few examples talking about "AR Shooters". So you have a weapon and a target and you want to shoot at something. Of course, this is also possible with junaio and the developer API. This tutorial will show you how to.
  2. This Tutorial is based on the "Server Events in junaio" - Tutorial, if you have not done this one yet, please do this first.
  3. Start by changing some information to your Apple in the search.php as well as in the event.php.
    The animation should no longer be shown upon the click of the Apple, but when it was hit. Also the interactionfeedback is changed to "hit". The apple POI will have to changed like this:
$poi = $jPoiBuilder->create3DLocationBasedPOI(
	"Apple",	//name
	"$lat,$lng,$alt", //position
	WWW_ROOT . "/resources/apple_fast.md2_enc", //model
	WWW_ROOT . "/resources/apple2.png", //texture
	50, //scale
	"", //description
	"", //thumbnail
	"apple1", //id
	"1.57,0,0", //orientation
	array("idle" => array("idle", 0), "hit" => array("shot", 50)), //animation specification
	"hit" //interactionfeedback
);
  1. You will also need a crosshair, so the user can aim and a sling shot. The hit will always go through the center of the screen, so this is where your crosshairs should also be placed. Please create the following two GUI POIs.

    Note that the sling has a "fire" customization, defining it as the weapon. So only then the sling is clicked, junaio will see whether any other POI was hit and send the information to your server.

//the sling
$poi = new SinglePOI();
$poi = $jPoiBuilder->createGUIPOI(
	"sling", 
	"0.5,0.05", 
	WWW_ROOT."/resources/sling.md2_enc", 
	WWW_ROOT."/resources/sling.png", 
	"0.2", 
	NULL, 
	NULL, 
	"sling", 
	"1.425,1.35,1.45", 
	$behaviourArray = array("idle" => array("idle", 0), "click" => array("shot", 80)), 
	"click"
);


//need to add a customization to determine it as the gun
$customization = new Customization();
$customization->setName("fireCustomization");
$customization->setValue("");
$customization->setType("fire");
$customization->setNodeID("fire");

$poi->addCustomization($customization);

//echo the POI
$jPoiBuilder->outputPOI($poi);

//create another POI for the cross hairs
$poi = new SinglePOI();
$poi = $jPoiBuilder->createGUIPOI(
	"A Cross-Hairs", 
	"0.5,0.5", 
	WWW_ROOT . "/resources/crosshairs.md2_enc",
	WWW_ROOT . "/resources/crosshairs.png",
	.03,
	NULL, 
	NULL, 
	"cross", 
	"0,1.507,3.14",
	array(),
	"click"
);


//echo the POI
$jPoiBuilder->outputPOI($poi);
  1. In your event.php, only listen for events from the type "hit". Ignore all others.
$eventType = $_POST['type'];

//was a Apple clicked
if(strpos($idHit, "apple") !== FALSE && $eventType == "hit")
...
  1. Lastly, if your users have hit the Apple 5 times, you need to remove the crosshairs and the sling as well.
$jPoiBuilder->removePOIByID("sling");
$jPoiBuilder->removePOIByID("cross");
  1. Please have a look at the download package for the entire example and have fun shooting at apples.

Scan this marker with
junaio to see what you are
getting in this tutorial.