Tiled: Add an "inside tutorial" to Tiled

[RhenaudTheLukark]

Hello there!

I am using Tiled for now some months, and I never really thought about participating in it.
However, I came back to my decision and I will expose what may not be very easy for new users to quickly know how to use Tiled.

Back in time, when I saw the main interface, I had some trouble handling it because there aren't a lot of explanation on where to start with.
There aren't a lot of indications of what to do when you delve in the application itself.

Plus, I recommended the community I'm managing to use Tiled if they want to make maps they will use on the project I'm managing, but some people told me it's not very intuitive.

I thought it would be a good addition to add an in-project little tutorial.
Nothing too serious, I think an Audacity-level tutorial would be enough, to show what people can do with Tiled.

Just the basics, that is to say some slides with screenshots and little texts to describe how to use the basic features of Tiled, and all of that on a pop-up which could be disabled on demand, maybe using a "Don't show this again" toggle option on the tutorial itself, which could be changed in the "Help" option.
Also, this tutorial could be closed easily using a cross, like in normal windows.

I would be glad to try myself on such thing, but I think it would be a bit big for my first contribution on Tiled, so I decided to expose my idea here.

I hope an answer will come as soon as possible, and best of luck for the future of Tiled.

Best Regards, RTL.

[keshav2010]

Yup, being new to tiled myself and willing to contribute, I think it would be good to include a short in-product tutorial, something like what earlier version of game maker engine adopted ( version 7 and 8), a side panel that contains instruction that user can follow to create his first tileset/map, this will make sure we need not change much of the existing code and only focus on the new panel/frame we are going to add and all the content that goes inside that panel/frame.

[RhenaudTheLukark]

I never really tried Game Maker, but I will get more info about that.

And yes, it's just an additional panel and help for beginners. It doen't have to change absolutely everything, but it helps for usability.

I have to say I'm quite interested in that idea. I'll try to take a look at it soon.

[keshav2010]

Yup same here, currently trying to understand codebase as well as learning Qt framework, once im little bit familiar with it, i will try to work on it :D , in case i make any further progress, i will keep you updated over here and in case you make any further progress, u can also update status here :)
(btw here's my facebook id : Click Here )

[bjorn]

Hey guys, I think it's a nice idea and am looking forward to see what you guys come up with. In general, I think the UI could be amended with more instructions in a non-intrusive way. For example, to direct people to the "new tileset" action in the empty space of the Tilesets dock widget when no tileset is set up yet. Similarly for other panels that are initially empty. Another thing that could be added, now that the manual starts to be more complete, is context-sensitive help that would open the manual at a certain location.

For a separate panel that guides the user through some initial actions, check out the forks/road-to-ballhalla-editor branch. They have added something like this already, though it is about actions specific to creating Road to Ballhalla maps. I wonder a little how far we could take this while staying away from game-specific stuff.

[RhenaudTheLukark]

Well for now I'll try to do what I can.

I'm in for the "New tileset..." button when there is no opened tileset.

I looked at the code, and I have to say it's pretty far from the Qt I'm used to know, so I was disoriented for a while.
However now I know where I am and what I am doing, so I should be a bit more efficient.

For that, I was thinking of adding a new special tab with only the "New tileset..." button in it.
My idea was to add it automatically when no tileset would be opened, and destroy the tab once a tileset would be opened again, just like a placeholder.

I took a look at the code and I saw there are tests with a value checking if any tileset tab is open.
Maybe I could also tweak it to return false if there is no tab or only the special tab opened in the widget.

If you have any better idea, I am open to improvement, but that's how I see it for now.

[bjorn]

I think you could add a widget with that button to the beginning of the mViewStack of the TilesetDock. And then you'd need to change any indexes passed to functions of this QStackedWidget to increment the indexes by 1 as needed and functions like TilesetDock::currentTilesetView could do a dynamic_cast instead.

Actually, since it will be a bit tricky to make sure all the existing code will deal nicely with the additional widget at the bottom of the stack, an easier approach may be to add another stack using a QStackedLayout, in which you add the widget with the button and the mViewStack. That way, you can toggle this stacked layout to the button based on whether the mViewStack is empty or not.

[RhenaudTheLukark]

It seems better, yes. I will look into it and do what I can, thanks for the tips!

[RhenaudTheLukark]

So, now that I made my first contribution, I'll try something bigger.

Do you think it could be a good idea to add a little "Help" button on all the QDockWidgets, opening a webpage to the corresponding page of the online documentation?
Would that be useful for a new user who would like to know more about the project's different functionalities?

[bjorn]

Do you think it could be a good idea to add a little "Help" button on all the QDockWidgets, opening a webpage to the corresponding page of the online documentation?

While it could definitely be useful, I'm worried that it's a little too intrusive. That said, I do not have any alternative suggestion at the moment. Did you have a look at how other applications solve this issue?

[RhenaudTheLukark]

I've had that look, and none of them seem to have that feature or anything on that matter.

I may have been a little too fast on my last post, because now I think anyone could easily find their way through the application if we show them tilesets have to be loaded first.

Maybe I'll try to work on the embedded tutorial instead.

[bjorn]

I may have been a little too fast on my last post, because now I think anyone could easily find their way through the application if we show them tilesets have to be loaded first.

Yeah, I think often it's a matter of using the initially empty state of something to guide the user to the first meaningful action. That was also why I added the start page when no file is open (which should probably also have a button for opening an existing file, though).

[RhenaudTheLukark]

Now that I know a little bit more what's on with Tiled, what do you think would be better?

A "documentation tab" displaying the documentation directly, or maybe some kind of step-by-step tutorial on the first launch of Tiled that displays the basic features of Tiled, like how the Tileset and Maps are created and handled, like a "script" to follow, of course skippable and launchable again?

I also was thinking about providing some example maps to show what people could do with the software: that way, I think Tiled will be better handled by beginners and they will be able to see existing results, giving them a preview of the engine's features.

[bjorn]

A "documentation tab" displaying the documentation directly, or maybe some kind of step-by-step tutorial on the first launch of Tiled that displays the basic features of Tiled, like how the Tileset and Maps are created and handled, like a "script" to follow, of course skippable and launchable again?

To actually display the documentation, Tiled would need to include a browser (essentially will depend on Qt WebEngine). I consider that too heavy a dependency. It might be possible to use QTextBrowser instead, but I'm not sure if it's worth the effort. Feel free to research this possibility, though.

A written tutorial with screenshots and possibly short animations is easier to set up and to keep up-to-date than an interactive tutorial.

I also was thinking about providing some example maps to show what people could do with the software: that way, I think Tiled will be better handled by beginners and they will be able to see existing results, giving them a preview of the engine's features.

Actually we somewhat urgently need good example maps, since we will participate in the Google Code-In together as part of the MovingBlocks organisation. This may summon dozens of young students who are asked to try out the various Tiled support libraries. They could definitely use an up-to-date set of examples showing off various Tiled features, that are also suitable to use when creating small demos.

[RhenaudTheLukark]

Very well, some friends and I will try to make something usable pretty quickly.

I saw the Google Code-In event starts in 10 days, we'll try to make something for Tiled before.