scene changes - duke university · scene changes this is an modification of the june ... scene 3...

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?