Sign in to follow this  
FuraProject

Teaching player the controls

Recommended Posts

Good evening lads,

 

I've been developing mobile game for some time and i have issue with tutorial level. Game uses Tap'n'drag'n'dontreleasethefinger functionality, kind of same as analog stick, and i have no idea how to present it properly.

 

I managed to explain where to place the finger, and what to do, but "testers" are just trying to drag it through the whole screen.

Its important to note that none of those people ever used analog sticks in their live.

 

Maybe someone saw mobile games that use such features and have a descent tutorial level?

Or maybe someone has any ideas?

 

The only game i recall is Heavy Gunner 3D... and it has no tutorial...

Edited by Sollum

Share this post


Link to post
Share on other sites

How do you present the touch area? Perhaps some sort of bounding circle might convey that the control only operates within that limit? Otherwise, perhaps the tutorial might place a little graphic of a joystick/thumbstick in the control area to illustrate that the drag operates like one.

Share this post


Link to post
Share on other sites

You could "model" the actions with an NPC, and represent on-screen what your fingers would be doing.  The NPC says something to get the player's attention, and maybe get their hands off the screen, like "Watch me!", and then runs left, runs right, jumps, etc., finally getting to a place where the player can't get to without understanding the controls.  Meanwhile, finger actions that would accomplish this are shown in the appropriate places.  (You could do it abstractly, or with "fingers".)

 

Then the NPC says something like "Catch up with me!", the camera moves to the player sprite.  If the player doesn't do anything for a few seconds, then flash the "circle" or whatever into existence, to get them thinking about it.

Share this post


Link to post
Share on other sites

Games I've seen use this mechanic don't actually show a stick.  They have a circle, as Thaumaturge mentioned, and tell you to drag inside it to control movement (or whatever).  Seems like people figue it out from there.

Share this post


Link to post
Share on other sites

Here is a sketch pretty much how it looks now 

 

buttonmash.png

 

That White circle slowly blinks and finger sort of shows touching and the dragging to right corner and afterwards to top left corner.

 

When it was just "tap and drag" text blinking. Test subjects kept taping center of the screen and asking why it wont move.

When i added some text and indicator where to tap (bottom corners). Two of text subjects eventually understood what to do. Others said "i dont like reading i want to understand right away".

 

After that, i made current sketch and programmed it. I also made it so, some enemies spawn behind you, and indicate it with red arrows, so player knows that you have to move back in some cases and you can move in limited area.

I tested it with two test subjects. One of them kept saying "I don't understand what to do" and kept swiping the screen. Second test subject, who was given to test it out for the first time, observed bottom corner and understood what to do perfectly, without any guidance, also killed all the spawned enemies that where indicated with arrows.

 

In the end it can be assumed that 3 out of 7 non gamers will figure it out.

But others are sort of stubborn and have this "i don't WANT to understand it". And thus i am kind of stuck.

Edited by Sollum

Share this post


Link to post
Share on other sites

definitely needs work. i don't use touchscreens, but i understand the concept of click and drag, and i still don't quite understand how it works. you have a touchpad action area in the bottom left corner that is a virtual joystick emulator?

Share this post


Link to post
Share on other sites

definitely needs work. i don't use touchscreens, but i understand the concept of click and drag, and i still don't quite understand how it works. you have a touchpad action area in the bottom left corner that is a virtual joystick emulator?

 

Yes and no.

 

I didn't want to limit player to just to one side. You can touch anywhere on screen and it becomes a "virtual joystick".

 

But yes, i highlighted that area and put a dragging finger there, because people kept tapping and dragging "character" and blocking field of view with their hands. So now, everyone puts their finger there.

 

Edit:

I made a recorded animation by itself, how it looks like.

 

https://www.youtube.com/watch?v=Qp6l71MFJoY

Edited by Sollum

Share this post


Link to post
Share on other sites

quite the interface design challenge: implement a touchscreen joystick emulator on a mobile screen so small the player's fingers block the view....

 

your "floating" emulation area is one approach...

 

perhaps the only one. the screen is so small, its not really suitable for such interaction. 1/8th or more of some part of the screen is obscured by even the small action area you are using.

 

perhaps a different input method is called for.

Share this post


Link to post
Share on other sites

This isn't my area, just some armchair UI design thoughts - feel free to rip them apart!

 


When it was just "tap and drag" text blinking. Test subjects kept taping center of the screen and asking why it wont move.

When i added some text and indicator where to tap (bottom corners). Two of text subjects eventually understood what to do. Others said "i dont like reading i want to understand right away".

 

After that, i made current sketch and programmed it. I also made it so, some enemies spawn behind you, and indicate it with red arrows, so player knows that you have to move back in some cases and you can move in limited area.

I tested it with two test subjects. One of them kept saying "I don't understand what to do" and kept swiping the screen. Second test subject, who was given to test it out for the first time, observed bottom corner and understood what to do perfectly, without any guidance, also killed all the spawned enemies that where indicated with arrows.

What about anticipating common user behaviour and building animations to help train them? For example, if they tap or swipe at the centre of the screen, show them a dedicated animation to try get them to tap the corner, e.g. flashing arrows of some kind.

 


I didn't want to limit player to just to one side. You can touch anywhere on screen and it becomes a "virtual joystick".

But yes, i highlighted that area and put a dragging finger there, because people kept tapping and dragging "character" and blocking field of view with their hands. 

I think it might be a poor idea to allow the user to control the character with the centre of the screen, given that this will result in them being unable to tell what is happening due to their hand obscuring the screen. I'd strongly consider limiting the touchable area to the outskirts, otherwise you're just reinforcing their preconceived ideas by giving positive feedback in the centre.

 


So now, everyone puts their finger there.

Where? Do you mean your new animation is testing much better?

Share this post


Link to post
Share on other sites

Thanks for the responses!

 

Forgot to check on onto thread.

 

I did some "time calculation" and noticed that i was wasting too much to onto this issue.

Instead i did simple screen with animations and text explaining what to do. First time this "screen" takes 12 seconds, afterwards "Click to continue" appears. All other times, "Click to continue" will always be there.

 

I'll attempt one simple thing, make a "trailer" where my finger actions are visible, and hope that players will watch that first.

 

 

 

I think it might be a poor idea to allow the user to control the character with the centre of the screen, given that this will result in them being unable to tell what is happening due to their hand obscuring the screen. I'd strongly consider limiting the touchable area to the outskirts, otherwise you're just reinforcing their preconceived ideas by giving positive feedback in the centre.

 

I like this thought. Limiting player to specific area sounds like a plan... until players become advanced enough :D

Share this post


Link to post
Share on other sites

I would try to avoid tutorials as much as possible, if you use them try to add fun elements.

Making good tutorials is hard, but important, you don't want to lose casual players because of poor tutorials

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this