simoncoenen.com/project_klokslagtwaalf.html at master · simco50/simoncoenen.com · GitHub

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
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="keywords" content="Simon, Coenen, Portfolio, Video, Game, Programmer, Graphics, Code, C++, DAE, Howest">

    <title>

            Klogslag Twaalf

    </title>


        <meta name="description" content="Simon Coenen, Graphics Programmer">


    <link rel="canonical" href="https://www.simoncoenen.com/project_klokslagtwaalf">
    <link rel="alternate" type="application/rss+xml" href=" feed.xml" />

    <!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.2" />
<meta property="og:title" content="Klogslag Twaalf" />
<meta property="og:locale" content="en_GB" />
<meta name="description" content="Challenges Working on a serious project in a team Solving issues in a short time Team Louis Vissers (Artist) Anouk Debruyne (Artist) Emma Calewaert (Programmer) Thibault Verschueren (Programmer) Simon Coenen (Programmer/Artist) Technology Used Unity3D Visual Studio Adobe Photoshop Autodesk 3ds max Language C# Build" />
<meta property="og:description" content="Challenges Working on a serious project in a team Solving issues in a short time Team Louis Vissers (Artist) Anouk Debruyne (Artist) Emma Calewaert (Programmer) Thibault Verschueren (Programmer) Simon Coenen (Programmer/Artist) Technology Used Unity3D Visual Studio Adobe Photoshop Autodesk 3ds max Language C# Build" />
<link rel="canonical" href="https://www.simoncoenen.com/project_klokslagtwaalf" />
<meta property="og:url" content="https://www.simoncoenen.com/project_klokslagtwaalf" />
<meta property="og:site_name" content="Simon Coenen" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-10-07T15:47:05+02:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Klogslag Twaalf" />
<meta name="twitter:site" content="@simon_coenen" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2023-10-07T15:47:05+02:00","datePublished":"2023-10-07T15:47:05+02:00","description":"Challenges Working on a serious project in a team Solving issues in a short time Team Louis Vissers (Artist) Anouk Debruyne (Artist) Emma Calewaert (Programmer) Thibault Verschueren (Programmer) Simon Coenen (Programmer/Artist) Technology Used Unity3D Visual Studio Adobe Photoshop Autodesk 3ds max Language C# Build","headline":"Klogslag Twaalf","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.simoncoenen.com/project_klokslagtwaalf"},"url":"https://www.simoncoenen.com/project_klokslagtwaalf"}</script>
<!-- End Jekyll SEO tag -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>
    <script src="/js/main_head.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link href="/css/main.css" rel="stylesheet">

    <link rel="icon" type="image/x-icon" href="/favicon.ico" />


</head>
    <body>
        <!-- Navigation -->
<nav id="navbar" class="navbar sticky-top navbar-expand-lg navbar-dark">
    <a class="navbar-brand mb-0 h1" href="/">Simon Coenen<small>Graphics Programmer</small></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

                <li  class="nav-item" >
                    <a class="nav-link" href="/">Home</a>
                </li>

                <li  class="nav-item" >
                    <a class="nav-link" href="/blog">Blog</a>
                </li>

                <li  class="nav-item" >
                    <a class="nav-link" href="/about">About</a>
                </li>

        </ul>
        <ul class="navbar-nav">

                <li class="nav-item">

                        <a href="https://twitter.com/simon_coenen" target="_blank" class="nav-link">

                        <span style="display:inline"><span style="display:inline; padding-right: 5px" class="fab fa-twitter fa-lg"></span></span>
                    </a>
                </li>

                <li class="nav-item">

                        <a href="https://www.github.com/simco50" target="_blank" class="nav-link">

                        <span style="display:inline"><span style="display:inline; padding-right: 5px" class="fab fa-github fa-lg"></span></span>
                    </a>
                </li>

                <li class="nav-item">

                        <a href="https://www.linkedin.com/in/simon-coenen-906a58a3/" target="_blank" class="nav-link">

                        <span style="display:inline"><span style="display:inline; padding-right: 5px" class="fab fa-linkedin fa-lg"></span></span>
                    </a>
                </li>

                <li class="nav-item">

                        <a href="/downloads/SimonCoenen_Resume.pdf" target="_blank" class="nav-link">

                        <span style="display:inline"><span style="display:inline; padding-right: 5px" class="fas fa-paperclip fa-lg"></span></span>
                    </a>
                </li>

            <li class="nav-item" style="padding-left: 10px; padding-top: 3px;">
                <div class="theme-switcher">
                    <input type="checkbox" id="theme-switch">
                    <span></span>
                </div>
            </li>
        </ul>
    </div>
