-
Notifications
You must be signed in to change notification settings - Fork 4
/
bts.html
602 lines (578 loc) · 26.2 KB
/
bts.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Lockdown Story</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/867adbb233.js" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="img/ActualCouchPotato.jpg"><img src="img/logo.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="game.html"> Game</a>
</li>
<li class="nav-item">
<a class="nav-link" href="information.html"> Information</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html"> About Us</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="Week1">
<h1>Week 1 | Getting Started</h1>
<p>
Pre-Week1: Before the official start of Codefest, we formed our group and communicated on WhatsApp where we decided on our project concept: an educational game and a website about the pandemic.
In the first week, we started working out details such as the game concepts and art style and collected our ideas on a Google Doc. Later, we switched over to Discord so that we could more easily share images and group calls. During this week, a website framework is created and pushed onto Github.
</p>
<h3>Preparation:</h3>
<ul>
<li>Set up a UnityID, UnityHub, and Unity Version 2019.4.17f1</li>
<li>Look for and/or create assets</li>
<li>Look up and follow online tutorials</li>
</ul>
<h3>Our Intial Ideas:</h3>
<ul>
<li>Game about epidemics and contact tracing</li>
<li>Target Audience: General Public</li>
<li>Point and Click Style game</li>
<li>First-Person Perspective</li>
<li>Need concrete objectives</li>
<li>End Goal: Limit the spread of the virus using Covid-19 data</li>
<li>The player clicks on textboxes to make a decision</li>
<li>When the player makes a choice, there will be a popup that will explain why the selected choice was good or bad</li>
<li>The player's choices affect future events</li>
<li>The player can play as a person in power</li>
</ul>
<hr>
</div>
<div class="Week2">
<h1>Week 2 | Visuals and Gameplay</h1>
<p>We assigned ourselves roles based on our skillset, experience, and interest. The concept of the game is a player surviving the pandemic in their home. We then flesh out the player's roles, screen, and the rooms. The creation of the game on Unity starts and the website is filled with the material to organize and supplement the game's educational information.</p>
<h3>Ideas:</h3>
<ul>
<li>Point and Click</li>
<li>Player will play as a journalist</li>
<li>Player Perspective: Side of the Room | First Person | 2D</li>
<li>Pixel Art Style</li>
<li>Mouse Input only</li>
<li>Include an inventory system</li>
<li>Aspect Ratio: 16:9 | Background Image: 300x200 pixels</li>
<li>Include infecton chance percentage</li>
<li>Could possibly shift to a Visual Novel Style game</li>
</ul>
<hr>
</div>
<div class="Week3">
<h1>Week 3 | Scenes</h1>
<p>We focused on implementing game mechanics such as interactive buttons and a save/load system. Some background images were created and imported onto Unity, such as the bedroom background.</p>
<h3>Finished Features and Tasks:</h3>
<ul>
<li>Basic Save and Load System</li>
<li>All Background Images</li>
<li>Buttons in the Living Room and Kitchen</li>
<li>Week 1 - Week 3 Behind the Scenes Webpage</li>
</ul>
<h3>Player Stats:</h3>
<ul>
<li>Health Bar</li>
<li>Energy Bar</li>
<li>Money Int</li>
<li>Food Supply Bar or Int</li>
<li>Current Research Int</li>
</ul>
<h3>Scene Ideas:</h3>
<ul>
<li>Bedroom</li>
<li>Living Room</li>
<li>Balcony</li>
<li>Kitchen</li>
<li>Bathroom</li>
<li>Supermarket</li>
</ul>
<hr>
</div>
<div class="Week4">
<h1>Week 4 | Core Features</h1>
<p>We continued to implement features such as health/mental bars, additional buttons, and player tasks. The gameplay was further fleshed out in detail such as individual values affecting player stats(money/bars) and objectives. The educational information in the game and website are further expanded and additional background images are added.</p>
<h3>Finished Features and Tasks:</h3>
<ul>
<li>Main Menu Background Image</li>
<li>Additional Sprite of Buttons and Bars</li>
<li>Majority Vote on Game's Name: A Lockdown Story</li>
<li>Working Kitchen Progress Bars</li>
<li>Arifa and Ahmed Meeting | Code and UI</li>
<li>Mary, Christina, and Clare Meeting | Detailed Plan going Forward | Minigame Plans </li>
<li>Player Stats</li>
<li>Moving Between Scenes</li>
<li>Tooltip Appears on some Buttons</li>
</ul>
<hr>
</div>
<div class="Week5">
<h1>Week 5 | Core Features</h1>
<p>Since 1/24 was the due date for a runnable project, we focused on finishing important features and polishing existing ones.</p>
<h3>Finished Features and Tasks:</h3>
<ul>
<li>The player cannot sleep if they have not finished enough tasks.</li>
<li>Updated Stat Panel</li>
<li>Purchasing function in Supermarket scene</li>
<li>Tooltips with the item's names and stats</li>
<li>Inventory in Kitchen</li>
<li>Modified Stat Panel Prefab</li>
<li>Fading animation when switching between scenes</li>
<li>Breathing Exercise as the Yoga Minigame</li>
<li>Restructure Laptop Tabs</li>
<li>Can switch between tab on the laptop</li>
<li>Remove useless buttons in the Bedroom scene</li>
<li>UI redesign</li>
<li>Updated UI structure in the supermarket</li>
<li>Added stat effects in the Kitchen scene</li>
<li>Modified save/load function</li>
<li>Redesigned Research Tab UI</li>
<li>Rudimentary quiz in Laptop</li>
<li>Can browse articles in the Research Tab</li>
<li>Added game icon</li>
<li>Added mutable music in Settings and credits</li>
<li>All quizzes add in the Laptop scene</li>
<li>Shortened FoodDescriptionChanger.cs</li>
<li>First Build of the game is on Github</li>
</ul>
<hr>
</div>
<div class="Week6">
<h1>Week 6 | Finishing Touches</h1>
<p>After the first build was uploaded to Github, we continued to finish the Laptop scene and improve upon other features.</p>
<ul>
<li>Watering Plant Animation to Plant Buttons</li>
<li>Increased Mental and Physical Stat Effects on the Wake Up Button</li>
<li>Fully Functional Laptop Tab with research articles and the quiz</li>
<li>Stat changes added when 2 plants are clicked on</li>
<li>When both plant buttons are pressed within a single day, the number of completed tasks are increased by one.</li>
<li>After the player plays the pong game, the number of completed tasks increase.</li>
<li>Transition to GameOver scene when physical or mental health is zero</li>
</ul>
<hr>
</div>
<div class="Scripts">
<h3>The Unity Scripts</h3>
<!--Ahmed's scripts and explainations-->
<ul>
<div id="show">
<li>TabChanger.cs <a href="#show" id="open"><i class="far fa-images"></i></a>
<div id="content">
<img src="img/Script_TabChanger.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show2">
<li>InventoryUpdater.cs <a href="#show2" id="open"><i class="far fa-images"></i></a>
<div id="content2">
<img src="img/Script_InventoryUpdater.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show3">
<li>MenuControl.cs <a href="#show3" id="open"><i class="far fa-images"></i></a>
<div id="content3">
<img src="img/Script_MenuControl.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show4">
<li>PanelUpdater.cs <a href="#show4" id="open"><i class="far fa-images"></i></a>
<div id="content4">
<img src="img/Script_PanelUpdater.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show5">
<li>KitchenActions.cs <a href="#show5" id="open5"><i class="far fa-images"></i></a>
<div id="content5">
<img src="img/Script_KitchenActions.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show6">
<li>KitchenProcessControl.cs <a href="#show6" id="open6"><i class="far fa-images"></i></a>
<div id="content6">
<img src="img/Script_KitchenProcess1.png"> <br>
<img src="img/Script_KitchenProcess2.png"> <br>
<img src="img/Script_KitchenProcess3.png">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show7">
<li>Bed.cs <a href="#show7" id="open"><i class="far fa-images"></i></a>
<div id="content7">
<img src="img/Script_Bed.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<br>
<p>Scripts that activate, deactivate, and modify game objects and what they contain under certain conditions
while the game is running.
A summary of what these scripts do:</p>
<ul>
<li>Activate and deactivate game objects like prompts, menus and images when conditions are met.</li>
<li>Make buttons interactable or not based on the values of certain variables.</li>
<li>Change text contained in buttons, images or panels.</li>
<li>Modify the game's static variables in response to player actions.</li>
</ul>
</ul>
<hr>
<ul>
<div id="show8">
<li>Tooltip.cs <a href="#show8" id="open"><i class="far fa-images"></i></a>
<div id="content8">
<img src="img/Script_Tooltip.PNG"> <br>
<img src="img/Script_Tooltip2.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show9">
<li>TooltipSystem.cs <a href="#show9" id="open"><i class="far fa-images"></i></a>
<div id="content9">
<img src="img/Script_TooltipSystem.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show10">
<li>TooltipTrigger.cs <a href="#show10" id="open"><i class="far fa-images"></i></a>
<div id="content10">
<img src="img/Script_ToolTrigger.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>Scripts that allow attaching tooltips that show when hovering over objects in scenes.</p>
<ul>
<li>Tooltip.cs sets text fields, manages how the tooltip resizes (upon reaching a certain number of characters),
and sets the position of the tooltip relative to the position of the mouse pointer which changes based on the
scenes' canvas render mode.</li>
<li>TooltipSystem.cs creates the Tooltip object and contains the tooltip's show and hide methods.</li>
<li>TooltipTrigger.cs activates a tooltip when the mouse pointer is hovered over a game object it is
attached to. It is also where the content of the text fields inside the tooltip is determined.</li>
</ul>
</ul>
<hr>
<ul>
<div id="show11">
<li>Game.cs <a href="#show11" id="open"><i class="far fa-images"></i></a>
<div id="content11">
<img src="img/Script_Game.PNG"> <br>
<img src="img/Script_Game2.PNG"> <br>
<img src="img/Script_Game3.PNG"> <br>
<img src="img/Script_Game4.PNG"> <br>
<img src="img/Script_Game5.PNG"> <br>
<img src="img/Script_Game6.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>The main essential game management and control script. It creates all the static data variables that are
utilized within the game, methods that allow for modifying them, and methods to create time-based or other
types of processes to run in the background when the game starts. Some time-based processes include coffee
brewing and stove cooking which take a certain amount of time to complete and for their changes to take
effect in the game. The script also contains methods that allow for saving and loading the game at any point
or state.</p>
</ul>
<hr>
<ul>
<div id="show12">
<li>GameData.cs <a href="#show12" id="open"><i class="far fa-images"></i></a>
<div id="content12">
<img src="img/Script_GameData.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<div id="show13">
<li>SaveSystem.cs <a href="#show13" id="open"><i class="far fa-images"></i></a>
<div id="content13">
<img src="img/Script_SaveSystem.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<ul>
<li>Main components of the game's saving/loading system. Upon creating a GameData object, all static game data
in Game.cs is retrieved and saved in the object. </li>
<li>In SaveSystem.cs, SaveGame() method utilizes binary serialization to create a secure game data file and
then saves it in Unity's persistent data path (changes based on platform).</li>
<li>BinaryFormatter formatter -> Binary formatting object. <br>FileStream stream -> Create a file at path.<br>formatter.Serialize(<Filestream>,<data>)</li>
<li>LoadGame() method then allows for loading game data from the file saved in the file path if such a file exists.</li>
</ul>
</ul>
<hr>
<!--Cindy's scripts and explainations for the Yoga minigame-->
<ul>
<div id="show14">
<li>CircleScaleChange.cs <a href="#show14" id="open"><i class="far fa-images"></i></a>
<div id="content14">
<img src="img/Script_CircleScaleChange.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>This script has methods that change the size of a circle. The circle is the mouth of the person when inhaling and exhaling. When the player holds the button, the size of the circle increase.
When they let go of the button, the circle decreases. The text of the button also changes depending on whether the button is held or not. If statements were used to limit the size the circle could increase and decrease.</p>
<div id="show15">
<li>HoldButton.cs <a href="#show15" id="open"><i class="far fa-images"></i></a>
<div id="content15">
<img src="img/Script_HoldButton.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>This script uses events to tell other scripts when to run. The OnPointerDown and OnPointerUp methods are used to change the pointerDown boolean. These methods were included because they are required by the IPointerDownHandler and IPointerUpHandler interfaces. The boolean pointerDown tells whether the button is held down or not. If the button is held down, then it will trigger the event increaseSize and increase the circle size. If the button is released, then the event decreaseSize is triggered and decrease the circle's size.</p>
<div id="show16">
<li>OpenYogaGame.cs <a href="#show16" id="open"><i class="far fa-images"></i></a>
<div id="content16">
<img src="img/Script_OpenYogaGame.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>This script opens and closes the pop-up window of the breathing exercise minigame. This method sets the boolean that control whether the pop-up window is active or not. The boolean is set depending on the the opposite of the current boolean.</p>
<hr>
</ul>
<!--Christina's scripts and explainations for the Pong minigame-->
<ul>
<div id="show17">
<li>Ball.cs <a href="#show17" id="open"><i class="far fa-images"></i></a>
<div id="content17">
<img src="img/Script_Ball.PNG"> <br>
<img src="img/Script_Ball2.PNG"> <br>
<img src="img/Script_Ball3.PNG"> <br>
<img src="img/Script_Ball4.PNG"> <br>
<img src="img/Script_Ball5.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
<p>The main script for the movement and existence of the pong ball. Ball.cs checks for if the ball makes contact with a paddle/wall/goal, controls if the ball is moving when the game is paused/started, calculates the angle at which the ball will bounce at if collided with a wall or paddle, and allows for the ball to continuously move and bounce throughout the game.</p>
</li>
</div>
<div id="show18">
<li>Hud.cs <a href="#show18" id="open"><i class="far fa-images"></i></a>
<div id="content18">
<img src="img/Script_Hud.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>The script that houses the text pop-ups for the player/computer scoring & winning, and the prompt for the player to play again.</p>
<div id="show19">
<li>PongGame.cs <a href="#show19" id="open"><i class="far fa-images"></i></a>
<div id="content19">
<img src="img/Script_PongGame.PNG"> <br>
<img src="img/Script_PongGame2.PNG"> <br>
<img src="img/Script_PongGame3.PNG"> <br>
<img src="img/Script_PongGame4.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>This script contains the main game objects, status of the ball, and controls the game state and what happens in these states (i.e. paused, playing, start screen, game over). The text on the screen (including the game over message, scores, and instructions) changes depending on the game state. It also checks for player input to pause, resume, or quit the game. This script further keeps track of player score and triggers a win or lose when either side gets a score of 4 points, as well as the state of the ball in each game state (as in, it should not be visible during the pause screen, and should be reset when a new round is prompted).</p>
<div id="show20">
<li>TvComputer.cs <a href="#show20" id="open"><i class="far fa-images"></i></a>
<div id="content20">
<img src="img/Script_TvComputer.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>Sets the bounds of the game for the computer paddle and controls the movement of the computer bot. The computer paddle will track the ball (tracks the item tagged "ball") and move towards it while the ball is moving to the right.</p>
<div id="show21">
<li>TvPlayer.cs <a href="#show21" id="open"><i class="far fa-images"></i></a>
<div id="content21">
<img src="img/Script_TvPlayer.PNG">
<a href="#hide" id="close"><i class="far fa-window-close"></i></a>
</div>
</li>
</div>
<p>This script checks user input to move the player paddle and sets the bounds of the game for the player paddle. The script will check for arrow key input to move the paddle up and down.</p>
</ul>
</div>
<div class="Reflection">
<h1>Reflection</h1>
<p>Looking back on the past month of working on this project, we feel like we learned a lot. Many of us had no experience with Unity and game development. Arifa and Ahmed were the most experienced in the group so they lead the scripting in Unity. However, regardless of experience, we use used tutorials and forums to aid us in coding the game and website. During the first and second week, we mostly brainstormed ideas in a Google Doc. We kept communicating through the group chat and group calls to report the finished task, new features, and new ideas. In the following week, we refined our ideas so it was detailed enough to code it. For example, there was some confusion about how buying food would look like and how the information is used. We decided that the player would see a list of items in the supermarket. When they go to the kitchen, the quantity of the items are added to a variable. If the player bought healthy food, then the variable representing the healthy food supply is increased. This method would eliminate the need for an inventory bar and the need for drawing specific foods. However, if there was more time then we would've implemented a more complex inventory system.
</p>
<br>
<p>While deciding how features are implemented, we had to consider our time constraints and the difficulty of implementing a feature. During the last week, we tried to finish all the ideas we talked about. If we had more time, we would like to implement a feature that allows the player to get infected and get tested for Covid-19. Currently, the game is too easy and a lot of the tasks add to the player's stats rather than decrease them. Therefore, the only way to get a game over is by constantly visiting the supermarket until the player's physical or mental health reaches zero. Also, the game doesn't have a tutorial or a page with instructions. So it may be confusing for a new player. The bathroom is an active scene. However, the player can't click on anything inside besides leaving the area. If there was more time, we could've added a button on the sink so the player can wash their hands. There are only 2 minigames, so we wanted to add more. When the player plays through the eight days, each day is very similar. So, we wanted to add day-specific events and tasks. Finally, the progress report only shows three player stats. We wanted to add more factors such as cleanliness so the game would be more challenging. Overall, this was a good learning experience for all of us. We will use this experience in our future projects and initiatives.
</p>
</div>
<div class="JamBoard">
<h1>Google Jamboard Sketches and Ideas</h1>
<div class="wrapper">
<div class="slide">
<img src="img/BalconyLaptop.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/houseMap.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/KitchenIdea1.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/KitchenIdea2.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/KitchenIdea3.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/KitchenIdea4.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/supermarketIdea.PNG" width="500" height="300">
</div>
</div>
</div>
<div class="Screenshots">
<h1>Screenshots:</h1>
<div class="wrapper">
<div class="slide">
<img src="img/Progress1.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress2.PNG" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress3.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress4.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress5.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress6.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress7.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress8.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress9.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress10.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress11.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress12.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress13.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress14.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress15.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress16.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress17.png" width="500" height="300">
</div>
<div class="slide">
<img src="img/Progress18.png" width="500" height="300">
</div>
</div>
</div>
<div class="Art">
<h3>Sketches and Art:</h3>
<div class="wrapper">
<div class="slide">
<img src="img/sketchBedroom.jpg" height="200">
</div>
<div class="slide">
<img src="img/sketchOutside.jpg" height="200">
</div>
<div class="slide">
<img src="img/sketchStore.jpg" height="200">
</div>
<div class="slide">
<img src="img/bgNPC.png" height="64">
</div>
<div class="slide">
<img src="img/Bedroom1.png">
</div>
<div class="slide">
<img src="img/Bedroom2.png">
</div>
<div class="slide">
<img src="img/Bedroom3.png">
</div>
<div class="slide">
<img src="img/LivingRoom1.png">
</div>
<div class="slide">
<img src="img/LivingRoom2.png">
</div>
<div class="slide">
<img src="img/Supermarket1.png">
</div>
<div class="slide">
<img src="img/Supermarket2.png">
</div>
<div class="slide">
<img src="img/Supermarket3.png">
</div>
<div class="slide">
<img src="img/Balcony.png">
</div>
<div class="slide">
<img src="img/Kitchen.png">
</div>
<div class="slide">
<img src="img/Bathroom.png">
</div>
<div class="slide">
<img src="img/MainMenu.png">
</div>
<div class="slide">
<img src="img/City.png">
</div>
<div class="slide">
<img src="img/LaptopBg.png">
</div>
</div>
</div>
</div>
</body>
</html>