Create an Endless Scroller Game With Unity WebGL and Play in Desktop Browser
Tags: tutorial, gamedev, unity3d, csharp
Published: 2022-07-08 02:16:41

<center> 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tda1w22rr14n0kmdqc8s.gif)</center>

Depending on your project size and platform, it can be challenging to update all your assets smoothly! [echo3D](http://www.echo3d.co\) has made it easy to do this by simply using an API key. Assets are stored on the [echo3D](http://www.echo3d.co\) cloud and called at runtime so your experience runs smoothly and faster, every time and everywhere.

In this tutorial, you will add the background during gameplay through the echo3D cloud to show you a very simple example of how you can do this across all platforms, including Simmer.io. 

***

<center>

Click this link  [**https://go.echo3d.co/gAjv**](https://go.echo3d.co/gAjv)  or scan this QR code to see something sharky 🦈.

![](https://miro.medium.com/max/1134/1*YAAKUoAnoiAhkCqjvW3XMg.png) </center>

***

Register
========

Don’t have an echo3D account? Register for FREE at [echo3D](https://console.echo3d.co/#/auth/register).

Version
=======

[Unity 2020.2.2f1](https://unity3d.com/get-unity/download/archive)

Download the WebGL package for Unity

Play
====

Play it on Simmer.io for free [here](https://simmer.io/@echobebe/endless-scroller-shark-edition). For Desktop browser only.

Setup
=====

*   Clone this [repo](https://github.com/echo3Dco/Unity-echo3D-Demo-EndlessScroller), see the full README [here](https://github.com/echo3Dco/Unity-echo3D-Demo-EndlessScroller/blob/main/README.md)      
*   [Import the Unity SDK](https://docs.echo3D.co/unity/installation)
*   [Add the ‘Background’ asset](https://docs.echo3D.co/quickstart/add-a-3d-model) to the echo3D cloud from the Unity ‘Models’ folder
*   Uncheck the [Security](https://docs.echo3d.co/web-console/deliver-pages/security-page) box in your console
*   In Unity’s Hierarchy in the _Flappy Animal_ scene modify the Canvas > BG
    \- Add the echo3D API key and entry ID for the Background image
    \- Make sure the Sprite Renderer box is unchecked

![](https://miro.medium.com/max/1400/1*0Z_JDVXFCJNPaE9CkL18BA.png)![](https://miro.medium.com/max/1086/1*mKlA_6M7sjX8fMG41IUqcw.png)

*   Adjust the [metadata](https://docs.echo3d.co/unity/transforming-content) for the ‘Background’ asset in the echo3D console. If this doesn’t fit, modify as needed.
    xAngle: 90
    zAngle: 180
    scale: .04
    y: .8

Run
===

*   In Build Settings, add all the scenes and [build to WebGL](https://docs.unity3d.com/Manual/webgl-building.html)
*   Create a free [simmer.io](https://simmer.io/) account and upload your WebGL Unity build to it and play in browser!

Learn More
==========

Refer to our [documentation](https://docs.echo3D.co/unity/) to learn more about how to use Unity and echo3D.

Source Credit
=============

*   [Seaweed art: upklyak / freepik](https://www.freepik.com/free-vector/seaweed-corals-sea-plants-reef-animals_26892839.htm#query=underwater%20icons&position=17&from_view=search)
*   [Shark and fish art: macrovector / freepik](https://www.freepik.com/free-vector/underwater-set-with-isolated-flat-cartoon-style-images-deep-sea-fishes-shellfish-turtles-jellyfishes-vector-illustration_26765619.htm#query=underwater%20icons&position=27&from_view=search)
*   [Background image: upklyak / freepik](https://www.freepik.com/free-vector/ocean-sea-underwater-background-empty-bottom_7058927.htm#query=underwater&position=6&from_view=search)

Support
=======

Feel free to reach out at [support@echo3D.co](mailto:support@echo3D.co) or join our [support channel on Slack](https://go.echo3d.co/join). For additional troubleshooting, debug [here](https://docs.echo3d.co/unity/troubleshooting).

Screenshots
===========

![](https://miro.medium.com/max/1400/1*v7CuxmZqeRHZCeBbfxYxoA.png)![](https://miro.medium.com/max/1400/1*j0zfMc35VvhIVmpba4VSyA.png)![](https://miro.medium.com/max/1400/1*c1jTG6ITuvfdU2XjmWN9Fw.png)![](https://miro.medium.com/max/1400/1*EV1jgKexejFvskFRwzkyvA.png)

More Tutorials
==============

For more easy tutorials, check these out:

*   [How to Integrate echo3D Into a Unity Project — Free Tutorial](https://www.echo3d.co/post/how-to-integrate-echo3d-into-a-unity-project-free-tutorial)
*   [Build a 3D Balloon Pop game in Unity](https://medium.com/echo3d/build-a-balloon-pop-game-unity-free-eed9fe7d8be9)
*   [Get a Quarantine Dog in AR](https://medium.com/echo3d/get-a-quarantine-dog-in-ar-8383ea55376b)
*   [How to Create 3D Content and See It In AR](https://medium.com/echo3d/how-to-create-3d-content-and-see-it-in-ar-free-no-coding-required-369e5b4a4b3e)

***

>_**echo3D** ([www.echo3D.co](http://www.echo3d.co/); Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content._

![](https://miro.medium.com/max/1400/1*cNrRDT0JEpkcy-zG6KBNgw.png)