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

45
Scene Changes This is an modification of the June 2009/July 2012 scene change tutorial by Deborah Nelson and Chris Brown By Natalie Huffman Under the direction of Susan Rodger Duke University June 2017

Upload: others

Post on 12-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

SceneChangesThisisanmodificationoftheJune

2009/July2012scenechangetutorialbyDeborahNelsonandChrisBrown

ByNatalieHuffmanUnderthedirectionofSusanRodger

DukeUniversityJune2017

Page 2: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Overview

• Thistutorialiscenteredaroundtheuseofthefullrangeofthecameratoconstructdifferentscenesinthesameworld

• Thecameracanthenshiftbetweenscenes,givingthecodertheabilitytomakeamorecomplicatedworld

• YouwilllearnhowtocontrolthelightlevelsinAlice,andhowtomoveacharacterbetweenscenes

Page 3: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

OpenanewAliceworld

• Choose“Grass”• Gotosetupscene• Addacameramarker• Nameitscene1

Page 4: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

CameraMarkersinAlice3• Cameramarkersletyousaveaviewpoint• Abovethescenebuttonsaretwopositioningbuttons

• Theblackcamerarepresentsyourcurrentpointofview

• Thefirstbuttonmovesyourpointofviewtotheredcamera(scene1)

• Inordertomovetoscene2,youwouldclickonthescene2buttonandthenonthelefttopbutton

• Note:thispictureisfromlaterinthetutorial

Page 5: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Cameramarkers,cont.

• Thesecondbutton,ifclicked,wouldresetthescene1viewtothecurrentview

• Donotclickthisbutton!• Oncewesetacameraview,wewilllikelynotwanttochangeit

Changescene1camera

Changecurrentview

Page 6: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Addtoourscene!

• First,wewanttoaddanoasis• Gotothe“BrowseGalleryByTheme”tab• Clickonsouthwestànew Pond• DragthePond(DESERT_OASIS)intothesceneandpositionitsoitisnearthebottommiddleofthescreen

Page 7: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •
Page 8: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Nowtoaddacharacter

• Getbacktothemainthemepagebyclickingonthe“allthemes”button

• Clickonwonderlandànew Alice• DragAlice(WONDERLAND)intothesceneandpositionherbytheoasis

Page 9: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Finishedscene1

Page 10: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Thefirstsceneiscomplete

• Use thecircledarrowtoturnthescenetotheright

• Keep turninguntiltheoasisisnolongervisible• Now wecanbeginoursecondscene• Beforeyoudoanythingelse,addanothercamera

• Nameitscene2

Page 11: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

CamerasinAlice3• CamerasinAlice3arephysicalelementsthatshowuponyourscreen

• Soasyouturn,thesideofthescene1camerawillcomeintoview

• Itshouldbethesamecolorinthesceneasitisunderthecameramarkertab(redbydefault)

• Whenyouactuallyrunthescene,thesewillnotbevisible!

• However,youwillhavetobecarefultoavoidthemwhiledoingpositioning,astheycanbeclickedanddragged

Page 12: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Addingelements

• Gobacktothemainthemepage• Clickonamazonànew RiverPiece• DragthenewRiverPiece (CURVE1_BLUE)intothescene

• AddanotherAlicetothescene(wonderlandàAliceàAlice(WONDERLAND))

Page 13: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Inordertopositiontheseelements,youmayhavetousethearrowstoreposition,sothatyoudonotaccidentallyclickonthescene1camera

• Tryzoomingbackwardsoruptogetabetterangle

Page 14: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Finishedscene2

Page 15: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Doublecheck!

• Onceyouaresatisfiedwithyourpositioning,makesureyougobacktoscene1todoublecheckthattheriverisnotvisible!

• Becausetheriverturns,itmayintrudeonthefirstscene.Ifthisisthecase,simplymoveitslightlyfurthertotheright

1)Clickhere first

2)Thenclickhere

Page 16: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Scene3

• Fromscene2,continuetoturnrightuntiltheriverisnolongervisible

• Gobacktothemainthemepage• Clickonsnowànew IceMountain• DragtheIceMountain (DEFAULT)intothescene

• AddandpositionathirdAlice

Page 17: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Finishedscene3

Page 18: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Finaltouches

• ThethreeAlices wehaveaddedwillactasplaceholdersforposition

• WethenwantafourthAlice,whowillmovecontinuallythroughallthescenes

• Gotoscene1andaddafourthAlice

Page 19: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• WewantAlice4tobetheonlyvisibleone• UsethelistofsceneelementsonthefarlefttochangeAlice,Alice2,andAlice3toinvisible

• ThisisdonebychangingtheOpacityto0

Page 20: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Timetocode!

• Clickthe“editcode”buttontogobacktothecodescreen

• First,wewillcreateascenevariable

• GotothedropdownmenuàSceneàAdd SceneProperty

Page 21: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Valuetype:OthertypesàColor• Name:storeAtmosphereColor• Initializer:WHITE

Page 22: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Nowaddasceneprocedure

• Nameit“fadeOut”

Page 23: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Fadeout

