Lesson 12: A-Frame basics
Kōrero Mai: What makes a digital experience impactful?
What makes an impactful experience? Think back to the last movie, tv show or game that left and impression on you. Was it because of the:
What other thing can you think of? Discuss...
Kua reri? - Ready? It's your turn... Follow along with your own A-Frame project
Make sure you have a working copy of an A-Frame environment that you can follow along with. Previously we used Glitch.com to save and host our A-Frame project.
If you would like to create a fresh template from scratch then click here.
Note: Remember to either save your URL OR sign into glitch.com with an account to keep your progress.
What is HTML?
HTML is the language behind constructing websites. It stands for HyperText Markup Language.
HTML uses tags to define certain areas of the code. Just like brackets in C#, tags require an opening tag and a matching closing tag. Can you Identify the tags below?
<html>
<head>
</head>
<body>
<h1> Welcome to my website! </h1>
<p> This is a line of text that will appear in my website </p>
</body>
</html>
<body> is an opening tag for the “body” section.
</body> closes the “body” section.
Visit W3Schools to learn more.
What is an Entity?
Think of an Entity like an object. This object could be:
- a box that’s green
- a sphere that bounces
- a 3D model with an animation
- a light source inside a building
- a position to play a sound effect from
Essentially, an Entity can be whatever we want! it’s the term used when we describe an object instead of just some code.
A-Frame default Entities
A-Frame gives you the ability to dynamically create or alter your own entities. To begin with, it might be easier to use basic entities first before exploring further, such as: a box, sphere or cylinder.
You can also use:
<a-box><a-cone><a-cylinder><a-dodecahedron><a-icosahedron><a-plane><a-ring><a-sphere><a-torus>
Remember to work between <a-scene> and
</a-scene>. These are our “brackets”
Basic entity properties - 3D Position
Entities contain all information about an object. This includes the position of the entity itself. As we are working with 3D objects, we have 3 Dimensions to worry about. X, Y and Z.
You can use the Right Hand Rule to better visualize the 3 different axis.
source: what-when-how.com
These are generally described as:
- X-axis - Left/Right movement
- Y-axis - Up/Down movement
- Z-axis - Forward/Back movement
Creating some 3D objects
Kua reri? - Ready? It's your turn... Creating some 3D objects
Try adding a few more 3D objects to your scene. You can use template objects such as
< a-box > and < a-sphere > to do this.
The position values are saved in the format: position="x y z"
Try editing their position values to get familiar with 3D space
Editing other 3D properties
Entities have 2 other properties that also use 3 dimensional properties. These are:
- Scale (The size of an object)
- Rotation (The orientation of an object)
Again, they follow the same format: property=”x y z”
Adding in an Environment
A-Frame allows developers to create and share reusable components for others to easily use. We will use this environment script that procedurally generates an environment for us to use with only a single HTML line!
Add it in by doing the following:
- Link the script at the top of your file
<script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
- Create an entity in the scene using the new environment property.
Editing the Environment
We can also edit the Environment, just like editing an entities position. We simply need to specify the property and the value we wish to assign it. For now, let’s change the preset.
<a-entity environment="preset: forest"></a-entity>
These presets give us a great building block to change the tone of our game. All presets you could use instead:
- default
- contact
- egypt
- checkerboard
- forest
- goaland
- yavapai
- goldmine
- threetowers
- poison
- arches
- tron
- japan
- dream
- volcano
- starry
- osiris
Note: Visit the environments page to learn more about which properties can be altered.
Text Elements
Another easy to use element is the Text element. Any guesses how it’s added?
<a-entity position="1 2 3" scale="4 4 4" text="value: Hello World!"></a-entity>
Just use the word: text!
Try placing one into your world and changing what it says.
You may need to scale this larger than you think.
Editing multiple property values at once
Some properties have multiple values that can be edited at once. Let’s use our new text property as an example. To edit an additional value, we need to separate each of them with a ‘;’ semi-colon.
text="value: Hello World!; color:blue"
Change the color of the text value by following the above.
Note: Properties with multiple values do not use ‘=’ equals. Instead, they use ‘:’ Colons to act as ‘=’ equals signs.
How to add in texture files
One last thing to cover is how do we add in external files such as textures, models or sounds into our project?
Thankfully, Glitch.Com will host these assets for us and automatically load them for use when someone plays our experience. To add files into glitch, simply drag and drop the file into the asset window.
Defining these images as assets
Our next step is to define these images as assets so that they are loaded into our scene. To do this we need to create an assets section at the top of our scene using <a-assets> and </a-assets>.
Inside of these asset ‘brackets’ we can add in things we would like to be loaded before the game starts.
To add an image, we can use the <img> tag.
For now, add this line into your project and change the id for you image. This has to be kept lowercase.
Inside of your new <img> tag is also a src value. This points to the image that it will use. We need to copy and paste a link to the image. Thankfully, we can easily get one through glitch.
Head to the assets page and select the image you want to use. Click copy next to it’s url. Paste the link into your code.
Using images
Lastly, to use the image as a material, we need to edit an entity’s properties.
- Add the material property to an entity (try a box first)
- Change it’s src value to your images ID. (Make sure to use a ‘#’ symbol before the images ID)
Kua mutu? Finished? What to try next…
Continue exploring A-Frame and constructing an environment.
Next lessons we will be adding background music, so try finding some files before hand