Multi-layeredObjectClickingAlice3TricksinMiniTrivia (4/4)

ByVickiZhangDukeUniversity

UnderthedirectionofProfessorSusanRodger

June2017

AbouttheMiniTriviaChallenge

MiniTriviaisafour-question

gamecreatedbyVickiZhang.

Theauthorexplainsfour

usefultopicsinvolvedin

separatetutorials:

1. scorekeeper2. askinguserforananswer3. billboard4. multi-layeredobject

clicking

Thistutorialexplainshowtodesigna

clickablemap.Startbydownloading

Mini Trivia Challenge 4_Multi-layer Click_Startand map jpg.

PalmtreeleadstoquestionB:FindthestateofRockyMt.Park.That

willrequiretheentiremaptobeclickable anddiscerning(todecidecorrectnessandthereby+/- thescore).

Settingupthescene

• Shift thecameraviewto

cameraMarker2 throughsteps

1and2illustratedonthe

right.

• Youshouldsee• Addfourobjectsfrom

Shapes/Textfolder,more

explanationslater:abillboard,

twodiscs,andastarfish.

1

2

1. Billboard

• Check out Mini Trivia Tutorial #3 for details of adding a

billboard.

• Go ahead and add the map picture included in the packet.

Adjust till happy.Youcouldfindthedemoonnextslide.

• Note:Don’tbeafraidtomovetheviewaround.Remember

thatcameramarkerisyourfriend.

1.Billboard

Itiltedthemapa

littlebitusing

Rotation for

greatercontrast.

2.Discs• Let’sfirstaddonediscandnameit

correctState.Discsare

intheShapes/Text

folder.

• Shifttheview.UseResizeandMove

alternativelytocover

Colorado.Makesure

youcanseethedisc

fromcameraMarker2.

• Setitspainttoredfornow.

2.Discs

• Now,addanotherdisc andnameit

otherStates.

• Thisiswhere“multi-layered”

comesin.

• Shifttheview.UseResizeandMovealternativelytocoverthe

entiremap.Makesureyouplace

thisdiscinbetweenthemapand

theColoradodisc(shownonnext

page).

Thereasonbehindissimple.Wewantto

createadiscerningmap.Withthetwo

discs,themapis.Whenthereddiscis

clickedon,addscore;whenthegraydisc

isclickedon,reducescore.Thismulti-

layeredspatialrelationdisablesusers

fromclickingontheColoradopartofthe

graydisc.

3.Lastly,astarfish

Search Gallery for a starfish and addit. I changed the paint to blue.

Place and resize it until it covers

roughly the upper side of the red

disc.

We will use this starfish to indicate

the point of Rocky Mt. park.

Finishupsettingthescene

For the two discs,setpaint towhiteandopacity to0.1

For the starfish, set opacity to 0.0

Notes:

Wewanttomakethem invisible,but0.0opacitywillmake

theobjects difficulttoclickon.

Make sure the objects stand from near to far in this order:

starfish, small disc, large disc, map.

Editcode

• Believeitornot,wehaveactuallyalreadycompletedthe

morecomplicatedpart!

• Now,gotoEditCode>>InitialEventListeners•We’lladdtwomouseClicked listenersfor

• (1)clickingonthecorrectstate,i.e.onstarfishorsmalldisc

• (2)clickingonrestofthemap,i.e.onlargedisc

• Recallthatduetoourmulti-layeredstructure,there’snowayuserscanclickontheColoradopartofthelargedisc!

Ifclickedonthecorrect state

• First,let’saddaneventlistener,andspecifically,MouseClickOnObject Listener.

• Second,wewanttoadddetails.Bothfeaturesareneededinourcase.

Ifclickedonthecorrect state

•Add details

• >>Setofvisuals:addstarfish andcorrectState.

• >>Multipleeventpolicy:

ignore

Ifthisclickingeventisheard,weneedtoawardtheuser.Feelfreeto

improvisebutmakesuretoincludethefollowinglines.

Thefirstlineistoupdatethescorekeeper.CheckTutorial#1formore.

Thesecondlinemakesthestarfish(pinpoint)appear.

Thepalmtree

disappearstoprevent

theuserfromclicking

onthequestion

again.

Thefourthlineallows

userstogobackto

themenu.

Tryitout!

•Runtheprogram>>selectpalmtree>>clickon

Colorado!

Ifclickedontheincorrect state

• Similarly,weneedaMouseClickOnObject Listenerforthe

largedisc.Ifclicked,we’lltelltheusertheygotthewrong

spotandthenreducetheirscore.

• Tryitoutyourselffirst!

Ifclickedontheincorrect stateMakesureto

includethese:

Done!

Goodjob!