Cre­ate a gaze-based nav­i­ga­tion sys­tem

3D Artist - - COMTENTS -

Kellan Cartledge looks into Un­real and how to guide a player around

i

in this tutorial you will learn how to cre­ate a gaze-based nav­i­ga­tion sys­tem in un­real en­gine 4, us­ing some­thing that’s very sim­i­lar to the one Kilograph used on our Sus­pen­sion House ex­pe­ri­ence. This tutorial will start with ue4’s first-per­son tem­plate and dis­cuss how to mod­ify this to work with a gaze-con­trolled sys­tem. This tutorial will also cover work­ing in Blue­prints, in­clud­ing cre­at­ing vari­ables, cus­tom events and func­tions. We will also touch on cre­at­ing cus­tom ma­te­ri­als with ue4.

Track­ing a player’s gaze is a pop­u­lar so­lu­tion in video games and other in­ter­ac­tive me­dia as it al­lows you to guide the ex­pe­ri­ence in a much more thought­ful way. When you know where a player is look­ing you can not only con­trol their lo­ca­tion, but trig­ger an­i­ma­tions, dy­nam­i­cally change ma­te­ri­als and spawn new ob­jects. This is a big rea­son why we wanted to build this ca­pa­bil­ity into Sus­pen­sion House.

With gaze-based nav­i­ga­tion the goal is to cre­ate a move­ment sys­tem that locks a viewer to a sin­gle spot, al­low­ing them to look around but not walk like they would in a tra­di­tional first-per­son ex­pe­ri­ence. since peo­ple will still want to move around, you need to give them clear ways to do that, which are also easy to un­der­stand. Our sys­tem works off gaze tar­gets. They ap­pear in front of the viewer and tele­port them to a spe­cific lo­ca­tion af­ter they are stared at long enough.

start­ing this process is a mat­ter of us­ing Blue­prints. if this is your first time work­ing with Blue­prints in ue4 make sure to look over the un­real en­gine 4 doc­u­men­ta­tion in or­der to get a more in-depth ex­pla­na­tion of pro­gram­ming. 01

Use the first-per­son Blue­print tem­plate The first-per­son Blue­print tem­plate pro­vided with un­real en­gine 4 is a fan­tas­tic start­ing point and speeds up our de­vel­op­ment process for con­trol­ling viewer move­ment. Af­ter launch­ing the epic Games Launcher and cre­at­ing a new Blue­print project based on the first-per­son tem­plate, nav­i­gate to First­per­sonbp>blue­prints, and open First­per­son­char­ac­ter. Re­move the func­tion­al­ity from the de­fault First­per­son­char­ac­ter that we do not want in our ex­pe­ri­ence. This would be any func­tion­al­ity, nodes, com­po­nents and vari­ables that al­low the viewer to walk around or shoot the gun that comes with the de­fault viewer. We only want our viewer to be able to look around the en­vi­ron­ment by us­ing the mouse.

Once re­moved, you can hit the play but­ton in the tool­bar to start the ex­pe­ri­ence. now the First per­son char­ac­ter is able to look around, but can­not walk.

02

Cre­ate the gaze tar­get When fin­ished, nav­i­ga­tion tar­gets should turn on and off to make viewer aware of where they can move in an ex­pe­ri­ence. in the case of Kilograph’s Sus­pen­sion House, the gaze tar­gets were lo­cated in spe­cific ar­eas of the house (the kitchen, liv­ing room, bal­cony, stairs, bed­room).

in our tutorial these tar­gets can be placed any­where as long as the viewer can see them. Af­ter cre­at­ing a new Blue­print Ac­tor class named Bp_gaze­tar­get, add two static mesh com­po­nents and box col­li­sion com­po­nent.

These will be used to de­tect the viewer’s gaze, col­li­sion with the tar­get, and hold the icon.

03

Make the icon ma­te­rial The icon can be any im­age that you want for this tutorial. i’m us­ing a sim­ple lo­ca­tion pin that i found on­line. For our case, make sure this im­age has an al­pha chan­nel. cre­ate a new ma­te­rial named M_i­con. in the Ma­te­rial ed­i­tor set it to Translu­cent and make sure the icon im­age is mul­ti­plied by a scalarpa­ram­e­ter named Opac­ityamount. This will al­low the opac­ity of the icon im­age to be changed as the viewer looks at the gaze tar­get.

When you know where a player is look­ing you can not only con­trol their lo­ca­tion, but trig­ger an­i­ma­tions, dy­nam­i­cally change ma­te­ri­als and spawn new ob­jects. This is a big rea­son why we wanted to build this ca­pa­bil­ity into sus­pen­sion house

04

Turn it into dy­namic ma­te­ri­als in or­der for the opac­ity of the icon to change as the viewer looks at the gaze tar­get, the M_i­con ma­te­rial must be made into a Ma­te­rial in­stance Dy­namic.

