-
Notifications
You must be signed in to change notification settings - Fork 11
/
arbelos.html
174 lines (155 loc) · 8.66 KB
/
arbelos.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chris DeChamplain - Level Designer / Game Designer</title>
<meta name="description" content="Chris DeChamplain - Level Designer / Game Designer">
<meta name="author" content="Chris DeChamplain">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" href="css/colorbox.css">
<link rel="stylesheet" href="css/justifiedGallery.css">
<link rel="stylesheet" href="css/stylesmain.css">
<link rel="stylesheet" href="css/jquery.animatedheadline.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900|Poppins:200,300,300i,400,500,600,700,800,900" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="menu">
<nav class="main_navigation plain animate" style="top: 0px;">
<div class="namespace">
<p class="heading"><a href="index.html">Chris DeChamplain</a></p>
<p class="subheading">Level Designer and Game Designer</p>
</div>
<div class="linkspace">
<!--<a class="logo cta" href="index.html">
<span class="icon_logo"><img class="tinylogo" src="images/logotiny.png"/></span>
</a>-->
<ul class="nostyle">
<li class="start"><a href="index.html">PORTFOLIO</a></li>
<li><a href="cdechamplain_resume.pdf">RESUME/CV</a></li>
<li class="end"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
</div>
<section class="work">
<ul class="list">
<li class="list-itemmid2 plain">
<div class="plain">
<!--<div class="pillbox">
<span class="textpill gamedesign">Game Design</span>
<span class="textpill leveldesign">Level Design</span>
<span class="textpill uidesign">UI/UX Design</span>
<span class="textpill documentation">Documentation</span>
<span class="textpill ftue">FTUE</span>
<span class="textpill pm">Project Management</span>
</div>-->
<p>Through this program Students and Educators meet online and engage in schooling tailored for STEM topics. In addition to education, students are able to interfact with the game world around them in meaningful ways. Level designs in Stemuli were treated as sandboxes that allow students to wander, interact and roleplay with one another.</p><br/>
<p> Rather than focusing on conventional challenges like platforming or combat students instead are presented with an array of minigames to fullfill educational objectives while presenting them with learning opportunities in the form of tests, teamwork-based excercises, and creativity-rich assignments that challenge and compel.<p>
</div>
<div class="textbox">
<div class="descriptor">
<ul>
<li>• Designed and built sandbox environments via Unity (landscape, locations of events and quests, spawnpoints, play spaces, landmarks, ensuring multiple routes, observing Camera, Character and Controls.)
<li>• Designed and prototyped interactive gameplay elements (Objectives, Games [soccer, bowling, swingsets, etc], Quests, Event Creation, Exploration, Secret Areas, etc.)
<li>• Wrote focused documentation on game features, levels and mechanics
<li>• Prototyped and implemented game UI
<li>• Created art assets for Textures and UI elements as-needed.
<li>• Wrote and implemented character dialog for quests and interactive objects.
<li>• Conducted research into psychology, education, motivation and enagement for children aged 6-12.
<li>• Designed gameplay elements to help facilitate enjoyment and agency within the gameworld while still ensuring a progression in learning through STEM topics.
<li>• Acted as UI/UX consultant for in-game UIs. Created flow, progression and layout guidelinds for in-game User Interfaces.
<li>• Prototyped and tested gameplay features and mechanics.
</ul>
</div>
</div>
</li>
<li id="work" class="list-itembig topspace">
<div class="list-content">
<a name="work"></a>
<div id="basicExample" class="justified-gallery">
<a class="gallery" href="images/stemuli/common/10.png">
<img alt="Students can explore horizontally and vertically over a large region. Areas have numerous access routes from multiple directions." src="images/stemuli/common/10.png"/>
</a>
<a class="gallery" href="images/stemuli/common/1.png">
<img alt="The Stadium is a great landmark for students to meet and mingle. I provided plenty of space and seating. Within the stadium students can participate in footraces and Soccer." src="images/stemuli/common/1.png"/>
</a>
<a class="gallery" href="images/stemuli/common/3.png">
<img alt="A fancy restaurant with a lovely patio where students can gather resource-fetch quests as well as gain roof access or simply mingle and chat." src="images/stemuli/common/3.png"/>
</a>
<a class="gallery" href="images/stemuli/common/4.png">
<img alt="The central apartments create a living, breathing space for community, complete with plenty of seating, nature, a storefront and access to the driveable roads." src="images/stemuli/common/4.png"/>
</a>
<a class="gallery" href="images/stemuli/common/14.png">
<img alt="The Pond is a relaxing place away from the noise of the city area. Students have plenty of places to sit, explore, swim, climb or play hide-and-seek." src="images/stemuli/common/14.png"/>
</a>
<a class="gallery" href="images/stemuli/common/16.png">
<img alt="The Space Agency provides access to the SciFi level, as well as a place students can engage with quests related to science. They'll learn about space travel, physics and more." src="images/stemuli/common/16.png"/>
</a>
<a class="gallery" href="images/stemuli/common/19.png">
<img alt="Clifftop is right beside the Pond and gives players some verticality to explore in the natural area, with rope bridges, cliffs and footpaths to explore." src="images/stemuli/common/19.png"/>
</a>
<a class="gallery" href="images/stemuli/common/20.png">
<img alt="The region with bots and population can look quite bustling!" src="images/stemuli/common/20.png"/>
</a>
<a class="gallery" href="images/stemuli/medieval/3.png">
<img alt="The Medieval map has many fantasy-themed elements for students to investigate." src="images/stemuli/medieval/3.png"/>
</a>
<a class="gallery" href="images/stemuli/school/2.png">
<img alt="The School presents students with a singular hallway that leads to the main classroom, but partners and college outreach programs have access to kiosks through which they can contact and interact with students." src="images/stemuli/school/2.png"/>
</a>
<a class="gallery" href="images/stemuli/space/2.png">
<img alt="The Sci-Fi map provides students with another zone to learn about science as well as a futuristic place to hang out and have fun with friends." src="images/stemuli/space/2.png"/>
</a>
<a class="gallery" href="images/stemuli/space/3.png">
<img alt="Space Zone - Broadcast Station" src="images/stemuli/space/3.png"/>
</a>
</div>
</div>
</li>
</ul>
</section>
<a name="contact"></a>
<section class="contact">
<h2 class="uppercase spacing_mid">Get In Touch</h2>
<a href="cdechamplain_resume.pdf" >Resume</a>
<a href="https://www.linkedin.com/in/chris-dechamplain-bb259523/"><img class="linkedin" src="images/linkedin-512.png"/></a>
</section>
<div class="footer"></div>
</div>
<!-- jQ plugins -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$('#basicExample').justifiedGallery(
{
"rowHeight" : 200,
"margins" : 20,
"lastRow" : "nojustify",
"cssAnimation" : true,
"imagesAnimationDuration" : 240,
"captionSettings" : {
animationDuration :200,
visibleOpacity:0.9,
nonVisibleOpacity : 0
}
}
).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
</script>
</body>
</html>