Create Async-JAM sessions with your music friends at BandLab.com

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 BandLab.com 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 BandLab.com 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 BandLab.com makes it easy. I hope you consider checking out BandLab.com to explore music making in your family too!

Kid Techno Samples

Key benefits of BandLab.com

  • It just works in the browser: BandLab.com 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 BandLab.com 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 BandLab.com can interface with audio recording and MIDI devices. Putting geek stuff aside, I can use BandLab.com to record small keyboard and audio fragments completely in the browser. Crazy!!
  • For R&B and techno oriented creatives, BandLab.com 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 BandLab.com, 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

BandLab.com 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.

Keyboard
Are you curious about BandLab.com, 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 BandLab.com.

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 Instructables.com. 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.

lamp
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 YourClassRoomHelper.com 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: TinkerCad.com.   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




Tinker CAD TARDIS

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 TinkerCAD.com 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 Shapeways.com .

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 TinkerCAD.com .  As I was reviewing this tool, I found the user experience and education materials very engaging and simple.

Benefits of TinkerCad.com:

  • 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 Shapeways.com and Thingaverse.com 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 http://www.InventToLearn.com .

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 http://makezine.com/?live/? 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.


1
2
3
4
5
6
7
8
9
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!


1
2
3
4
5
6
7
8
9
10
11
12
13
    class Enemy1 extends Phaser.GameObjects.Sprite {

    constructor(scene, x, y) {
        super(scene, x, y);
        this.setTexture('enemy1');
        this.setPosition(x, y);
        scene.physics.world.enable(this);

        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()”


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    update() {
        let k = Math.random() * 4;
        k = Math.round(k);

        if (k == 2) {
            this.moveLeft();
        }
        else if (k == 3) {
            this.moveRight();
        }
    }

    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 = this.physics.add.group()) 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)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Scene1 extends Phaser.Scene {

    ...

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

        // ======= adding enemies ============
        this.enemies = this.physics.add.group();
        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);
            this.add.existing(this.enemy);
            this.enemies.add(this.enemy);
            this.enemies2.push(this.enemy);
        }
    }

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


1
2
3
4
5
6
7
8
9
    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];
            enemy.update();
        }
    }

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 “scene.physics.world.enable.” 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.


