SceneChangesThisisanmodificationoftheJune
2009/July2012scenechangetutorialbyDeborahNelsonandChrisBrown
ByNatalieHuffmanUnderthedirectionofSusanRodger
DukeUniversityJune2017
Overview
• Thistutorialiscenteredaroundtheuseofthefullrangeofthecameratoconstructdifferentscenesinthesameworld
• Thecameracanthenshiftbetweenscenes,givingthecodertheabilitytomakeamorecomplicatedworld
• YouwilllearnhowtocontrolthelightlevelsinAlice,andhowtomoveacharacterbetweenscenes
OpenanewAliceworld
• Choose“Grass”• Gotosetupscene• Addacameramarker• Nameitscene1
CameraMarkersinAlice3• Cameramarkersletyousaveaviewpoint• Abovethescenebuttonsaretwopositioningbuttons
• Theblackcamerarepresentsyourcurrentpointofview
• Thefirstbuttonmovesyourpointofviewtotheredcamera(scene1)
• Inordertomovetoscene2,youwouldclickonthescene2buttonandthenonthelefttopbutton
• Note:thispictureisfromlaterinthetutorial
Cameramarkers,cont.
• Thesecondbutton,ifclicked,wouldresetthescene1viewtothecurrentview
• Donotclickthisbutton!• Oncewesetacameraview,wewilllikelynotwanttochangeit
Changescene1camera
Changecurrentview
Addtoourscene!
• First,wewanttoaddanoasis• Gotothe“BrowseGalleryByTheme”tab• Clickonsouthwestànew Pond• DragthePond(DESERT_OASIS)intothesceneandpositionitsoitisnearthebottommiddleofthescreen
Nowtoaddacharacter
• Getbacktothemainthemepagebyclickingonthe“allthemes”button
• Clickonwonderlandànew Alice• DragAlice(WONDERLAND)intothesceneandpositionherbytheoasis
Finishedscene1
Thefirstsceneiscomplete
• Use thecircledarrowtoturnthescenetotheright
• Keep turninguntiltheoasisisnolongervisible• Now wecanbeginoursecondscene• Beforeyoudoanythingelse,addanothercamera
• Nameitscene2
CamerasinAlice3• CamerasinAlice3arephysicalelementsthatshowuponyourscreen
• Soasyouturn,thesideofthescene1camerawillcomeintoview
• Itshouldbethesamecolorinthesceneasitisunderthecameramarkertab(redbydefault)
• Whenyouactuallyrunthescene,thesewillnotbevisible!
• However,youwillhavetobecarefultoavoidthemwhiledoingpositioning,astheycanbeclickedanddragged
Addingelements
• Gobacktothemainthemepage• Clickonamazonànew RiverPiece• DragthenewRiverPiece (CURVE1_BLUE)intothescene
• AddanotherAlicetothescene(wonderlandàAliceàAlice(WONDERLAND))
• Inordertopositiontheseelements,youmayhavetousethearrowstoreposition,sothatyoudonotaccidentallyclickonthescene1camera
• Tryzoomingbackwardsoruptogetabetterangle
Finishedscene2
Doublecheck!
• Onceyouaresatisfiedwithyourpositioning,makesureyougobacktoscene1todoublecheckthattheriverisnotvisible!
• Becausetheriverturns,itmayintrudeonthefirstscene.Ifthisisthecase,simplymoveitslightlyfurthertotheright
1)Clickhere first
2)Thenclickhere
Scene3
• Fromscene2,continuetoturnrightuntiltheriverisnolongervisible
• Gobacktothemainthemepage• Clickonsnowànew IceMountain• DragtheIceMountain (DEFAULT)intothescene
• AddandpositionathirdAlice
Finishedscene3
Finaltouches
• ThethreeAlices wehaveaddedwillactasplaceholdersforposition
• WethenwantafourthAlice,whowillmovecontinuallythroughallthescenes
• Gotoscene1andaddafourthAlice
• WewantAlice4tobetheonlyvisibleone• UsethelistofsceneelementsonthefarlefttochangeAlice,Alice2,andAlice3toinvisible
• ThisisdonebychangingtheOpacityto0
Timetocode!
• Clickthe“editcode”buttontogobacktothecodescreen
• First,wewillcreateascenevariable
• GotothedropdownmenuàSceneàAdd SceneProperty
• Valuetype:OthertypesàColor• Name:storeAtmosphereColor• Initializer:WHITE
• Nowaddasceneprocedure
• Nameit“fadeOut”
Fadeout
• Thisprocedurewilldarkenthescreensowecanchangethescenewithouttheviewerseeing
• Draginadotogetherblock• DraginsetAtmosphereColor andsettoBLACK– NOTE:ThisisNOTthevariablewecreated,whichcanbechangedwithsetStoreAtmosphereColor
• DraginsetFromAboveLightColor andsetFromBelowLightColor andsetbothtoBLACK
Testing!
• GobacktomyFirstMethod• DraginfadeOut andplay!• Youshouldseethescreendarkenuntilyoucannolongerseethescene
fadeIn
• Createanothersceneprocedureandnameit“fadeIn”
• Clickontheaddparameterbutton
• SetthevaluetypetoColorandthenameto“atmosphere”
• Draginadotogetherblock• Likebefore,draginsetAtmosphereColor,butthistimeselect“atmosphere”,thevariablewejustcreated
• DraginsetFromAboveLightColor andsetFromBelowLightColor andsetbothtoWHITE
• Nowtocreatethescenes!• MakeanewSceneprocedureandnameitscene1
• Draginadotogetherblock• SelectAlice4– thisshouldbetheonlyvisibleAlice
• DraginamoveTo andselectAlice(thisshouldbetheAliceinscene1)
• ThendraginanorientTo andselectAliceagain
• Draginasayblockandtype“Puteverythingyouwanttohappeninscene1inthismethod.”
• Wewanttorepeatthiscodeforscene2andscene3
• Rightclickonthedotogetherblockandselectcopytoclipboard
• CreateanotherSceneprocedure,andcallitscene2
• Clickanddragfromthekeyboardtotheprocedure
• ChangethementionsofAlicetoAlice2• Draginorcopyoverthesayblock,andsay“Puteverythingyouwanttohappeninscene2inthismethod”
Scene3
• CreateafinalSceneprocedureandcallitscene3
• Repeattheprocess• Makesuretoswapoutthe2sfor3s!
Useyourprocedures
• GobacktomyFirstMethod• Draginadotogether• Selectthis.camera anddraginmoveAndOrientTo,andselectscene1
• Thenselectthis.ground anddraginsetPaint• Youwillbegivenalistofsettingoptions• Sinceourfirstsceneisanoasis,wewantthegroundtobesand
• Finally, selectthisanddraginsetStoreAtmosphereColor
• Note thatthisisnotsetAtmosphereColor,thisisthevariablewecreated
• SelectBLACK, thengotothefunctionstabanddragingetAtmosphereColorinplaceofBLACK
• Note thatgetAtmosphereColor isnotthevariablewecreated
• Draginscene1• DraginfadeOut• Testyourcode!Scene1shouldplay,thenthescreenshouldfadetoblack
Repeatforscene2
• Inadotogether– Havethis.camera moveAndOrientTo scene2– Havethis.ground setPaint toJungle
• DraginfadeIn,andselectstoreAtmosphereColor astheparameter
• Draginscene2• AndthenfadeOut• Trytowritethiscodeforyourselfbeforeyoulookatthepictureonthenextslide
storeAtmosphereColor
• Whyarewebotheringwiththisvariable?• AllstoreAtmosphereColor holdsistheoriginalcoloroftheatmosphere
• InthefadeOut procedureweturntheatmosphereblack
• InfadeIn weturnitbacktotheoriginalcolor• ThereasonweneedstoreAtmosphereColor isthattheoriginalcoloroftheskyisnotoneofthecoloroptionsAliceprovides
Giveitatry
• SetthefadeIn parametertooneoftheothercolors
• Youcanseehowitchangestheskycolor• Noneofthemarequitethesameshadeofblue
• storeAtmosphereColor keepsusfromlosingthatskycolor!
Lastscene
• Wewillrepeatthecodeforscene2,exceptforscene3
• Inadotogether– Havethis.camera moveAndOrientTo scene3– Havethis.ground setPaint toSnow
• DraginfadeIn,andselectstoreAtmosphereColor astheparameter
• Draginscene3• AndthenfadeOut
Finalcode
Ifyouwanttochangeoneoftheskycolors,justchangethefadeIn
parameter!• Forexample,wemightdecidethatmountainskylookssortofgreyandcloudy
• Ifwechoseamoonscene,wemightwanttosetthefadeIn colortoblack
ExtraThings
• Trymakingmorethanthreescenes!Youcanjustkeepturningthecamera
• Addmoretotheindividualsceneprocedures.Makeastory!
• ThecurrentcodefadesinbeforeAlicegetspositioned,soweseehermove.HowwouldyouchangethecodesothatAliceisalreadyinpositionwhenthelightsgoon?