</nav>


        <div class="page-content">
            <div class="page-gradient"></div>

<div class="container project-container">


        <div class="embed-responsive embed-responsive-16by9 project-video">
    <iframe src="https://player.vimeo.com/video/200184223?color=ff9933&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>


    <div class="row">
        <div class="col-xl-6">
            <h1 class="project-header">Klogslag Twaalf</h1>
            <h4><p>Game Project - MyMachine</p>
</h4>
            <a class="btn btn-sm" href="">Return</a>
        </div>

        <div class="col-xl-6 project-info">
            <p class="text-justify project-description">
                <p>In cooperation with MyMachine, me and four other students visited a class of a primary school with children between 6 and 7 years old. Dressed in a ghost hunter team, we asked them to draw different kinds of monsters, traps and ideas. With those drawings we created a game for them. In the game you play a ghost hunter that is trapped in a dream and has to defeat the monsters to escape the bad dream.</p>

            </p>
        </div>
    </div>

    <div class="project-info">
<div class="row">
<div class="col-lg-3">
      <h2 id="challenges">Challenges</h2>
      <ul>
        <li>Working on a serious project in a team</li>
        <li>Solving issues in a short time</li>
      </ul>
    </div>
<div class="col-lg-3">
      <h2 id="team">Team</h2>
      <ul>
        <li><a href="https://www.artstation.com/artist/louisg33">Louis Vissers</a> (Artist)</li>
        <li><a href="https://www.artstation.com/artist/anoukdebruyne">Anouk Debruyne</a> (Artist)</li>
        <li><a href="http://www.emmacalewaert.com/">Emma Calewaert</a> (Programmer)</li>
        <li><a href="http://thibaultverschuerenc.ipage.com/">Thibault Verschueren</a> (Programmer)</li>
        <li><a href="/">Simon Coenen</a> (Programmer/Artist)</li>
      </ul>
    </div>
<div class="col-lg-3">
      <h2 id="technology-used">Technology Used</h2>
      <ul>
        <li>Unity3D</li>
        <li>Visual Studio</li>
        <li>Adobe Photoshop</li>
        <li>Autodesk 3ds max</li>
      </ul>
    </div>
<div class="col-lg-3">
      <h2 id="language">Language</h2>
      <ul>
        <li>C#</li>
      </ul>
    </div>
</div>

<a href="http://www.simoncoenen.com/downloads/KlokslagTwaalf_Windows.rar" class="btn btn-success sharp list-group-item list-group-item-success" target="_blank">Build</a>


</div>

<h1 id="project-details">Project Details</h1>

<div class="row">
<div class="col-lg-8">
    <h2 id="mymachine">MyMachine</h2>
    <p>This project is made in cooperation with MyMachine.
MyMachine is an organization that takes initiative to stimulate creativity within all levels of education by combining them.
The idea is that children of primary school (aged between 6 and 12) make drawings of ideas and ‘machines’
With these ideas, students of a university design a concept and define technical properties
Finally, students of a middle school (ages between 12 and 18) make the design a reality
With this project, the second and the final step are combined meaning that the children drew ideas and we designed and developed a game with these ideas</p>
  </div>
