-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathduo.html
206 lines (175 loc) · 10.2 KB
/
duo.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
<!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="duotextbox">
<ul>
<li><strong>Platform</strong> : PC</li>
<li><strong>My Work</strong> : Project Manager, Narrative Designer, Level Designer, Game Designer, Event Scripting, Balancing</li>
<li><strong>Levels Created</strong> : 6</li>
</ul>
<p>A two-character puzzle game played on a single controller, players need to utilize special abilities of each character in order to solve puzzles and progress. A vertical slice, it consists of 6 levels designed to teach, test and challenge with each of the games core mechanics. I designed all 6 levels, wrote the GDD and LDDs, in-game narrative and acted as Project Manager.</p>
<div class="embed">
<iframe width="706" height="397" src="https://www.youtube.com/embed/59_IUqWqQGA" align = "center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/><br/>
<iframe width="706" height="397" src="https://www.youtube.com/embed/2LJHRJXeiIg" align = "center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="706" height="397" src="https://www.youtube.com/embed/k3sRm5sP6kU" align = "center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="706" height="397" src="https://www.youtube.com/embed/q8dDIIfLDS0" align = "center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="706" height="397" src="https://www.youtube.com/embed/caujAiHzDnM" align = "center" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/><br/><br/><br/>
<a href="https://docs.google.com/document/d/1LUu_sYJ48HPacPHO3UAqNoQt__aDKPij_rSU2bbV3n4/edit?usp=sharing" inline = "font-size:2em !important;">Game Design Document</a>
</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/duo/mainscreen.png">
<img alt="Main Menu" src="images/duo/thumbs/mainscreenthumb.png"/>
</a>
<a class="gallery" href="images/duo/duo_level1_a.png">
<img alt="Level 1 - Character pushes a block to reach the second character." src="images/duo/thumbs/duo_level1_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level1_b.png">
<img alt="Level 1 - Crashed ship area" src="images/duo/thumbs/duo_level1_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level1_c.png">
<img alt="Level 1 - Birds Eye view" src="images/duo/thumbs/duo_level1_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level2_a.png">
<img alt="Level 2 - TR34D crosses the stream. He can gain access where Yuka cannot, and provide her a means of entry." src="images/duo/thumbs/duo_level2_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level2_b.png">
<img alt="Level 2 - Yuka activates a scripted event using a pressure switch and block." src="images/duo/thumbs/duo_level2_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level2_c.png">
<img alt="Level 2 - TR34D can burn the red plant, allowing Yuka to reach the exit with him. Both characters must touch the ship part to complete the mission." src="images/duo/thumbs/duo_level2_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level3_a.png">
<img alt="Level 3 - Yuka kicks over an ice bridge, allowing both characters to cross the river." src="images/duo/thumbs/duo_level3_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level3_b.png">
<img alt="Level 3 - Yuka has kicked several ice blocks over. TR34D waits for her to activate a pressure switch." src="images/duo/thumbs/duo_level3_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level3_c.png">
<img alt="Level 3 - Eventually, the characters need to split up to complete the mission, since both cannot take the same route. Alien ruins await." src="images/duo/thumbs/duo_level3_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level4_a.png">
<img alt="Level 4 - This level increases the difficulty a fair amount, combining block puzzles and survival play." src="images/duo/thumbs/duo_level4_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level4_b.png">
<img alt="Level 4 - Alien ruins start to show themselves more frequently." src="images/duo/thumbs/duo_level4_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level4_c.png">
<img alt="Level 4 - A massive Guardian Robot has spotted TR34D, chasing him until it kills him." src="images/duo/thumbs/duo_level4_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level5_a.png">
<img alt="Level 5 - Mechanics switch up in this level. The switch with the arrows allows Yuka and TR34D to work together to solve the puzzle." src="images/duo/thumbs/duo_level5_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level5_b.png">
<img alt="Level 5 - Thick snow, blowing snow clouds and a deadly liquid nitrogen stream threaten Yuka directly." src="images/duo/thumbs/duo_level5_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level5_c.png">
<img alt="Level 5 - Crystalline formations and a large alien door mark the entrance to the Alien Ruin." src="images/duo/thumbs/duo_level5_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level6_a.png">
<img alt="Level 6 - Temple entrance. Lighting is important here, with reflections and ambient lighting really bringing out detail without a high poly count." src="images/duo/thumbs/duo_level6_a.png"/>
</a>
<a class="gallery" href="images/duo/duo_level6_b.png">
<img alt="Level 6 - For the first time, TR34D has access to teleporters. With them, he can zip about and deal with distant switches. This is required to get Yuka through the puzzle. " src="images/duo/thumbs/duo_level6_b.png"/>
</a>
<a class="gallery" href="images/duo/duo_level6_c.png">
<img alt="Ice and alien architecture form a nice contrast in almost every region of the level." src="images/duo/thumbs/duo_level6_c.png"/>
</a>
<a class="gallery" href="images/duo/duo_level6_d.png">
<img alt="Level 6 - A large machine and a deadly robot await the interpid explorer of this level." src="images/duo/thumbs/duo_level6_d.png"/>
</a>
<a class="gallery" href="images/duo/duo_level6_e.png">
<img alt="Level 6 - The final block puzzle in the vertical slice, complete with deadly traps." src="images/duo/thumbs/duo_level6_e.png"/>
</a>
</div>
</div>
</li>
</ul>
<div class="projecttextbox">
<p>Metrics were key on this project, with exact measurements needed in order to make certain each puzzle could be solved and the block-pushing mechanic was able to properly function. This required careful planning and implementation of elements to maximize the use of each character without confusing the player.</p>
</div>
</section>
<a name="contact"></a>
<section class="contact">
<h2 class="uppercase spacing_mid">Get In Touch</h2>
<a href="mailto:cdechamplain@gmail.com>cdechamplain@gmail.com" >cdechamplain@gmail.com</a>
<a href="cdechamplain_resume.pdf" >Resume</a>
<a href="mailto:sayterdarkwynd@gmail.com>cdechamplain@gmail.com" >sayterdarkwynd@gmail.com</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" : 300,
"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>