1
2
3
4
5
6
7
8
9
10
11
12
13
    class ShipLaser extends Phaser.GameObjects.Sprite {

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

        // check out new code below ...
        scene.physics.world.enable(this);
        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.


1
2
3
4
    handleHit(laserSprite, enemySprite) {
        enemySprite.destroy(true);
        laserSprite.destroy(true);
    }

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

Build a Space Shooter with Phaser3 and JavaScript(Tutorial2)

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 post, we’ll focus on enabling our ship to fire lasers.

Space shooter

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 post.

Let’s start by creating a game object to represent a laser. (see code below) We’ll model this object using the ShipLaser class that extends Phaser.GameObjects.Sprite. In general, a class connects data stuff and related functions(or methods) in a nice little package. In this case, the laser has data properties like location(x,y), a texture, speed, and a scene. This code snippet has two methods: constructor and preUpdate.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class ShipLaser extends Phaser.GameObjects.Sprite {

    constructor(scene, x, y) {
        super(scene, x, y);
        this.setTexture('laser');
        this.setPosition(x, y);
        this.speed = 10;
        this.scene = scene;
        scene.physics.world.enable(this);
    }

    preUpdate(time, delta) {
        if(this.active == false){return;}
        super.preUpdate(time, delta);
        this.y -= this.speed;
    }
}

The constructor method enables us to set up the ShipLaser class. We’ll initialize properties like texture, position, speed, and physics.
In Phaser 3, the preUpdate method of a sprite enables us to describe behavior or movement of the sprite. The framework requires that we call “super.preUpdate.” On the next line, we move the sprite upward on the screen by subtracting from the y property.

Let’s make some edits to our Ship class. We’re going to store a reference of the scene. To describe how fast the ship moves over the game space, we initial deltaX and deltaY to 5. In this current design, we’re going to store the list of lasers from the ship in an array. We also need to store some information related to when the last shot was executed.


1
2
3
4
5
6
7
8
9
10
11
12
class Ship extends Phaser.GameObjects.Sprite  {

    constructor(scene, x , y) {
        // ... other setup stuff

        this.scene = scene;
        this.deltaX = 5;
        this.deltaY = 5;
        this.lasers = new Array();
        this.lastShot = new Date().getTime();
        this.shotFrequency = 250;
    }

It’s time to shoot stuff! Let’s define a method to fireLasers from the ship. When my kids play this game, they just keep their fingers down on the space bar the whole time. 🙂 By design, we want to control how often the laser gets shot. We start by checking the current time. The quantity of currentTime – lastShot returns the number of milliseconds since the last shot. If this value is greater than 250, we allow the ship to fire.

When we fire, we create an instance of the ShipLaser we defined. Notice that the ship laser will be created with the same scene and location as the ship. Once we have an instance, we add the laser instance to the scene. We finish up by storing the laser in our lasers list and updating the “lastShot” time.


1
2
3
4
5
6
7
8
9
    fireLasers() {
        var currentTime = new Date().getTime();
        if (currentTime - this.lastShot > this.shotFrequency) {
            var shipLaser = new ShipLaser(this.scene, this.x, this.y);
            this.scene.add.existing(shipLaser);
            this.lasers.push(shipLaser);
            this.lastShot = currentTime;
        }
    }

We have to make one more edit to our Ship class to make the lasers function properly. The “preUpdate” javascript function enables us to describe behavior associated with our sprite. The game framework calls this function on every game tick. In the following code snippet, we’re going to remove laser objects that have reached the top of the screen. We start by building an array of lasers to remove from the scene. In the first loop, we search for lasers that have reached the top of the screen. (i.e. lasers[i].y <= 0) In the second loop, we remove the laser objects from the ship and destroy them. If you create game objects, it’s important to clean them up if you’re not using them.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    preUpdate(time, delta) {
        super.preUpdate(time, delta);

        var i = 0;
        var j = 0;
        var lasersToRemove = new Array();

        for (i = 0; i &lt; this.lasers.length; i++) {
            if (this.lasers[i].y &lt;= 0) {
                lasersToRemove.push(this.lasers[i]);
            }
        }

        for (j = 0; j &lt; lasersToRemove.length; j++) {
            var laserIndex = this.lasers.indexOf(lasersToRemove[j]);
            this.lasers.splice(laserIndex, 1);
            lasersToRemove[j].destroy();
        }
    }

In the scene1 class, we need to add one more detail. The laser should fire when the user presses the space bar. Let’s edit the update method to fire the lasers.


1
2
3
4
5
6
7
```javascript
    update() {
        if (this.cursors.space.isDown) {
            this.myShip.fireLasers();
        }
       
```

If you’re interested in reviewing the completed code tutorial, feel free to visit my GitHub tutorial link.

In the next post, we’ll add some alien targets for our game. We’ll see you next time!

Space shooter graphic

If you’re really excited to learn more, I have found the learning from the examples very helpful.

Phaser Labs Examples

JavaScript Posts from InspiredToEducate.NET



Posted in technology | Leave a comment

Combating Summertime Boredom

As a college professor I have the option to take off about 8 weeks during the summer. I look forward every year to spending this time with my kiddos. During the school year we are constantly running from one activity to the next. It is so nice to be able to relax and have some space in our schedule. That said, I get bored easily. By this point in the summer my kiddos are really starting to pick at each other. This is often a recipe for disaster. In this post I want to share some of my strategies to combat summer boredom and to keep those young minds nimble.

If it were up to my kids, they would watch TV/play video games all day long. Honestly, that would make my life so easy! I could get so much done while they were complete zombies. However, I don’t want to melt their little brains so we try to limit the screen time in our house to two hours per day. The american average is greater than 7 hours.

Activity Books

A couple of the workbooks we use.

When I get up in the morning I need time to drink my coffee and get myself psyched up for the day. The kids often get up and immediately want to turn on the devices. One way that I manage to limit screen time is that I require my kids to eat breakfast, get dressed and spend sometime completing activities in summer bridge workbooks before they turn anything on. These can be found at your local bookstore or on Amazon. There are lots of options. I have one from Kumon, another from Sylvan Learning Centers and one from Brain Quest. I picked ones that corresponded to grade level and offered a variety of activities.

Visit the Local Library
I must admit, I do not use the library much at all during the school year. It is just too much for me to keep track of all the books checked out and stay on top of due dates. In the summer, on the other hand, I make a point to visit the library at least once a week. Most public libraries offer free summer activities for kids and my kids love to bring home new books to read. The variety helps us to keep reading all through the summer! One way to stay on top of the chaos is to have a designated place in the house for the library books. We have a crate where we keep all of our books so it is easy to grab on the way out of the house on library day.

Our library crate.

Play to Your Strengths!
I am a microbiologist and I teach general biology classes. I purchased a small digital microscope that we have been playing with this summer, exploring stuff that we can find in/around our homes. I have also adapted some of the labs that I use with my college kids for home use. I’ll save the details of those experiments for a later blog post, but here are some of the things we found in the backyard yesterday.

Check out the Local Attractions
We are very fortunate to live in Central Florida. We have lots of things that we can do outside the house. Some are free and others are incredibly expensive (I’m looking at you Mickey). We have memberships to the local zoo and to the science center. We also try to visit some of the lesser known attractions. Last summer we went to Gatorland. That place is so awesome! It is a look into what we would call “Old Florida” complete with gator wrestling!

Gator wrestling

Documentaries/Online Learning Programs
21st century kids are constantly exposed to electronic media. I try to be intentional about the type of media that my kids consume. Sometimes I let them choose a cartoon or show from the offerings on Netflix or Amazon Prime Video, but there is so much crap out there! I prefer that they choose shows/activities that are learning centered. For my pre-Kindergartner I like StoryBots (Netflix). She has learned so much from it! The older kids will even watch it wither her.

My fifth grader loves Jonathan Bird. He makes documentaries about sea life that are freely available through his website or through YouTube. Here is our favorite episode:

We also subscribe to the Smithsonian Channel and there are tons of great documentaries available for streaming through Netflix, Amazon and YouTube.

For learning games my kids enjoy the Prodigy math game and learning to program using Scratch ( https://scratch.mit.edu/ )

What sort of activities do you do in the summertime? I would love to know!

-Sarah

Posted in technology | Leave a comment

Build a Space Shooter with Phaser3 and JavaScript(Tutorial1)

Like many computer enthusiasts, I grew up playing video games on the classic Nintendo entertainment system. Some of my favorite games included Super Mario brothers, Legend of Zelda, Tetris, and Star Force. It’s been fun to share these game classics with my kids. They still find them fun. 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.

From exploring the options in 2D game creation using Javascript, Phaser has grown an impressive community of game makers. Here are a few game samples that you would want to explore.

Space shooter assets from www.kenney.nl

In this post series, I wanted to collect a few resources, tools, and links to help you get started building a space shooter game with Phaser 3. We’ll be drawing from the inspiration of classic games like Space Invaders.

In terms of JavaScript writing style, we’re going to keep the code samples as simple as possible to express core concepts. If you need to get started with JavaScript, I recommend checking out the free sources at CodeAcademy to start exploring the language. We’ll be drawing inspiration from classic games like Galaga and Star Force. Even though I’m trying to unpack these ideas for early stage JavaScript coders, I also want to provide examples that leverage ES6 coding structures. The Phaser3 documentation does not focus on this style of code organization. In general, I want to explore programming concepts that provide nice encapsulation and readability. We also want to make sure we can extend these coding patterns well.

The game we’re building may feel similar to this work here:
http://users.aber.ac.uk/eds/CS252_games/mwg2/JSGame/

In this tutorial, we want to encourage you to setup your work environment with Visual Studio code. You can also inspect the tutorial code in the following glitch sample.

https://glitch.com/edit/#!/awg-tutorial?path=shooter.js:1:0

Setting up Visual Studio Code

In this series, I recommend setting up Visual Studio Code on your computer. It’s a robust tool for web development and works well for JavaScript projects. You can find instructions to install VS Code using this link. I also recommend using the Visual Studio Code Live server extension to make it easier to hot re-load your code changes. Please refer to the following video for details.

Downloading some boilerplate code

To save some time, I have organized a ZIP file with a collection of code and graphics that you can leverage in building your own shooter game. You’re encouraged to play and build with these assets, sounds, and code samples to elaborate on your own game. For this first exercise, we just want to get a ship displayed to the screen and move it around using arrow keys.

  • Download the boilerplate code from here.
  • Extract the ZIP file to a location on your computer. We’ll call this your working directory. For me, I might store my files in “c:\alienWarGame-tutorial1.”

Let’s explore the contents of this boilerplate code

  • shooter.js: This JavaScript file will contain our game objects and behavior code.
  • shooter.html: This HTML file provides a home for our JavaScript game code. (see the code below) Please note that we’re downloading phaser.js (version 3.11) from a content delivery network. In the body of the HTML file, we import our shooter.js. Remember to install “Live server” extension for Visual Studio. You will be able to right click on the code HTML file and select “open with Live server.” This will load the file on a small HTTP server on your computer. All phaser games need to be hosted on a web server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
&lt;!doctype html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8" />
    &lt;title>Space Shooter Tutorial 1&lt;/title>
    &lt;script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js">&lt;/script>    
    &lt;style type="text/css">
        body {
            margin: 0;
        }
    &lt;/style>
&lt;/head>
&lt;body>
    &lt;script src="shooter.js">&lt;/script>    
&lt;/body>
&lt;/html>

Breaking Down Shooter.js

All Phaser games start with a little bit of configuration. In this “config” object below, we establish a screen size of 800 pixels by 600 pixels. This will be our drawing surface for the game. To help detect if objects bump into each other, we will be leveraging the ‘arcade’ physics engine included in Phaser3.


1
2
3
4
5
6
7
8
9
10
var SCREEN_WIDTH = 800;
var SCREEN_HEIGHT = 600;
var config = {
    type: Phaser.AUTO,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    physics: {
        default: 'arcade'
    }
};

Ok. Let’s build our Space ship player object. In Phaser 3, they have been working to improve the framework to leverage modern JavaScript features like Es6 classes. The class will help us store the properties of the ship. Properties will include stuff like the location of the ship on the screen, object state, and texture. The class will also include several methods for moving the ship around. In the constructor method, we accept a scene object and location on the screen. (x,y). The call to “super” and “setPosition” helps associate the sprite with the parent scene and location. We call “setTexture” using the parameter of ‘ship’ to associate the ship graphic with the sprite. Finally, we set some variables(deltaX, deltaY) to configure how much the ship will move when we press keys.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class Ship extends Phaser.GameObjects.Sprite  {

    constructor(scene, x , y) {
        super(scene, x, y);
        this.setTexture('ship');
        this.setPosition(x, y);
        this.deltaX = 5;
        this.deltaY = 5;
    }

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

    moveRight() {
        if (this.x &lt; SCREEN_WIDTH) {
            this.x += this.deltaX;
        }
    }

    moveUp() {
        if (this.y > 0) {
            this.y -= this.deltaY;
        }
    }

    moveDown() {

        if (this.y &lt; SCREEN_HEIGHT) {
            this.y += this.deltaY;
        }
    }

    preUpdate(time, delta) {
        super.preUpdate(time, delta);
    }
}

In the following method called ‘moveLeft’, we implement the math to move the sprite to the left. Since we’re moving left, we subtract 5 pixels from the current x position. We only execute this code if x is greater than zero. Most of the other movement methods operate in a similar manner.


1
2
3
4
5
    moveLeft() {
        if (this.x > 0) {
            this.x -= this.deltaX;
        }
    }

Let’s make a scene!

In the following class, we have to establish a Phaser scene object. It has a few simple tasks. In the “preload” method, need we load the ship sprite graphic from our assets folder.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class Scene1 extends Phaser.Scene {

    constructor(config) {
        super(config);
    }

    preload() {
        this.load.image('ship', 'assets/SpaceShooterRedux/PNG/playerShip1_orange.png');
    }

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

    update() {
        if (this.cursors.left.isDown) {
            this.myShip.moveLeft();
        }

        if (this.cursors.right.isDown) {
            this.myShip.moveRight();
        }

        if (this.cursors.up.isDown) {
            this.myShip.moveUp();
        }

        if (this.cursors.down.isDown) {
            this.myShip.moveDown();
        }

        if (this.cursors.space.isDown) {
            // shooting guns goes here
        }
    }
}

The create method has does additional setup for our scene. We establish a property called cursors that will be used for detecting keyboard input like the arrow keys. We also create a ship instance at (400,500) and add it to the scene.


1
2
3
4
5
    create() {
        this.cursors = this.input.keyboard.createCursorKeys();
        this.myShip = new Ship(this, 400, 500);
        this.add.existing(this.myShip);
    }

We now can start moving the ship around using the update method. The if statements in update help us detect the various arrow keys. We call the appropriate method on the ship. In other words, if we press the LEFT button, we should call this.myShip.moveLeft().


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    update() {
        if (this.cursors.left.isDown) {
            this.myShip.moveLeft();
        }

        if (this.cursors.right.isDown) {
            this.myShip.moveRight();
        }

        if (this.cursors.up.isDown) {
            this.myShip.moveUp();
        }

        if (this.cursors.down.isDown) {
            this.myShip.moveDown();
        }

        if (this.cursors.space.isDown) {
            // shooting guns goes here
        }
    }

Here’s the final step, we associate our game configuration information to a new game. We then add our scene.


1
2
var game = new Phaser.Game(config);
game.scene.add('scene1', Scene1, true, { x: 400, y: 300 });

If you’re really excited to learn more, I have found the learning from the examples very helpful.

Phaser Labs Examples

Posted in technology | Leave a comment

Recording Music and Audio with the Kids using Audacity

As a young person, my mom and dad invested a great deal in my growth as a musician. Looking back, I’m thankful that I’ve been able to use my gift of music to foster various ministries in our church. My wife and I love making music together by singing and playing the guitar. It’s honestly one of my favorite ways to re-charge and relax.

I wanted to give a shout out to a free tool that I have enjoyed using for basic music recording and talks. Audacity, a free and open source music recording software, has the ability to do a multi-track recording and has lots of basic effects. Audacity runs on Linux, Mac, and Windows. In contrast with other audio recording tools, I appreciate the simplicity of the user experience.

As a Dad, I’m excited to share the gift of music with my kids. My little girl has become very interested in singing lately. To help motivate her, I have started recording some of our jam sessions with Audacity. She loves showing off our work to mom. When my wife and I record music, I do use some professional mic equipment. For the recording sessions that I’m doing with my daughter, the laptop mic works just fine.

If you’re interested in starting a podcast, you might consider starting with Audacity. You can always advance to a more complex tool later. I found a comprehensive post on starting podcasts here. I do like their recommendation for purchasing a higher quality mic. In my experience, I’ve never had any issues with Audacity with advanced recording gear.

Here’s some of the key features that I appreciate from Audacity

  1. Multi-track recording: Let’s say that you want to record many singers or instrumentalists individually, Audacity enables you to layer individual tracks for each recording session. This enables you to edit, mute, solo and apply effects on an individual basis.
  2. Metronome: For some music recording situations, it’s helpful to have a metronome to help you align your tracks across sessions. You can add a metronome track by clicking “Generate > Rhythm track.” Audacity will enable you to set the tempo and generate a click track.
  3. Export to major audio formats: Out of the box, you can export your work to most popular audio formats like Wav, Ogg, and mp3. It’s pretty easy to share your work on services like SoundCloud.
  4. Effects: Audacity has many helpful effects for the entry-level sound engineer. You can amplify sound, apply compression, and apply reverb. When I’m playing with the kids in a silly manner, we sometimes enjoy becoming chipmunks by increasing the speed of tracks or adding lots of echoes.
  5. Editing audio: Audacity has a basic set of tools for editing audio. Once you’ve installed Audacity, you might check out David Taylor’s complete guide to Audacity. He provides a detailed introduction to the tool and many advanced features.

In researching this post, I found a pretty cool Edutopia article talking about the benefits of audio recording for writing. I like the idea of using an audio recording as a brainstorming tool. I also like the idea of reflecting on work by recording it and playing it back. I might try this idea as I’m teaching the kids piano.

Related Posts

Posted in creativity, music, open source, parenting, stem, technology | Leave a comment

Inspiring Curiosity

We initially started this blog in 2012. I was a brand new college professor and this platform became an opportunity for my husband and I to share our thoughts and ideas on education and technology. We took the conversations that we had at the dinner table and put them into this public forum. It was a project that we could share. The last time I posted was in 2014, I had just finished my first year in a tenure track position and was getting ready for the arrival of our third baby. It’s true what they say, three is the hardest number of kids. The long and the short of it is that life has been incredibly busy over the last five years. While Michael has continued to maintain the blog, I have struggled with juggling parenting and full time teaching. Throw in an interstate move, a new job, and some extra teaching jobs on the side, and I just did not have the bandwidth to write.

Things are beginning to settle down a bit (I hope) and I feel the need to start contributing again. Two years ago I started my current position at an awesome institution dedicated to high quality education. They invest heavily in faculty development and provide plenty of opportunities for me to hone my craft as a teacher. I have learned so much and I want to share those ideas with others, so here I am, back in the blogosphere.

Michael got super excited the other day when I told him that I wanted to start writing again. For him, this blog has been a labor of love. We sat down over breakfast, before the kids got up, and talked about the directions we wanted to take things. I am a biology professor and he is a computer programmer. We both naturally lean towards topics in STEM, but we don’t want to limit ourselves to that. We tossed around some ideas, and came up with our new catch phrase:

Inspiring Curiosity through Creative Projects and Exploration

As both a teacher and a parent, it is my hope that I can inspire people to get excited about learning. One of my biggest frustrations is when I encounter a student that sees my class as an obligation for getting a degree and not an opportunity to learn new things. I want to tap in to people’s natural curiosity.  With curiosity comes joy in learning and discovery. I want to help people to find awe and wonder in the world around them. I want to use this blog and social media channels to this end. In this world of fear, suspicion and tribalism, I want to encourage others to think outside of themselves and open themselves up to new ideas and perspectives.

I am not sure where this all will lead, but I will leave you with this video that encompasses what I am hoping to achieve. It is of a student seeing Euglena (a microscopic, single celled creature) under the microscope for the first time. The first voice you will hear will be mine, followed by my student’s. I love that I captured this moment, because you can just hear her joy in her laughter. It is more moments like these that I seek.

Posted in technology | Leave a comment