Curious about building 2D games with web skills? In this post, we’ll explore tools and patterns to use PhaserJs and JavaScript to make engaging 2D games. We’ll cover tools to make experiences with our favorite language: TypeScript.
Happy New Year friends! On this beautiful New Year’s day, I wanted to reflect upon some lessons from 2021 and learning opportunities for 2022. In 2022, we will continue to focus on ideas that help students love learning through exploration, making, and tinkering. As parents, we dream about helping our kids become the best version of themselves. It’s been fun to see how “maker education” and project based learning at home has encouraged growth in families.
At this point, I would like to give a huge shout out to our teachers and professors who have served through this pandemic. We are so very thankful for the ways that you’ve invested in our kids and helped them to grow. They have helped our family adapt to learning from home for a significant portion of the year. Our kids did return to a traditional public school setting in the fall. We’re thankful for all the efforts of the staff and teachers to mitigate the concerns of COVID while fostering a positive learning environment.
At the Rosario home, I have tried to pay attention to hot spots of motivation and curiosity. If the kids start tinkering on the piano trying to figure out the Avenger’s theme, I’ve tried to make myself more available to encourage their musical exploration. My kids still enjoy creating their own music with Bandlab. We’ve also encouraged a good amount of traditional art with the kids. With the kid’s interest in Pokemon and Anime, they’ve become curious about drawing in this style. It’s been amazing to see the lessons they’ve learned through various drawing teachers on YouTube. Given that dad works as a software developer, it’s wonderful to see the kids engage in coding and building software. In future blog posts, we look forward to unpacking some of our more fruitful Scratch and Unity 3d tools. If your middle schooler or teen shows interest in video game development, the team at Unity 3D have continued to evolve their learning platform to be relevant to student creators. As a big kid myself, I’m still glad that our family enjoys Lego building together.
Virtual Reality & Augmented Reality: In 2022, I look forward to exploring apps, trends, and tools that empower students to create XR experiences. I still continue to love the XR platform used for teaching and learning. It’s been fun to see the kids explore the International Space station in VR. In yet another experience, the Obama family unpacks the history of the white house in VR. I love that platforms like CoSpaces have started to empower young makers to build VR experiences with block coding. ( cospaces.io/edu/ )
Robots: My oldest son has expressed tons of interest in deep sea exploration. I have a feeling I’m going to start learning about playful games and simulation experiences to help him explore this. He’s found a very cool game called Subnautica that explores some of these ideas. In Subnautica, you are trying to survive an alien deep sea world using your resourcefulness and exploration skills. I do think that sea exploration using robots is really interesting. We look forward to explore trends and tools related to DIY IoT and robotics.
We are very thankful for our readers. Please know we pray for the very best for you and your family in 2022! If you have some cool projects that you’re doing with your kids, please drop us a line. We’d love to hear from you.
Hello! Hope that you and your family are having a great summer! Like many families, we’ve tried to find fun and constructive ways to engage the kids through the summer while they’re out of school. One of my friends asked me if I had any fun maker activities that involved coding. In this post, I wanted to give a shout out to a few things that have engaged my family.
One of my kids has become very motivated through the art of dance. With that in mind, I introduced her to this fun “hour of code” lesson from Code.org. In this lesson, makers become connected to block based programming while directing cartoon dancers. In the early lessons, students learn to trigger dance moves based on keyboard events. I find that students become very engaged with good music. These lessons enable students to design their own dance party to various popular songs. Check out Dance Party 2019 from Code.org. Please know that you can find many more engaging hour of code lessons from Code.org with your kid’s favorite characters. They’ve currated lessons that involve Minecraft, Frozen, Lego, and more.
In the maker education community, Scratch has become a cornerstone tool for teaching students to code. The gallery of Scratch.mit.edu enables you to review a broad range of stories and games built by the community. Scratch offers students a general purpose platform for creating games and interactive experiences. Google has put together a pretty cool set of lessons to guide students through their initial interactions with Scratch. Lessons involve experiences with art, digital story telling, and game design. My kids have enjoyed some of the game design lessons.
Check out Google CS First.
As artists and makers, we enjoy the process of creating something new from something old or familiar. The Makey Makey makes this possible. Makey makey is a USB device for your Mac or PC enabling makers of all ages to experiment with human computer interaction and inventing. The Makey makey interface enables you to design playful circuits and switches. The following videos describes the Makey makey in great detail with example experiments.
In our family, we’ve enjoyed playing with musical instrument building, controlling Minecraft with fruit, and constructing novel Nerf gun targets.
If you’re looking for project ideas with step by step instructions, you can check out the following link from Instructibles.
https://www.instructables.com/howto/makey+makey/
Related Posts
Hey web developers! Looking for a fun way to build VR experiences on the Oculus Quest? 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!
Fork the script at https://aframeexamples.glitch.me. In 2023, I feel that @ProfStemkoski has created one of the best collections of AFrame.IO templates. I like how he keeps his examples relatively small. It makes it easier to find a starting point for your project. Under the “quest-extras.html”, you’ll find an approachable example for starting with a “player movement” component that works with Oculus Quest. This example also shows an example for object interactivity via raycasting.
<!DOCTYPE html>
<html>
<head>
<title>A-Frame: Quest movement and interaction</title>
<meta name="description" content="Moving around an A-Frame scene with Quest touch controllers.">
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="js/aframe-environment-component.js"></script>
<script src="js/controller-listener.js"></script>
<script src="js/player-move.js"></script>
<script src="js/raycaster-extras.js"></script>
</head>
<body>
<script>
// if raycaster is pointing at this object, press trigger to change color
AFRAME.registerComponent("raycaster-color-change", {
init: function ()
{
this.colors = ["red", "orange", "yellow", "green", "blue", "violet"];
this.controllerData = document.querySelector("#controller-data").components["controller-listener"];
this.hoverData = this.el.components["raycaster-target"];
},
tick: function()
{
if (this.hoverData.hasFocus && this.controllerData.rightTrigger.pressed )
{
let index = Math.floor( this.colors.length * Math.random() );
let color = this.colors[index];
this.el.setAttribute("color", color);
}
if (!this.hoverData.hasFocus || this.controllerData.rightTrigger.released)
{
this.el.setAttribute("color", "#CCCCCC");
}
}
});
</script>
<a-scene environment="preset: default;" renderer="antialias: true;">
<a-assets>
<img id="gradient" src="images/gradient-fade.png" />
</a-assets>
<a-sky
color = "#000337">
</a-sky>
<!-- use a simple mesh for raycasting/navigation -->
<a-plane
width="100" height="100"
rotation="-90 0 0"
position="0 0.01 0"
visible="false"
class="groundPlane"
raycaster-target>
</a-plane>
<a-entity
id="player"
position="0 0 0"
player-move="controllerListenerId: #controller-data;
navigationMeshClass: groundPlane;">
<a-camera></a-camera>
<a-entity
id="controller-data"
controller-listener="leftControllerId: #left-controller;
rightControllerId: #right-controller;">
</a-entity>
<a-entity
id="left-controller"
oculus-touch-controls="hand: left">
</a-entity>
<!-- experiment with raycasting interval; slight performance improvement but jittery appearance in world -->
<a-entity
id="right-controller"
oculus-touch-controls="hand: right"
raycaster="objects: .raycaster-target; interval: 0;"
raycaster-extras="controllerListenerId: #controller-data;
beamImageSrc: #gradient; beamLength: 0.5;">
</a-entity>
</a-entity>
<a-torus-knot
p="2" q="3" radius="0.5" radius-tubular="0.1"
position = "-2.5 1.5 -4"
color="#CC3333"
raycaster-target>
</a-torus-knot>
<a-box
width = "2" height = "1" depth = "1"
position = "-1 0.5 -3"
rotation = "0 45 0"
color = "#FF8800"
class = ""
raycaster-target>
</a-box>
<a-sphere
radius = "1.25"
position = "0 1.25 -5"
color = "#DDBB00"
raycaster-target>
</a-sphere>
<a-cylinder
radius = "0.5" height = "1.5"
position = " 1 0.75 -3"
color = "#008800"
raycaster-target>
</a-cylinder>
<a-cone
radius-bottom = "1" radius-top = "0" height = "2"
position = "3 1 -4"
color = "#4444CC"
raycaster-target>
</a-cone>
<a-torus
radius="0.5" radius-tubular="0.1"
position = "2 3 -4"
rotation = "30 -20 0"
color="#8800FF"
raycaster-target>
</a-torus>
<!-- demo interaction boxes -->
<a-dodecahedron
radius = "0.5"
position = "-0.8 1 -2"
color = "#EEEEEE"
raycaster-target="canGrab: true;"
raycaster-color-change>
</a-dodecahedron>
<a-icosahedron
radius = "0.5"
position = "0.8 1 -2"
color = "#EEEEEE"
raycaster-target="canGrab: true;"
raycaster-color-change>
</a-icosahedron>
</a-scene>
</body>
</html>
I also admire the work of Ada Rose Canon too. You can find a very complete starter kit for AFrame.IO here:
https://aframe-xr-starterkit.glitch.me/. This example shows features like collision detection, AR integration, and more.
Let us know if you make anything cool!!
Top Stories on InspiredToEducate.NET
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 A-Frame.io, an open source project supported by Mozilla enabling you to craft VR experiences using JavaScript and a growing ecosystem of web components.
https://github.com/ngokevin/kframe
Kevin’s collection of A-Frame components and scenes.
https://webvr.donmccurdy.com/
Awesome WebXR from Don McCurdy
https://github.com/feiss/aframe-environment-component
Infinite background environments for your A-Frame VR scene in just one file.
https://github.com/aframevr/aframe-school
Interactive workshop and lessons for learning A-Frame and WebVR.
https://aframe.io/aframe-registry/
Official registry of cool AFrame stuff
https://github.com/donmccurdy/aframe-physics-system
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.
https://github.com/michaelprosario/aframe
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.
Animation
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
aframe-htmlembed-component
HTML Component for A-Frame VR that allows for interaction with HTML in VR. Demo
https://github.com/nylki/aframe-lsystem-component
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
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!!
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.
Links
– 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
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!
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.
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.
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 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.
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.
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 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:
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!
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.
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.
Got other cool project ideas? Please share a link with us and our readers! We love to hear from you.
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.
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
