This tutorial uses assets for the marker and image node. You can download these assets\u00a0here<\/a>.<\/p>\n In this asset bundle you should find:<\/p>\n Once you have downloaded the file, unzip it and add the assets to your Xcode project.<\/p>\n<\/div>\n To create an Image Trackable, you are first going to need an image to track. A marker can be any image natively supported by iOS. Commonly used formats are\u00a0 If your content appears to twitch or shake, or does not appear at all, a common cause is that the marker being used is bad for tracking. For more information, please read our page on What Makes a Good Marker?<\/a><\/p>\n<\/div><\/div>\n To setup your image trackable, first create an\u00a0 \/\/ Get the single instance of the image tracker manager. \/\/ Add the image trackable to the image tracker manager. \t\/\/ Get the single instance of the image tracker manager. \t\/\/ Add the image trackable to the image tracker manager. If you run the app as it is now, the marker will detect and track, but how will we know? We need some feedback, and the easiest way to do that is to add a node to the trackable.<\/p>\n There are various types of node, each of which is designed to work with a specific type of content. For this tutorial, we will be using an\u00a0 When adding any AR content to your application, you should consider adding it on the background thread. This will help prevent the camera feed from stalling.<\/p>\n<\/div><\/div>\n For more information on the different types of ARNode, please refer to our API Reference or our\u00a0Nodes<\/a> page.<\/p>\n<\/div><\/div>\n To set up an\u00a0 \/\/ Add the image node to our image trackable. \/\/ Add the image node to our image trackable. <\/p>\n \/\/ Apply it to your ARNode. \/\/ Apply it to your ARNode. This will scale all three of the image node’s axes by the same value. It’s also possible to scale each axis independently, but you’ll rarely have to do this.<\/p>\n Run the app again, and you should see that the Kudan Cow has increased a bit in size to better fit the marker. This will also work with other types of content, including videos and 3D models.<\/p>\n<\/div>\n Go through the basics of setting up Kudan’s ArbiTrack feature for markerless tracking.<\/p>\n\n
Set up the Image Trackable<\/h2>\n<\/div>\n
.jpg<\/code>\u00a0and\u00a0.png<\/code>.<\/p>\n<\/div>\n<\/i>Bad Markers<\/h3>\n
ARImageTrackable<\/code>\u00a0object and initialise it with a UIImage. Then, initialise the\u00a0ARImageTrackerManager<\/code>\u00a0and add the trackable to it. The code to do this looks like the following:<\/p>\n<\/div>\n
\n{
\n \/\/ Initialise the image trackable.
\n ARImageTrackable *imageTrackable = [[ARImageTrackable alloc] initWithImage:[UIImage imageNamed:@"Kudan Lego Marker.jpg"] name:@"Lego Marker"];<\/p>\n
\n ARImageTrackerManager *imageTrackerManager = [ARImageTrackerManager getInstance];
\n [imageTrackerManager initialise];<\/p>\n
\n [imageTrackerManager addTrackable:imageTrackable];
\n}[\/code]\n<\/div>\n
\n{
\n\t\/\/ Initialise the image trackable.
\n\tlet imageTrackable = ARImageTrackable(image: UIImage(named:"Kudan Lego \tMarker.jpg"), name:"Lego Marker")<\/p>\n
\n\tlet imageTrackerManager = ARImageTrackerManager.getInstance()
\n\timageTrackerManager?.initialise()<\/p>\n
\n\timageTrackerManager?.addTrackable(imageTrackable)
\n}[\/code]\n<\/div><\/div><\/div>\nAdd an ARImageNode to the trackable<\/h2>\n
ARImageNode<\/code>, which is tailored towards displaying 2D images.<\/p>\n<\/i>Add content on the background thread<\/h3>\n
<\/i>Types of ARNode<\/h3>\n
ARImageNode<\/code>\u00a0and add it to our image trackable, add the following code to the end of the\u00a0setupContent<\/code>\u00a0method:<\/p>\n<\/div>\n
\n\/\/ We don’t include the file extension for this image because it’s a PNG.
\nARImageNode *imageNode = [[ARImageNode alloc] initWithBundledFile:@"Kudan Cow"];<\/p>\n
\n[imageTrackable.world addChild:imageNode];[\/code]\n<\/div>\n
\n\/\/ We don’t include the file extension for this image because it’s a PNG.
\nlet imageNode = ARImageNode(image: UIImage(named: "Kudan Cow"))<\/p>\n
\nimageTrackable?.world.addChild(imageNode)[\/code]\n<\/div><\/div><\/div>\nScale the Image Node<\/h2>\n<\/div>\n
setupContent<\/code>\u00a0method:<\/p>\n<\/div>\n
\nfloat scaleRatio = (float)imageTrackable.width \/ imageNode.texture.width;<\/p>\n
\n[imageNode scaleByUniform:scaleRatio];[\/code]\n<\/div>\n
\nlet scaleRatio = Float(imageTrackable!.width)\/Float(imageNode!.texture.width)<\/p>\n
\nimageNode?.scale(byUniform: scaleRatio)[\/code]\n<\/div><\/div><\/div>\n
\nWhat’s Next<\/h3>\n