Dealing With Errors
Given that we are working with code and a live document, errors are inevitable, unfortunately. We will not be able to catch every single error, but there are a few things in place in the Accelerate Editor which will help you deal with errors.
First it's perhaps worth breaking down the default document, which looks like so:
<!DOCTYPE html>
<html>
<head>
<script src="https://accelerate-editor.web.app/libs/aframe-v1.3.0.min.js"></script>
<script src="https://accelerate-editor.web.app/libs/a-game/a-game-0.47.0.js"></script>
<script src="https://accelerate-editor.web.app/libs/aframe-inspector/aframe-inspector.min.js"></script>
</head>
<body>
<a-scene physics>
<a-player locomotion grabbing></a-player>
<a-sky color="#ECECEC"></a-sky>
<a-box
id="floor_0001"
position="0 0 -3"
rotation="0 0 0"
color="lightgreen"
width="10"
height="1"
depth="10"
body="type:static;"
shadow="receive: true"
grabbable="physics:true;"
floor
></a-box>
</a-scene>
</body>
</html>This is actually just a basic HTML document, which all web pages are made from. A full tutorial of HTML is beyond the scope of this guide, but one important thing you should know is that HTML is made up of elements, which have an opening and closing tag. For example you can see near the top of the document there is a <head> tag, with some <script src="..."></script> tags inside it, and then a closing </head> tag. The closing tag is identified by the forward slash /.
Similarly all A-Frame elements we add through the snippet editor are HTML elements and so need an opening tag and a corresponding closing tag, take a look at the sky for instance: <a-sky color="#ECECEC"></a-sky>. If the closing tag (</sky>) was deleting the editor will warn you of this error with a small yellow exclamation mark in the code editor:
The text also says "Tag must be paired" indicating an opening or closing tag is missing - unfortunately it doesn't tell you which tag is missing.
Our default document is actually made up of a few different libraries. A library is just a collection of pre-written code which we can use to make other things. We are relying mostly on A-Frame to build our 3D worlds, but here are some other things in there too. You don't need to worry about this, but so you know the libraries are imported inside the <head> tags at the top of the document:
<head>
<script src="https://accelerate-editor.web.app/libs/aframe-v1.3.0.min.js"></script>
<script src="https://accelerate-editor.web.app/libs/a-game/a-game-0.47.0.js"></script>
<script src="https://accelerate-editor.web.app/libs/aframe-inspector/aframe-inspector.min.js"></script>
</head>If, for some reason, one of these is missing, or you accidentally delete something, you will get an error from the snippet which depends on that library. For example, if I delete the first <script> tag (which is the A-Frame library) and then try to insert an A-Frame snippet, I will get a warning. This time the warnings will appear under the toolbar, above the scene:
If this happens, are you can be sure what is missing, you can just add the relevent library through the Add Library button in the toolbar, in this case A-Frame.
The Accelerate Editor has evolved quite quickly over time and has used many versions of A-Frame and other packages. It has now settled on a collection of libaries which work well together, but sometimes you will open an old document (from an old guide perhaps) which is using a different version of a library and you will see this error. If your document seems to be working fine, or you know what you're doing, feel free to press the Suppress Warnings button which appears to stop these warnings appearing.
If you think you might be missing warnings or if you're deliberately using a library which triggers the warnings, you can toggle whether warnings should be suppressed or not in the document settings.
Sometimes you just get a blank white screen or the player immediately falls through the floor... These are just glitches/bugs in the system and the easiest remedy (for now) is to just press the Play / Pause button and reset the scene.
We cannot account for everything, but as the Accelerate Editor matures we will catch more errors and the output on how to deal with the errors will improve. The tips in this guide are just to help you with where to look and what to check if things are not working as you would expect. Having access the to code at least means you can always diagnose the problem somehow - but perhaps you might need some help if the code is not familiar to you.