This week’s E-Learning Heroes Challenge is Using Isometric Shapes.
Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. All three axes appear equally foreshortened and the angle between any two of them is 120 degrees. Simple, eh?
If you’ve ever built a Lego model you will be familiar with this trick of perspective.
This week's @ELHChallenge is 𝗨𝘀𝗶𝗻𝗴 𝗜𝘀𝗼𝗺𝗲𝘁𝗿𝗶𝗰 𝗦𝗵𝗮𝗽𝗲𝘀.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) June 30, 2023
Meet Q-BEE. He's a bit square, but he knows his way around the Data Center and is happy to be your guide.https://t.co/uWXT8neW24 pic.twitter.com/O07Qdp3jX1
I’ve used isometric shapes in my designs before, such as this Sim City-inspired course I created way back in 2020.
So for this challenge, I decided to use isometric shapes in a different way – not only to create a sense of depth and perspective – but also to create an interactive character.
It's hip to be square
As you know, I’m fond of using robots and other types of anthropomorphic characters in e-learning, to act as a guide, instructor or narrator.
Designing non-human characters to engage learners can be tricky, but it’s incredibly rewarding when you get it right.
Most ‘off-the-shelf’ isometric images, like those on Freepik, tend to be angular and blocky and based around cuboids.
This got me thinking: Could I make an engaging, friendly, robotic character that was based on a cube?
I opened Microsoft Paint 3D and got to work.
MS Paint 3D is not as sophisticated as programs like Blender, but it’s a great starting point if you have never worked with 3D objects before.
However, there is no ‘isometric’ setting in MS Paint 3D, which means you need to manually set the perspective yourself.
Getting animated
The user interface I have created for this demo uses five sides of Q-BEE’s cube body, although we can only see three sides of Q-BEE at any one time.
The ‘select’ motion is inspired by a Rubik’s Cube and is achieved through a series of incremental, closely timed state changes.
I added a selection of CC0 sound effects from Freesound.org to complement the animation.
In MS Paint 3D, I created 21 different poses and reactions for Q-BEE and exported each one as a PNG image.
The animation is triggered when the variable Cube_Position changes.
The animation is triggered when the variable Cube_Position changes.
The animation is triggered when the variable Cube_Position changes.
Welcome to the Data Center
Q-BEE’s transformation from a faceless cube to friendly robot is a whimsical touch that I hope makes the interaction more engaging. Q-BEE switches from an impassive user interface to your enthusiastic guide, literally escorting you to each section of the course.
Check out my demo below.
Q-BEE’s transformation from a faceless cube to friendly robot is a whimsical touch that I hope makes the interaction more engaging. Q-BEE switches from an impassive user interface to your enthusiastic guide, literally escorting you to each section of the course.
This week's @ELHChallenge is 𝗨𝘀𝗶𝗻𝗴 𝗜𝘀𝗼𝗺𝗲𝘁𝗿𝗶𝗰 𝗦𝗵𝗮𝗽𝗲𝘀.
— ᴊ ᴏ ɴ ᴀ ᴛ ʜ ᴀ ɴ_ʜ ɪ ʟ ʟ (@DevByPowerPoint) June 30, 2023
Meet Q-BEE. He's a bit square, but he knows his way around the Data Center and is happy to be your guide.https://t.co/uWXT8neW24 pic.twitter.com/O07Qdp3jX1