Build an AFrame.IO Scene on Oculus Quest with Teleportation

FireFox Mixed Reality

Hey web developers! Looking for a fun way to build VR experiences on the Oculus Quest and Go? This tutorial will provide a brief guide to drafting an AFrame.IO VR experience that includes GLTF model loading and teleportation controls. As web developers, we have the unique opportunity to link data, models, and services to WebXR experiences. We really love seeing AFrame.IO work well on the Oculus platform. These are exciting times and trends!

To get started, please make sure to install Mozilla FireFox Mixed Reality on your Oculus Quest/Go headset. In the following video, you can see the code sample we’ll explore. I downloaded a temple model from TinkerCAD in GLB format. Using Blender, I converted the file to GLTF. Using the following script hosted on, I was able to load the GLTF model.

AFrame.IO Script for Oculus WebXR

Fork the script at

<!DOCTYPE html <html>
<!--  Thank you to TakashiYoshinaga!

    <meta charset="utf-8" />
    <title>Oculus Demo</title>
    <meta name="description" content="Oculus Quest Demo" />
    <script src=""></script>
    <script src="//"></script>
    AFRAME.registerComponent("input-listen", {
        init: function () {
            //X-button Pressed
            this.el.addEventListener("xbuttondown", function (e) {

            //X-button Released
            this.el.addEventListener("xbuttonup", function (e) {

    <a-scene physics="debug: false; gravity: 0; restitution: 0.9; " background="color: #AAAAAA">
            <a-asset-item id="model"

        <a-entity id="glbtest" gltf-model="#model" position="0 0 0" scale="0.5 0.5 0.5">

        <a-entity id="cameraRig">
            <a-entity id="head" camera wasd-controls look-controls position="0 1.6 0">
            <a-entity id="ctlL"
                teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; startEvents: teleportstart; endEvents: teleportend"
                raycaster="objects: .collidable; far:1.2;" laser-controls="hand: left" input-listen>
                <a-text value="X: Teleport" position="0 0.05 0" rotation="-90 0 0" scale="0.1 0.1 0.1" align="center"
            <a-entity id="ctlR" raycaster="objects: .collidable; far:1.2;" laser-controls="hand: right" input-listen>
                <a-text value="This is your hand!" position="0 0.05 0" rotation="-90 0 0" scale="0.1 0.1 0.1"
                    align="center" color="#FFFFFF"></a-text>


Key Libraries

In the top section of the document, we can import several script files that will power the VR experience. To learn more about these script files, please visit the following links:


In this post, I want to mostly review how to implement teleportation features into the AFrame.IO scene. The following JavaScript implements the teleportation movement behavior. Most people get motion sickness if you simply translate and slide a user around a VR experience. As an industry, the “fishing line” teleportation UX helps the user jump around a 3D environment.

    AFRAME.registerComponent("input-listen", {
        init: function() {
        //X-button Pressed
        this.el.addEventListener("xbuttondown", function(e) {

        //X-button Released
        this.el.addEventListener("xbuttonup", function(e) {

GLTF Loading

In the following HTML code, we pre-load a GLTF model called “model” and associate it with a AFrame.IO model entity. Please notice that we positioned that model at location (0,0,0) with 50% scaling factor.


position="0 0 0"
scale="0.5 0.5 0.5"

Let’s setup our camera and related parameters. This will also add “look” controls and navigation using WASD.

<a-entity id="cameraRig">
    position="0 1.6 0"

In the last section of markup, we configure the left and right hand controller. For this tutorial, we’ll simply show the code for the left hand.

Configure hands

    teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; startEvents: teleportstart; endEvents: teleportend"
    raycaster="objects: .collidable; far:1.2;"
    laser-controls="hand: left"
    value="X: Teleport"
    position="0 0.05 0"
    rotation="-90 0 0"
    scale="0.1 0.1 0.1"

Thanks to Takashi Yoshinaga for drafting this code sample. Please make sure to check out his full code sample that includes object gripping, teleportation, and ball throwing.

Thanks to Mozilla, AFrame.IO and FireFox Mixed Reality for making XR technology open to the community of web developers and makers. As FireFox Reality continues, we look forward to seeing AFrame.IO work well with technologies like HoloLens 2. I know that I’m already excited by the ThreeJS support.

Let us know if you make anything cool!!

Top Stories on InspiredToEducate.NET

Posted in technology | Leave a comment

14 AFrame.IO Resources For Your WebXR Project

AFrame Logo

I’m a big fan of the work of the AFrame.IO community.  Thank you to Mozilla, Diego Marcos, Kevin Ngo, and Don McCurdy for their influence and effort to build a fun and productive platform for building WebVR experiences.   In this post, I’ve collected a few Github repositories and resources to support you in building AFrame experiences.

Talk Abstract: In the next few years, augmented reality and virtual reality will continue to provide innovations in gaming, education, and training. Other applications might include helping you tour your next vacation resort or explore a future architecture design. Thanks to open web standards like WebXR, web developers can leverage their existing skills in JavaScript and HTML to create delightful VR experiences. During this session, we will explore, an open source project supported by Mozilla enabling you to craft VR experiences using JavaScript and a growing ecosystem of web components.
Kevin’s collection of A-Frame components and scenes.
Awesome WebXR from Don McCurdy
Infinite background environments for your A-Frame VR scene in just one file.
Interactive workshop and lessons for learning A-Frame and WebVR.
Official registry of cool AFrame stuff
Components for A-Frame physics integration, built on CANNON.js.

Experiment with AR and A-Frame
AFrame now has support for ARCore. Paint the real world with your XR content! Using FireFox Reality for iOS, you can leverage ARKit on your favorite IPad or IPhone.
I’ve collected a small collection of demo apps to explore some of the core ideas of AFrame.

AFrame Layout Component
Automatically positions child entities in 3D space, with several layouts to choose from.

An animation component for A-Frame using anime.js. Also check out the animation-timeline component for defining and orchestrating timelines of animations.

Super Hands
All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame. Seems to work well with Oculus Quest.

A-Frame Component loading Google Poly models from Google Poly
Component enables you to quickly load 3D content from Google Poly

HTML Component for A-Frame VR that allows for interaction with HTML in VR. Demo
L-System/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.

Thanks to the amazing work from Mozilla, WebXR usability has improved leveraging specialized FireFox browsers
FireFox Reality
FireFox Reality for HoloLens 2 – For raw ThreeJs scripts, it works well. I’m still doing testing on AFrame scenes.

If you live in Central Florida or Orlando, consider checking out our local chapter of Google developer Group.  We enjoy building a fun creative community of developers, sharing ideas, code, and supporting each other in the craft of software.  Learn more about our community here:

Top Stories on InspiredToEducate.NET

Posted in creativity, making, open source, programming, stem, technology | Leave a comment

3D Modeling for Minecraft using TinkerCad – Online Meetup June 20th

As adult learners or students, we’re all looking for new fruitful activities that we can share with our friends and family. In this hands-on workshop, we’re partnering with Google Developer Group of Central Florida to learn how you can build 3D stuff for a 3D printer, a Unity game, and Minecraft!

  • WHO: Families, developers, tinkerers
  • WHERE: Online Google Meet
  • WHEN: June 20th at 1pm

In this workshop, we’ll build amazing stuff in Minecraft that will WOW your friends! You’ll learn the basics of 3D modeling using TinkerCAD, a free tool for modeling! You’ll have fun constructing 3D worlds and playing them in Minecraft. Using TinkerCAD, we’ll convert your 3D worlds into Minecraft schematics that can be imported using WorldEdit.

For families, we hope that you consider bringing your kids with you and learning together.

For developers, we’ll cover a few API’s to build 3D models using JavaScript too.

You’ll need to register for a free account on TinkerCad. You’ll also need to obtain the Minecraft Java Edition. You may want to install WorldEdit ahead of time too: Setup WorldEdit on Minecraft

To join the video meeting, click this link: Meeting Link on Google Meet

I hope that you can join us!

Related posts:

Posted in 3d printing, creativity, game based learning, making, stem | Leave a comment

Thank YOU to all teachers! #edtech #edchat

Hello. In this post, I wanted to share a word of thanks to all teachers and professors. Over the years of being married to a college professor and writing this blog, I continue to grow in respect and appreciation for all teachers. The world has become a hard place. The average student does not just battle with facts, figures, and learning. For many students, they battle with challenges in home life, challenging work situations, and divided attention. Before COVID19, my wife Sarah worked crazy hard to create the best situation possible for her students to thrive. I can see her agonizing over lecture details to make things correct and clear. At times, grading isn’t fun. Work flows into the nights and weekends.

As we enter this epic event of COVID19 and social distancing, I can only imagine the ways that teachers like you have needed to adapt and change to continue to help students become the best version of themselves. Again, I wanted to say thank you!! As a parent of three little ones, it has been a gift to see you adapting to the challenges of teaching online and authentically helping my kids to grow.

Given we’re all huddled up in the same house, Sarah and I have had the opportunity to observe lots of teaching and learning in action. I have enjoyed seeing my kids teachers create open conversation space to help the kids process and talk about their feelings of not attending school in person. We’re social creatures. And my kids miss playing and learning with their friends. The video conferencing helps our kids feel a sense of connection. I have enjoyed seeing the apps, games and “edtech” innovations used to make math, reading, and science fun and engaging. For my older son, I have enjoyed seeing him research his science project and practice new skills of presenting online for the first time. I think my sons have become excited with the idea of having their own YouTube channel some day.

My wife and I have appreciated the way our students have received their schedule and assignments. In some cases, it’s been really nice to have all work due on Sunday at the end of the week. We really like the way our teachers have broken up the scope of work for the week into daily achievable tasks. As Sarah and I try to accomplish our professional work concurrently with running a home classroom, this attention to detail is greatly helpful. We recognize that planning and executing these lessons online is not easy. And again we say thank you.

Sarah and I have often wondered what it would be like to “home school” our kids. Across the nation, many families and teachers have adapted to making our homes into places of learning. If there’s a “bright side” to COVID19, I appreciate the precious opportunity to see my kids learn and grow. I appreciate all your efforts to keep authentically human connections to our students. We recognize that teaching online is more time intensive. Speaking as a parent, please know that we recognize your efforts and thank you.

Blessings to you and your family!!

Posted in parenting, teaching, technology | Leave a comment

Playfully Connect Your Friends and Family with Mozilla Hubs

Mozilla Hubs
Looking for a playful way to connect your remote teams and family? In this time of social distancing, it’s becoming more important to find fun ways to create shared experiences virtually. Mozilla Hubs enables your team to host VR/gameful meeting experiences complete with audio communication. For communities or families that have VR headsets, Mozilla Hubs works with Windows Mixed Reality, Oculus, and Vive. For developers, check out the links to help you instantiate your own Mozilla Hubs server.

Mozilla Hubs
Controls for Mozilla Hubs
Create environments for Mozilla Hubs
GitHub for Mozilla Hubs
GitHub for Mozilla Spoke

Related Posts
AFrame: Building WebVR experiences with HTML and JavaScript
AR/VR Developer Trends You Don’t Want To Miss
10 AFrame.IO Resources For Your WebVR Project

Posted in technology | Leave a comment

Create Async-JAM sessions with your music friends at

Hey, Music makers! In the past few months, my family and I have discovered an amazing web-based music recording tool that we just had to share. I believe that some of the best ideas in life come from ideas mixing. In the world of music making, we love having the opportunity to elaborate or jam upon the ideas of other musicians. It’s a core experience. The website makes it possible for music makers to build music in a fun and social manner.

I had the amazing opportunity as a kid to learn musicianship deeply. From my mother, I learned a great deal of discipline and habits required to become a proficient violin player. I learned to appreciate classical music and the joy of making music with others. These lessons also empowered me to serve in my church and use my gift of music to uplift others. My father, gifted me with the perspective and skills of a rock keyboard player. My brother and I grew up listening to a lot of classic rock with Elton John, Billy Joel, Eagles, Emerson, Lake & Palmer, Chicago, etc. While I loved classical music, I also desired to play like an Elton John. Being computer geeks, my dad invested very early in getting us access to MIDI music recording equipment and a simple keyboard. As a teen, I can remember losing many hours during the summer learning how to record electronic music. We even recorded some of my dad’s songs too. These are some of my most precious memories.

With this story in mind, I want to create these experiences for my kids too. It’s been fun to explore with my kids and explore their musical creativity together. For my little singer, we record some Disney tracks. One of my boys really enjoys building techno right now. And makes it easy. I hope you consider checking out to explore music making in your family too!

Kid Techno Samples

Key benefits of

  • It just works in the browser: is like Google Docs for musicians. To get started, you don’t need to install software onto your computer at all. Open up a web browser and navigate to and register for an account. From there, you hit the “create” button and you’re ready to start making music.
  • It works with your MIDI/audio controller: In our house, we have a pretty inexpensive MIDI/audio recording box. It’s a USB device that connects my laptop to my MIDI keyboard and our recording mics. It blows my mind that Google Chrome and can interface with audio recording and MIDI devices. Putting geek stuff aside, I can use to record small keyboard and audio fragments completely in the browser. Crazy!!
  • For R&B and techno oriented creatives, has a robust library of audio loops for mixing. All of these loops can be layered and arranged in a multi-track manner.
    Loop library

  • The best ideas come from mixing with other musical ideas. With, you can now share your music in the same manner that you would share a Facebook post or a Google document. This creates an opportunity for creators to market their skills, connect with new musical friends, and gain inspirations from others.

  • A great deal of band lab works on mobile devices and phones too. This can be fun if you’re feeling creative on the go!

Quick tour of features

Multi-track recording provides an user experience to support multi-track recording. For creatives who want to leverage basic software-based synths in their MIDI creations, you can expect the common piano roll interface. I have to say that I enjoy the simplicity as compared to other recording tools. Unfortunately, I have not found a way to output my MIDI back to my external keyboard device. This matters for professional musician use cases where you have an amazing library of sounds on your keyboard. I do like that the multi-track experience enables you to mix different types of musical ideas: MIDI keyboard recordings, raw audio, drum loops, and audio loops.

Drum patterns

The Drum patterns interface enables you to define a collection of drum patterns. For the pattern A, you might define a drum pattern that works for a verse. For pattern B, you might define another drum pattern for your chorus. You can define another pattern that you might use on a bridge. As I’m trying to engage my kids in music making, I like to share the drum pattern maker with them. They instantly get it and enjoy iterating on ideas.

Are you curious about, but don’t have a keyboard? Don’t worry! They have you covered. They have a simple interface for playing notes using your normal computer keyboard. For simple techno recording, you can still have fun with this interface.

To give you more perspective, check out this YouTube video from Eumonik. I like his honest review and tour of

Hope you enjoy BandLab to create async-JAM sessions with your music friends and family.

Posted in creativity, making, stem, technology | Leave a comment

7 Creative DIY Project Ideas For Family Fun

Like many parents, my wife and I seek out activities that have a fun factor while we learn small lessons about math, science, art, or crafting. It’s fun to find activities that help avoid the default desire for screen time. I started putting together a plan for our kids over the next few weeks. Like many makers, I enjoy checking out new projects ideas on If you haven’t checked out Instructables, I am certain that you can find a project for you there! I thought I’d share seven projects that looked cool.

pvc tent
PVC Tent:

In our house, the kids really enjoy building forts. I really like the idea of using PVC to frame the structure of the fort. It looks like a pretty cheap build. Honestly, building forts with cardboard works just fine too. Big box forts can keep our kids playing for hours!

lego cross bow
Lego Crossbow:
Sometimes, kids enjoy being little warriors. This looked like a fun build for fans of Lego technics. The build reminds me of the activities from the book “Weapons of Mini-Destruction.”

lego chess
Lego chess:
In general, I think we might start exploring the idea of building board games using Legos. I got this concept after seeing this simple chess set. It has been fun starting to teach chess to the kids too.

DIY Cardboard Lamp:
This just looks very cool. It might be fun to do a 3D printing twist on twist on this project too!

board game
DIY Board Game:
Speaking of board games again, I really appreciated this post on building board games that teach. Besides that, the author had very practical tips to prototype board game layouts with common objects and simple computer tools like power point. Thanks for the awesome ideas.

bird house
Duct Tape Bird House:
With the family staying in the house more, we have started enjoying bird watching more. This hack with boxes and Duct tape got the attention of one of my little ones.

cardboard dome
Card board project dome
This just looked cool!

Got other cool project ideas? Please share a link with us and our readers! We love to hear from you.

Posted in creativity, game based learning, games, making, stem, technology | Leave a comment

Build 3D models with TinkerCad For IPad and AR

Happy New Year! I hope you had a Merry Christmas!  Santa Claus very kindly brought me a new toy so that I can explore the world of augmented reality in the world of iOS.  Over the years, I have enjoyed connecting makers, students, and educators to my favorite 3D modeling tool:   From the start, TinkerCad focuses on easy usability for early-stage makers and students. AutoDesk has just released an iPad edition of TinkerCad.  I especially appreciate that you can now preview your work using augmented reality. It works really well with Apple’s ARKit technology.

If you’re comfortable with the existing TinkerCad experience, you’ll feel right at home using the IPad app version.  My gut says that this iOS app re-uses the existing browser-based screens. I personally will continue to leverage a PC to produce content. I do believe the touch interfaces for the IPad work fine, but I feel more productive using a mouse and keyboard.  I did share the TinkerCad app with a five-year-old to see if they could produce any content. I would say that the student did pretty well. You can see a few screens below.  

Do you want to build a snow man?

From the start, TinkerCad has offered a variety of interesting formats for exploring work.  You can export 3D models to paid 3D printing services. This is helpful for people who don’t own a 3D printer.  You can export your 3D content to standard 3D modeling formats for printing or 3D game design. You can even export your designs to Minecraft and Legos.  The AR viewer experience works very simply. At the top of the design window, the user selects the “AR viewer” button. The app switches to a camera view where the user can place their 3D content on a table or floor.  The user can navigate their view around the 3D model by simply moving around. The app also enables the user to translate, scale and rotate the object as needed. I also like that you can take pictures of your work to share with friends!

From a few quick experiments, it looks like the software tries to keep the relative scale of the object as defined in TinkerCad.  Given Autodesk created the software, I expected that AR content would match the scale of the model 1 to 1. To test this assumption, I created a unit cube of 1x1x1 meter.   When I measured the 3D model using a ruler, the output was not exactly a meter. For most users, this isn’t a big deal. TinkerCad focuses on creating small objects.  (not room-scale furniture) It’s just something to keep in mind. 

Unfortunately, the TinkerCad IPad app needs an active Internet connection too.

All in all.  I’m excited about the IPad format of TinkerCad and the AR feature.  Hope you find it useful too!

Related Content

Posted in technology | Leave a comment

3 Tutorials on 3D Modeling with TinkerCAD.COM


In the past, the world of 3D modeling belonged to engineers and designers.   Most 3D modeling software was hard to use and expensive.   The folks at have created a delightful web based tool for artists, students, and creative technology professionals .   With this tool, you can start learning the basics of 3D modeling and print your creations using a personal 3D printer or a 3D printing service like .

In our local maker community, I have started to receive requests for classes/tutorials on getting started with 3D printing and 3D modeling.   I have collected three helpful and brief tutorials to help you get started with .  As I was reviewing this tool, I found the user experience and education materials very engaging and simple.

Benefits of

  • TinkerCAD is free.  In order to use the tool, you need to use a WebGL enabled browser like Google Chrome or FireFox.
  • TinkerCAD has a feature to enable you to export your 3D models to Minecraft.   I haven’t tested this yet.   I, however, am looking forward to playing with this.
  • If you don’t have a 3D printer, you will appreciate that TinkerCAD integrates with services like and enabling you to 3D print and promote your work.
  •  TinkerCAD has created a cool community of model builders and public models.    I was able to quickly find a Dr. Who “Tardis” and modify the model. (see picture above.)  The community feature enables you to learn how to construct complicated models by reviewing work from others.

TinkerCad is one solid option for getting started in 3D modeling.   If you’re looking for other options, check out this link from .

I hope you find these video tutorials helpful.

Abstract: This is a tutorial video that teaches you the basic functions of Tinkercad, a 3D design tool that runs in your browser.

Abstract: This is a tutorial video of how to import vectors into Tinkercad. Import .svg files to turn your 2D designs into 3D. Bring files from vector programs like Illustrator, Inkscape, etc.

Abstract: Teacher Liz Arum gives a demo of Tinkercad, a new browser-based 3D modeling environment. We then talk to her about some of the basics of 3D modeling. This is an archived clip from Make: Live, which was originally broadcasted on 9/28/11. Go to for information about the show, chat.

Please note that this last video is a few years old.   I, however, wanted to include it since Liz Arum provides an important educational perspective to the TinkerCAD tool.   Liz uses this tool to teach physical fabrication and computing to her middle schoolers.   (Very cool!)   Since this video was created, the TinkerCAD user interface and features have been improved.   

If you end up making something cool in TinkerCAD, share a link to your creations below!!

Posts From InspiredToEducate.NET

Posted in technology | Leave a comment

Build a Space Shooter with Phaser3 and JavaScript(Tutorial3)

In this blog post series, I want to unpack building a 2D shooter game using Phaser3.js. Phaser3 provides a robust and fast game framework for early-stage JavaScript developers. In this tutorial, we will work to add aliens to the scene, give them some basic movement, and blowing them up. Sound like a plan? Here’s what we will build.

Please make sure to check out Tutorial 1 to get started with this project. You’ll need to build upon the code and ideas from the previous blog posts. (post 1, post 2)

To see the code in a completed state, feel free to visit this link. Let’s start by making some modifications to the scene class to preload an enemy sprite graphic. The PNG file will represent how the alien should be drawn to screen. We associate the name ‘enemy1’ with our PNG file.

class Scene1 extends Phaser.Scene {

    preload() {
        this.load.image('ship', 'assets/SpaceShooterRedux/PNG/playerShip1_orange.png');
        this.load.image('laser', 'assets/SpaceShooterRedux/PNG/Lasers/laserBlue01.png');
        this.load.image('enemy1', 'assets/SpaceShooterRedux/PNG/Enemies/enemyBlack3.png');


In the Phaser game framework, we associate moving game entities with sprites. To define a sprite, we build out an enemy class. When we put a sprite into our scene(as the class is constructed), a special function will be called the constructor. We’ve designed the constructor so that we can set the enemy location at a point (x,y) coordinate and connect it to the scene.

In the constructor, we accomplish the following work. We set the texture of the sprite to ‘enemy1’ and set it the position. Next, we connect this sprite to the physics engine of the scene. We’ll use the physics engine to detect when the enemy gets hit by lasers. We also initialize the deltaX factor to 3. It’s not super exciting, but the aliens will shiver from side to side randomly. This, however, is good enough for a simple lesson. After to complete this tutorial, I encourage you to go crazy with making the aliens move any way you want!

    class Enemy1 extends Phaser.GameObjects.Sprite {

    constructor(scene, x, y) {
        super(scene, x, y);
        this.setPosition(x, y);;

        this.gameObject = this;
        this.deltaX = 3;


Adding movement to aliens

So, we’re ready to start moving some aliens. Let’s do this! We’re going to write three simple methods on the Enemy1 class. Following the pattern of all Photon sprites, the update method will be called every game tick. It’s your job to tell the sprite how to move. Keep in mind, we’re going to do a simple “side to side” behavior randomly. In the update method, we start by picking a number between 0 and 3. If k is 2, we make the sprite move left using the “this.moveLeft()” function. Otherwise, we make it move to the right using “this.moveRight()”

    update() {
        let k = Math.random() * 4;
        k = Math.round(k);

        if (k == 2) {
        else if (k == 3) {

    moveLeft() {
        if (this.x > 0) {
            this.x -= this.deltaX;

    moveRight() {
        if (this.x < SCREEN_WIDTH) {
            this.x += this.deltaX;

Make lots of aliens

At this point, you want to see lots of moving aliens. Let’s add the code to the scene class to construct the aliens. In the scene class, the “create” method will be used to construct all objects. This includes our ship and the aliens. Firstly, we create a special collection object called enemies. We’ll use this collection to track the enemies with the physics system. (this.enemies = On the next line, we create an Array so that we have a simple way to track our enemies that need updating. In the loop, we’re creating 21 aliens, placing them in random locations, and adding them to our collections. (enemies and enemies2)

class Scene1 extends Phaser.Scene {


    create() {
        this.cursors = this.input.keyboard.createCursorKeys();
        this.myShip = new Ship(this, 400, 500);

        // ======= adding enemies ============
        this.enemies =;
        this.enemies2 = new Array();

        let k = 0;
        for (k = 0; k < 21; k++) {
            let x = Math.random() * 800;
            let y = Math.random() * 400;

            this.enemy = new Enemy1(this, x, y);

In order to invoke our update code for all enemies, we need to make one more edit to the scene class. In the “update” method, we need to add a loop to call “update” on all enemies

    update() {
        // there's more code related to the ship here 

        let j = 0;
        for (j = 0; j < this.enemies2.length; j++) {
            let enemy = this.enemies2[j];

At this point, we should see our aliens wiggling on the screen. And there’s much rejoicing!

Aliens go boom! Let’s do collision detection

In the laser class that we built in the last post, we need to make a few edits. Check out the code below. In the constructor of the ShipLaser, we set the texture, position, speed, and store the parent scene in “this.scene.” We connect the laser instance to the physics engine using “” In the next line, we tell the game framework to check for collisions between this laser and the enemies. When a collision happens, we handle the hit using the “handleHit” function.

    class ShipLaser extends Phaser.GameObjects.Sprite {

    constructor(scene, x, y) {
        super(scene, x, y);
        this.setPosition(x, y);
        this.speed = 10;
        this.scene = scene;

        // check out new code below ...;
        scene.physics.add.collider(this, scene.enemies, this.handleHit, null, this);

In the handle hit function, you’ll notice that the laserSprite and enemySprite have been passed as parameters to the method. In Phaser, you can receive these references so that we can define behaviors associated with both sprites. In this case, we’re just going to destroy the objects.

    handleHit(laserSprite, enemySprite) {

Hope this has been helpful. Please let me know if you have any questions.

Space shooter graphic
Posted in game based learning, games, open source, programming, stem | Leave a comment