SceneChanges

ThisisanmodificationoftheJune2009/July2012scenechangetutorialby

DeborahNelsonandChrisBrown

ByNatalieHuffman

UnderthedirectionofSusanRodger

DukeUniversity

June2017

Overview

• Thistutorialiscenteredaroundtheuseofthe

fullrangeofthecameratoconstructdifferent

scenesinthesameworld

• Thecameracanthenshiftbetweenscenes,

givingthecodertheabilitytomakeamore

complicatedworld

• Youwilllearnhowtocontrolthelightlevelsin

Alice,andhowtomoveacharacterbetween

scenes

OpenanewAliceworld

• Choose“Grass”

• Gotosetupscene

• Addacameramarker

• Nameitscene1

CameraMarkersinAlice3

• Cameramarkersletyousaveaviewpoint

• Abovethescenebuttonsaretwopositioningbuttons

• Theblackcamerarepresentsyourcurrentpointofview

• Thefirstbuttonmovesyourpointofviewtotheredcamera(scene1)

• Inordertomovetoscene2,youwouldclickonthescene2buttonandthenonthelefttopbutton

• Note:thispictureisfromlaterinthetutorial

Cameramarkers,cont.

• Thesecondbutton,ifclicked,

wouldresetthescene1view

tothecurrentview

• Donotclickthisbutton!

• Oncewesetacameraview,

wewilllikelynotwantto

changeit

Changescene1

camera

Change

currentview

Addtoourscene!

• First,wewanttoaddanoasis

• Gotothe“BrowseGalleryByTheme”tab

• Clickonsouthwestànew Pond

• DragthePond(DESERT_OASIS)intothescene

andpositionitsoitisnearthebottommiddle

ofthescreen

Nowtoaddacharacter

• Getbacktothemainthemepagebyclicking

onthe“allthemes”button

• Clickonwonderlandànew Alice

• DragAlice(WONDERLAND)intothesceneand

positionherbytheoasis

Finishedscene1 Thefirstsceneiscomplete

• Use thecircled

arrowtoturnthe

scenetotheright

• Keep turninguntiltheoasisisnolongervisible

• Now wecanbeginoursecondscene

• Beforeyoudoanythingelse,addanother

camera

• Nameitscene2

CamerasinAlice3

• CamerasinAlice3arephysicalelementsthatshowuponyourscreen

• Soasyouturn,thesideofthescene1camerawillcomeintoview

• Itshouldbethesamecolorinthesceneasitisunderthecameramarkertab(redbydefault)

• Whenyouactuallyrunthescene,thesewillnotbevisible!

• However,youwillhavetobecarefultoavoidthemwhiledoingpositioning,astheycanbeclickedanddragged

Addingelements

• Gobacktothemainthemepage

• Clickonamazonànew RiverPiece

• DragthenewRiverPiece (CURVE1_BLUE)into

thescene

• AddanotherAlicetothescene

(wonderlandàAliceàAlice(WONDERLAND))

• Inordertopositiontheseelements,youmay

havetousethearrowstoreposition,sothat

youdonotaccidentallyclickonthescene1

camera

• Tryzoomingbackwardsoruptogetabetter

angle

Finishedscene2

Doublecheck!

• Onceyouaresatisfiedwithyourpositioning,

makesureyougobacktoscene1todouble

checkthattheriverisnotvisible!

• Becausetheriverturns,itmayintrudeonthe

firstscene.Ifthisisthecase,simplymoveit

slightlyfurthertotheright

1)Click

here first

2)Thenclick

here

Scene3

• Fromscene2,continuetoturnrightuntilthe

riverisnolongervisible

• Gobacktothemainthemepage

• Clickonsnowànew IceMountain

• DragtheIceMountain (DEFAULT)intothe

scene

• AddandpositionathirdAlice

Finishedscene3 Finaltouches

• ThethreeAlices wehaveaddedwillactas

placeholdersforposition

• WethenwantafourthAlice,whowillmove

continuallythroughallthescenes

• Gotoscene1andaddafourthAlice

• WewantAlice4tobetheonlyvisibleone

• Usethelistofsceneelementsonthefarleft

tochangeAlice,Alice2,andAlice3toinvisible

• ThisisdonebychangingtheOpacityto0

Timetocode!

