A vision: Bevy interactive tutorial

[TimJentzsch]

I have a vision...

You keep hearing about this Bevy thing on r/rust and decide to finally try it out. You click the link to the website and quickly find a tutorial section in the top bar. After opening it, your view splits into two sections: A code editor on the left and a task description on the right.

You read through the initial description, which welcomes you and starts off with an easy example. Apparently, all you have to add to do is to add App::new().run();! In your editor, a code template is already included for you, with an empty main function. You include the new line, but it's underlined in red: Duh, you forgot to add use bevy::prelude::*; at the top. It said that in the description and there's a TODO comment as a placeholder, but you got a little bit too excited.
Satisfied, you press a "Check" button that is located at the bottom of the task description. You wait for a bit and a green check mark appears! You are given the option to compare your code to a version written by a Bevy expert, but because this task was you simple you press the "Next" button to move on to the next task.

The first task was cool, but it didn't really do anything. How lame. Fortunately, this one seems more promising: You get to implement your first system! You don't really know what that means and are too lazy to read through all of the explanation provided to you, but you fill out the template code as instructed and apparently it's supposed to print stuff now.
Again you press the "Check" button. You get a red cross! Why?? You didn't even get any compile errors! The error message explains it: Because you didn't read the task properly, you forgot to add the function as a system to your app. Whoops. They must have run some static analysis to catch that mistake, cool! You try to check your task again and it opens a console window and indeed, it says "hello world"! This time you choose to compare your code, but the diff doesn't show any major differences between your solution and the expert one. Time to move on!

In the next task, you finally get to make some cool GUI things with DefaultPlugins. You are surprised to see that the game window opens up directly in your browser view, next to the code editor. Well, they did say that you could make browser games in Bevy! You follow some more tasks and are able to write a tiny game in the tutorial, seeing the changes directly in the browser.

You were able to test out this cool game engine without even installing the dependencies, or messing around with weird compiling configurations. You also learned about Bevy's most important features. Because you interacted with them directly, it's easier for you to remember the important bits. Cool! You decide that you are going to use Bevy for your that cool Stardew Valley clone idea you had which is totally gonna take off. Soon after, this project is dumped on your steaming pile of unfinished programming projects.

Prior Art / Resources

• Rust Playground: Safely compiling Rust online and viewing the results.
• Svelte Interactive Tutorial: An interactive online tutorial to test out a web framework.
• Bevy Book: The current Bevy tutorial.
• EduTools Plugin for IntelliJ: A plugin for interactive programming courses directly integrated in the IntelliJ Idea. Features the complete power of IntelliJ, but with code templates, a lesson plan and automated checks to see if you passed a given task.

[TimJentzsch]

This would be a massive undertaking, so it's probably not feasible for us. But I think it would be very valuable and a distinguishing feature compared to other engines. One can dream!

[alice-i-cecile]

I'm guessing most of the targeted users will have Rust installed anyway

I actually disagree with this assumption for two reasons. First, I've used similar tools at workshops before to great success, and not having to worry about config has saved so much headache. Second, I'd estimate probably 40% of the new users I talk to are new to Rust, and about 20% are new to programming. These are the folks who would most benefit from a gentle introduction.

[TimJentzsch]

Ah interesting, that's a fair point then! That would make an interactive tutorial without any required setup even more valuable.

[heavyrain266]

Find a corporate infrastructure sponsor who's willing to trade ad space for hosting this with GPUs.

Only hosting which offers renting GPUs which comes to my mind is Azure where you pay 0.30$+/h for nvidia tesla and similiar, used them in the past for creating quick renders of complex structures and whole levels for game.

[TimJentzsch]

Maybe a stupid question, but why would the server require a GPU? Wouldn't the actual rendering happen client-side after the server compiled the app for the user?

[alice-i-cecile]

Yeah; that's the idea: we'd want to ship a compiled Bevy app to the user in WASM. I was thinking there was a world in which we run everything server side (like we do for CI), but that's a terrible choice.

[Nilirad]

I also had a similar idea of having interactive tutorials. The major difference though is that they are not web based, but they are extensions for the (future) Bevy editor.

There may be a couple of built-in tutorials, but you can also import community-made custom ones. Tutorial sessions are projects including all the assets that need to be used in the tutorial.

The user can load the tutorial session from the editor project launcher. Once loaded, a “virtual teacher” pops up (see it like MS Clippy — ʷᵉ'ˡˡ ⁿᵉᵛᵉʳ ᵍᵉᵗ ʳᶦᵈ ᵒᶠ ᵗʰᵉᵐ) and guides the user through all the editor and coding actions (maybe we'll need to include a simple text editor) that must be performed to accomplish the goal. While the tutorial is active, unneded editor actions are dynamically disabled to keep everything on rails and ensure the user doesn't mess up things. UI elements that trigger the actions that must be performed are highlighted. Once the tutorial is finished, the user is free to do whatever they want with their creation.

This approach is very compatible with the tutorial quadrant of the Diátaxis framework we are striving to follow. In particular:

• Reliability and repeatability. In contrast with an article based tutorial, an interactive tutorial can be easily (maybe even automatically) checked for correctness. There's nothing more frustrating to spend a lot of time on a tutorial and realize at a point that you're stuck because the tutorial is broken or outdated.
• Immediateness. Not having to jump back and forth between doing actual work and checking an article will greatly increase user focus on the task. Plus, they will be able to complete the tutorial in less time, having a greater overview of what they did.

---

I just realized that Unity has their own interactive tutorials.

[TimJentzsch]

Integrating it into the editor is a smart idea! I think it has a bit of a higher barrier of entry than a web-based tutorial (because you have to download the editor first), but it's probably easier to implement. We then would also have "everything at one place" and could even offer little pop-ups with "mini-tutorials" when introducing new features/in complex areas of the editor.

[alice-i-cecile]

#4700 shows a path that we could use to get here. If you're comfortable, reviews there would be much appreciated.