-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
543 lines (478 loc) · 27.2 KB
/
index.html
File metadata and controls
543 lines (478 loc) · 27.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale = 1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kosi Chima - Portfolio</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body class ="main-content">
<div class = "header-content">
<div class = "left-header">
<div class ="h-shape"></div>
<div class = "image">
<img src="Images/My_project.png" alt="">
</div>
</div>
<div class = "right-header">
<div class = "top-contact">
<div class = "contact-icons">
<div class="contact-icon">
<a href ="https://twitter.com/cozy_devs" target = "_blank">
<i class="fa-brands fa-twitter"></i>
</a>
<a href ="https://cozydevs.itch.io" target = "_blank">
<i class="fa-brands fa-itch-io"></i>
</a>
<a href ="https://www.linkedin.com/public-profile/settings?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_self_edit_contact-info%3BTKH1%2FQ7jR%2Bme%2BDCYf6FFXw%3D%3D" target = "_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
<hi class = "name">
Hi!, My name is <span>Kosi Chima</span>
A Junior Game Developer and Computer Programmer.
</hi>
<div class="btn-con">
<button class ="button open-button-Resume">Resume Pop-Up</button>
<dialog class = "modalResume" id ="modalResume">
<button class ="button close-button-Resume">CLOSE!</button>
<div class = "Resume-project-content">
<iframe id="ResumePDF" src="Images/Kosi_Chima-Resumes/KosiChimaResumeNEW.pdf" frameborder="0"></iframe>
</div>
<!-- <button class ="button close-button-Resume">CLOSE!</button> -->
</dialog>
<!-- <a href="/Images/Kosi_Chima-Resumes/Resume_8_5_23.pdf" download="Kosi_Chima-Resumes" class="main-btn">
<span class="btn-text">Download CV</span>
<span class="btn-icon"><i class="fa-solid fa-cloud-arrow-down"></i></span>
</a>
-->
</div>
<p class = "intro-text">
I have participated in Game Jams and developed projects for some of my College Classes, here are some of my most frequent projects.
</p>
<h6>
(NOTE: There is no downloadable content on this webpage)
</h6>
<div class = "Portfolio">
<div class="portfolio-item">
<div class="image">
<img src="Images/GamEngLogo.png" alt="">
</div>
<div class="hover-item">
<h3>Project Source</h3>
<div class ="icons">
<button class ="button open-button-Engine">Info!</button>
<dialog class = "modalEngine" id ="modalEngine">
<div class = "project-content">
<div class = " left-project">
<div class ="link-icons">
<a href= "https://cozydevs.itch.io/2d-game-engine" class="link-icon">
<i class="fa-brands fa-itch-io"></i>
</a>
<!-- <a href= "https://youtu.be/ttX7xWbsUh4" class="link-icon">
<i class="fa-brands fa-youtube"></i>
</a>
-->
<a href= "https://github.com/cozyDevs/2D-Game-Engine.git" class="link-icon">
<i class="fa-brands fa-github"></i>
</a>
</div>
<h4> 2D GAME ENGINE (in development)</h4>
<p>
A game engine is a software framework that provides the tools and infrastructure for developers to create video games. It handles many of the low-level tasks of game development, such as graphics rendering, input handling, and physics simulation, allowing developers to focus on the higher-level creative aspects of game design.
<br />
<br />
There are many different types of game engines, but they all share some common features. A typical game engine includes the following:
<br />
<br />
•Renderer: The renderer is responsible for drawing the game world to the screen. It takes care of things like applying textures, lighting, and shadows.
<br /><br />
•Input handler: The input handler handles user input from devices such as keyboards, mice, and gamepads. It translates this input into events that the game can understand.
<br /><br />
•Physics engine: The physics engine simulates the physical world of the game. It takes care of things like collisions, gravity, and movement.
<br /><br />
•Audio engine: The audio engine plays sounds and music in the game. It can be used to create a variety of sound effects, such as explosions, footsteps, and music.
<br /><br />
•Scripting engine: The scripting engine allows developers to write scripts to control the behavior of the game. This can be used to create things like AI, cutscenes, and gameplay mechanics.
<br />
<br />
<h5>The Entity-Component-System (ECS) Design Pattern</h5>
<br />
The Entity-Component-System (ECS) is a popular design pattern for game development. It is a way of organizing game data that is efficient and scalable.
<br />
<br />
In an ECS, game objects are represented as entities. Each entity has a set of components that define its properties and behavior. For example, a player entity might have a position component, a health component, and a movement component.
<br />
<br />
Components are stored separately from entities. This makes it easy to add or remove components from entities, and it also makes it easy to reuse components across different entities.
<br />
<br />
Systems are responsible for updating the game state. They do this by iterating over entities and components. For example, a movement system might iterate over all player entities and update their positions based on their input.
<br />
<br />
<h5>Using SDL to Create a Window, Render Graphics, and Handle Input</h5>
<br />
SDL (Simple DirectMedia Layer) is a cross-platform library that provides low-level access to the graphics, sound, and input subsystems of the operating system. It is a popular choice for developing 2D games.
<br />
<br />
<h5>To use SDL to create a window, render graphics, and handle input, you will need to do the following:</h5>
<br />
•Initialize SDL
<br />
•Create a window
<br />
•Create a renderer
<br />
•Load images
<br />
•Render graphics
<br />
•Handle input
<br />
•Quit SDL
<br />
How to Use Lua to Embed Scripting in Your Game Engine
<br />
<br />
Lua is a lightweight scripting language that is often used in game development. It is easy to embed Lua in a C++ application, and it can be used to extend the functionality of your game engine.
<br />
<br />
To embed Lua in your game engine, you will need to do the following:
<br />
<br />
•Include the Lua header file
<br />
•Create a Lua state
<br />
•Load Lua scripts
<br />
•Call Lua functions
<br />
•Close the Lua state
<br />
<br />
<h5>How to Design and Implement a Game Loop</h5>
<br />
The game loop is the main loop of your game. It is responsible for updating the game state, rendering graphics, and handling input.
<br />
<br />
<h5>To design and implement a game loop, you will need to do the following:</h5>
<br />
•Initialize the game
<br />
•Enter the game loop
<br />
•Update the game state
<br />
•Render graphics
<br />
•Handle input
<br />
• Repeat steps 3-5 until the game is over
<br />
•Quit the game
<br /><br />
References to all aid in development is listed in the github readme as well as the itch.io launch page.
</p>
<!-- </div>
<div class = "right-project">
<div class="FOD_PlayerController">
<img src="Images/FOD_playerController.gif" alt="">
<h5> Player Controller for the Hub Character </h5>
</div>
<div class="FODMedusa">
<img src="Images/FOD_Medusa.gif" alt="">
<h5> The Medusa game in action!</h5>
</div>
<div class="FODLabyrinth">
<img src="Images/FOD_Labyrinth.gif" alt="">
<h5> The Labyrinth chase in action!</h5>
</div>
<div class="FODDefendGreece">
<img src="Images/FOD_DefendGreece.gif" alt="">
<h5> Defend Greece!</h5>
</div>
-->
</div>
</div>
<button class ="button close-button-Engine">CLOSE!</button>
</dialog>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="image">
<img src="Images/saply.png" alt="">
</div>
<div class="hover-item">
<h3>Project Source</h3>
<div class ="icons">
<button class ="button open-button-Seedling">Info!</button>
<dialog class = "modalSeedling" id ="modalSeedling">
<div class = "project-content">
<div class = " left-project">
<div class ="link-icons">
<a href= "https://cozydevs.itch.io/last-sapling" class="link-icon">
<i class="fa-brands fa-itch-io"></i>
</a>
<a href= "https://www.youtube.com/watch?v=NX5Q88Uf0No" class="link-icon">
<i class="fa-brands fa-youtube"></i>
</a>
<a href= "https://github.com/cozyDevs/LastSapling" class="link-icon">
<i class="fa-brands fa-github"></i>
</a>
</div>
<h4> The Last Sapling</h4>
<p>
The Last Sapling was created as a submission entry into the Global Game Jam 2023 with the theme of the competition being 'ROOTS'
<br />
<br />
My team consisted of 6 individuals (2 Programmers, 2 Designers and 2 Artists), with myself as both the lead developer and the project lead. The project itself was completed under the time constraint of 47 hours.
<br />
<br />
Last Sapling follows a small sapling creature on its path to escape it and its homelands' dire situation, the entire forest has been overrun and infected by uninhabitable creatures. The Sapling carries with it, a magical seed object that would allow the sapling to regrow the ecosystem from scratch, if successful... All it needs is to escape to the surface.
<br />
<br />
</p>
<h5> My Part in this: </h5>
<p>
My primary responsibility for this project was to lead the team as a whole, but more specifically the Camera and Character Controller as well as the forefront of implementing game mechanics.
<br />
<br />
</p>
<h5>Other Responsibilities:</h5>
<p>
Player Character Controller
<br />
Player Camera Controller
<br />
Player Teleporting Abilites
<br />
Player Interaction with Objects and Enemies
<br />
Animation and Sound implementaion
<br /><br />
Using the seed as a gameObject the player would be able to throw said object and on request, teleport to
the landing location of the seed gameObject, this is the essential movement feature of the game, using the
seed to teleport and traverse your way out of the platform style maze, while also avoiding the various enemies and
their projectiles.
<br />
<br />
The 'angry-birds' like aiming of the seed, was implemented using the basic framework of bezier curves animation,
By using the 3 point control curve and De Casteljau's algorithm. The implementation of the algorithm proved extremely difficult.
It was my first time working with bezier curves or even graph implementation in a game, the math associated with the aiming also did not turn out as perfectly as I hoped.
<br /><br />
</p>
</div>
<div class = "right-project">
<div class="seedlingGIF">
<img src="Images/Seedling GiF.gif" alt="">
<h5> The Teleportation in action! </h5>
</div>
<div class="seedlingDots">
<img src="Images/seedling dots.PNG" alt="">
<h5> Code Snippet for the Trajectory </h5>
</div>
</div>
</div>
<button class ="button close-button-Seedling">CLOSE!</button>
</dialog>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="image">
<img src="Images/grave_dig.png" alt="">
</div>
<div class="hover-item">
<h3>Project Source</h3>
<div class ="icons">
<button class ="button open-button-grave">Info!</button>
<dialog class = "modalGrave" id ="modalGrave">
<div class = "project-content">
<div class = " left-project">
<div class ="link-icons">
<a href= "https://onixjill.itch.io/grave-dig" class="link-icon">
<i class="fa-brands fa-itch-io"></i>
</a>
<a href= "https://youtu.be/0-Tez21_hEw" class="link-icon">
<i class="fa-brands fa-youtube"></i>
</a>
<a href= "https://github.com/cozyDevs/Grave_Dig" class="link-icon">
<i class="fa-brands fa-github"></i>
</a>
</div>
<h4> Grave Dig!</h4>
<p>
Grave Dig was a short story game project completed and submitted to the Pixel Jam Game Jam in the summer of 2022
<br />
<br />
The team was predominantly online, collaborating with people I had never even previously met. It consisted of about 10 -12 individuals all interchanging and working on several aspects of the project
<br />
<br />
Grave Dig is an escape-adventure game that implores the mechanics of Minecraft. The player character has two modes; mining and attacking. The map is randomly generated on every attempt to keep the game fresh and unpredictable
The game is taxing, in the sense as it reveals almost nothing about the surrounding area, the ability to find the quickest escape route and perhaps avoid enemies is purely based on luck.
<br />
<br />
<h5> My Main Part in this: </h5>
Player Controller Design : The player character uses 8-directional top down movement.<br />
Most of the mechanics for the movement is assisted by the Unity Input Manager system using in built functions like 'GetAxisRaw' and keywords like 'normalize'
<br />
<br />
<h5>I also had a hand in :</h5>
•Player Camera Controller
<br />
•Player Mining System
<br />
•Sound Design and implementation
<br />
<br />
</p>
</div>
<div class = "right-project">
<div class="graveDigGIF">
<img src="Images/graveDig1.gif" alt="">
<h5> Octo-directional movement and Mining in action! </h5>
</div>
<div class="graveDigCode">
<img src="Images/graveDigPaper.jpg" alt="">
<h5> Initial Math Calculation for Player Movement</h5>
</div>
</div>
</div>
<button class ="button close-button-grave">CLOSE!</button>
</dialog>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="image">
<img src="Images/My_project-1-removebg-preview.png" alt="">
</div>
<div class="hover-item">
<h3>Project Source</h3>
<div class ="icons">
<button class ="button open-button-FOD">Info!</button>
<dialog class = "modalFOD" id ="modalFOD">
<div class = "project-content">
<div class = " left-project">
<div class ="link-icons">
<a href= "https://milo-wilson.itch.io/festival-of-dionysus" class="link-icon">
<i class="fa-brands fa-itch-io"></i>
</a>
<a href= "https://youtu.be/ttX7xWbsUh4" class="link-icon">
<i class="fa-brands fa-youtube"></i>
</a>
<a href= "https://github.com/cozyDevs/_FOD.git" class="link-icon">
<i class="fa-brands fa-github"></i>
</a>
</div>
<h4> Festival Of Dionysus!</h4>
<p>
In collaboration with the 5th Grade Gifted Class of Ms. Archuleta at Dunleith Elementary School, Festival of Dionysus is an educational game that tests the simple knowledge of the 5th grade curriculum
<br />
<br />
My team consisted of 3 other members, split into 2 programmers, 1 researcher and 1 artist. The project scope consisted of frequent meetings with our client(s) as well as frequent research into the curriculum of the 5th grade level.
<br />
<br />
Festival Of Dionysus is a Greek themed Educational game, consisting of a central Hub area and three minigames that can be accessible from the central hub.<br />
•The first minigame uses the mechanics and idea of the 'red-light, green-light' game, it is a two person game, each given their own set of questions and set of answers to choose from to advance further, without being seen by the onlooking Medusa head at the end goal.
<br />
<br />
•The second minigame is a Labyrinth inspired by the story of Theseus and the Minotaur, in the Labyrinth entering every room pocket causes a prompt asking a question to move forward, if the wrong answer is given , the player character is frozen in place until the correct answer is provided, all the while the player is being chased by the minotaur game object who does not stop. It is a race against time
<br />
<br />
•The third mini game is a play of Tower defense, as you have to defend the Pantheon from attackers by answering different math and greek history questions correctly.
<br />
<br />
<h5> My Main Part in this: </h5>
Hub center Design: The making of the Player Movement as well the mini game Interactables to pull up the Canvas Panel they were layered under.
Enemy AI Pathfinding: The Minotaur in the second minigame uses Unity's A* Pathfinding system implementation.
<br />
<br />
<h5>I also had a hand in :</h5>
•Player Camera Controller
<br />
•Labyrinth Mini game (Mini game 2) - Minotaur Enemy AI Pathfinding•
<br />
•Settings, Options and Pause Menu.
<br />
•Research and Client Communication.
<br />
</p>
</div>
<div class = "right-project">
<div class="FOD_PlayerController">
<img src="Images/FOD_playerController.gif" alt="">
<h5> Player Controller for the Hub Character </h5>
</div>
<div class="FODMedusa">
<img src="Images/FOD_Medusa.gif" alt="">
<h5> The Medusa game in action!</h5>
</div>
<div class="FODLabyrinth">
<img src="Images/FOD_Labyrinth.gif" alt="">
<h5> The Labyrinth chase in action!</h5>
</div>
<div class="FODDefendGreece">
<img src="Images/FOD_DefendGreece.gif" alt="">
<h5> Defend Greece!</h5>
</div>
</div>
</div>
<button class ="button close-button-FOD">CLOSE!</button>
</dialog>
</div>
</div>
</div>
<!-- <div class="portfolio-item">
<div class="image">
<img src="Images/Cozy Devs.png" alt="">
</div>
<div class="hover-item">
<h3>Project Source</h3>
<div class ="icons">
<a href= "#" class="icon">
<i class="fa-brands fa-youtube"></i>
</a>
<a href= "https://github.com/cozyDevs/QR-Code-Generator.git" class="icon">
<i class="fa-brands fa-github"></i>
</a>
</div>
</div>
</div> -->
</div>
</div>
</div>
<h4 class="stat-title">About me!</h4>
<div class = "body-content">
<div class="left-about">
<h4> Pronounced "Co-See"</h4>
<p>
I also go by Cozy <br />I am currently a Graduate of Kennesaw State University <br /> I hold two Bachelor's degrees; Bachelor of Science in Game Design as well as a Bachelor of Science in Computer Science.
<br />
<br />
I have been Learning and developing different styles of games for the greater part of 5 years now, and I absolutely love it, <br />
However, I will never forgive Hollow Knight for my infatuation with modern Metroidvania style games.
<br />
<br />
<br />
As much as I enjoy problem solving and programming, I greatly enjoy my pastimes and hobbies like;
Petting my Cat , Book Collecting, Playing with my Cat, Playing Basketball/Soccer, Doting on my Cat, and going to Concerts!.
</div>
<div class ="right-about">
<div class="team-image">
<img src="Images/TEAM!.jpeg" alt="">
<h5> My Capstone team "Last Second Games" and I after our C-Day Game Presentation </h5>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>