Hello everyone, I’m Matt, this is the Maya Learning Channel,
and today I want to talk to you about something that’s near and dear to my heart.
Recently, I had the pleasure to work directly on Maya 2022.1
where we focused a bunch on usability and learning improvements.
I already did a video on the new Search feature,
so be sure to check that out after this if you haven’t already – I’ll leave a link to it below.
But I want to focus on another new feature where I was actually a primary designer:
Interactive Tutorials.
Interactive Tutorials are exactly what they sound like:
interactive, gamified tutorials that take place directly in Maya’s UI.
In fact, we took a lot of inspiration from video games when building these
and they work on a lot of the same principles: they utilize special menus and mini-objectives,
contain triggers to advance, and are even story-driven.
They’re a great way to learn since they eliminate the need to constantly jump
back and forth between a browser tutorial and the software, and won't go stale
the way videos do when the UI changes since they'll change along with it.
Plus, they’re straight-up just more fun!
Trust me, we did a lot of research into the content itself –
exactly which features we teach and even the order we teach them in –
to ensure as smooth and natural a learning experience as possible.
You can find the interactive tutorials in App Home’s Getting Started section.
Maya comes with the Basics one already installed…
…and you can download additional ones via these links below.
Be sure to try them out and let me know what you think in the comments below!
But the awesome doesn’t end here! Because in addition to releasing with these pre-built,
beginner-focused tutorials, we even added a way to build your own!
So, like I said before, a lot of the inspiration for these interactive tutorials
came from video games, and that even extends to the framework used to build them.
You could even say that they use a heavily simplified game engine –
so if you’re already familiar with game design, or comfortable in Maya’s Node Editor,
this should be a pretty easy jump.
Or if you’re looking to get into game design, this might be a good place to wet your toes
since it’s similar, but also less complex.
At its core, an interactive tutorial runs as a state machine,
which you can find by selecting any stage node in the scene…
…then opening the Node Editor...
...and graphing its outputs.
Here you can see all the stages laid out in sequence –
each one representing one step of the tutorial.
They’re then chained together using these “Next State” and “Previous State” connections
to determine the order of execution.
To move from one stage to the next,
you can either check the “Condition” attribute on the stage itself…
…or run a specific MEL/Python command while that stage is active.
Speaking of Python: Python script nodes are how you determine
what happens at each stage.
If I pick a stage and then show its inputs, you can see them here.
As you probably guessed, what’s plugged into “On Activate Script” determines what happens
as soon as the stage begins,
...while what’s plugged into “On Deactivate Script” happens once the stage ends.
This setup gives a ton of flexibility in however you want to set things up
but right now some of you might be thinking “scripting? Python?”
Those are too complicated for me. And I won’t lie – this is basically mini game development,
so some scripting knowledge will always be an asset.
But that said, I’ve designed a helpful template to ease everyone into this world,
without sacrificing the power and customizability seasoned developers cherish.
So for the rest of this video,
I’ll show you how to use it to first build a very simple interactive tutorial.
Then in the next video, I’ll show you how to add some more advanced elements to it.
Before even starting my project, I need to design and test a workflow
to make the subject of my tutorial.
In this case, I’m going to show how to set up the basic studio lighting scene you see here.
This involves creating a plane, then some lights,
and lastly applying a circular ramp to the plane to reflect those lights.
Once my workflow is thought out, I write a quick list of instructions in a separate document
– which you can find in the description below.
Now that my design is complete, it’s time to begin building my tutorial.
So I’ll start by opening my template file,
which you can also find linked in the description below.
This file starts with a little sample tutorial, just to orient anyone who uses it…
…and also comes with everything neatly organized for you into sets.
Python templates contains the various script templates we’ll be using
to get different behaviors, like putting text overlays on the screen, updating the controller,
or triggering different interactive events.
To view the contents of these scripts, you can open the Expression Editor,
then filter on Script Node names.
Notice the template scripts are all here,
...and that each one is annotated with instructions,
and split into two sections called "Customizable values" and "Advanced section".
This is how we make tutorial building easier to work with,
because even if you know nothing about scripting,
anyone can easily go into the "Customize values" section to print what they want,
position an overlay, lock buttons, and so on.
Meanwhile, those of you with a coding background can customize stuff in the
"Advanced section" as much as you want.
For this series, we’ll stick to the basics.
Most of the stuff in the “tutorial support nodes" set you can leave alone.
This is just some pre-set stuff to make the tutorial function properly.
Lastly, this set that says to “graph my children” contains everything
for the sample tutorial that ran when I opened this file.
So I’ll do what it says by shift selecting all the children…
…then opening the Node Editor…
…and hitting the “Graph incoming connections” button up here.
That gets us the same setup I showed you earlier,
with a chain of stage nodes along with python scripts feeding them.
Now if we take a closer look at a single stage,
you can see that these template nodes are designed to be very plug and play.
Just chain the functionality you want, in the order you want it!
For those of you that are self-learners already comfortable in Maya’s development workflow,
I’ll leave it up to you if you want to stop this video here
and just explore the rest of this yourselves.
For everyone else still here, I’m actually going to delete all these script nodes
starting at stage 1 (and being extra cautious NOT to delete the stage nodes themselves)
in order to start from scratch.
Leave the ones on stage 0 though, since that’s important initialization stuff.
Now, we’re ready to build our tutorial.
So looking at my script, my first line is really just an introductory line of text.
To add that, I’ll go down here to all my templates…
…and duplicate the text_overlay one.
Then I’ll rename the duplicate “stage1_text_overlay”.
Now back in the Expression Editor...
...I can find my new script.
First, I need to make sure to change the line in #1 here
to match the newly renamed script node. This ensures the chain of nodes executes properly.
Then I can just copy my first line of script text…
...and paste it into #2.
Then click “Edit” to save my modifications.
Once that’s done, I can go back to the Node Editor,
move the node up to Stage 1,
and plug its “before” port...
...into the stage’s “Activate Script” port.
To test if this worked, I could save the scene and re-open it.
But an easier way is to just run the following Python command to start it manually:
And now if I click "Start" on the Welcome screen…
…my text pops up on step 1!
So that takes care of my step text, but notice that my controller is empty.
No problem, I just need to update it using an "update_controller" template.
So like before, I’ll duplicate one and rename it “stage1_update_controller”.
Then in the Expression Editor I’ll find it,
update #1 with the new node name,
and #2 and #3 with my title and instruction text.
Take a moment to notice that this text has HTML tags in it.
You can use these to format your text, make clickable links,
or even put entire images into these text boxes.
Finally, I’ll also disable the Restart Step button.
Now of course, we’ve already plugged the text overlay script into the stage node…
…so for this node, I’ll plug its before port...
...into the previous script’s "after" port.
So now, reading this from right to left, we can see the stage starts, then displays text,
and then updates the controller.
And sure enough, if I run the tutorial again…
…that’s exactly what I get!
That does it for step 1!
Setting up step 2 is much of the same.
But instead of re-duplicating from the base templates,
I can just duplicate my stage 1 scripts instead!
Then I can rename them with stage 2…
…and then plug them into stage 2 exactly like I did with stage 1.
There. Now I can go back to the Expression Editor…
…and update my new text_overlay script with its name…
…and instructions.
And then update the “update_controller” script in much the same way.
And if I run my tutorial again...
you’ll see I have two complete steps!
Well, almost complete. Notice how step 2 asks the user to create a polygon plane.
Now, we could leave it like this and that’d be just fine…
...but wouldn’t it be better if I moved the overlay up here by the Create Polygon Plane button?
So to do that, I can just go back to the stage 2 text overlay script…
…and adjust these X and Y offset values.
Of course, I don’t know exactly where that spot is, so I’ll just have to experiment a bit.
I’ll start relative to the top-left corner…
…with the tail all the way on the left side…
…then maybe start with offset values of 100 x 100.
To test this, I can use the same Python script as before, but starting from stage 2.
Looks like I'm a little off, so let me tweak the X and Y values.
Almost there!
There, perfect!
Now I can just continue adding the overlay and controller scripts for the rest of my tutorial.
When I run out of pre-made stages,
I can just hit tab and create a new Stage node to keep going.
Just remember to connect the appropriate “Next” and “Previous” ports.
And once all the steps are in, this is what it ends up looking like.
Notice the last step uses my existing “closeController” script
from the support nodes set, just to properly shut everything down.
And if I run the tutorial from the start...
...all the steps appear properly!
Notice here on step 6, I even have multiple tails for this text overlay…
…which I achieved by outputting multiple empty text overlays under the primary one.
And that’s it! You now have an interactive tutorial that any user can follow to completion!
But that said, the experience could be smoother.
Notice how I always have to manually move from one step to the next.
It'd be better if the tutorial automatically moved forward when the user did things correctly.
Additionally, we’ve been hiding that Restart Step button all this time,
but we might want one for specific steps where the user could go wrong.
And finally, what if we want to add a bit more personality to our tutorial,
like the existing basics tutorial or other downloadable ones?
Well, I’ll show you how to do all that and more in part 2 of this tutorial!