-
Notifications
You must be signed in to change notification settings - Fork 0
/
fpsfrenzy.html
142 lines (120 loc) · 6.51 KB
/
fpsfrenzy.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FPSFrenzy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="navbar-left">
<a href="https://github.com/FranzLor" target="_blank">
<img src="icons/GitHubIcon.png" alt="GitHub Profile Pic" width="40" height="40">
</a>
<span>FRANZ LOR</span>
</div>
<div class="navbar-right">
<a href="index.html#about">ABOUT</a>
<a href="index.html#projects">PROJECTS</a>
<a href="https://www.nexusmods.com/users/81433168/?tab=user+files" target="_blank">MODS</a>
<a href="index.html#contact">CONTACT</a>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<div class="mobile-menu">
<a href="index.html#about">ABOUT</a>
<a href="index.html#projects">PROJECTS</a>
<a href="https://www.nexusmods.com/users/81433168/?tab=user+files" target="_blank">MODS</a>
<a href="index.html#contact">CONTACT</a>
<span class="close-btn">×</span>
</div>
</header>
<section id="project-details">
<h2>FPSFrenzy</h2>
<h1>First-Person Shooter with Online Capabilities</h1>
<img src="imgs/fpsfrenzy-menu.png" alt="FPSFrenzy Main Title Screen" width="400">
<h3>Background</h3>
<p>
FPSFrenzy has been a cornerstone for my journey so far. <br><br>
One, this project was my first time developing a first-person shooter.
Second, this was also my first time implementing online networking into a game.
For such big feats, this was a pretty difficult project to tackle. But I'm proud of what I've accomplished.<br><br>
At first, the idea was to create a simple first-person shooter, with low poly textures, shooting at AI.
However, I wanted to go bigger since I've worked on AI already. So I decided to implement an online multiplayer feature.<br><br>
<img src="imgs/fpsfrenzy-combat.png" alt="FPSFrenzy User Aiming at Another Player">
Players can join a lobby and play against each other. Initially, for 1v1-type scenarios.
Each player can choose between 3 weapons: a pistol, a submachine gun, and a sniper rifle.
A player wins by getting the most amount of kills before the timer runs out. <br><br>
</p>
<h3>Technologies Used</h3>
<ul>
<li><img class="badge-img" alt="Static Badge" src="https://img.shields.io/badge/Unity%20Game%20Engine%20-%20blue?style=for-the-badge"></li>
<li><img class="badge-img" alt="Static Badge" src="https://img.shields.io/badge/C%23%20-%20purple?style=flat-square"></li>
<li><img class="badge-img" alt="Static Badge" src="https://img.shields.io/badge/Photon%20-%20grey?style=flat-square&link=https%3A%2F%2Fwww.photonengine.com%2Fpun"></li>
</ul>
<h3>What I Learned</h3>
<h4>Online Networking</h4>
<p>
FPSFrenzy was my first real dive into online multiplayer,
and let me tell you it was equally rewarding and frustrating.<br><br>
For this project, I worked with Photon, a networking tool that’s pretty
beginner-friendly but still packed with complexities when it comes to real-time multiplayer.
From synchronizing player movements to managing game states,
Photon helped me handle a lot of the heavy lifting,
but it still required plenty of fine-tuning to get things just right.<br><br>
One of the biggest challenges was syncing animations and player movement across the network.
<strong>It’s not just about sending data; it’s about sending the right data at the right time</strong>.<br><br>
For example, player positions needed frequent updates to look smooth for other players,
but not so frequent that it bogged down the network.
I spent hours tweaking this balance and designing a protocol to prioritize critical actions
like shooting, jumping, or switching weapons, while cutting back on non-essential updates.<br><br>
<img src="imgs/fps-gif.gif" alt="FPSFrenzy User Shooting at Another Player">
Another tricky part was making sure all players saw the same UI elements
in real time—like scores, timers, and lobby data.
Even something as simple as displaying a player’s name or a server title involved precise timing.
The solution?
I carefully structured when and how this data was sent:
typically when a match started, a player joined, or a significant event occurred.
It sounds simple, but ensuring all players saw the same
thing without delays was a constant test of patience and attention to detail.<br><br>
<img src="imgs/fps-server.gif" alt="FPSFrenzy User Creating a Server"><br><br>
Implementing these systems taught me a lot about the complexities of real-time networking
and the importance of optimizing data flow to maintain a seamless multiplayer experience.
Photon’s tools were incredibly helpful for these tasks,
but the process also emphasized the need for custom solutions
tailored to specific game mechanics and player expectations.<br><br>
Anyone who's trying to implement an online multiplayer
feature with Unity should definitely check out Photon. It's a great tool to use.
</p>
<div class="project-link">
<div class="button-container">
<a href="https://github.com/FranzLor/FPSFrenzy" class="btn">FPSFrenzy</a>
</div>
</div>
</section>
<footer>
<div class="footer-container">
<div class="footer-left">
<h2>Franz Lor</h2>
<p>A Portfolio</p>
</div>
<div class="footer-right">
<a href="https://www.linkedin.com/in/franz-lor-a19a04186/" target="_blank">LinkedIn</a>
<a href="https://github.com/FranzLor" target="_blank">GitHub</a>
<a href="https://franzlor.itch.io/" target="_blank">Itch.io</a>
<a href="https://www.instagram.com/justfraaaanz/" target="_blank">Instagram</a>
</div>
<div class="footer-bottom">
<p>© Copyright 2024. Created by Franz Lor.</p>
</div>
</div>
</footer>
<script src="hamburger.js"></script>
</body>
</html>