• Clickthe“editcode”buttontogobacktothe

codescreen

• First,wewill

createascene

variable

• Gotothe

dropdownmenuàSceneàAdd Scene

Property

• Valuetype:OthertypesàColor

• Name:storeAtmosphereColor

• Initializer:WHITE

• Nowadda

sceneprocedure

• Nameit

“fadeOut”

Fadeout

• Thisprocedurewilldarkenthescreensowe

canchangethescenewithouttheviewer

seeing

• Draginadotogetherblock

• DraginsetAtmosphereColor andsettoBLACK

– NOTE:ThisisNOTthevariablewecreated,whichcanbechangedwithsetStoreAtmosphereColor

• DraginsetFromAboveLightColor and

setFromBelowLightColor andsetbothto

BLACK

Testing!

• GobacktomyFirstMethod

• DraginfadeOut andplay!

• Youshouldseethescreendarkenuntilyou

cannolongerseethescene

fadeIn

• Createanothersceneprocedureandnameit

“fadeIn”

• Clickonthe

addparameter

button

• SetthevaluetypetoColorandthe

nameto“atmosphere”

• Draginadotogetherblock

• Likebefore,draginsetAtmosphereColor,but

thistimeselect“atmosphere”,thevariablewe

justcreated

• DraginsetFromAboveLightColor and

setFromBelowLightColor andsetbothto

WHITE

• Nowtocreatethescenes!

• MakeanewSceneprocedureandnameitscene1

• Draginadotogetherblock

• SelectAlice4– thisshouldbetheonlyvisibleAlice

• DraginamoveTo andselectAlice(thisshouldbetheAliceinscene1)

• ThendraginanorientTo andselectAliceagain

• Draginasayblockandtype“Puteverything

youwanttohappeninscene1inthismethod.”

• Wewanttorepeatthiscodeforscene2and

scene3

• Rightclickonthedotogetherblockandselect

copytoclipboard

• CreateanotherSceneprocedure,andcallit

scene2

• Clickanddragfromthekeyboardtothe

procedure

• ChangethementionsofAlicetoAlice2

• Draginorcopyoverthesayblock,andsay

“Puteverythingyouwanttohappeninscene

2inthismethod”

Scene3

• CreateafinalSceneprocedureandcallit

scene3

• Repeattheprocess

• Makesuretoswapoutthe2sfor3s!

Useyourprocedures

• GobacktomyFirstMethod

• Draginadotogether

• Selectthis.camera anddragin

moveAndOrientTo,andselectscene1

• Thenselectthis.ground anddraginsetPaint

• Youwillbegivenalistofsettingoptions

• Sinceourfirstsceneisanoasis,wewantthe

groundtobesand

• Finally, selectthis

anddragin

setStoreAtmosphereColor

• Note thatthisisnot

setAtmosphereColor,thisisthe

variablewecreated

• SelectBLACK, thengotothefunctions

tabanddragingetAtmosphereColor

inplaceofBLACK

• Note thatgetAtmosphereColor isnotthevariablewecreated

• Draginscene1

• DraginfadeOut

• Testyourcode!Scene1shouldplay,thenthe

screenshouldfadetoblack

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 parametertooneoftheother

colors

• Youcanseehowitchangestheskycolor

• Noneofthemarequitethesameshadeof

blue

• storeAtmosphereColor keepsusfromlosing

thatskycolor!

Lastscene

• Wewillrepeatthecodeforscene2,exceptfor

scene3

• Inadotogether

– Havethis.camera moveAndOrientTo scene3

– Havethis.ground setPaint toSnow• DraginfadeIn,andselect

storeAtmosphereColor astheparameter

• Draginscene3

• AndthenfadeOut

Finalcode

Ifyouwanttochangeoneofthesky

colors,justchangethefadeIn

parameter!• Forexample,wemightdecidethatmountainskylookssortofgreyandcloudy

• Ifwechoseamoonscene,wemightwanttosetthefadeIn colortoblack

ExtraThings

• Trymakingmorethanthreescenes!Youcan

justkeepturningthecamera

• Addmoretotheindividualsceneprocedures.

Makeastory!

• ThecurrentcodefadesinbeforeAlicegets

positioned,soweseehermove.Howwould

youchangethecodesothatAliceisalreadyin

positionwhenthelightsgoon?