Looking to create your own AR version of Animal Crossing or FarmVille?
Tags: tutorial, showdev, ios, augmentedreality
Published: 2021-01-04 10:25:33

How to Build a Virtual Town in AR in 15 Minutes or Less!

Looking to create your own augmented reality (AR) version of Animal Crossing or FarmVille? Try using this tabletop AR iOS town builder demo app, created with the echoAR Swift SDK, that allows users to build virtual neighborhoods on horizontal surfaces. The full demo can also be found on echoAR’s [GitHub] (https://github.com/echoARxyz/iOS-ARKit-demo-Town-Builder).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8jlh260pppmmhkxhih84.png)

**Register**
Don’t have an API key? Make sure to register for FREE at [echoAR] (https://console.echoar.xyz/#/auth/register).

**Build and Run**
1. Make sure you have Xcode downloaded

2. Clone this repository
3. Open ARTownBuilderDemo.xcodeproj using Xcode (if you have Xcode downloaded you simply double click the file to open)
4. Go to the “Signing&Capabilities” tab on Xcode and fill out your signing information. See more details here
5. Go to the EchoAR.swift file, insert your api key as a String where it says “insert api key here”
6. Go to the echoAR console and add the 3d content you would like to use in the scene (see below for the optimal choices for the demo).
7. Go to the ViewController.swift file, add the entry id’s for 3d content you have added to your echoAR console. Where it says “insert entry id here”
8. Connect your iPhone to your computer.
9. Select your iPhone on the dropdown list of devices to run the demo app on.
10. Press the play button to build an run (Note: your device must be unlocked to run)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yirsou2uzvv2q5gdevwa.png)

**Using The Demo**
1. Move your phone around a horizontal surface to scan a plane.
2. If the “Add” button is selected, choose an object to add, and touch somewhere on your horizontal plane to add it.
3. If any other edit buttons are selected (Drag, Rotate, or Delete). Tap or drag on the object you would like to edit.
4. Objects can be scaled at any time by doing the two finger pinch gesture on them.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/suur1q0wxv0i3x707uru.png)

**Learn More**
Refer to our [documentation] (https://docs.echoar.xyz/swift/installation) to learn more about echoAR and the Swift SDK.

**Support**
Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack] (https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

**Additional Notes**
1. Currently the iPhone 4s and the first generation iPhoneSE screens are too small for the demo. All other screen sizes (larger than the above) can run the demo.
Users can drag nodes to be buried underneath the horizontal plane.
2. Because dragging the horizontal plane itself is not allowed in the demo, this then gets the node stuck underneath the plane. Depending on use case, this can be solved by allowing the editing of the horizontal plane (see the isPlane() function). Note: toggling the horizontal plane toggles visibility, but the plane node is still in the scene.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dff410wd42aled9y23b7.png)

**More images of the default entries for the demo**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxsiinjtewape39jjjad.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t4z1xrm96h0dcwn4b8xt.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k56xknual49b81rpua6x.png)

Demo created by [Daye Jack] (https://github.com/ddj231/).

-----

**echoAR** (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vko3s14w4q2uc9iw86p4.png)