-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab0unreal.html
724 lines (559 loc) · 46.7 KB
/
lab0unreal.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
<!DOCTYPE html>
<html style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link href="core_1_files/css.css" rel="stylesheet" type="text/css">
<title>CS390VR</title>
<link rel="stylesheet" media="screen" href="core_1_files/application-b003a2aed8000d18718b8545a3dbc91e74d9f512bac311de.css">
<script type="text/javascript" async="" src="core_1_files/mixpanel-2-latest.js"></script><script async="" src="core_1_files/analytics_002.js"></script><script type="text/javascript" async="" src="core_1_files/analytics.js"></script><script src="core_1_files/modernizr-8560f87d0bc4f137917740acabfc72f0d469565340a978cb6aa.js"></script>
<script src="core_1_files/application-c98d44f2579d90a5543247901b7a56dd26df31b9e3ef0b7b9.js"></script><meta class="foundation-data-attribute-namespace"><meta class="foundation-mq-xxlarge"><meta class="foundation-mq-xlarge-only"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-large-only"><meta class="foundation-mq-large"><meta class="foundation-mq-medium-only"><meta class="foundation-mq-medium"><meta class="foundation-mq-small-only"><meta class="foundation-mq-small"><style></style>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="F2Q9aWjmrZZXU3fGih6OLPjFmbsH/6KM7UDz83ow16QkUF3iNN2VOEEaJgDNeYnXwcReHIjBKbB14pE0TSeAOQ==">
<meta class="foundation-mq-topbar"><style type="text/css">.MathJax_Hover_Frame {border-radius: .25em; -webkit-border-radius: .25em; -moz-border-radius: .25em; -khtml-border-radius: .25em; box-shadow: 0px 0px 15px #83A; -webkit-box-shadow: 0px 0px 15px #83A; -moz-box-shadow: 0px 0px 15px #83A; -khtml-box-shadow: 0px 0px 15px #83A; border: 1px solid #A6D ! important; display: inline-block; position: absolute}
.MathJax_Menu_Button .MathJax_Hover_Arrow {position: absolute; cursor: pointer; display: inline-block; border: 2px solid #AAA; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; font-family: 'Courier New',Courier; font-size: 9px; color: #F0F0F0}
.MathJax_Menu_Button .MathJax_Hover_Arrow span {display: block; background-color: #AAA; border: 1px solid; border-radius: 3px; line-height: 0; padding: 4px}
.MathJax_Hover_Arrow:hover {color: white!important; border: 2px solid #CCC!important}
.MathJax_Hover_Arrow:hover span {background-color: #CCC!important}
</style><style type="text/css">#MathJax_About {position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: #DDDDDD; color: black; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
#MathJax_About.MathJax_MousePost {outline: none}
.MathJax_Menu {position: absolute; background-color: white; color: black; width: auto; padding: 2px; border: 1px solid #CCCCCC; margin: 0; cursor: default; font: menu; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
.MathJax_MenuItem {padding: 2px 2em; background: transparent}
.MathJax_MenuArrow {position: absolute; right: .5em; padding-top: .25em; color: #666666; font-size: .75em}
.MathJax_MenuActive .MathJax_MenuArrow {color: white}
.MathJax_MenuArrow.RTL {left: .5em; right: auto}
.MathJax_MenuCheck {position: absolute; left: .7em}
.MathJax_MenuCheck.RTL {right: .7em; left: auto}
.MathJax_MenuRadioCheck {position: absolute; left: 1em}
.MathJax_MenuRadioCheck.RTL {right: 1em; left: auto}
.MathJax_MenuLabel {padding: 2px 2em 4px 1.33em; font-style: italic}
.MathJax_MenuRule {border-top: 1px solid #CCCCCC; margin: 4px 1px 0px}
.MathJax_MenuDisabled {color: GrayText}
.MathJax_MenuActive {background-color: Highlight; color: HighlightText}
.MathJax_MenuDisabled:focus, .MathJax_MenuLabel:focus {background-color: #E8E8E8}
.MathJax_ContextMenu:focus {outline: none}
.MathJax_ContextMenu .MathJax_MenuItem:focus {outline: none}
#MathJax_AboutClose {top: .2em; right: .2em}
.MathJax_Menu .MathJax_MenuClose {top: -10px; left: -10px}
.MathJax_MenuClose {position: absolute; cursor: pointer; display: inline-block; border: 2px solid #AAA; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -khtml-border-radius: 18px; font-family: 'Courier New',Courier; font-size: 24px; color: #F0F0F0}
.MathJax_MenuClose span {display: block; background-color: #AAA; border: 1.5px solid; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -khtml-border-radius: 18px; line-height: 0; padding: 8px 0 6px}
.MathJax_MenuClose:hover {color: white!important; border: 2px solid #CCC!important}
.MathJax_MenuClose:hover span {background-color: #CCC!important}
.MathJax_MenuClose:hover:focus {outline: none}
</style><style type="text/css">.MathJax_Preview .MJXf-math {color: inherit!important}
</style><style type="text/css">.MJX_Assistive_MathML {position: absolute!important; top: 0; left: 0; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0 0 0!important; border: 0!important; height: 1px!important; width: 1px!important; overflow: hidden!important; display: block!important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.MJX_Assistive_MathML.MJX_Assistive_MathML_Block {width: 100%!important}
</style><style type="text/css">#MathJax_Zoom {position: absolute; background-color: #F0F0F0; overflow: auto; display: block; z-index: 301; padding: .5em; border: 1px solid black; margin: 0; font-weight: normal; font-style: normal; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-shadow: 5px 5px 15px #AAAAAA; -webkit-box-shadow: 5px 5px 15px #AAAAAA; -moz-box-shadow: 5px 5px 15px #AAAAAA; -khtml-box-shadow: 5px 5px 15px #AAAAAA; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
#MathJax_ZoomOverlay {position: absolute; left: 0; top: 0; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}
#MathJax_ZoomFrame {position: relative; display: inline-block; height: 0; width: 0}
#MathJax_ZoomEventTrap {position: absolute; left: 0; top: 0; z-index: 302; display: inline-block; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}
</style><style type="text/css">.MathJax_Preview {color: #888}
#MathJax_Message {position: fixed; left: 1px; bottom: 2px; background-color: #E6E6E6; border: 1px solid #959595; margin: 0px; padding: 2px 8px; z-index: 102; color: black; font-size: 80%; width: auto; white-space: nowrap}
#MathJax_MSIE_Frame {position: absolute; top: 0; left: 0; width: 0px; z-index: 101; border: 0px; margin: 0px; padding: 0px}
.MathJax_Error {color: #CC0000; font-style: italic}
</style><style type="text/css">.MJXp-script {font-size: .8em}
.MJXp-right {-webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right}
.MJXp-bold {font-weight: bold}
.MJXp-italic {font-style: italic}
.MJXp-scr {font-family: MathJax_Script,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-frak {font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-sf {font-family: MathJax_SansSerif,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-cal {font-family: MathJax_Caligraphic,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-mono {font-family: MathJax_Typewriter,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-largeop {font-size: 150%}
.MJXp-largeop.MJXp-int {vertical-align: -.2em}
.MJXp-math {display: inline-block; line-height: 1.2; text-indent: 0; font-family: 'Times New Roman',Times,STIXGeneral,serif; white-space: nowrap; border-collapse: collapse}
.MJXp-display {display: block; text-align: center; margin: 1em 0}
.MJXp-math span {display: inline-block}
.MJXp-box {display: block!important; text-align: center}
.MJXp-box:after {content: " "}
.MJXp-rule {display: block!important; margin-top: .1em}
.MJXp-char {display: block!important}
.MJXp-mo {margin: 0 .15em}
.MJXp-mfrac {margin: 0 .125em; vertical-align: .25em}
.MJXp-denom {display: inline-table!important; width: 100%}
.MJXp-denom > * {display: table-row!important}
.MJXp-surd {vertical-align: top}
.MJXp-surd > * {display: block!important}
.MJXp-script-box > * {display: table!important; height: 50%}
.MJXp-script-box > * > * {display: table-cell!important; vertical-align: top}
.MJXp-script-box > *:last-child > * {vertical-align: bottom}
.MJXp-script-box > * > * > * {display: block!important}
.MJXp-mphantom {visibility: hidden}
.MJXp-munderover {display: inline-table!important}
.MJXp-over {display: inline-block!important; text-align: center}
.MJXp-over > * {display: block!important}
.MJXp-munderover > * {display: table-row!important}
.MJXp-mtable {vertical-align: .25em; margin: 0 .125em}
.MJXp-mtable > * {display: inline-table!important; vertical-align: middle}
.MJXp-mtr {display: table-row!important}
.MJXp-mtd {display: table-cell!important; text-align: center; padding: .5em 0 0 .5em}
.MJXp-mtr > .MJXp-mtd:first-child {padding-left: 0}
.MJXp-mtr:first-child > .MJXp-mtd {padding-top: 0}
.MJXp-mlabeledtr {display: table-row!important}
.MJXp-mlabeledtr > .MJXp-mtd:first-child {padding-left: 0}
.MJXp-mlabeledtr:first-child > .MJXp-mtd {padding-top: 0}
.MJXp-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 1px 3px; font-style: normal; font-size: 90%}
.MJXp-scale0 {-webkit-transform: scaleX(.0); -moz-transform: scaleX(.0); -ms-transform: scaleX(.0); -o-transform: scaleX(.0); transform: scaleX(.0)}
.MJXp-scale1 {-webkit-transform: scaleX(.1); -moz-transform: scaleX(.1); -ms-transform: scaleX(.1); -o-transform: scaleX(.1); transform: scaleX(.1)}
.MJXp-scale2 {-webkit-transform: scaleX(.2); -moz-transform: scaleX(.2); -ms-transform: scaleX(.2); -o-transform: scaleX(.2); transform: scaleX(.2)}
.MJXp-scale3 {-webkit-transform: scaleX(.3); -moz-transform: scaleX(.3); -ms-transform: scaleX(.3); -o-transform: scaleX(.3); transform: scaleX(.3)}
.MJXp-scale4 {-webkit-transform: scaleX(.4); -moz-transform: scaleX(.4); -ms-transform: scaleX(.4); -o-transform: scaleX(.4); transform: scaleX(.4)}
.MJXp-scale5 {-webkit-transform: scaleX(.5); -moz-transform: scaleX(.5); -ms-transform: scaleX(.5); -o-transform: scaleX(.5); transform: scaleX(.5)}
.MJXp-scale6 {-webkit-transform: scaleX(.6); -moz-transform: scaleX(.6); -ms-transform: scaleX(.6); -o-transform: scaleX(.6); transform: scaleX(.6)}
.MJXp-scale7 {-webkit-transform: scaleX(.7); -moz-transform: scaleX(.7); -ms-transform: scaleX(.7); -o-transform: scaleX(.7); transform: scaleX(.7)}
.MJXp-scale8 {-webkit-transform: scaleX(.8); -moz-transform: scaleX(.8); -ms-transform: scaleX(.8); -o-transform: scaleX(.8); transform: scaleX(.8)}
.MJXp-scale9 {-webkit-transform: scaleX(.9); -moz-transform: scaleX(.9); -ms-transform: scaleX(.9); -o-transform: scaleX(.9); transform: scaleX(.9)}
.MathJax_PHTML .noError {vertical-align: ; font-size: 90%; text-align: left; color: black; padding: 1px 3px; border: 1px solid}
</style>
</head>
<body>
<div id="MathJax_Message" style="display: none;"></div>
<script src="core_1_files/course_page-28737d57aa1857fe96c212a126d98314b40666074355b149d.js"></script>
<script src="core_1_files/offline_tools-cd84d6c5d61ed136223b4a93a34abde5fcbf41d4e79f732.js"></script>
<script type="text/javascript" src="core_1_files/MathJax.js"></script>
<div class="row row-padding-top" data-equalizer="">
<div class="medium-3 columns hide-for-small sidebar open" data-equalizer-watch="" style="height: 19996px;">
<div class="sidebar-content" style="">
<div class="open active">
<div class="spacer"></div>
<h4>
Lab 0: Unreal Tutorial
<a href="./home.html" class="right hidden-at-top detail">Back to course page</a>
</h4>
<hr>
<ul>
<li class="active"><div class="section-progress-container">
<div class="section-progress"></div>
</div>
<a href="#1-intro-to-ue4">Intro to UE4</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-navigating-your-world">Navigating Your World</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-viewing-in-vr">Viewing In VR</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-placing-actors">Placing Actors</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-moving-actors">Moving Actors</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-placing-lights">Placing Lights</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-changing-materials">Changing Materials</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-editing-material-instances">Editing Material Instances</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-player-start">Player Start</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-viewport-properties">Viewport Properties</a></li>
<li><div class="section-progress-container">
<div class="section-progress" style="height: 0%;"></div>
</div>
<a href="#1-conclusion">Conclusion</a></li>
</ul>
</div>
</div>
</div>
<div class="small-12 medium-9 columns" data-equalizer-watch="" style="height: 19996px;">
<div class="row collapse">
<div class="small-12 small-centered columns">
<div class="default-panel margin-bottom shadow">
<div class="header shadow-down more-padding">
<h4>Lab 0: Unreal Tutorial</h4>
</div>
<div class="content more-padding light-background reader">
<div id="1-intro-to-ue4" class="scrollspy-section">
<h1 class="hide" id="intro-to-ue4">Intro to UE4</h1>
<blockquote class="challenge">
<h3 id="download-the-starter-project">Download the Starter Project</h3>
<p>Layout uses one Master Starter Project. If you’ve downloaded it recently, chances are you don’t need to re-download it.</p>
<p><em>This tutorial requires that you’ve downloaded the starter project as of 4/5/16</em>:</p>
<ul>
<li><a href="https://github.com/LayoutVR/ToyBoxx/archive/master.zip" class="blue"><strong>Click here</strong></a> to download the Layout Master starter project.</li>
<li>Extract the zip folder.</li>
<li>Open up the <strong>Layout_ToyBoxx.uproject</strong> and <em>begin your adventure</em>!</li>
</ul>
</blockquote>
<p>Woah! How does it feel to be inside a AAA game engine? Do you feel
cool yet? Because you are. You’ve just begun your journey to becoming a <strong>Virtual Reality content creator</strong>.</p>
<p>After completing this tutorial, you will be familiar with some of
the foundational components of Unreal Engine 4. You’ll also have the
opportunity to experience your project in virtual reality. There’s a lot
of new stuff in front of you, let’s jump right in!</p>
<div class="text-center image-container"><img alt="Level Editor" class="zoomable zoomed" src="core_1_files/1_008.png" data-zoom-image="/assets/learn_resources/core_1/1.1.png"></div>
<p class="text-center image-caption">Hover over an image to zoom in</p>
<p>This is the <strong>Level Editor</strong>. Here you’ll be able to create your worlds, browse your assets, and edit the <strong>actors</strong> in your level.</p>
<blockquote class="important">
<p><strong>Actors</strong> are objects that can be placed in the
world. They can be physical objects like a wall, moving objects like an
AI controlled entity, or invisible objects like a player spawn point.</p>
</blockquote>
<hr>
</div>
<div id="1-navigating-your-world" class="scrollspy-section">
<h2 id="navigating-your-world">Navigating Your World</h2>
<p>The large panel in the center of the editor window is the <strong>Viewport</strong>.</p>
<div class="text-center image-container"><img alt="Viewport" class="zoomable zoomed" src="core_1_files/1_003.png" data-zoom-image="/assets/learn_resources/core_1/1.2.png"></div>
<p class="text-center image-caption">Hover over an image to zoom in</p>
<p>The <strong>Viewport</strong> is the window into your world. Here you can place and manipulate actors in your level.</p>
<p>Navigating the world through the viewport takes practice!</p>
<ul>
<li>To rotate: hold the <strong>right-mouse</strong> button and drag</li>
<li>To move: press <kbd>W</kbd>, <kbd>A</kbd>, <kbd>S</kbd>, and <kbd>D</kbd> <em>while holding any mouse button</em></li>
</ul>
<p>We find it’s easiest to navigate the world by pressing the <strong>right-mouse</strong> button to look and using <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> to move.</p>
<blockquote class="important">
<h3 id="additional-controls">Additional Controls:</h3>
<ul>
<li>To move: hold the <strong>left-mouse</strong> button and drag</li>
<li>To move up and down: press <kbd>E</kbd> and <kbd>Q</kbd> <em>while holding any mouse button</em></li>
<li>To move forward and backward: scroll the <strong>middle-mouse</strong> button</li>
<li>To move up, down, left, and right: hold the <strong>middle-mouse</strong> button and drag</li>
<li>To get unexpected behavior: <strong>bash</strong> on the keyboard.</li>
</ul>
</blockquote>
<h4 id="camera-speed">Camera Speed</h4>
<p>Navigating with precision can be hard with the camera moves so quickly. The <strong>Camera Speed</strong> button in the upper right allows you to change your movement speed in the <strong>Viewport</strong>.</p>
<div class="text-center image-container"><img alt="Camera Speed" class="zoomable zoomed" src="core_1_files/1_007.png" data-zoom-image="/assets/learn_resources/core_1/1.8.png"></div>
<p>You can also change your <strong>Camera Speed</strong> by holding a
mouse button and scrolling your middle mouse wheel. Note that changing
the speed this way will not adjust the number shown on the <strong>Camera Speed</strong> button.</p>
<blockquote class="challenge">
<h4 id="challenge">Challenge:</h4>
<p>Navigate the house you’re inside of to find the <strong>3 golden pyramids</strong>. Don’t press the <strong>Play</strong> button, this is your time to practice the in-editor controls! Try to not go through any walls or closed doors.</p>
</blockquote>
<hr>
</div>
<div id="1-viewing-in-vr" class="scrollspy-section">
<h2 id="viewing-in-vr">Viewing In VR</h2>
<p>Above the <strong>Viewport</strong> is the <strong>Toolbar</strong>, which contains buttons for common commands in the editor.</p>
<div class="text-center image-container"><img alt="Toolbar" class="zoomable zoomed" src="core_1_files/1_005.png" data-zoom-image="/assets/learn_resources/core_1/1.3.png"></div>
<ul>
<li>Click the <strong>Play</strong> button to run your game in the editor.</li>
<li>Click the small triangle next to the <strong>Play</strong> button to open a dropdown menu. Click <strong>VR Preview</strong> to run the game in your Head Mounted Display (HMD).</li>
</ul>
<blockquote class="important">
<p>If the <strong>VR Preview</strong> button is grayed out, it means your HMD is not set up properly. First make sure you followed all the <a href="./setup.html" class="blue">Setup Steps</a>. Then:</p>
<ul>
<li>Close UE4</li>
<li>Unplug your HMD</li>
<li>Plug in your HMD and make sure your computer recognizes it</li>
<li>Open UE4</li>
</ul>
</blockquote>
<hr>
</div>
<div id="1-placing-actors" class="scrollspy-section">
<h2 id="placing-actors">Placing Actors</h2>
<p>It’s time to put some actors in our level!</p>
<blockquote class="optional">
<p>Remember, <strong>Actors</strong> are objects that can be placed in the world.</p>
</blockquote>
<p>Beneath the <strong>Viewport</strong> is the <strong>Content Browser</strong>, which provides access to the project’s assets and files.</p>
<div class="text-center image-container"><img alt="Content Browser" class="zoomable zoomed" src="core_1_files/1_002.png" data-zoom-image="/assets/learn_resources/core_1/1.9.png"></div>
<p>Let’s create our own room. In order to do that, let’s start in an empty level:</p>
<ul>
<li>Open the <strong>Lesson1</strong> folder</li>
<li>Double click the <strong>MyRoom</strong> level to open it</li>
</ul>
<p>Great. Now we have some space to work with. Time to place some actors!</p>
<ul>
<li>Open up the <strong>Meshes</strong> folder</li>
</ul>
<p>The <strong>Meshes</strong> folder contains a bunch of <strong>Static Meshes</strong>
separated into folders. This project has a huge set of starter assets
for you to play with later, but for our room, we’re going to stick to
the <strong>InteriorArchViz</strong> assets.</p>
<blockquote class="important">
<p><strong>Static Meshes</strong> are <strong>3D Models</strong> that we can use in our world.</p>
</blockquote>
<ul>
<li>Open the <strong>InteriorArchViz > Architecture > Spacers</strong> folder</li>
<li>Click and drag the <strong>Spacer_500x500</strong> static mesh into the viewport.</li>
</ul>
<p>You just placed your first actor!</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/place_static_mesh.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<hr>
</div>
<div id="1-moving-actors" class="scrollspy-section">
<h2 id="moving-actors">Moving Actors</h2>
<p>Now that we have a floor in our level, let’s position it at the origin of the world.</p>
<p>The <strong>Details</strong> panel in the lower right shows all the details of a selected actor.</p>
<div class="text-center image-container"><img alt="Details panel" class="zoomable zoomed" src="core_1_files/1_010.png" data-zoom-image="/assets/learn_resources/core_1/1.4.png"></div>
<p>Right now, we care about the <strong>Transform</strong> - <strong>Location</strong>, <strong>Rotation</strong>, and <strong>Scale</strong> - of the floor actor.</p>
<ul>
<li>Set the <strong>Location</strong> of the floor to <strong>[0, 0, 0]</strong></li>
</ul>
<p>The <strong>Transform</strong> of an actor can also be edited using the 3D handles in the viewport:</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/using_3d_handles.mp4" type="video/mp4">
Your browser does not support HTML5 video.
TODO: update video with house parts
</video></div>
<p>As you can see, you can change the mode of the 3D handles in the upper right corner of the <strong>Viewport</strong>. The <strong>Location</strong>, <strong>Rotation</strong>, and <strong>Scale</strong> handle modes can also be selected with the <kbd>W</kbd>,<kbd>E</kbd>, and <kbd>R</kbd> keys respectively.</p>
<blockquote class="challenge">
<h4 id="challenge-1">Challenge:</h4>
<p>Place 3 walls and a ceiling in order to create an open room. Find the appropriate static meshes in the <strong>Walls</strong> and <strong>Ceilings</strong> folders.</p>
<p>Use this as an opportunity to get familiar with using the 3D handles and the <strong>Details</strong> panel for transforming actors.</p>
<h4 id="tips">Tips:</h4>
<ul>
<li>Pay attention to the titles of the static meshes to know what type and size they are.</li>
<li>Hold <kbd>Alt</kbd> and move a static mesh to move a copy of the mesh.</li>
<li>Right-click a static mesh actor and hover the <strong>Transform</strong> sub-menu to get more transforming options.</li>
<li>To delete an actor, select it and press the <kbd>Delete</kbd> key</li>
</ul>
<p>Using some tips:</p>
<div class="text-center image-container"><div style="position: absolute; height: 329px; width: 657px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/alt_copy_and_mirror.mp4" type="video/mp4">
Your browser does not support HTML5 video.
TODO: update video with house parts
</video></div>
<p>Here’s an example finished room:</p>
<div class="text-center image-container"><img alt="Finished Open Room" class="zoomable zoomed" src="core_1_files/1_004.png" data-zoom-image="/assets/learn_resources/core_1/1.5.png"></div>
</blockquote>
<ul>
<li>Now that you’ve made some changes to your level, press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save all your changes!</li>
</ul>
<hr>
</div>
<div id="1-placing-lights" class="scrollspy-section">
<h2 id="placing-lights">Placing Lights</h2>
<p>Let’s add a light inside your room:</p>
<p>The <strong>Modes</strong> panel in the upper left allows access to different UE4 tools like texture <strong>painting</strong>, <strong>landscape</strong> creation, <strong>foliage</strong> placing, and <strong>geometry</strong> editing. The default <strong>Place</strong> mode, the mode we currently care about, allows you to place common actors - like lights - into your level.</p>
<div class="text-center image-container"><img alt="Modes panel" class="zoomable zoomed" src="core_1_files/1_006.png" data-zoom-image="/assets/learn_resources/core_1/1.6.png"></div>
<p>To add a light:</p>
<ul>
<li>In <strong>Place</strong> mode, open the <strong>Lights</strong> submenu</li>
<li>Click and drag a <strong>Point Light</strong> into the center of your room</li>
</ul>
<p>Unreal Engine 4 features four different types of light: <strong>Point</strong>, <strong>Directional</strong>, <strong>Spot</strong>, and <strong>Sky</strong>.</p>
<p><strong>Point Lights</strong> work much like a real world light bulb, emitting light equally in all directions from a single point in space.</p>
<p><strong>Directional Lights</strong> simulate light emitted from a
source that is infinitely far away. All shadows cast by this light will
be parallel, making this the ideal choice for simulating sunlight.</p>
<p><strong>Spot Lights</strong> emit light from a single point in a cone shape.</p>
<p><strong>Sky Lights</strong> capture ambient light information from the far distances of the map.</p>
<blockquote class="challenge">
<h4 id="challenge-2">Challenge:</h4>
<p>Click on your new <strong>Point Light</strong> and edit some of its properties in the <strong>Details</strong> panel. The most fun properties to edit are:</p>
<ul>
<li>Light Color</li>
<li>Intensity</li>
<li>Attenuation Radius</li>
</ul>
<div class="text-center image-container"><img alt="Lit Room" class="zoomable zoomed" src="core_1_files/1_009.png" data-zoom-image="/assets/learn_resources/core_1/1.7.png"></div>
</blockquote>
<p>Lighting for VR is tricky because it’s an expensive process, and VR
requires optimal performance. For that reason, we should try to use <strong>static</strong> lighting wherever possible.</p>
<p><strong>Static</strong> lighting is less expensive than <strong>Dynamic</strong>
lighting because all the calculations are “baked” into the textures
before the game even runs. In this way, our VR experience will not have
to calculate any lighting for lights that are set to <strong>static</strong>. The draw back is that you can’t change a <strong>static</strong> light’s color or intensity mid-game. <strong>Static</strong> lights also don’t cast dynamic shadows.</p>
<p>To make your light <strong>static</strong>:</p>
<ul>
<li>Set <strong>Mobility</strong> to <strong>Static</strong> in the <strong>Details</strong> panel while the light is selected.</li>
</ul>
<p>Once your light is in the correct place:</p>
<ul>
<li>Click <strong>Build</strong> in the <strong>Toolbar</strong> above the <strong>Viewport</strong></li>
</ul>
<p>The engine will then calculate all the lighting and bake it into the scene.</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/build_lighting.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<p>Your lighting is now baked into the world! To demonstrate what this
does, go ahead and move your light, or delete it all together. As you
can see, the baked lighting still remains. The moment you press <strong>Build</strong> again, all old lighting data will be lost and the new placement of your light will be baked into the scene.</p>
<p>To summarize:</p>
<ul>
<li>Use <strong>Static</strong> lighting if you only need the light to illuminate the scene. This is best in terms of performance.</li>
<li>Use <strong>Stationary</strong> lighting when you want the light to change color, change intensity, or cast dynamic shadows.</li>
<li>Use <strong>Movable</strong> lighting when you want the light to
be able to move and also change color, intensity, or cast dynamic
shadows. This is the most expensive type of lighting in terms of
performance.</li>
</ul>
<blockquote class="optional">
<p>If you ever forget, hover any of the light’s <strong>Mobility</strong> options in the details panel for a helpful tooltip.</p>
</blockquote>
<hr>
</div>
<div id="1-changing-materials" class="scrollspy-section">
<h2 id="changing-materials">Changing Materials</h2>
<p>There are a couple pieces of our room that look like a
checkerboard; most notably, our floor! Let’s change the way our floor
looks by changing its material.</p>
<ul>
<li>Click on the floor</li>
<li>In the details panel, change its <strong>Material - Element 0</strong> to <strong>MI_Oak_MedBrown</strong></li>
</ul>
<p>Great! There are all kinds of materials to choose from. You can find them in the <strong>Materials</strong> folder.</p>
<blockquote class="optional">
<p>Many of our materials were made specifically for certain assets.
For this reason, a door material won’t look good when placed on a floor
mesh.</p>
<p>Use the folder structure to guarantee you’re using a proper material. <em>You can also just use your eyeballs!</em></p>
</blockquote>
<ul>
<li>If you want to use a material you find in the <strong>Content Browser</strong>, you can just drag and drop it onto the static mesh you want to update.</li>
</ul>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/update_material_drag.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<blockquote class="challenge">
<h4 id="challenge-3">Challenge:</h4>
<p>You’ll notice that the center of your ceiling also looks like a checkerboard. Change it’s material!</p>
<p>Note that the material you want to change is <strong>Element 1</strong> on the ceiling static mesh actor.</p>
<div class="text-center image-container"><div style="position: absolute; height: 329px; width: 657px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/update_ceiling_material.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
</blockquote>
<hr>
</div>
<div id="1-editing-material-instances" class="scrollspy-section">
<h2 id="editing-material-instances">Editing Material Instances</h2>
<p>Material Instances allow you to easily edit Layout’s pre-made materials. Let’s make our wood floor pink!</p>
<ul>
<li>Navigate to <strong>Materials > InteriorArchVis > Floors > Wood</strong></li>
<li>Right-click any material and select <strong>Create Material Instance</strong></li>
<li>Name your new Material Instance <strong>MI_WoodFloors_Pink</strong></li>
</ul>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/make_material_instance.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<ul>
<li>Open your new Material Instance by double clicking on it</li>
</ul>
<div class="text-center image-container"><img alt="Material Instance Editor" class="zoomable zoomed" src="core_1_files/1.png" data-zoom-image="/assets/learn_resources/core_1/1.10.png"></div>
<p>There are a lot of things you can edit here. We’re looking for the <strong>Wood Color</strong> parameter in the <strong>Details</strong> panel.</p>
<ul>
<li>Check the box next to <strong>Wood Color</strong>. Now we’re able to edit that value.</li>
<li>Click on the color bar to open a color picker</li>
<li>Change it’s color as you wish (update the name if you choose against pink)</li>
</ul>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/change_wood_color.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<ul>
<li>Update the floor with your new material.</li>
</ul>
<p>Make <strong>Material Instances</strong> as you wish! All of Layout’s provided materials are set up for simple and advanced customization.</p>
<hr>
</div>
<div id="1-player-start" class="scrollspy-section">
<h2 id="player-start">Player Start</h2>
<p>Currently, whenever you press <strong>Play</strong> the experience
starts from wherever the camera is in the world. This is fine when
testing things out, but won’t work for a finished product. Instead,
you’ll want to designate a place that the player spawns. This can be
done with a <strong>Player Start</strong> actor!</p>
<ul>
<li>In the <strong>Modes</strong> panel, find <strong>Player Start</strong> in the <strong>Basic</strong> category</li>
<li>Drag and drop it into your world
<ul>
<li>Set its <strong>Location</strong> and <strong>Rotation</strong> to something that makes sense</li>
</ul>
</li>
</ul>
<p>That’s it! Now whenever you press <strong>Play</strong> you will start from the designated spawn point.</p>
<blockquote class="important">
<p>It’s possible that you want to place a <strong>Player Start</strong>, but still spawn at the current camera location during development. To do this:</p>
<ul>
<li>Open the dropdown next to the <strong>Play</strong> button</li>
<li>Find the <strong>Spawn player at…</strong> section</li>
<li>Select <strong>Current Camera Location</strong></li>
</ul>
<div class="text-center image-container"><div style="position: absolute; height: 329px; width: 657px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" class="not-zoomable">
<source src="core_1_files/player_start_settings.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
</blockquote>
<hr>
</div>
<div id="1-viewport-properties" class="scrollspy-section">
<h2 id="viewport-properties">Viewport Properties</h2>
<p>This section will briefly go over some of the Viewport tools
available to you. These tools will make it easier to transform actors to
perfection.</p>
<h4 id="viewport-views">Viewport Views</h4>
<p>You can quickly change your view to get orthographic perspectives of your level using the button in the upper left:</p>
<p>Orthographic perspectives are great for perfectly placing actors in your level.</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/orthographic_views.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<p>To get all 4 views at once, click the button in the upper right:</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/multi_orthographic_view.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<h4 id="snap-values">Snap Values</h4>
<p>Adjusting your <strong>Snap Values</strong> is a great way to speed up your level creation process.</p>
<p>Changing <strong>Position Grid Snap Value</strong> allows you to move your actors in multiples of <strong>1</strong>, <strong>5</strong>, <strong>10</strong>, <strong>100</strong>,
and more. This value is super helpful when constructing modular pieces
like your house, and affects the initial placement of an actor as well.</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/location_snap.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<p>Snap values exists for <strong>Rotation</strong> and <strong>Scale</strong> as well.</p>
<div class="text-center image-container"><div style="position: absolute; height: 341px; width: 681px; cursor: pointer; z-index: 100;"></div><video controls="controls" loop="" muted="muted" class="not-zoomable">
<source src="core_1_files/rotation_scale_snap.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video></div>
<blockquote class="optional">
<p>The <a href="https://docs.unrealengine.com/latest/INT/Engine/UI/LevelEditor/index.html" class="blue" target="_blank">UE4 Level Editor Documentation</a> is full of additional information if there are parts of the <strong>Viewport</strong> or <strong>Level Editor</strong> you want to know more about.</p>
<p>To learn more advanced techniques for transforming actors, check out <a href="https://docs.unrealengine.com/latest/INT/Engine/Actors/Transform/index.html" class="blue" target="_blank">this UE4 Documentation</a>.</p>
</blockquote>
<hr>
</div>
<div id="1-conclusion" class="scrollspy-section">
<h2 id="conclusion">Conclusion</h2>
<p>Well done! You’re well on your way to becoming a UE4 master. Here’s what you already know how to do:</p>
<ul>
<li>Navigate through a game world in the <strong>Viewport</strong></li>
<li>Place an actor in the world using the <strong>Content Browser</strong> or <strong>Place Mode</strong></li>
<li>Change an actor’s <strong>position</strong>, <strong>scale</strong>, and <strong>rotation</strong> as well as edit other attributes in the <strong>Details</strong> panel</li>
<li>Use <strong>lights</strong> to better illuminate your world</li>
<li>Change a <strong>Static Mesh</strong>’s material</li>
<li>Create your own <strong>Material Instances</strong></li>
<li>Understand some UE4 terminology like <strong>Actor</strong>, <strong>Static Mesh</strong>, <strong>Transform</strong>, and <strong>Material</strong></li>
</ul>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-spacer"></div>
<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:553.86669921875px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.1.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:1332.566650390625px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.2.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:2343.2333984375px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.8.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:3129.449951171875px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.3.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:4126.89990234375px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.9.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:5613.2001953125px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.4.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:762.8499755859375px;top:7413.13330078125px;height:411px;width:657px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 657px; height: 411px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.5.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:8145px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.6.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:762.8499755859375px;top:9156.150390625px;height:411px;width:657px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 657px; height: 411px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.7.png");" class="zoomWindow"> </div></div></div><div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:748.4666748046875px;top:12765.1337890625px;height:426px;width:681px;"><div class="zoomWindowContainer" style="width: 400px;"><div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; background-position: 0px 0px; width: 681px; height: 426px; float: left; display: none; cursor: crosshair; background-repeat: no-repeat; position: absolute; background-image: url("/assets/learn_resources/core_1/1.10.png");" class="zoomWindow"> </div></div></div></body></html>