• Thisprocedurewilldarkenthescreensowecanchangethescenewithouttheviewerseeing

• Draginadotogetherblock• DraginsetAtmosphereColor andsettoBLACK– NOTE:ThisisNOTthevariablewecreated,whichcanbechangedwithsetStoreAtmosphereColor

Page 24: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• DraginsetFromAboveLightColor andsetFromBelowLightColor andsetbothtoBLACK

Page 25: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Testing!

• GobacktomyFirstMethod• DraginfadeOut andplay!• Youshouldseethescreendarkenuntilyoucannolongerseethescene

Page 26: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

fadeIn

• Createanothersceneprocedureandnameit“fadeIn”

• Clickontheaddparameterbutton

• SetthevaluetypetoColorandthenameto“atmosphere”

Page 27: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •
Page 28: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Draginadotogetherblock• Likebefore,draginsetAtmosphereColor,butthistimeselect“atmosphere”,thevariablewejustcreated

• DraginsetFromAboveLightColor andsetFromBelowLightColor andsetbothtoWHITE

Page 29: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Nowtocreatethescenes!• MakeanewSceneprocedureandnameitscene1

• Draginadotogetherblock• SelectAlice4– thisshouldbetheonlyvisibleAlice

• DraginamoveTo andselectAlice(thisshouldbetheAliceinscene1)

• ThendraginanorientTo andselectAliceagain

Page 30: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Draginasayblockandtype“Puteverythingyouwanttohappeninscene1inthismethod.”

Page 31: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Wewanttorepeatthiscodeforscene2andscene3

• Rightclickonthedotogetherblockandselectcopytoclipboard

• CreateanotherSceneprocedure,andcallitscene2

• Clickanddragfromthekeyboardtotheprocedure

Page 32: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• ChangethementionsofAlicetoAlice2• Draginorcopyoverthesayblock,andsay“Puteverythingyouwanttohappeninscene2inthismethod”

Page 33: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Scene3

• CreateafinalSceneprocedureandcallitscene3

• Repeattheprocess• Makesuretoswapoutthe2sfor3s!

Page 34: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Useyourprocedures

• GobacktomyFirstMethod• Draginadotogether• Selectthis.camera anddraginmoveAndOrientTo,andselectscene1

• Thenselectthis.ground anddraginsetPaint• Youwillbegivenalistofsettingoptions• Sinceourfirstsceneisanoasis,wewantthegroundtobesand

Page 35: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Finally, selectthisanddraginsetStoreAtmosphereColor

• Note thatthisisnotsetAtmosphereColor,thisisthevariablewecreated

• SelectBLACK, thengotothefunctionstabanddragingetAtmosphereColorinplaceofBLACK

• Note thatgetAtmosphereColor isnotthevariablewecreated

Page 36: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

• Draginscene1• DraginfadeOut• Testyourcode!Scene1shouldplay,thenthescreenshouldfadetoblack

Page 37: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Repeatforscene2

• Inadotogether– Havethis.camera moveAndOrientTo scene2– Havethis.ground setPaint toJungle

• DraginfadeIn,andselectstoreAtmosphereColor astheparameter

• Draginscene2• AndthenfadeOut• Trytowritethiscodeforyourselfbeforeyoulookatthepictureonthenextslide

Page 38: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •
Page 39: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

storeAtmosphereColor

• Whyarewebotheringwiththisvariable?• AllstoreAtmosphereColor holdsistheoriginalcoloroftheatmosphere

• InthefadeOut procedureweturntheatmosphereblack

• InfadeIn weturnitbacktotheoriginalcolor• ThereasonweneedstoreAtmosphereColor isthattheoriginalcoloroftheskyisnotoneofthecoloroptionsAliceprovides

Page 40: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Giveitatry

• SetthefadeIn parametertooneoftheothercolors

• Youcanseehowitchangestheskycolor• Noneofthemarequitethesameshadeofblue

• storeAtmosphereColor keepsusfromlosingthatskycolor!

Page 41: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •
Page 42: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Lastscene

• Wewillrepeatthecodeforscene2,exceptforscene3

• Inadotogether– Havethis.camera moveAndOrientTo scene3– Havethis.ground setPaint toSnow

• DraginfadeIn,andselectstoreAtmosphereColor astheparameter

• Draginscene3• AndthenfadeOut

Page 43: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Finalcode

Page 44: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

Ifyouwanttochangeoneoftheskycolors,justchangethefadeIn

parameter!• Forexample,wemightdecidethatmountainskylookssortofgreyandcloudy

• Ifwechoseamoonscene,wemightwanttosetthefadeIn colortoblack

Page 45: Scene Changes - Duke University · Scene Changes This is an modification of the June ... Scene 3 • Create a final Scene procedure and call it scene3 • Repeat the process ... •

ExtraThings

• Trymakingmorethanthreescenes!Youcanjustkeepturningthecamera

• Addmoretotheindividualsceneprocedures.Makeastory!

• ThecurrentcodefadesinbeforeAlicegetspositioned,soweseehermove.HowwouldyouchangethecodesothatAliceisalreadyinpositionwhenthelightsgoon?