<div class="col-lg-4">
<img src="/images/projects/klokslagtwaalf/other/mymachine_logo.png" class="img-fluid" />
</div>
</div>

<h1 id="my-work-on-the-project">My work on the project</h1>
<h4 id="below-i-will-explain-a-few-challenges-i-faced-during-the-production-and-the-solutions-i-have-come-up-with-to-solve-them-besides-this-ive-spent-most-of-my-time-programming-the-control-and-behavior-of-the-player-the-player-feedback-all-the-ui-and-animations">Below I will explain a few challenges I faced during the production and the solutions I have come up with to solve them. Besides this, I’ve spent most of my time programming the control and behavior of the player, the player feedback, all the UI and animations</h4>

<div class="row">
<div class="col-lg-6">
<div class="embed-responsive embed-responsive-16by9">
<video controls="" class="embed-responsive-item" loop="" poster="/images/projects/klokslagtwaalf/other/spritesystem_poster.jpg">
<source src="/images/projects/klokslagtwaalf/other/video_spritesystem.mp4" type="video/mp4" />
</video>
</div>
</div>
<div class="col-lg-6">
    <h2 id="d-sprite-system-and-tools">3D Sprite system and tools</h2>
    <p>Like in Enter the Gungeon, the game visually looks 2D but in reality, is 3D.
The sprite renderer in Unity lacks the ability to perform well when used a lot since there is no batching
In addition, the sprite renderer does not support light baking or anything alike
I decided to write a tool for it. With two tools you can create sprite atlases which is uv data stored inside a scriptable object
A script then takes in this atlas and generates a quad with the right uv offsets
This results in easy to use sprite and support both batching and light baking
On average, without any post processing effects and dynamic lighting, a frame could be rendered with only 6-10 batches (One for each atlas used in the frame)</p>
  </div>
</div>
<div class="row">
<div class="col-lg-6">
    <h2 id="room-saving">Room saving</h2>
    <p>A big problem during the project was that Unity still did not support nested prefabs.
This was a big problem since we needed to save the rooms so they could easily be reused
I wrote a tool that saved all gameobjects inside a room in a scriptable object.
With this scriptable object, you could easily rebuild the room and make changes if necessary
The big advantage of this was that changes in prefabs that would be made to an object inside the room, would reflect on the room data aswell so the room does not have to be recreated again</p>
  </div>
<div class="col-lg-6">
<div class="embed-responsive embed-responsive-16by9">
<video controls="" class="embed-responsive-item" loop="" poster="/images/projects/klokslagtwaalf/other/roomcreator_poster.jpg">
<source src="/images/projects/klokslagtwaalf/other/video_roomcreator.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<img src="/images/projects/klokslagtwaalf/other/developerconsole.jpg" class="img-fluid" />
</div>
<div class="col-lg-6">
    <h2 id="developer-console">Developer Console</h2>

    <p>A big reason of time loss was the constant stopping and starting of the game to debug and make changes.
Because of this, I thought an in-game developer console with access to any method registered would greatly speed up the debug process.
I created a console that could be brought up at any time of the game.
By using reflection, I created a custom attribute [ConsoleCommand()] that can be placed on top of any method and takes in a command name.
This consolecommand attribute will register the method in the console so it can be called in-game.
I’ve learnt alot about reflection about this and I’m sure this console could come in handy in any kind of project.</p>
  </div>
</div>

<div class="project-images">
    <h3 class="page-header">Images</h3>
    <p>Click on an image to enlarge</p>


</div>

<div class="project-images">
    <h3 class="page-header">Images</h3>
    <p>Click on an image to enlarge</p>


</div>

<div class="project-images">
    <h3 class="page-header">Images</h3>
    <p>Click on an image to enlarge</p>


</div>


</div>

<br>
<br>
        </div>

        <!-- /.container -->
        <!--Footer-->
<footer>
    <script src="/js/main.js"></script>
</footer>
    </body>
</html>