Dy­namic ma­te­ri­als are used in ue4 to spec­ify ma­te­rial that can be changed dur­ing an ex­pe­ri­ence. To do this in our ex­pe­ri­ence, in the con­struc­tion script of the Bp_gaze­tar­get cre­ate a Ma­te­rial in­stance Dy­namic of M_i­con.

This will al­low opac­ity of the icon to change as the viewer gazes at the tar­get, cre­at­ing the abil­ity for gaze tar­gets to ap­pear and dis­ap­pear as the viewer looks around.

05

Blue­print Bp_gaze­tar­get in or­der to make sure gaze tar­gets (mean­ing the ac­tual icon some­one looks at) face the cam­era, we need to make a func­tion that will ro­tate them to­ward the viewer as the viewer moves around the en­vi­ron­ment. To ver­ify the viewer is look­ing at this gaze tar­get, we check if the cur­rent gaze­tar­get vari­able in the First­per­son char­ac­ter (this will be ex­plained later) is this gaze tar­get.

The seep­er­cent vari­able is up­dated to de­tect how long the viewer looks at a spe­cific gaze tar­get. When seep­er­cent is equal to 100 the viewer is moved to the cur­rentgaze­tar­get. if the viewer looks away from the cur­rentgaze­tar­get, seep­er­cent is re­set to 0 and the icon opac­ity is re­set.

While this gaze tar­get is be­ing viewed the

Opac­ityamount Pa­ram­e­ter of M_i­con should be changed to the value of seep­er­cent.

This will cause the icon im­age to ap­pear and dis­ap­pear as the viewer looks around the scene.

06

Blue­print First­per­son­char­ac­ter in or­der to ac­tu­ally know where the viewer is look­ing and when the viewer is look­ing at a spe­cific gaze tar­get, we need to cre­ate a line trace from the First­per­son­char­ac­ter cam­era. This line trace will be used to check if the viewer is or is not look­ing in the di­rec­tion of a gaze tar­get.

Back in the first-per­son char­ac­ter Blue­print, shoot a line trace from the cam­era lo­ca­tion along the for­ward vec­tor of the cam­era to a set dis­tance.

This dis­tance can be used to con­trol how far from the viewer a gaze tar­get can be de­tected.

if this line hits an ac­tor, the Blue­print checks if that ac­tor is a Bp_gaze­tar­get, if so we set that Bp_gaze­tar­get to the cur­rentgaze­tar­get vari­able, if not all the tar­gets are re­set in or­der to make sure they are in­vis­i­ble again.

By set­ting cur­rentgaze­tar­get to a ref­er­ence of the gaze tar­get the viewer is gaz­ing at, we then know which icon needs to ap­pear and which lo­ca­tion to move the viewer to.

in or­der to make sure gaze tar­gets (the ac­tual icon some­one looks at) face the cam­era, we need to make a func­tion that will ro­tate them to­ward the viewer as the viewer moves around the en­vi­ron­ment. To ver­ify the viewer is look­ing at this gaze tar­get, we check if the cur­rent gaze­tar­get vari­able in the First­per­son­char­ac­ter is this gaze tar­get

07

Move the player and de­ac­ti­vate tar­gets now that the viewer can see the gaze tar­gets, we need to make the player ac­tu­ally move to the lo­ca­tion of the tar­get. in Bp_gaze­tar­get, when the seep­er­cent vari­able is equal to 100, set the lo­ca­tion of the First­per­son­char­ac­ter to the lo­ca­tion of the gaze tar­get. This will move the viewer from their cur­rent lo­ca­tion to the lo­ca­tion of the tar­get they were just look­ing at.

When the viewer is moved to the tar­get lo­ca­tion, the tar­get icon needs to be dis­abled so the viewer does not de­tect it again. This is done by check­ing the over­lap on the Box col­li­sion com­po­nent and dis­abling the col­li­sion and Vis­i­bil­ity of this gaze tar­get.

08

Fin­ish up Bp_gaze­tar­get When the viewer moves on to the next tar­get, end Over­lap can be used to re­ac­ti­vate the old gaze tar­get’s col­li­sion and vis­i­bil­ity. in or­der to make the gaze tar­gets dis­ap­pear when the viewer is not gaz­ing at them, we need to re­mem­ber to re­set the tar­get. Do this by re­set­ting seep­er­cent and Opactiyamount on M_i­con to 0. Then, once all of the func­tion­al­ity is set up it must be called ev­ery Tick so that our func­tions are up­dated and changed as the viewer looks around the en­vi­ron­ment.

09

Set up the ex­pe­ri­ence in the ex­pe­ri­ence drop a few Bp_gaze­tar­gets around the level, mak­ing sure to space them out so the viewer can move around, but not too far apart that the viewer can­not reach them.

The First­per­son­char­ac­ter should start in the cen­tre of the en­vi­ron­ment be­cause this was based on the first-per­son tem­plate. hit play and test out the nav­i­ga­tion sys­tem by look­ing around the en­vi­ron­ment.

if it seems like the viewer moves too slow, the speed can be in­creased in the Bp_gaze­tar­get.

Just make sure the speed is not too fast as we want our viewer to be able to eas­ily ex­plore the space.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.